jQuery UI部件

（一）按钮

button()方法回修改单个按钮来增强外观，而buttonset()方法对一组按钮起作用。

button(options)   button(‘enable‘)   button(‘disable‘)   button(‘destroy‘)   button(‘option‘, optionName, value)

buttonset同上

$(‘‘).button({});

（二）滑动条

 滑动条使用基本元素（如<div>和<a>）组合而成。设置目标<div>元素的样式呈现滑动条的水槽，在其中创建锚点元素形成手柄。

slider(options)

slider(‘enable‘)

slider(‘disable‘)

slider(‘destroy‘)

slider(‘option‘, optionName, value)

slider(‘value‘, value)：如果提供value值，则单手柄滑动条设置值并返回那个值，否则返回滑动条当前值

slider(‘values‘, index, values)

事件

自定义对象包含属性：handle：对手柄的引用      value：被移动手柄的当前值      values：所有手柄的当前值组成的数组

元素转变为滑动条时，会添加类ui-slider，添加的<a>元素被赋予类ui-slider-handle。另一个被添加的类是ui-slider-horizonatl和ui-slider-vertical之一。

（三）进度条

  progressbar

  autoprogressbar：将包装元素转变为进度条

（四）自动完成器

 autocomplete

数据源表现为数组形式，value为真实值，label为呈现值，通常以缩略形式表示，如果只指定其中一个则将值作为value和label。

使用本地数据时，匹配算法是任何包含用户输入数据的候选值都被认为是匹配的。也可以指定数据源为服务器资源URL或提供一个回调函数作为source选项

事件

 autocompletechange   autocompleteclose   autocompletefocus   autocompleteopen   autocompletesearch   autocompleteselect

（五）日期选择器

 datepicker(options)

 datepicker(‘enable‘)

 datepicker(‘disable‘)

 datepicker(‘destroy‘)

 datepicker(‘option‘, optionName, value)

 datepicker(‘dialog‘, dialogDate, onselect, options, position)：显示包含日期选择器的jQuery UI对话框

 datepicker(‘isDisabled‘)：报告日期选择器是否被禁用

 datepicker(‘hide‘, speed)：关闭日期选择器

 datepicker(‘show‘)：打开日期选择器

 datepicker(‘getDate‘)：返回日期选择器当前选择的日期

 datepicker(‘setDate‘, date)：将指定的日期设置为日期选择器当前日期

 datepicker(‘widget‘) ：返回日期选择部件元素

 指定格式：dateFormat

  日期格式的字符串模式

 实用函数

 $.datepicker.setDefaults(options)：为所有随后创建的日期选择器设置选项的默认值

 $.datepicker.formatDate(format, date, options)：将传入的日期格式化为由format模式和optis指定的字符串

 $.datepicker.parseDate(format, value, options)：用传入的format模式和option将文本转变为日期

 $.datepicker.iso8601Week(date)：给定一个日期，计算一年中的第几个星期

（六）选项卡

       <div class="testSubject">
           <ul>
              <li><a href="#panel1">Tab One</a></li>
              <li><a href="#panel2">Tab Two</a></li>
              <li><a href="#panel3">Tab Three</a></li>
           </ul>
           <div id="panel1">
           </div>
           <div id="panel2">
           </div>
           <div id="panel">
           </div>
       </div>

每个列表项都包含一个锚点元素，不仅用来定义选项卡和相应面板之间的关系，而且还是可获取焦点的元素。这些锚点元素的href特性指定了一个HTML锚点散列值，可以作为jQuery的id选择器，用来选择这个选项卡所关联的面板。

每个选项卡在第一次被选择时，它的内容也可以使用Ajax请求来从服务器获取，锚点元素的href指定了当前活动内容的URL，而且无需在选项卡集中包含面板。

     <!--所有内容从服务器获取-->
       <div class="tabset">
           <ul>
              <li><a href="/url/for/#panel1">Tab One</a></li>
              <li><a href="/url/for/#panel2">Tab Two</a></li>
              <li><a href="/url/for/#panel3">Tab Three</a></li>
           </ul>
       </div>

可以在锚点上放置title特性来控制分配给面板元素的id，title中间的空格被替换为下划线后，会作为相应面板的id。

tabs(options)

tabs(‘enable‘)

tabs(‘disable‘)

tabs(‘destroy‘)

tabs(‘option‘, optionName, value)

tabs(‘add‘, association, label, index)：向选项卡添加新的选项卡。新的选项卡会插入到index参数的选项卡前面，没有提供index则插入到尾部。

                                                       label：新选项卡的标签

                                                       association：指定选项卡要关联的面板。

tabs(‘remove‘, index)：从选项卡集中删除下标标识的选项卡

tabs(‘select‘, index)：使下标标识的选项卡成为被选择的选项卡

tabs(‘load‘, index)：强制重新加载下标标识的选修课，忽略缓存

