电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛

标题: 使用 jQuery UI 项目 -4 Widgets [打印本页]

作者: look_w 时间: 2018-8-23 09:45 标题: 使用 jQuery UI 项目 -4 Widgets

Widgets在介绍 UI 代码的最后一个小节中，我可以通过图片描述它们。对我而言，UI 库最令人兴奋的是它的 Widgets 模块，该模块包含预构建的、经过测试的小部件，它们涉及到开发人员需要经历的 Web 应用程序的各个方面。这些小部件节省了我们的时间，让我们能够上网冲浪或阅读像本文一样优秀的文章。我还建议您告诉您的老板，您正在苦心研究这些小部件，这样他就会认为您今年工作特别努力，并且给您升迁的机会。
这些屏幕截图获得 UI 主页的授权使用。
Accordian
图 3. Accordian

accordian 插件将一个列表转变为图形表示，从而允许用户在列表的各个部分之间移动，每次仅能查看一个部分。在某些 UI 库中，这个小部件称为 “Outlook Bar”，因为它在几年前起源于该程序。使用这个小部件的一个最大误区就是查看多个部分。提供该功能的是另一个小部件。这个小部件一次仅能显示一个部分，并且能够在一个部分中包含许多信息，只要这些信息不依赖于另一个部分。
要使用这个小部件，必须正确设置 HTML。换句话说，在使用 accordian 小部件之前要先设置 HTML。这还考虑到所谓的 “渐进衰退” 理论，即使用户不使用 JavaScript，或使用 Internet Explorer 5 都仍然能够正确查看页面。在清单 4 的例子中，注意 HTML 是如何构造的，因为任何想使用这个小部件的用户都必须了解它。
清单 4. Accordian

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// The  accordian relies on the UL, LI, and A tags to properly configure itself
<ul id="accordianExample" class="ui-accordian-container" style="width:400px;">
<li>
   <a href="#">Title 1</a>
   <div>Your text would go here</div>
</li>

<li>
   <a href="#">Title 2</a>
   <div>More text</div>
</li>

</ul>

// yes, it's this simple
$("#accordianExample").accordian();

活动条
图 4. 活动条

清单 5. 活动条

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<div id="sliderExample" class="ui-slider-1">
<div class="ui-slider-handle"></div>
</div>

// this will set up the slider
$("#sliderExample").slider();

// this will set the maximum and minimum values of the slider
$("#sliderExample").slider({
min: 10,
max: 20
});

// this will get the value of the slider
$("#sliderExample").slider("value");

DatePicker
图 5. DatePicker

清单 6. DatePicker

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<input type=text id=dateField>

// this will create a date picker, which pops up when the textfield gets focus
$("#dateField").datepicker();

// show the drop-down fields to let the user jump around months and years
$("#dateField").datepicker({
changeMonth: true,
changeYear: true
});

// show two months instead of one
$("#dateField").datepicker({
numberOfMonths: 2
});

// because this widget has to support internationalization, it has a TON of
// functions that let you set every aspect of the calendar, to support any
// possible calendar settings. (Although it doesn't look like the jQuery team
// felt it was necessary to support the Mayan calendar. Guess 2012 is right
// around the corner.)
//
// This function lets you set the date format that will appear in the textfield.
$("#dateField").datepicker({
dateFormat: 'dd/mm/yyyy'
});

// Gets the date back from the datepicker
var date = $("#dateField").datepicker("getDate");

进度条
图 6. 进度条

清单 7. ProgressBar

1
2
3
4
5
6
7
8
9
10

<div id="progressbarExample"></div>

// make this div a progress bar
$("#progressbarExample").progressbar();

// start the progress bar
$("#progressbarExample").start();

// stop the progress bar
$("#progressbarExample").stop();

Dialog
图 7. 对话框

对于一直学习本系列的人而言，Dialog 小部件和在 “” 中见到的 BlockUI 类似。它们都执行对话功能，您可以根据需要选择其中之一。BlockUI 在控制外观上具有更大的灵活性，而这个 Dialog 小部件能够帮助您完成更多工作。
清单 8. ProgressBar

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<div id="dialogExample" title="Example Dialog">Text here. Warning!!</div>

// turn the DIV into a dialog
$("#dialogExample").dialog();

// open the dialog, then close the dialog
$("#dialogExample").dialog("open").dialog("close");

// make a dialog that the user can't drag around, is modal, and in the center of the page
$("#dialogExample").dialog({
draggable: false,
modal: true,
position: "center"
});

选项卡
图 8. 选项卡

Tabs 可能是这些小部件中最不受欢迎的一个。我从来没能让它很好地发挥过作用，并且发现它严重依赖于 CSS 才能正常工作。由于关于它的示例很冗长复杂，加上我对它有点偏见，所以就不在这里回顾它。就我个人而言，我认为自己创建一个 DIV 与使用这个小部件差不多一样容易。

欢迎光临电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)