JQuery UI开发技巧

一、引用

 

1 2 3

<link rel="stylesheet" href="css/themename/jquery-ui.custom.css" /> <script src="js/jquery.min.js"></script> <script src="js/jquery-ui.custom.min.js"></script>

 

二、定制

 

1、使用选项

 

jQuery UI中的每个插件都有一个默认配置，默认配置值一般是根据最基本最常见的使用情况设置的。如果您想要让某个插件设置成非默认值，您可以使用"options" 重写它的默认设置。选项是一组属性，作为参数传递给 jQuery UI 小部件。

1 2 3 4 5 6

$( "#mySliderDiv" ).slider({     orientation: "vertical",     min: 0,     max: 150,     value: 50 });

选项需放在大括号 { } 内。

 jQuery UI 小部件的详细信息，请查看 jQuery UI 实例

 

2、视觉定制

 

jQuery UI 提供了一个非常完美的用于主题定制的应用程序，这就是 ThemeRoller。具体定制请访问 jQuery UI ThemeRoller。

当您点击 ThemeRoller 页面中的 "Download theme"按钮，将跳转到下载生成器（Download Builder）页面，您的自定义主题会在主体下拉菜单中自动选中。您可以进一步配置下载包。一旦下载完成，您将看到 example.html 页面使用了您自定义的主题。

 

三、工作原理

 

jQuery UI 包含了许多维持状态的小部件（Widget），因此，它与典型的 jQuery 插件使用模式略有不同。其安装方式与大部分jQuery 插件的安装方式类似，jQuery UI 的小部件是基于 小部件库（Widget Factory） 创建的，小部件库提供了通用的 API。

 

1、安装

 

当小部件安装时，生命周期开始。我们只需要在一个或多个元素上调用插件，即安装了小部件。

1	$( "#elem" ).progressbar({ value: 20 });

将会对元素 id 为 "elem"的空间进行方法progressbar的初始化。

 

2、方法

 

所有初始化后的动作都以方法调用的形式进行。为了在小部件上调用一个方法，我们可以向 jQuery 插件传递方法的名称。例如，为了在进度条（progressbar）小部件上调用 value 方法，我们应该使用：

1	$( "#elem" ).progressbar( "value" );

如果方法接受参数，我们可以在方法名后传递参数。例如，为了传递参数 40 给 value 方法，我们可以使用：

1	$( "#elem" ).progressbar( "value", 40 );

就像 jQuery 中的其他方法一样，大部分的小部件方法为链接返回 jQuery 对象。

1 2 3

$( "#elem" )     .progressbar( "value", 90 )     .addClass( "almost-done" );

 

3、公共方法

 

option：设置参数

1 2 3 4

$( "#elem" ).progressbar( "option", {     value: 100,     disabled: true });

disable：禁用部件

1	$( "#elem" ).progressbar( "disable" );

enable：启用部件

1	$( "#elem" ).progressbar( "enable" );

destroy：删除小部件

1	$( "#elem" ).progressbar( "destroy" );

widget：一些小部件生成包装器元素，或与原始元素断开连接的元素。

1	$( "#elem" ).progressbar( "widget" );

 

4、事件

 

所有的小部件都有跟他们各种行为相关的事件，用于在状态改变时通知您。对于大多数的小部件，当事件被触发时，名称以小部件名称为前缀。例如，我们可以绑定进度条（）的change 事件，一旦值发生变化时就触发。

1 2 3

$( "#elem" ).bind( "progressbarchange", function() {     alert( "The value has changed!" ); });

每个事件都有一个相对应的回调，作为选项进行呈现。我们可以使用进度条（progressbar）的 change 回调，这等同于绑定 progressbarchange 事件。

1 2 3 4 5

$( "#elem" ).progressbar({     change: function() {         alert( "The value has changed!" );     } });

 

 

5、公共事件

 

Create

 

四、主题

 

所有的 jQuery UI 插件都允许开发人员无缝集成 UI 小部件到他们网站或应用程序的外观和感观。每个插件通过 CSS定义样式，且包含了两层样式信息：标准的 jQuery UI CSS 框架 样式和具体的插件样式。

 

jQuery UI CSS 框架提供了语义表示的类，用来表明小部件内元素的角色，比如标题、内容或可点击区域。这些在所有的小部件中都是一致的，一个可点击的 tab（标签页）、accordion（折叠面板）或 button（按钮）都有相同的 ui-state-default class，用来表明它们是可点击的。当用户鼠标悬浮在这些元素上面时，这个 class 就变成 ui-state-hover，当选中这些元素时则变成 ui-state-active。这些 class 的一致性使得所有部件中具有相似角色或交互状态的元素在外观表现上一致。

CSS 框架样式封装在一个单独的文件中，名为 ui.theme.css。这个文件时通过 ThemeRoller 应用程序来修改的。框架样式只包含影响外观和感观的属性，只要是颜色、背景图像、图标等。所以这些是 "安全的" 样式，不会影响到插件的功能。这种分隔意味着开发人员可以通过在 theme.css 文件中修改颜色和图像来创建一个自定义的外观和感观。由于未来的插件或者 bug 修复将是可用的，这些不通过修改即可与主题一起使用。

