标签：des style blog io ar color os 使用 sp
button()方法回修改单个按钮来增强外观，而buttonset()方法对一组按钮起作用。
button(options) button(‘enable‘) button(‘disable‘) button(‘destroy‘) button(‘option‘, optionName, value)
buttonset同上
$(‘‘).button({});
| icons | 指定一个或来那个在按钮显示的图标，主要图标由对象的primary属性标识，次要图标由secondary属性标识 |
| label | 指定要在按钮上显示的、覆盖原始标签的文本，对单选和多选框而言就是与控件关联的<label>元素 |
| text | 指定是否要在按钮上显示文本，如果指定false且icons选项有指定图标则不显示文本 |
滑动条使用基本元素（如<div>和<a>）组合而成。设置目标<div>元素的样式呈现滑动条的水槽，在其中创建锚点元素形成手柄。
slider(options)
slider(‘enable‘)
slider(‘disable‘)
slider(‘destroy‘)
slider(‘option‘, optionName, value)
slider(‘value‘, value)：如果提供value值，则单手柄滑动条设置值并返回那个值，否则返回滑动条当前值
slider(‘values‘, index, values)
| animate | 如果为true，则使手柄平滑地移动到水槽内单击的位置。 |
| change | 作为slidechange事件的事件处理器 |
| max | 区间上限值 |
| min | 区间下限值 |
| Orientation | horizontal或vertical其中之一 |
| range | 指定为true，则有两个手柄，且在两个手柄间创建一个可以设置样式的元素。如果指定max或min，只有一个手柄，创建样式 |
| start | 作为slidestart事件的事件处理器 |
| slide | 作为slide事件处理器 |
| step | 移动的最小步长数 |
| stop | 作为slidestop事件的事件处理器 |
| value | 指定单个手柄滑动条的初始值 |
| values | 创建多个手柄并指定初始值。[10,20,30]创建带有初始值分别为10,20,30的手柄 |
| slide | 在滑动条拖动手柄时，为mouseover事件触发，返回false会取消拖动 |
| slidechange | 滑动条的值改变时触发，提供用户活动或程序改变滑动条的值 |
| slidestart | 滑动开始时触发 |
| slidestop | 滑动结束时触发 |
自定义对象包含属性：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
通过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%‘); } });
标签：des style blog io ar color os 使用 sp
原文地址：http://www.cnblogs.com/surahe/p/4117210.html
