JQUERY插件学习之jQuery UI

 

jQuery UI:http://jqueryui.com/

jQuery UI介绍:

jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。我们可以直接用它来构建具有很好交互性的web应用程序。所有插件测试能兼容 IE 6.0+, Firefox 3+, Safari 3.1+, Opera 9.6+, 和 Google Chrome。

组件构成
jQuery UI 主要分为3个部分：交互、微件和效果库。
交互
交互部件是一些与鼠标交互相关的内容，包括Draggable,Droppable,Resizable,Selectable和Sortable等。
微件
主要是一些界面的扩展，包括Accordion,AutoComplete,ColorPicker,Dialog,Slider,Tabs,DatePicker,Magnifier,ProgressBar,Spinner等，新版本的UI将包含更多的微件。
效果库
用于提供丰富的动画效果，让动画不再局限于jQuery的animate()方法。
编辑本段其它
jQuery UI实际上是jQuery插件，专指由jQuery官方维护的UI方向的插件
jQuery UI 与 jquery 的主要区别是：
(1) jQuery是一个js库，主要提供的功能是选择器，属性修改和事件绑定等等。
(2) jQuery UI则是在jQuery的基础上，利用jQuery的扩展性，设计的插件。提供了一些常用的界面元素，诸如对话框、拖动行为、改变大小行为等等。
(3) jQuery本身注重于后台，没有漂亮的界面，而jQuery UI则补充了前者的不足，他提供了华丽的展示界面，使人更容易接受。既有强大的后台，又有华丽的前台。

jQueryUI tab