由于框架样式只覆盖了外观和感观，所以还需要包含具体的插件样式表，这些样式表包括了所有额外的让小部件具有功能性的结构样式规则，比如尺寸、内边距、外边距、定位、浮动。每个插件的样式表位于 themes/base 文件夹内，且配合插件进行命名，比如"jquery.ui.accordion.css"。这些样式必须认真编辑，因为它们与脚本一起提供了框架样式的覆盖。

下面列出了三种主题化jQuery UI 插件的一般方法：

• 下载 ThemeRoller 主题：最早的创建主题的方式是使用 ThemeRoller 来生成和下载一个主题。这个应用程序将创建一个新的 ui.theme.css 文件和一个包含了所有必需的背景图像及图标精灵的 images 文件夹。这个方法是最早的创建和维护主题的方式，但是它对 ThemeRoller 中提供的选项限制了自定义。
• 修改 CSS 文件：为了对外观和感观做进一步的控制，您可以选择从默认主题（Smoothness）开始，或者从一个由 ThemeRoller 生成的主题开始，然后调整 ui.theme.css 文件，或者任意一个独立插件的样式表。例如，您可以很容易地调整所有按钮的角半径为不同于其他 UI 组件的值，或者使用自定义设置为图标精灵改变路径。通过一点点的样式范围，您甚至可以在一个 UI 中同时使用多个主题。为了易于维护，建议只更改 ui.theme.css 文件和图像。
• 重新编写自定义的 CSS：为了最大程度地控制外观和感观，可以重新开始编写每个插件的 CSS，而不使用框架类或者特定的插件样式表。如果想要的外观和感观不能通过修改 CSS 来实现或者使用高度自定义的标记，那么就可以采用这个方法。这个方法要求在 CSS 方面有深厚的专业知识，且要求手动更新未来的插件。

 

五、部件库

 

1、扩展小部件

 

-- 创建小部件

通过部件库（Widget Factory）创建小部件是通过向 $.widget() 传递小部件名称和一个原型对象来完成的。

在 "custom"命名空间中创建一个 "superDialog" 小部件：

1	$.widget( "custom.superDialog", {} );

为了支持扩展，$.widget() 可选性地接受作为父部件使用的小部件的构造函数。当指定一个父部件时，把它作为第二个参数进行传递，放在小部件名称后面，在小部件原型对象前面。

下面也要在 "custom" 命名空间中创建一个 "superDialog"小部件。但是这次传递的是 jQuery UI 的 dialog（对话框）小部件 的构造函数（$.ui.dialog），表示 superDialog 小部件应该使用 jQuery UI 的 dialog（对话框）小部件作为父部件

1	$.widget( "custom.superDialog", $.ui.dialog, {} );

小部件的原型对象是传递给 $.widget() 的最后一个参数：

1 2 3 4 5 6 7 8 9 10

$.widget( "custom.superDialog", $.ui.dialog, {     red: function() {         this.element.css( "color", "red" );     } });    // Create a new <div>, convert it into a superDialog, and call the red() method. $( "<div>I am red</div>" )     .superDialog()     .superDialog( "red" );

现在 superDialog 有一个 red() 方法，这会把它的文本颜色改为红色。

 

-- 重载已有部件

_super() 和 _superApply() 在父部件中调用了同样的方法

1 2 3 4 5 6 7 8 9 10

$.widget( "custom.superDialog", $.ui.dialog, {     open: function() {         console.log( "open" );            // Invoke the parent widget's open().         return this._super();     } });    $( "<div>" ).superDialog();

_super() 和 _superApply() 实际上等同于最初的 Function.prototype.call() 和 Function.prototype.apply() 方法。因此，_super() 接受一个参数列表，_superApply() 接受一个数组作为参数。

1 2 3 4 5 6 7 8 9

$.widget( "custom.superDialog", $.ui.dialog, {     _setOption: function( key, value ) {            // Both invoke dialog's setOption() method. _super() requires the arguments         // be passed as an argument list, _superApply() as a single array.         this._super( key, value );         this._superApply( arguments );     } });

可以在已有的小部件上直接进行扩展

1 2 3 4 5 6 7 8

$.widget( "ui.dialog", $.ui.dialog, {     open: function() {         console.log( "open" );         return this._super();     } });    $( "<div>" ).dialog();

 

2、小部件调用方法

 

-- 插件调用

使用小部件的插件调用方法，把方法名称以字符串形式进行传递：

1	$( ".selector" ).dialog( "close" );

如果方法要求参数 ，请作为额外的参数传递给插件

-- 实例调用

每个小部件的每个实例都是使用 jQuery.data() 存储在元素上。为了检索实例对象，请使用小部件的全称作为键名调用 jQuery.data()：

1	var dialog = $( ".selector" ).data( "ui-dialog" );

 

3、使用部件库

 

六、常用API

 

http://api.jqueryui.com