1、拖曳插件之traggable
拖曳插件draggable的功能是拖動被綁定的元素，當這個jQuery UI插件與元素綁定後，可以通過調用draggable()方法，實現各種拖曳元素的效果，調用格式如下：
$(selector). draggable({options})
options參數爲方法調用時的配置對象，根據該對象可以設置各種拖曳效果，如“containment”屬性指定拖曳區域，“axis”屬性設置拖曳時的座標方向。
例如，在頁面中的<div>元素中添加兩個子類<div>，通過與拖曳插件綁定，這兩個子類<div>元素只能在外層的父<div>元素中任意拖曳，
<head>
<title>拖曳插件</title>
<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="x" class="drag">沿x軸拖拽</div>
<div id="y" class="drag">沿y軸拖拽</div>
</div>
<script type="text/javascript">
$(function () {
$("#x").draggable({containment:"parent",axis:"x"});
$("#y").draggable({containment:"parent",axis:"y"});
});
</script>
</body>
2、放置插件之droppable
除使用draggable插件拖曳任意元素外，還可以調用droppable UI插件將拖曳後的任意元素放置在指定區域中，類似購物車效果，調用格式如下：
$(selector).droppable({options})
selector參數爲接收拖曳元素，options爲方法的配置對象，在對象中，drop函數表示當被接收的拖曳元素完全進入接收元素的容器時，觸發該函數的調用。
例如，在頁面中，通過調用droppable插件將“產品區”中的元素拖曳至“購物車”中，同時改變“購物車”的背景色和數量值，
<head>
<title>放置插件</title>
<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 class="box">
<div class="title">產品區</div>
<div class="drag"><div>蘋果</div></div>
</div>
<div class="box">
<div class="title">回收站</div>
<div class="cart"><div id="tip">還沒有產品</div></div>
</div>
</div>
<script type="text/javascript">
$(function () {
$(".drag").draggable();
$(".cart").droppable({
drop: function () {
num++;
$(this).addClass('focus'); //改變css類
$('#tip').html('');
$('.title span').html(num);
}
})
});
</script>
</body>
3、拖曳排序插件sortabe
拖曳排序插件的功能是將序列元素（例如<option>、<li>）按任意位置進行拖曳從而形成一個新的元素序列，實現拖曳排序的功能，它的調用格式爲：
$(selector).sortable({options});
selector參數爲進行拖曳排序的元素，options爲調用方法時的配置對象，
例如，在頁面中，通過加載sortable插件將<ul>元素中的各個<li>表項實現拖曳排序的功能，
<head>
<title>拖曳排序插件</title>
<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 class="title">
<span class="fl">我最喜歡的運動</span>
</div>
<div class="content">
<ul>
<li>1)足球</li>
<li>2)散步</li>
<li>3)籃球</li>
<li>4)乒乓球</li>
<li>5)騎自行車</li>
</ul>
</div>
</div>
<script type="text/javascript">
$(function () {
$("ul").sortable({
delay:2,
opacity:0.45
})
});
</script>
</body>
4、面板摺疊插件accordion
面板摺疊插件可以實現頁面中指定區域類似“手風琴”的摺疊效果，即點擊標題時展開內容，再點另一標題時，關閉已展開的內容，調用格式如下：
$(selector).accordion({options});
其中，參數selector爲整個面板元素，options參數爲方法對應的配置對象。
例如，通過accordion插件展示幾個相同區域面板的摺疊效果，
<head>
<title>面板摺疊插件</title>
<link href="Css/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="accordion">
<h3>
<a href="#">白富美</a></h3>
<ul>
<li>咱們結婚吧!</li>
<li>sdsdsaa</li>
</ul>
<h3>
<a href="#">土豪族</a></h3>
<p>咱們交個朋友吧!</p>
</div>
</div>
<script type="text/javascript">
$(function () {
$("#accordion").accordion();
});
</script>
</body>
5、選項卡插件tabs
使用選項卡插件可以將<ul>中的<li>選項定義爲選項標題，在標題中，再使用<a>元素的“href”屬性設置選項標題對應的內容，它的調用格式如下：
$(selector).tabs({options});
selector參數爲選項卡整體外圍元素，該元素包含選項卡標題與內容，options參數爲tabs()方法的配置對象，通過該對象還能以ajax方式加載選項卡的內容。
例如，在頁面中，添加選項卡的標題和內容元素，並綁定tabs插件，當點擊標題時，以選項卡的方式切內容，
<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>
6、對話框插件dialog
對話框插件可以用動畫的效果彈出多種類型的對話框，實現JavaScript代碼中alert()和confirm()函數的功能，它的調用格式爲：
$(selector).dialog({options});
selector參數爲顯示彈出對話框的元素，通常爲<div>，options參數爲方法的配置對象，在對象中可以設置對話框類型、“確定”、“取消”按鈕執行的代碼等。
例如，當點擊“提交”按鈕時，如果文本框中的內容爲空，則通過dialog插件彈出提示框，提示輸入內容不能爲空，
<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 class="content">
<span id="spnName" class="fl">張三</span>
<input id="btnDelete" type="button" value="刪除" class="fr"/>
</div>
<div id='dialog-modal'></div>
</div>
<script type="text/javascript">
$(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>");
}
});
}
</script>
</body>
7、菜單工具插件menu
菜單工具插件可以通過<ul>創建多級內聯或彈出式菜單，支持通過鍵盤方向鍵控制菜單滑動，允許爲菜單的各個選項添加圖標，調用格式如下：
$(selector).menu({options});
selector參數爲菜單列表中最外層<ul>元素，options爲menu()方法的配置對象。
例如，在頁面中，通過<ul>元素內聯的方式構建一個三層結構的導航菜單，並將最外層<ul>元素通過menu()方法綁定插件，實現導航菜單的功能，
<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>
<ul id="menu">
<li><a href="#">小明一中</a>
<ul>
<li><a href="#">高中部</a>
<ul>
<li><a href="#">高一(1)班</a></li>
<li><a href="#">高一(2)班</a></li>
<li><a href="#">高一(3)班</a>
<ul>
<li><a href="#">小胡</a></li>
<li><a href="#">小李</a></li>
<li><a href="#">小陳</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">初中部</a>
<ul>
<li><a href="#">初一(1)班</a></li>
<li><a href="#">初一(2)班</a></li>
<li><a href="#">初一(3)班</a></li>
</ul>
</li>
<li><a href="#">教研部</a></li>
</ul>
</li>
<li class="ui-state-disabled"><a href="#">大明二中</a></li>
</ul>
<script type="text/javascript">
$(function () {
$("#menu").menu();
});
</script>
</body>
8、微調按鈕插件spinner
微調按鈕插件不僅能在文本框中直接輸入數值，還可以通過點擊輸入框右側的上下按鈕修改輸入框的值，還支持鍵盤的上下方向鍵改變輸入值，調用格式如下：
$(selector).spinner({options});
selector參數爲文本輸入框元素，可選項options參數爲spinner()方法的配置對象，在該對象中，可以設置輸入的最大、最小值，獲取改變值和設置對應事件。
例如，將頁面中的三個輸入文本框都與微調插件相綁定，當改變三個文本框值時，對應的<div>元素的背景色也將隨之發生變化，
<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 class="title">
選擇顏色值</div>
<div class="content">
<span id="spnColor" class="input fl">
<input />
</span>
<span id="spnPrev" class="prev fr"></span>
</div>
</div>
<script type="text/javascript">
$(function () {
//定義變量
var intR = 0, intG = 0, intB = 0, strColor;
$("input").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";
}
});
});
</script>
</body>
9、工具提示插件tooltip
工具提示插件可以定製元素的提示外觀，提示內容支持變量、Ajax遠程獲取，還可以自定義提示內容顯示的位置，它的調用格式如下：
$(selector).tooltip({options});
其selector爲需要顯示提示信息的元素，可選項參數options爲tooltip()方法的配置對象，在該對象中，可以設置提示信息的彈出、隱藏時的效果和所在位置。
例如，將三個<a>元素與工具提示插件相綁定，當把鼠標移動在<a>元素內容時，以動畫效果彈出對應的提示圖片，移出時，圖片自動隱藏，
<body>
<div id="divtest">
<div class="title">
工具提示插件</div>
<div class="content">
<div>
<label for="name">
姓名</label>
<input id="name" name="name" title="我是土豪，歡迎與我做朋友" />
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$("input").tooltip({
show: {
effect: "slideDown",
delay: 350
},
hide: {
effect: "explode",
delay: 350
},
position: {
my: "left top",
at: "left bottom"
}
});
});
</script>
</body>
最近在整理一些資源工具，放在網站分享 http://tools.maqway.com
歡迎關注公衆號：麻雀唯伊 ， 不定時更新資源文章，生活優惠，或許有你想看的