1 属性
1.11 ajaxOptions,当选项卡加载内容时，添加一个ajax选项。只有ajax时，添加的ajax选项才起作用。默认值为null。上面的例子中，添加了beforeSend和success两个选项。ajax还有一些选项请参考jquery ajax，这里不做详解。。。
1.12 初始化设置例：请注意，$('.selector')是tabs 的类名，在本例中.selector=#tabs,以后不再说明。
$('.selector').tabs({ ajaxOptions: { async: false } });//这里是将异步改为了同步。
1.13 初始化后的参数获取和设置：请注意：getter为获取，发音：盖特儿，setter为设置，发音：塞特儿，以后不再说明。
//getter
var ajaxOptions = $('.selector').tabs('option', 'ajaxOptions');
//setter
$('.selector').tabs('option', 'ajaxOptions', { async: false });
1.21 cache 默认为false，无缓存。这个选项用于ajax调用，简单的说无缓存，就是每次发送请求都刷新；有缓存就是第一次请求刷新，以后就不刷新了，关闭页面是另外一回事。ajaxOptions:{cache:false}应该和这个功能是一样的吧。
1.22 初始化设置例：
$('.selector').tabs({ cache: true });
2.23 初始化后的参数获取和设置：
//getter
var cache = $('.selector').tabs('option', 'cache');
//setter
$('.selector').tabs('option', 'cache', true);
1.31collapsible，意思是可折叠的，默认选项是false，不可以折叠。如果设置为true，允许用户将已经选中的选项卡内容折叠起来。这样说吧：点击一次选项卡2，选项卡2内容显示出来了，这时候再次点击选项卡2，选项卡的内容区就收了起来，再次点击选项卡2，选项卡的内容区则又展开了。明白否？知道你不明白，不明白就用最上面的例子试试吧。
1.32 初始化设置例：
$('.selector').tabs({ collapsible: true });
1.33 初始化后的参数获取和设置：请参考1.23...
1.41 cookie 默认值为null，需要cookie插件。保存最后一次选择的选项卡到cookie 中。可使用的选项例：(example): { expires: 7, path: '/', domain: 'jquery.com', secure: true }.
1.42 初始化设置例：$('.selector').tabs({ cookie: { expires: 30 } });
1.43 初始化后的参数获取和设置：请参考1.23...
1.51deselectable 默认为false，作用似乎和collapsible一样。
1.61 disabled 设置哪些选项卡不可用，是一个数组例[0,1,2]，也就是第一个、第二个、第三个选项卡。默认为[]。
1.62 初始化设置例：$('.selector').tabs({ disabled: [1, 2] });
1.63 初始化后的参数获取和设置：请参考1.23...
1.71 event ，切换选项卡的事件，默认为'click'，点击切换选项卡。
1.72 初始化设置例：$('.selector').tabs({ event: 'mouseover' }); //鼠标滑过切换选项卡
1.73 初始化后的参数获取和设置：请参考1.23...
1.81 fx，切换选项卡时的动画效果，默认为：null，无动画效果，
1.82 初始化设置：请参看最上面的例子。
1.83 初始化后的参数获取和设置：请参考1.23...
1.91 idPrefix ，在使用ajax时，idPrefix选项可以为其添加一个唯一的id，默认为：'ui-tabs-' 。
1.92 初始化设置例：$('.selector').tabs({ idPrefix: 'ui-tabs-primary' });
1.93 初始化后的参数获取和设置：请参考1.23...
1.101 selected，初始化时，哪个选项卡被选中，默认为0，就是第一个选项卡被选中。
1.102 初始化设置例：$('.selector').tabs({ selected: 3 });
1.103 初始化后的参数获取和设置：请参考1.23...
1.111 spinner，当远程内容加载的时候，（ajax），spinner字符串的html内容将被显示在选项卡的标题上。（我很奇怪，我自己试了，怎么不起作用？）
1.112 初始化设置例：$('.selector').tabs({ spinner: 'Retrieving data...' });
1.113 初始化后的参数获取和设置：请参考1.23...
1.121 panelTemplate ,
1.131 tabTemplate ,
2 事件
先给出一个事件绑定的例子，请注意：
$('#example').bind('tabsselect', function(event, ui) {
ui.tab     // 被选中（点击后）的选项卡元素
ui.panel   //这个元素包含被选中（点击后）的选项卡的内容
ui.index   //返回一个被选中（或点击后）选项卡的索引值（从0开始）
});
2.11 select 类型：tabsselect ，点击选项卡时触发该事件。
2.12 初始化时绑定事件：
$('.selector').tabs({
   select: function(event, ui) { ... }
});
2.13 在初始化后使用事件绑定绑定该事件：
$('.selector').bind('tabsselect', function(event, ui) {
...
});
2.21 load，类型：tabsload 一个远程（ajax）选项卡的内容被加载完成后触发该事件。
2.22 参考2.12
2.23 参考2.13
2.31 show，类型：tabsshow 当选项卡显示后触发该事件。
2.41 add，类型：tabsadd ，当一个选项卡被添加后触发。
2.51 remove ，类型tabsremove ，当一个选项卡被删除后触发。
2.61 enable ，类型tabsenable ，当一个选项卡可用时触发。
2.71 disable，类型tabsdisable，当一个选项卡不可用时触发。

