一、jQuery UI插件
1、简介：jQuery UI包含了许多维持状态的小部件（Widget），因此，它与典型的 jQuery 插件使用模式略有不同。所有的 jQuery UI 小部件使用相同的模式，只要学会使用其中一个，就知道如何使用其他的小部件（Widget）。
2、组成：jQuery UI 主要分为3个部分：交互、微件和效果库。
交互：交互部件是一些与鼠标交互相关的内容，包括缩放（Resizable） , 拖动（Draggable） , 放置（Droppable） , 选择（Selectable） , 排序（Sortable）等。
微件：主要是一些界面的扩展，包括折叠面板（Accordion） , 自动完成（Autocomplete） , 按钮（Button） , 日期选择器（Datepicker） , 对话框（Dialog） , 菜单（Menu） , 进度条（Progressbar） , 滑块（Slider） , 旋转器（Spinner） , 标签页（Tabs） , 工具提示框（Tooltip）等，新版本的UI将包含更多的微件。
效果库：用于提供丰富的动画效果，让动画不再局限于jQuery的animate()方法。包括特效（Effect） , 显示（Show） , 隐藏（Hide） , 切换（Toggle） , 添加 Class（Add Class） , 移除 Class（Remove Class） , 切换 Class（Toggle Class） , 转换 Class（Switch Class） , 颜色动画（Color Animation）等。
3、使用：下载jQuery UI后，需要引用了一些外部文件：主题、jQuery 和 jQuery UI。通常情况下，在页面中引用这三个文件，以便使用 jQuery UI 的窗体小部件和交互部件：
<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>4、定制：jQuery UI 提供了多种定制方式。您已经看到下载生成器（Download Builder）如何定制一个值包含您所需选项的自定义版本，这里还提供了其他定制方式。
（1）使用选项：想要让某个插件设置成非默认值，您可以使用 "options" 重写它的默认设置。选项是一组属性，作为参数传递给 jQuery UI 小部件。例如，滑块（slider）小部件具有 orientation 选项，该选项允许您指定滑块是水平的还是垂直的。
$( "#mySliderDiv" ).slider({
orientation: "vertical"
});（2）ThemeRoller：想要设计自己的主题，jQuery UI 提供了一个非常完美的用于主题定制的应用程序，这就是 ThemeRoller。ThemeRoller 为所有使用 jQuery UI 小部件设计的元素提供了一个自定义接口。当您调整左栏中的"levers"，右栏中的小部件将根据您的设计进行显示。ThemeRoller 的 Gallery 选项卡提供了一些与设计主题，与下载生成器（Download Builder）页面提供的一样。您可以基于这些主题做调整，或者直接下载。
5、工作原理：先从小部件的生命周期讲起。
(1)当小部件安装时，生命周期开始。我们只需要在一个或多个元素上调用插件，即安装了小部件。安装时传递的选项数目多少可根据我们的需要而定。任何我们未传递的选项则都使用它们的默认值。
(2)小部件已经初始化，我们就可以查询它的状态，或者在小部件上执行动作。所有初始化后的动作都以方法调用的形式进行。为了在小部件上调用一个方法，我们可以向 jQuery 插件传递方法的名称。例如，为了在进度条（progressbar）小部件上调用 value 方法，如果方法接受参数，我们可以在方法名后传递参数。
$( "#elem" ).progressbar( "value", 40 );就像 jQuery 中的其他方法一样，大部分的小部件方法为链接返回 jQuery 对象。所以可以链式调用其它方法
$( "#elem" )
.progressbar( "value", 90 )
.addClass( "almost-done" );(3)公共方法
每个小部件都有它自己的一套基于小部件所提供功能的方法。然而，有一些方法是所有小部件都共同具有的。
option
可以在初始化之后通过 option 方法改变选项。例如，我们可以通过调用 option 方法改变 progressbar（进度条）的 value 为 30。
$( "#elem" ).progressbar( "option", "value", 30 );可以为某个选项获取当前的值。可以通过给 option 方法传递一个对象，一次更新多个选项。
$( "#elem" ).progressbar( "option", "value" ); $( "#elem" ).progressbar( "option", {
value: 100,
disabled: true
});总结：必须传递字符串 "option" 作为第一个参数。
disable
此方法禁用小部件。在进度条（progressbar）实例中，这会改变样式让进度条显示为禁用状态。
$( "#elem" ).progressbar( "disable" );enable
方法是 disable 方法的对立面。
总结：调用 disable 方法等同于设置 disabled 选项为 true。调用 enable 方法等同于设置 disabled 选项为 false。
destroy
不再需要小部件，那么可以销毁它，返回到最初的标记。这意味着小部件生命周期的终止。
$( "#elem" ).progressbar( "destroy" );(4)事件
所有的小部件都有跟他们各种行为相关的事件，用于在状态改变时通知您。对于大多数的小部件，当事件被触发时，名称以小部件名称为前缀。例如，我们可以绑定进度条（）的 change 事件，一旦值发生变化时就触发。
$( "#elem" ).bind( "progressbarchange", function() {
alert( "The value has changed!" );
});公共事件：大多数事件是针对特定的小部件，所有的小部件都有一个公共的 create 事件。该事件在小部件被创建时即被触发。
6、交互
（1）draggable拖动
html代码段
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>js代码段
$( function() {
$( "#draggable" ).draggable();
} );设置只能水平、垂直拖动，在一个容器里拖动，只在父元素内拖动
$(function() {
$( "#draggable" ).draggable({ axis: "y" });
$( "#draggable2" ).draggable({ axis: "x" });
$( "#draggable3" ).draggable({ containment: "#containment-wrapper", scroll: false });
$( "#draggable5" ).draggable({ containment: "parent" });
});html代码段
<div id="draggable" class="ui-widget-content">
<p>Drag me to my target</p>
</div>
<div id="droppable" class="ui-widget-header">
<p>Drop here</p>
</div>js代码段
$( function() {
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
} );分析：把可拖动的部件放置在droppable元素中。当放置成功时，触发自定义事件，为当前droppable元素添加ui-state-highlight类。为p元素的内容设置为dropped!
运行结果如下：
（3）resizable缩放
html代码
<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">缩放（Resizable）</h3>
</div>js代码
$(function() {
$( "#resizable" ).resizable();
});（4）selectable选择
html代码段
<ol id="selectable">
<li class="ui-widget-content">Item 1</li>
<li class="ui-widget-content">Item 2</li>
<li class="ui-widget-content">Item 3</li>
<li class="ui-widget-content">Item 4</li>
<li class="ui-widget-content">Item 5</li>
<li class="ui-widget-content">Item 6</li>
<li class="ui-widget-content">Item 7</li>
</ol> $(function() {
$( "#selectable" ).selectable();
});（5）sortable 排序
js代码段
$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
});7 小部件
（1）tooltip 工具提示框
Tooltips 可被绑定到任意的元素上。当您的鼠标悬停在元素上时，title 属性会显示在元素旁边的一个小框中，就像原生的工具提示框一样。
<p><label for="age">您的年龄：</label><input id="age" title="年龄仅用于统计。"></p> $(function() {
$( document ).tooltip();
});（2）tabs 导航栏
<div id="tabs">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</a></li>
<li><a href="#tabs-3">Aenean lacinia</a></li>
</ul>
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>
<div id="tabs-2">
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
</div>
<div id="tabs-3">
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
</div>
</div>js 代码段
$(function() {
$( "#tabs" ).tabs();
});运行结果如下：
如果想要再次点击标签页来关闭内容面板。可设置collapse参数为true。
$( function() {
$( "#tabs" ).tabs({
collapsible: true
});
} );当鼠标悬停时打开
$( function() {
$( "#tabs" ).tabs({
event: "mouseover"
});
} );（4）slider 滑块
范围滑块 range:true;values:[ , ]设置初始值：
<p>
<label for="amount">价格范围：</label>
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider-range"></div>js代码：
$( function() {
$( "#slider-range" ).slider({
range: true,
min: 0,
max: 500,
values: [ 75, 300 ],
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
}
});
$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
" - $" + $( "#slider-range" ).slider( "values", 1 ) );
} );分析：为滑动事件绑定功能：计算滑块边界值
运行结果：
（5）progressbar 进度条
$( "#progressbar" ).progressbar({
value: 37
});（6）menu 菜单
html 代码（主要使用ul>li）
<ul id="menu">
<li class="ui-state-disabled"><div>Toys (n/a)</div></li>
<li><div>Books</div></li>
<li><div>Clothing</div></li>
<li><div>Electronics</div>
<ul>
<li class="ui-state-disabled"><div>Home Entertainment</div></li>
<li><div>Car Hifi</div></li>
<li><div>Utilities</div></li>
</ul>
</li>
<li><div>Movies</div></li>
<li><div>Music</div>
<ul>
<li><div>Rock</div>
<ul>
<li><div>Alternative</div></li>
<li><div>Classic</div></li>
</ul>
</li>
<li><div>Jazz</div>
<ul>
<li><div>Freejazz</div></li>
<li><div>Big Band</div></li>
<li><div>Modern</div></li>
</ul>
</li>
<li><div>Pop</div></li>
</ul>
</li>
<li class="ui-state-disabled"><div>Specials (n/a)</div></li>
</ul> $( function() {
$( "#menu" ).menu();
} );分析：class=“ui-state-disabled”的元素li为不可点元素。
运行结果如下：
（7）dialog 对话框
基本的对话框窗口是一个定位于视区中的覆盖层，同时通过一个 iframe 与页面内容分隔开（就像 select 元素）。它由一个标题栏和一个内容区域组成，且可以移动，调整尺寸，默认可通过 'x' 图标关闭。
基本对话框
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div> $( function() {
$( "#dialog" ).dialog();
} );运行结果：
模态对话框：模态对话框防止用户与对话框以外的页面其他部分进行交互，直到对话框关闭为止。
<div id="dialog-confirm" title="Empty the recycle bin?">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div> $( function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height: "auto",
width: 400,
modal: true,
buttons: {
"Delete all items": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
} );运行结果如下：
（8）Datepicker日期选择器
绑定到一个标准的表单 input 字段上。把焦点移到 input 上（点击或者使用 tab 键），在一个小的覆盖层上打开一个交互日历。选择一个日期，点击页面上的任意地方（输入框即失去焦点），或者点击 Esc 键来关闭。如果选择了一个日期，则反馈显示为 input 的值。
默认日期显示：
显示月份和年份
$( function() {
$( "#datepicker" ).datepicker({
changeMonth: true,
changeYear: true
});
} );
（9）button按钮
<div class="widget">
<h1>Widget Buttons</h1>
<button>A button element</button>
<input type="submit" value="A submit button">
<a href="#">An anchor</a>
</div>
<h1>CSS Buttons</h1>
<button class="ui-button ui-widget ui-corner-all">A button element</button>
<input class="ui-button ui-widget ui-corner-all" type="submit" value="A submit button">
<a class="ui-button ui-widget ui-corner-all" href="#">An anchor</a>js代码
$( ".widget input[type=submit], .widget a, .widget button" ).button();
$( "button, input, a" ).click( function( event ) {
event.preventDefault();
} );（10）autocomplete 自动完成
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>js代码段
$( function() {
var availableTags = [
"ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure",
"COBOL", "ColdFusion", "Erlang", "Fortran","Groovy", "Haskell","Java","JavaScript","Lisp",
"Perl", "PHP", "Python", "Ruby", "Scala", "Scheme"
];
$( "#tags" ).autocomplete({
source: availableTags
});
} );（11）accordion 折叠面板效果
点击头部展开/折叠被分为各个逻辑部分的内容，就像标签页（tabs）一样。您可以选择性地设置当鼠标悬停时是否切换各部分的打开/关闭状态。
<div id="accordion">
<h3>Section 1</h3>
<div>
<p>
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sitamet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</p>
</div>
<h3>Section 2</h3>
<div>
<p>
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amepurus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
velit, faucibus interdum tellus libero ac justo. Vivamus non quam. Insuscipit faucibus urna.
</p>
</div>
<h3>Section 3</h3>
<div>
<p>
Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac liberoac tellus pellentesque semper. Sed ac felis. Sed commodo, magna qui lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
<h3>Section 4</h3>
<div>
<p>
Cras dictum. Pellentesque habitant morbi tristique senectus et netuset malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinmauris vel est.
</p>
<p>
Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.Class aptent taciti sociosqu ad litora torquent per conubia nostra, perinceptos himenaeos.
</p>
</div>
</div>
js代码段
$( function() {
$( "#accordion" ).accordion();
} );运行结果：
默认情况下，折叠面板总是保持一个部分是打开的。为了让所有部分都是折叠的，可设置 collapsible 选项为 true。点击当前打开的部分，来折叠它的内容面板。即要使打开面板再次点击后折叠，使用collapsible:true。
$( function() {
$( "#accordion" ).accordion({
collapsible: true
});
} );当鼠标悬停时打开面板：
$( "#accordion" ).accordion({
event: "click hoverintent"
});（12）checkboxradio 单选多选
<h2>Radio Group</h2>
<fieldset>
<legend>Select a Location: </legend>
<label for="radio-1">New York</label>
<input type="radio" name="radio-1" id="radio-1">
<label for="radio-2">Paris</label>
<input type="radio" name="radio-1" id="radio-2">
<label for="radio-3">London</label>
<input type="radio" name="radio-1" id="radio-3">
</fieldset>
<h2>Checkbox</h2>
<fieldset>
<legend>Hotel Ratings: </legend>
<label for="checkbox-1">2 Star</label>
<input type="checkbox" name="checkbox-1" id="checkbox-1">
<label for="checkbox-2">3 Star</label>
<input type="checkbox" name="checkbox-2" id="checkbox-2">
<label for="checkbox-3">4 Star</label>
<input type="checkbox" name="checkbox-3" id="checkbox-3">
<label for="checkbox-4">5 Star</label>
<input type="checkbox" name="checkbox-4" id="checkbox-4">
</fieldset>单选框：type="radio" 复选框：type="checkbox"
js代码段
$( function() {
$( "input" ).checkboxradio();
} );如果不想显示单选框，多选框前面的方框或圆图标，用以下代码：
$( function() {
$( "input" ).checkboxradio({
icon: false
});
} );7、特效
（1）addclass与removeclass
<div class="toggler">
<div id="effect" class="ui-corner-all">
Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede.
</div>
</div>
<button id="button" class="ui-state-default ui-corner-all">Run Effect</button>
$(function() {
$( "#button" ).click(function() {
$( "#effect" ).addClass( "newClass", 1000, callback );
return false;
});
function callback() {
setTimeout(function() {
$( "#effect" ).removeClass( "newClass" );
}, 1500 );
}
});分析：点击按钮，给id为effect的元素添加类，newClass,
.addClass( className [, duration ] [, easing ] [, complete ] ) 其中，duration 指动画持续时间。easing,为动画函数，complete，为一个函数，动画完成时要调用的函数。
本次调用的函数为定时函数，1500ms后为id为effect的元素删除此类，恢复到原始状态。
移除特效removeclass
$( function() {
$( "#button" ).on( "click", function() {
$( "#effect" ).removeClass( "newClass", 1000, callback );
});
function callback() {
setTimeout(function() {
$( "#effect" ).addClass( "newClass" );
}, 1500 );
}
} );（2）color animation 颜色动画
jQuery UI 特效核心添加了使用 rgb()、rgba()、十六进制值或者颜色名比如"aqua" 来动态改变 color 属性的功能。只需要包含 jQuery UI 特效核心文件，.animate() 就会支持颜色。
(selector).animate({styles},speed,easing,callback)
示例代码如下：
<div class="toggler">
<div id="effect" class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all">Animate</h3>
<p>
Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
</p>
</div>
</div>
<button id="button" class="ui-state-default ui-corner-all">Toggle Effect</button>js代码段：
$( function() {
var state = true;
$( "#button" ).on( "click", function() {
if ( state ) {
$( "#effect" ).animate({
backgroundColor: "#aa0000",
color: "#fff",
width: 500
}, 1000 );
} else {
$( "#effect" ).animate({
backgroundColor: "#fff",
color: "#000",
width: 240
}, 1000 );
}
state = !state;
});
} );分析：点击按钮，state为true,为id 为effect的元素添加动画，背景颜色为#aa0000，宽度以及字体设置如上。退出循环后，设置state=!state.这样再次点击按钮，则进入else,执行操作使元素回到初始样式。
（3）toggleclass 与switchclass
$( function() {
$( "#button" ).on( "click", function() {
$( "#effect" ).toggleClass( "newClass", 1000 );
});
} );描述：当动画样式改变时，为匹配的元素集合内的每个元素添加和移除指定的 Class。
用法：.switchClass( removeClassName, addClassName [, duration ] [, easing ] [, complete ] ) $( function() {
$( "#button" ).on( "click", function() {
$( ".newClass" ).switchClass( "newClass", "anotherNewClass", 1000 );
$( ".anotherNewClass" ).switchClass( "anotherNewClass", "newClass", 1000 );
});
} );.switchClass() 方法允许您在动画过渡中，添加 Class 的同时移除 Class。
（4）show 与hide 与toggle
show 使用自定义效果来显示匹配的元素。
用法：
.show( effect [, options ] [, duration ] [, complete ] )示例如下：select选项框为指定以何种形式来显示元素
<div class="toggler">
<div id="effect" class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all">Show</h3>
<p>Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
</p>
</div>
</div>
<select name="effects" id="effectTypes">
<option value="blind">Blind</option>
<option value="bounce">Bounce</option>
<option value="clip">Clip</option>
<option value="drop">Drop</option>
<option value="explode">Explode</option>
<option value="fade">Fade</option>
<option value="fold">Fold</option>
<option value="highlight">Highlight</option>
<option value="puff">Puff</option>
<option value="pulsate">Pulsate</option>
<option value="scale">Scale</option>
<option value="shake">Shake</option>
<option value="size">Size</option>
<option value="slide">Slide</option>
</select>
<button id="button" class="ui-state-default ui-corner-all">Run Effect</button>js代码段
function runEffect() {
// 取得效果类型
var selectedEffect = $( "#effectTypes" ).val();
//大多数特效类型默认不需要参数
var options = {};
//有些特效需要参数
if ( selectedEffect === "scale" ) {
options = { percent: 50 };
} else if ( selectedEffect === "size" ) {
options = { to: { width: 280, height: 185 } };
}
// 运行特效
$( "#effect" ).show( selectedEffect, options, 500, callback );
};
//回调函数
function callback() {
setTimeout(function() {
$( "#effect:visible" ).removeAttr( "style" ).fadeOut();
}, 1000 );
};
// 根据菜单选择设置特效
$( "#button" ).on( "click", function() {
runEffect();
});
$( "#effect" ).hide();
} );hide使用自定义效果来隐藏匹配的元素。
用法：
.hide( effect [, options ] [, duration ] [, complete ] ) function runEffect() {
.......
$( "#effect" ).hide( selectedEffect, options, 1000, callback );
};
toggle使用自定义效果来显示或隐藏匹配的元素。
用法：
.toggle( effect [, options ] [, duration ] [, complete ] ) $( "#effect" ).toggle( selectedEffect, options, 500 );
（5）position
$( function() {
function position() {
$( ".positionable" ).position({
of: $( "#parent" ),
my: $( "#my_horizontal" ).val() + " " + $( "#my_vertical" ).val(),
at: $( "#at_horizontal" ).val() + " " + $( "#at_vertical" ).val(),
collision: $( "#collision_horizontal" ).val() + " " + $( "#collision_vertical" ).val()
});
}
$( ".positionable" ).css( "opacity", 0.5 );
$( "select, input" ).on( "click keyup change", position );
$( "#parent" ).draggable({
drag: position
});
position();
} );- 下载 ThemeRoller 主题：最早的创建主题的方式是使用 ThemeRoller 来生成和下载一个主题。这个应用程序将创建一个新的
ui.theme.css文件和一个包含了所有必需的背景图像及图标精灵的images文件夹。这个方法是最早的创建和维护主题的方式，但是它对 ThemeRoller 中提供的选项限制了自定义。 - 修改 CSS 文件：为了对外观和感观做进一步的控制，您可以选择从默认主题（Smoothness）开始，或者从一个由 ThemeRoller 生成的主题开始，然后调整
ui.theme.css文件，或者任意一个独立插件的样式表。例如，您可以很容易地调整所有按钮的角半径为不同于其他 UI 组件的值，或者使用自定义设置为图标精灵改变路径。通过一点点的样式范围，您甚至可以在一个 UI 中同时使用多个主题。为了易于维护，建议只更改ui.theme.css文件和图像。 - 重新编写自定义的 CSS：为了最大程度地控制外观和感观，可以重新开始编写每个插件的 CSS，而不使用框架类或者特定的插件样式表。如果想要的外观和感观不能通过修改 CSS 来实现或者使用高度自定义的标记，那么就可以采用这个方法。这个方法要求在 CSS 方面有深厚的专业知识，且要求手动更新未来的插件。
9、 ThemeRoller 主题定制
在左侧可以选择主题下对应的字体，行距，背景，当您设计完主题后，您可以下载主题以便在项目中进行使用。ThemeRoller 在顶部有一个 "Download theme（下载主题）" 按钮，可以生成一个 zip 压缩包，包含了所有的主题相关文件。下载文件中的图像是按照您的规格进行生成的，并保存为高质量的 PNG 文件。
一旦下载了主题，解压缩后，您将看到一个名为 themes 的文件夹。该文件夹包括了主题所需的 CSS 和图像。复制主题文件夹到您的项目中，并在页面中链接 themes/all.css 文件。
在定制的主题custom-theme中，引入jquery-ui.css，则主题样式可以应用到自己的页面中。