JQUERY插件学习之jQuery UI
jQueryUI:http://jqueryui.com/
jQueryUI介绍:
jQueryUI是以jQuery为基础的开源JavaScript网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。我们可以直接用它来构建具有很好交互性的web应用程序。所有插件测试能兼容 IE6.0+,Firefox3+,Safari3.1+,Opera9.6+,和GoogleChrome。
组件构成
jQueryUI主要分为3个部分：交互、微件和效果库。
交互
交互部件是一些与鼠标交互相关的内容，包括Draggable,Droppable,Resizable,Selectable和Sortable等。
微件
主要是一些界面的扩展，包括Accordion,AutoComplete,ColorPicker,Dialog,Slider,Tabs,DatePicker,Magnifier,ProgressBar,Spinner等，新版本的UI将包含更多的微件。
效果库
用于提供丰富的动画效果，让动画不再局限于jQuery的animate()方法。
编辑本段其它
jQueryUI实际上是jQuery插件，专指由jQuery官方维护的UI方向的插件
jQueryUI与jquery的主要区别是：
(1)jQuery是一个js库，主要提供的功能是选择器，属性修改和事件绑定等等。
(2)jQueryUI则是在jQuery的基础上，利用jQuery的扩展性，设计的插件。提供了一些常用的界面元素，诸如对话框、拖动行为、改变大小行为等等。
(3)jQuery本身注重于后台，没有漂亮的界面，而jQueryUI则补充了前者的不足，他提供了华丽的展示界面，使人更容易接受。既有强大的后台，又有华丽的前台。
jQueryUItab
1属性
1.11ajaxOptions,当选项卡加载内容时，添加一个ajax选项。只有ajax时，添加的ajax选项才起作用。默认值为null。上面的例子中，添加了beforeSend和success两个选项。ajax还有一些选项请参考jqueryajax，这里不做详解。。。
1.12初始化设置例：请注意，$('.selector')是tabs的类名，在本例中.selector=#tabs,以后不再说明。
$('.selector').tabs({ajaxOptions:{async:false}});//这里是将异步改为了同步。
1.13初始化后的参数获取和设置：请注意：getter为获取，发音：盖特儿，setter为设置，发音：塞特儿，以后不再说明。
//getter
varajaxOptions=$('.selector').tabs('option','ajaxOptions');
//setter
$('.selector').tabs('option','ajaxOptions',{async:false});
1.21cache默认为false，无缓存。这个选项用于ajax调用，简单的说无缓存，就是每次发送请求都刷新；有缓存就是第一次请求刷新，以后就不刷新了，关闭页面是另外一回事。ajaxOptions:{cache:false}应该和这个功能是一样的吧。
1.22初始化设置例：
$('.selector').tabs({cache:true});
2.23初始化后的参数获取和设置：
//getter
varcache=$('.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.41cookie默认值为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.61disabled设置哪些选项卡不可用，是一个数组例[0,1,2]，也就是第一个、第二个、第三个选项卡。默认为[]。
1.62初始化设置例：$('.selector').tabs({disabled:[1,2]});
1.63初始化后的参数获取和设置：请参考1.23...
1.71event，切换选项卡的事件，默认为'click'，点击切换选项卡。
1.72初始化设置例：$('.selector').tabs({event:'mouseover'});//鼠标滑过切换选项卡
1.73初始化后的参数获取和设置：请参考1.23...
1.81fx，切换选项卡时的动画效果，默认为：null，无动画效果，
1.82初始化设置：请参看最上面的例子。
1.83初始化后的参数获取和设置：请参考1.23...
1.91idPrefix，在使用ajax时，idPrefix选项可以为其添加一个唯一的id，默认为：'ui-tabs-'。
1.92初始化设置例：$('.selector').tabs({idPrefix:'ui-tabs-primary'});
1.93初始化后的参数获取和设置：请参考1.23...
1.101selected，初始化时，哪个选项卡被选中，默认为0，就是第一个选项卡被选中。
1.102初始化设置例：$('.selector').tabs({selected:3});
1.103初始化后的参数获取和设置：请参考1.23...
1.111spinner，当远程内容加载的时候，（ajax），spinner字符串的html内容将被显示在选项卡的标题上。（我很奇怪，我自己试了，怎么不起作用？）
1.112初始化设置例：$('.selector').tabs({spinner:'Retrievingdata...'});
1.113初始化后的参数获取和设置：请参考1.23...
1.121panelTemplate,
1.131tabTemplate,
2事件
先给出一个事件绑定的例子，请注意：
$('#example').bind('tabsselect',function(event,ui){
ui.tab//被选中（点击后）的选项卡元素
ui.panel//这个元素包含被选中（点击后）的选项卡的内容
ui.index//返回一个被选中（或点击后）选项卡的索引值（从0开始）
});
2.11select类型：tabsselect，点击选项卡时触发该事件。
2.12初始化时绑定事件：
$('.selector').tabs({
select:function(event,ui){...}
});
2.13在初始化后使用事件绑定绑定该事件：
$('.selector').bind('tabsselect',function(event,ui){
...
});
2.21load，类型：tabsload一个远程（ajax）选项卡的内容被加载完成后触发该事件。
2.22参考2.12
2.23参考2.13
2.31show，类型：tabsshow当选项卡显示后触发该事件。
2.41add，类型：tabsadd，当一个选项卡被添加后触发。
2.51remove，类型tabsremove，当一个选项卡被删除后触发。
2.61enable，类型tabsenable，当一个选项卡可用时触发。
2.71disable，类型tabsdisable，当一个选项卡不可用时触发。
3方法
3.11destroy，哈哈，又到了我最喜欢的摧毁地球时间。例：.tabs('destroy')
3.21disable，整个选项卡不可用。
3.31enable，整个选项卡可用。.tabs('enable')
3.41option，设置属性。例：.tabs('option',optionName,[value])
3.51add，remove，添加、删除选项卡。例：.tabs('add',url,label,[index])，.tabs('remove',index)
3.61enable，设置某个选项卡标签可用。例：.tabs('enable',index)
3.71disable，设置某个选项卡标签不可用。例：.tabs('disable',index)
3.81select，选择一个选项卡标签。例：.tabs('select',index)，index从0开始。
3.91load，重载一个ajax选项卡的内容，这个一直载入远程内容，即使cache设置为true，第二个参数是要重载选项卡的索引值。例：.tabs('load',index)
3.101url，当一个ajax选项卡将要加载时，改变url。.tabs('url',index,url)
3.111abort，中止所有运行在tab标签上的ajax请求或动画。.tabs('abort')
3.121rotate，自动翻滚选项卡标签。.tabs('rotate',ms,[countinue]),第二个参数是毫秒，是两个标签自动翻滚所需要的时间，设为0或null为停止翻滚。第三个参数是设置当用户选择一个选项卡标签后是否继续翻滚，默认为：false，不继续。
真累，歇歇再说吧。。。
4技巧
4.1如何接收已选中选项卡标签的索引值？
例：var$tabs=$('#example').tabs();
varselected=$tabs.tabs('option','selected');//=>0
4.2如何用一个其它元素代替选项卡单击事件来切换选项卡？
例：var$tabs=$('#example').tabs();//第一个标签被选中
$('#my-text-link').click(function(){//绑定单击事件
$tabs.tabs('select',2);//切换到第三个选项卡标签
returnfalse;
});
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');
returnfalse;
}
});
jQueryUIdialog
1属性
1.11autoOpen，这个属性为true的时候dialog被调用的时候自动打开dialog窗口。当属性为false的时候，一开始隐藏窗口，知道.dialog("open")的时候才弹出dialog窗口。默认为：true。
1.12初始化例：请注意，$('.selector')是dialog的类名，在本例中.selector=#dialoag,以后不再说明。
$('.selector').dialog({autoOpen:false});
1.13初始化后，得到和设置此属性例：
//获得
varautoOpen=$('.selector').dialog('option','autoOpen');
//设置
$('.selector').dialog('option','autoOpen',false);
1.21bgiframe默认为false，Whentrue,thebgiframepluginwillbeused,tofixtheissueinIE6whereselectboxesshowontopofotherelements,regardlessofzIndex.Requiresincludingthebgiframeplugin.Futureversionsmaynotrequireaseparateplugin.
在IE6下，让后面那个灰屏盖住select。
1.22初始化例：
$('.selector').dialog({bgiframe:true});
1.23初始化后，得到和设置：
//获取
varbgiframe=$('.selector').dialog('option','bgiframe');
//设置
$('.selector').dialog('option','bgiframe',true);
1.31buttons显示一个按钮，并写上按钮的文本，设置按钮点击函数。默认为{}，没有按钮。
最上面的例子中已经有buttons属性的用法，请注意。
1.32初始化例：
$('.selector').dialog({buttons:{"Ok":function(){$(this).dialog("close");}}});
1.33初始化后，得到和设置：
//获取
varbuttons=$('.selector').dialog('option','buttons');
//设置
$('.selector').dialog('option','buttons',{"Ok":function(){$(this).dialog("close");}});
1.41closeOnEscape为true的时候，点击键盘ESC键关闭dialog，默认为true；
1.42初始化例：
$('.selector').dialog({closeOnEscape:false});
1.43初始化后，得到和设置：
//获取
varcloseOnEscape=$('.selector').dialog('option','closeOnEscape');
//设置
$('.selector').dialog('option','closeOnEscape',false);
1.51dialogClass类型将被添加到dialog，默认为空
1.52初始化例：
$('.selector').dialog({dialogClass:'alert'});
1.53初始化后，得到和设置：
//获取
vardialogClass=$('.selector').dialog('option','dialogClass');
//设置
$('.selector').dialog('option','dialogClass','alert');
1.61draggable、resizable:draggable是否可以使用标题头进行拖动，默认为true，可以拖动;resizable是否可以改变dialog的大小，默认为true，可以改变大小。
1.62初始化例：
$('.selector').dialog({draggable:false,resizable:false});
1.63初始化后，得到和设置：
//获取
vardraggable=$('.selector').dialog('option','draggable');
//设置
$('.selector').dialog('option','draggable',false);
1.71width、height，dialog的宽和高，默认为auto，自动。
1.72初始化例：
$('.selector').dialog({height:530,width:200});
1.73初始化后，得到和设置：请参考1.63
1.81maxWidth、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.91hide、show，当dialog关闭和打开时候的效果。默认为null，无效果
1.92初始化例：最上面的实例中用到，请自己看吧。
1.93初始化后，得到和设置：请参考1.63
1.101modal,是否使用模式窗口，模式窗口打开后，页面其他元素将不能点击，直到关闭模式窗口。默认为false不是模式窗口。
1.102初始化例：$('.selector').dialog({modal:true});
1.103初始化后，得到和设置：请参考1.63
1.111title，dialog的标题文字，默认为空。
1.112初始化例：见最上面的实例。1.113初始化后，得到和设置：请参考1.63
1.121position，dialog的显示位置：可以是'center','left','right','top','bottom',也可以是top和left的偏移量也可以是一个字符串数组例如['right','top']。
1.122初始化例：$('.selector').dialog({position:['top','right']});1.123初始化后，得到和设置：请参考1.63
1.131zIndex,dialog的zindex值，默认值为1000.
1.132初始化例：$('.selector').dialog({zIndex:3999});1.133初始化后，得到和设置：请参考1.63
1.141stack默认值为true，当dialog获得焦点是，dialog将在最上面。
1.142初始化例：$('.selector').dialog({stack:false});1.143初始化后，得到和设置：请参考1.63
2事件
2.11beforeclose类型dialogbeforeclose，当dialog尝试关闭的时候此事件将被触发，如果返回false，那么关闭将被阻止。
2.12初始化例：$('.selector').dialog({
beforeclose:function(event,ui){...}
});
2.13使用类型绑定此事件例：$('.selector').bind('dialogbeforeclose',function(event,ui){
...
});
2.21close类型：dialogclose，当dialog被关闭后触发此事件。
2.22初始化例：$('.selector').dialog({
close:function(event,ui){...}
});
2.23使用类型绑定此事件例：$('.selector').bind('dialogclose',function(event,ui){
...
});
2.3open类型：dialogopen，当dialog打开时触发。（篇幅有限，该省略的就省略了啊，初始化例和使用类型绑定事件可以向上参考。）
2.4focus类型：dialogfocus，当dialog获得焦点时触发。
2.5dragStart类型：dragStart，当dialog拖动开始时触发。
2.6drag类型：drag，当dialog被拖动时触发。
2.7dragStop类型：dragStop，当dialog拖动完成时触发。
2.8resizeStart类型：resizeStart，当dialog开始改变窗体大小时触发。
2.9resize类型：resize，当dialog被改变大小时触发。
2.10resizeStop类型：resizeStop，当改变完大小时触发。
3方法
3.1destroy，我喜欢这个哦，摧毁地球。。。例：.dialog('destroy')
3.2disable，dialog不可用，例：.dialog('disable');
3.3enable,dialog可用，例，如3.2
3.4close，open，关闭、打开dialog
3.5option，设置和获取dialog属性，例如：.dialog('option',optionName,[value])，如果没有value，将是获取。
3.6isOpen，如果dialog打开则返回true，例如：.dialog('isOpen')
3.7moveToTop,将dialog移到最上层，例如：.dialog('moveToTop')
jQueryUIaccordion
1选项：
1.1active这个参数是设置默认选项的，默认情况下是0，也就是第一个哦。哈哈。
初始化设置例：$('#accordion').accordion({active:2});
在初始化之后的获取和设置例：
//获取varactive=$('#accordion').accordion('option','active');//设置$('#accordion').accordion('option','active',2);
1.2animated这个参数是设置动画效果默认选项是‘slide’
可以设置你喜欢的动画效果，或不使用动画效果（设置false），除了默认设置，使用'bounceslide'和'easeslide'需要UIEffectsCore。。。嘿嘿。。。
初始化设置例：$('#accordion').accordion({animated:'easeslide'});
在初始化之后的获取和设置例：
//获取
varanimated=$('#accordion').accordion('option','animated');
//设置
$('#accordion').accordion('option','animated','easeslide');
1.3autoHeight默认是true，如果设置，所有内容部分的高被设定为其中最高内容的高。初始化设置：$('#accordion').accordion({autoHeight:false})；
初始化以后的获取或设置
//获取
varautoHeight=$('#accordion').accordion('option','autoHeight');
//设置
$('#accordion').accordion('option','autoHeight',false);
1.4clearStyle默认是false，似乎是清除style，哈哈~~~
初始化设置$('#accordion').accordion({clearStyle:true});
初始化后的获取和设置和上面的差不多。。。省略。。。
1.5event默认是'click'如何展开选项。可以设置长双击、鼠标滑过等。。。
初始化设置例：$('#accordion').accordion(event:"mouseover")；
初始化后的设置请参考上面的，此处省略。。。
1.6fillSpace，充满父元素的高，默认为false，使用此项,autoHeight无效。
初始化设置例：$('#accordion').accordion({fillSpace:true});
初始化后的获取和设置请参考上面的，此处省略。。。
1.7header，设置头元素（见上面实例)，默认值为：'>li>:first-child,>:not(li):even'
此处省略，自己理解。。。
1.8icon，设置小图标，默认值为：{'header':'ui-icon-triangle-1-e','headerSelected':'ui-icon-triangle-1-s'}
另外，请看下面的英国字儿~~~只可意会不可言传。。。
Iconstouseforheaders.Iconsmaybespecifiedfor'header'and'headerSelected',andwerecommendusingtheiconsnativetothejQueryUICSSFrameworkmanipulatedbyjQueryUIThemeRoller
初始化设置例：$('#accordion').accordion({icons:{'header':'ui-icon-plus','headerSelected':'ui-icon-minus'}});
初始化后的获取和设置省略。。。
1.9navigation和navigationFilter暂时不知道到底是做什么用的，回头再说吧。。。
2事件
2.1change事件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.1destroy：毁灭地球...
使用方法：.accordion('destroy')
3.2disable：accordion不可用，使之无效。
使用方法：.accordion('disable')
3.3enable：可用，使之有效，使用方法：略...
3.4option：参数，使用方法：前面都已经用过了，例：.accordion('option',optionName,[value])
3.5activate：也是设置默认选项，和参数active作用一样。例：.accordion('activate',index)