3 方法
3.11 destroy，哈哈，又到了我最喜欢的摧毁地球时间。例：.tabs( 'destroy' )
3.21 disable，整个选项卡不可用。
3.31 enable，整个选项卡可用。.tabs( 'enable' )
3.41 option，设置属性。例：.tabs( 'option' , optionName , [value])
3.51 add，remove，添加、删除选项卡。例：.tabs( 'add' , url , label , [index]) ，.tabs( 'remove' , index )
3.61 enable，设置某个选项卡标签可用。例：.tabs( 'enable' , index )
3.71 disable，设置某个选项卡标签不可用。例：.tabs( 'disable' , index )
3.81 select，选择一个选项卡标签。例：.tabs( 'select' , index ) ，index从0开始。
3.91 load，重载一个ajax选项卡的内容，这个一直载入远程内容，即使cache设置为true，第二个参数是要重载选项卡的索引值。例：.tabs( 'load' , index )
3.101 url，当一个ajax选项卡将要加载时，改变url。.tabs( 'url' , index , url )
3.111 abort，中止所有运行在tab标签上的ajax请求或动画。.tabs( 'abort' )
3.121 rotate， 自动翻滚选项卡标签。.tabs('rotate',ms,[countinue]),第二个参数是毫秒，是两个标签自动翻滚所需要的时间，设为0或null为停止翻滚。第三个参数是设置当用户选择一个选项卡标签后是否继续翻滚，默认为：false，不继续。
真累，歇歇再说吧。。。
4 技巧
4.1 如何接收已选中选项卡标签的索引值？
例：var $tabs = $('#example').tabs();
var selected = $tabs.tabs('option', 'selected'); // => 0
4.2 如何用一个其它元素代替选项卡单击事件来切换选项卡？
例：var $tabs = $('#example').tabs(); // 第一个标签被选中
$('#my-text-link').click(function() { // 绑定单击事件
    $tabs.tabs('select', 2); // 切换到第三个选项卡标签
    return false;
});
4.3 如何立刻选择刚添加的选项卡标签？
例：var $tabs = $('#example').tabs({
    add: function(event, ui) {
        $tabs.tabs('select', '#' + ui.panel.id);
    }
});
4.4 如何在一个新窗口中打开选项卡标签？
例：$('#example').tabs({
    select: function(event, ui) {
        location.href = $.data(ui.tab, 'load.tabs');
        return false;
    }
});

jQuery UI dialog

1 属性

1.11 autoOpen ，这个属性为true的时候dialog被调用的时候自动打开dialog窗口。当属性为false的时候，一开始隐藏窗口，知道.dialog("open")的时候才弹出dialog窗口。默认为：true。

1.12 初始化例：请注意，$('.selector')是dialog 的类名，在本例中.selector=#dialoag,以后不再说明。

$('.selector').dialog({ autoOpen: false });

1.13 初始化后，得到和设置此属性例：

//获得

var autoOpen = $('.selector').dialog('option', 'autoOpen');

//设置

$('.selector').dialog('option', 'autoOpen', false);

1.21 bgiframe 默认为false ，When true, the bgiframe plugin will be used, to fix the issue in IE6 where select boxes show on top of other elements, regardless of zIndex. Requires including the bgiframe plugin. Future versions may not require a separate plugin.

在IE6下，让后面那个灰屏盖住select。

1.22 初始化例：

$('.selector').dialog({ bgiframe: true });

1.23 初始化后，得到和设置：

//获取

var bgiframe = $('.selector').dialog('option', 'bgiframe');

//设置

$('.selector').dialog('option', 'bgiframe', true);

1.31 buttons 显示一个按钮，并写上按钮的文本，设置按钮点击函数。默认为{}，没有按钮。

最上面的例子中已经有buttons属性的用法，请注意。

1.32 初始化例：

$('.selector').dialog({ buttons: { "Ok": function() { $(this).dialog("close"); } } });

1.33 初始化后，得到和设置：

//获取

var buttons = $('.selector').dialog('option', 'buttons');

//设置

$('.selector').dialog('option', 'buttons', { "Ok": function() { $(this).dialog("close"); } });

1.41 closeOnEscape 为true的时候，点击键盘ESC键关闭dialog，默认为true；

1.42 初始化例：

$('.selector').dialog({ closeOnEscape: false });

1.43 初始化后，得到和设置：

//获取

var closeOnEscape = $('.selector').dialog('option', 'closeOnEscape');

//设置

$('.selector').dialog('option', 'closeOnEscape', false);

1.51 dialogClass 类型将被添加到dialog，默认为空

1.52 初始化例：

$('.selector').dialog({ dialogClass: 'alert' });

1.53 初始化后，得到和设置：

//获取

var dialogClass = $('.selector').dialog('option', 'dialogClass');

//设置

$('.selector').dialog('option', 'dialogClass', 'alert');

1.61 draggable、resizable : draggable是否可以使用标题头进行拖动，默认为true，可以拖动;resizable是否可以改变dialog的大小，默认为true，可以改变大小。

1.62 初始化例：

$('.selector').dialog({ draggable: false,resizable:false });

1.63 初始化后，得到和设置：