tabs(‘url‘, index, url)：改变下标标识的选项卡的关联URL

tabs(‘length‘)：返回包装集第一次匹配的选项卡集中的选项卡个数

tabs(‘abort‘)：终止任何正在进行的Ajax选项卡加载操作以及任何正在进行的动画

tabs(‘rotate‘, duration, cyclical)：以指定的间隔设置选项卡的自动循环

                                                duration：循环间隔

                                                cycle：如果为true，则循环在用户选择选项卡后仍然继续

tabs(‘widget‘)：返回选项卡部件元素

 事件

向每个事件处理器传入的第一个参数是事件实例，第二个参数是自定义对象，由三个元素组成：index——从0开始的选项卡索引；tab——选项卡锚点的索引；panel——选项卡面板元素的引用。

tabsadd  tabsdisable  tabsenable  tabsload   tabsremove  tabsselect   tabsshow

 样式

 ui-tabs——添加到选项卡集元素的类名

 ui-tabs-nav——添加到包含选项卡的无序列表元素的类名

 ui-tabs-selected——添加到选中选项卡的列表项的类名

 ui-tabs-panel——添加到选项卡面板的类名

（七）手风琴

 手风琴可以将选项作为一系列堆放在一起的水平条来程序，每个水平条的内容在当前水平条和下一个水平条之间。

结构

<div id="accordion">
    <h2><a href="#">Header 1</a></h2>
    <div id="contentPanel_1">  . . .  content  . . .  </div> 
    <h2><a href="#">Header 2</a></h2>
    <div id="contentPanel_2">  . . .  content  . . .  </div> 
    <h2><a href="#">Header 3</a></h2>
    <div id="contentPanel_3">  . . .  content  . . .  </div> 
</div>

标题文本还是被嵌入在一个锚点元素（为了给用户可获取焦点的元素），但通常将锚点的href设置为#，而不用它来关联标题和面板。

accordion(options)

accordion(‘enable‘)

accordion(‘disable‘)

accordion(‘destroy‘)

accordion(‘option‘, optionName, value)

accordion(‘activate‘, index)：打开index标识的内容面板

accordion(‘widget‘)：返回手风琴元素部件

accordion(‘resize‘)：重新计算部件尺寸

事件

accordionchangestart    accordionchange

类名

ui-accordion ui-accordion-header   ui-accordion-content   ui-accordion-content-active  ui-state-active

使用Ajax加载

通过info.newContnt的引用找到打开的面板，然后通过info.Header提供的引用上下文找到<a>元素，并获取href特性。如果特性不是以#开头，就假设它是远程URL。

使用load()方法，然后改变锚点的href特性值为#，这个改动是为了防止下次打开面板时再次从远程获取内容。

        $(‘.ui-accordion‘).bind(‘accordionchangestart‘,function(event,info){
          if (info.newContent.length == 0) return;
          var href = $(‘a‘,info.newHeader).attr(‘href‘);
          if (href.charAt(0) != ‘#‘) {
            info.newContent.load(href);
            $(‘a‘,info.newHeader).attr(‘href‘,‘#‘);
          }
        });

（八）对话框

要创建对话框，首先把将要成为对话框主题的内容选择到一个包装集，然后对此包装集应用dialog()方法。

dialog(options)

dialog(‘enable‘)

dialog(‘disable‘)

dialog(‘destroy‘)

dialog(‘option‘, optionName, value)

dialog(‘open‘)：打开一个关闭的对话框

dialog(‘close‘)：关闭一个打开的对话框

dialog(‘isOpen‘)：如果对话框处于打开状态，则返回true。

dialog(‘moveToTop‘)：如果存在多个对话框，则将此对话框移动到对话框堆栈顶层

dialog(‘widget‘)：返回对话框部件元素

重新打开已经被关闭的对话框要调用dialog(‘open‘)方法，而不是dialog()。

事件

dialogbeforeclose  dialogclose   drag   dragStart   dragStart    dialogfocus   dialogopen   resize   resizeStart   resizeStop

类名

ui-dialog-titlebar：添加到<div>的类名，用来容纳标题和关闭图标

ui-dialog-ttle：添加到<span>元素的类名，被包含在标题栏中，用来包裹标题文本

ui-dialog-titlebar-close：添加到<a>元素的类名，用来包含标题栏的关闭图标

ui-dialog-content：添加到对话框内容元素的类名

//Ajax动态加载内容
$.(‘div‘).dialog({
   open:function(){ $(this).load(‘/url/to/resource‘);},
   title:‘‘
});

        //单独页面作为另一个页面的一部分
        $(‘<iframe src="content.html" id="testDialog">‘).dialog({
          autoOpen: false,
          title: ‘iframe dialog‘,
          buttons: {
            Dismiss: function(){ $(this).dialog(‘close‘); }
          },
          open: function(){             //dialog()将width:auto放到了<iframe>
            $(this).css(‘width‘,‘95%‘);
          }
        });