調用draggable()方法，實現各種拖拽元素的效果
$(selector).draggable({options})
options：配置對象
-containment：拖曳區域
-axis：拖曳時的座標方向
$(function () {
$("#x").draggable({containment:"parent",axis:"x"});
$("#y").draggable({containment:"parent",axis:"y"});
});2.放置插件 droppable
$(selector).droppable({options}})
-options：配置對象
-drop()：該函數表示當被接受的拖拽元素完全進入接收元素的容器時，觸發該函數的調用
$(function () {
$(".drag").draggable();
$(".cart").droppable({
drop: function () {
$(this)
.addClass("focus");
$("#tip").html("");
}
})
});3.拖拽排序插件 sortable
將序列元素（例如<option>、<li>）按任意位置進行拖曳從而形成一個新的元素序列，
實現拖曳排序的功能
$(selector).sorttable({options});
$(function () {
$("ul").sortable({
delay:2,//延時
opacity:0.35//透明度
})
});4.面板摺疊插件 accordion
點擊標題時展開內容，再點另一標題時，關閉已展開的內容
$(selector).accordion({options});
5.選項卡插件 tabs
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>選項卡插件</title>
<link href="http://www.imooc.com/data/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="http://www.imooc.com/data/jquery-ui-1.9.2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="divtest">
<div id="tabs">
<ul>
<li><a href="#tabs-1">最愛喫的水果</a></li>
<li><a href="#tabs-2">最喜歡的運動</a></li>
</ul>
<div id="tabs-1">
<p>橘子</p>
<p>香蕉</p>
<p>葡萄</p>
<p>蘋果</p>
<p>西瓜</p>
</div>
<div id="tabs-2">
<p>足球</p>
<p>散步</p>
<p>籃球</p>
<p>乒乓球</p>
<p>騎自行車</p>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$("#tabs").tabs({
//設置各選項卡在切換時的動畫效果
fx: { opacity: "toggle", height: "toggle" },
event: "mousemove" //通過移動鼠標事件切換選項卡
})
});
</script>
</body>
</html>6.對話框插件 dialog
實現JavaScript中alert()和confirm()函數的功能
$(selector).dialog({options});
$(function () {
$("#btnDelete").bind("click", function () { //詢問按鈕事件
if ($("#spnName").html() != null) { //如果對象不爲空
sys_Confirm("您真的要刪除該條記錄嗎？");
return false;
}
});
});
function sys_Confirm(content) { //彈出詢問信息窗口
$("#dialog-modal").dialog({
height: 140,
modal: true,
title: '系統提示',
hide: 'slide',
buttons: {
'確定': function () {
$("#spnName").remove();
$(this).dialog("close");
},
'取消': function () {
$(this).dialog("close");
}
},
open: function (event, ui) {
$(this).html("");
$(this).append("<p>" + content + "</p>");
}
});
}7.菜單工具插件 menu
$(function () {
$("#menu").menu();
});8.微調按鈕插件 spinner
$(selector).spinner({options});
-options：在該對象中，可以設置輸入的最大、最小值，獲取改變值和設置對應事件。
$(function () {
//定義變量
var intR = 0, intG = 0, intB = 0, strColor;
$("#spnPrev").spinner({
//初始化插件
max: 10,
min: 0,
//設置微調按鈕遞增/遞減事件
spin: function (event, ui) {
if (ui.value == 8)
spnPrev.style.backgroundColor = "red";
else
spnPrev.style.backgroundColor = "green";
},
//設置微調按鈕值改變事件
change: function (event, ui) {
var intTmp = $(this).spinner("value");
if (intTmp < 0) $(this).spinner("value", 0);
if (intTmp > 10) $(this).spinner("value", 10);
if (intTmp == 8)
spnPrev.style.backgroundColor = "red";
else
spnPrev.style.backgroundColor = "green";
}
});
});9.工具提示插件 tooltip
$(selector).tooltip({options});
-options：在該對象中,可以設置提示信息的彈出、隱藏時的效果和所在位置。
$(function () {
$("#name").tooltip({
show: {
effect: "slideDown",
delay: 350
},
hide: {
effect: "explode",
delay: 350
},
position: {
my: "left top",
at: "left bottom"
}
});
});