//获取

var draggable = $('.selector').dialog('option', 'draggable');

//设置

$('.selector').dialog('option', 'draggable', false);

1.71 width、height ，dialog的宽和高，默认为auto，自动。

1.72 初始化例：

$('.selector').dialog({ height: 530,width:200 });

1.73 初始化后，得到和设置：请参考1.63

1.81 maxWidth、maxHeight、minWidth、minHeight ，dialog可改变的最大宽度、最大高度、最小宽度、最小高度。maxWidth、maxHeight的默认为false，为不限。minWidth、minHeight的默认为150。要使用这些属性需要ui.resizable.js 的支持。

1.82 初始化例：

$('.selector').dialog({ maxHeight: 400,maxWidth:600,minHeight:300,minWidth:300 });

1.83 初始化后，得到和设置：请参考1.63

1.91 hide、show ，当dialog关闭和打开时候的效果。默认为null，无效果

1.92 初始化例：最上面的实例中用到，请自己看吧。

1.93 初始化后，得到和设置：请参考1.63

1.101 modal,是否使用模式窗口，模式窗口打开后，页面其他元素将不能点击，直到关闭模式窗口。默认为false不是模式窗口。

1.102 初始化例：$('.selector').dialog({ modal: true });

1.103 初始化后，得到和设置：请参考1.63

1.111 title，dialog的标题文字，默认为空。

1.112 初始化例：见最上面的实例。1.113 初始化后，得到和设置：请参考1.63

1.121 position ，dialog的显示位置：可以是'center', 'left', 'right', 'top', 'bottom',也可以是top和left的偏移量也可以是一个字符串数组例如['right','top']。

1.122 初始化例：$('.selector').dialog({ position: ['top','right'] }); 1.123 初始化后，得到和设置：请参考1.63

1.131 zIndex, dialog的zindex值，默认值为1000.

1.132 初始化例：$('.selector').dialog({ zIndex: 3999 }); 1.133 初始化后，得到和设置：请参考1.63

1.141 stack 默认值为true，当dialog获得焦点是，dialog将在最上面。

1.142 初始化例：$('.selector').dialog({ stack: false }); 1.143 初始化后，得到和设置：请参考1.63

2 事件

2.11 beforeclose 类型dialogbeforeclose ， 当dialog尝试关闭的时候此事件将被触发，如果返回false，那么关闭将被阻止。

2.12 初始化例：$('.selector').dialog({

   beforeclose: function(event, ui) { ... }

});

2.13 使用类型绑定此事件例：$('.selector').bind('dialogbeforeclose', function(event, ui) {

...

});

2.21 close 类型：dialogclose ，当dialog被关闭后触发此事件。

2.22 初始化例：$('.selector').dialog({

   close: function(event, ui) { ... }

});

2.23 使用类型绑定此事件例：$('.selector').bind('dialogclose', function(event, ui) {

...

});

2.3 open 类型：dialogopen ，当dialog打开时触发。（篇幅有限，该省略的就省略了啊，初始化例和使用类型绑定事件可以向上参考。）

2.4 focus 类型：dialogfocus ，当dialog获得焦点时触发。

2.5 dragStart 类型：dragStart，当dialog拖动开始时触发。

2.6 drag 类型：drag ，当dialog被拖动时触发。

2.7 dragStop 类型：dragStop ，当dialog拖动完成时触发。

2.8 resizeStart 类型：resizeStart ，当dialog开始改变窗体大小时触发。

2.9 resize 类型：resize，当dialog被改变大小时触发。

2.10 resizeStop 类型：resizeStop，当改变完大小时触发。

3 方法

3.1 destroy ，我喜欢这个哦，摧毁地球。。。 例：.dialog( 'destroy' )

3.2 disable，dialog不可用，例：.dialog('disable');

3.3 enable,dialog可用，例，如3.2

3.4 close，open，关闭、打开dialog

3.5 option ，设置和获取dialog属性，例如：.dialog( 'option' , optionName , [value] ) ，如果没有value，将是获取。

3.6 isOpen ，如果dialog打开则返回true，例如：.dialog('isOpen')

3.7 moveToTop ,将dialog移到最上层，例如：.dialog( 'moveToTop' )

jQuery UI accordion

1 选项：
1.1 active 这个参数是设置默认选项的，默认情况下是0，也就是第一个哦。哈哈。
初始化设置例：$('#accordion').accordion({ active: 2 });
在初始化之后的获取和设置例：
//获取 var active = $('#accordion').accordion('option', 'active'); //设置 $('#accordion').accordion('option', 'active', 2);
1.2 animated 这个参数是设置动画效果 默认选项是‘slide’
可以设置你喜欢的动画效果，或不使用动画效果（设置false），除了默认设置，使用'bounceslide'和'easeslide'需要UI Effects Core 。。。嘿嘿。。。
初始化设置例： $('#accordion').accordion({ animated: 'easeslide' });
在初始化之后的获取和设置例：
//获取
var animated = $('#accordion').accordion('option', 'animated');
//设置
$('#accordion').accordion('option', 'animated', 'easeslide');
1.3 autoHeight 默认是true，如果设置，所有内容部分的高被设定为其中最高内容的高。 初始化设置：$('#accordion').accordion({ autoHeight: false })；
初始化以后的获取或设置
//获取
var autoHeight = $('#accordion').accordion('option', 'autoHeight');
//设置
$('#accordion').accordion('option', 'autoHeight', false);
1.4 clearStyle 默认是false，似乎是清除style，哈哈~~~
初始化设置 $('#accordion').accordion({ clearStyle: true });
初始化后的获取和设置和上面的差不多。。。省略。。。
1.5 event 默认是'click' 如何展开选项。可以设置长双击、鼠标滑过等。。。
初始化设置例：$('#accordion').accordion(event:"mouseover")；
初始化后的设置请参考上面的 ，此处省略。。。
1.6 fillSpace ，充满父元素的高，默认为false ，使用此项,autoHeight无效。
初始化设置例：$('#accordion').accordion({ fillSpace: true });
初始化后的获取和设置请参考上面的 ，此处省略。。。
1.7 header，设置头元素（见上面实例)，默认值为：'> li > :first-child,> :not(li):even'
此处省略，自己理解。。。
1.8 icon，设置小图标，默认值为： { 'header': 'ui-icon-triangle-1-e', 'headerSelected': 'ui-icon-triangle-1-s' }
另外，请看下面的英国字儿~~~只可意会不可言传。。。
Icons to use for headers. Icons may be specified for 'header' and 'headerSelected', and we recommend using the icons native to the jQuery UI CSS Framework manipulated byjQuery UI ThemeRoller
初始化设置例：$('#accordion').accordion({ icons: { 'header': 'ui-icon-plus', 'headerSelected': 'ui-icon-minus' } });
初始化后的获取和设置省略。。。
1.9 navigation 和navigationFilter暂时不知道到底是做什么用的，回头再说吧。。。
2 事件
2.1 change事件 accordion改变时触发的事件，有两种绑定方法
第一种：
$('#accordion').bind('accordionchange', function(event, ui) {
ui.newHeader // jQuery 对象, 激活 header
ui.oldHeader // jQuery 对象, 之前 header
ui.newContent // jQuery 对象, 激活 content
ui.oldContent // jQuery 对象, 之前 content
});这种方法在前面的例子中已经都有喽~~
第二种：
$('#accordion').accordion({
   change: function(event, ui) { ... }
}); 看清楚了吧。哈哈。
3 方法
3.1 destroy ：毁灭地球...
使用方法：.accordion( 'destroy' )
3.2 disable：accordion不可用，使之无效。
使用方法：.accordion('disable')
3.3 enable： 可用，使之有效，使用方法：略...
3.4 option：参数，使用方法：前面都已经用过了，例：.accordion( 'option' , optionName ,[value])
3.5 activate：也是设置默认选项，和参数active 作用一样。例：.accordion( 'activate' , index )