jQuery UI 是一个建立在 jQuery JavaScript 库上的小部件和交互库
jQuery UI
jQuery UI 特性
jQuery UI 下载
jQuery UI实例
拖动（Draggable）
在任意的 DOM 元素上启用 draggable 功能。通过鼠标点击并在视区中拖动来移动 draggable 对象
<html>
<head>
<title>JQuery UI</title>
<style>
.block {
width: 100px;
height: 100px;
background-color: yellow;
border: 1px solid yellow;
}
</style>
</head>
<body>
<div class="block"></div>
<div class="drop"></div>
</body>
<script src="js.js/jquery-3.2.1.min.js"></script>
<script src="js.js/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.block').draggable();
$('.block').draggable({helper: 'clone', opacity: 0.5});
});
</script>
</html>
将想要拖动的元素，用选择器在后面加上draggable()即可
注意：这样拖动是拖动它的本体元素，拖到哪放到哪，如果拖出浏览器视口，就找不到了
为此我们可以给它加helper:clone这样拖动的是它的复制品，并且可以给它添加透明度的属性，改变透明度
约束运动： $( "#draggable" ).draggable({ axis: "y" });沿着y轴拖拽
约束边界：
<div id="containment-wrapper">
<div id="draggable3" class="draggable ui-widget-content">
<p>我被约束在盒子里</p>
</div>
</div>
//#containment-wrapper { width: 95%; height:150px; border:2px solid #ccc; padding: 10px; } 定义外层盒子的大小样式形成约束
延迟开始：通过 delay 选项设置延迟开始拖拽的毫秒数
通过 distance 选项设置光标被按下且拖拽指定像素后才允许拖拽
$( "#draggable" ).draggable({ distance: 20 });
$( "#draggable2" ).draggable({ delay: 1000 });
还有很多功能查看文档
放置（Droppable）
在任意的 DOM 元素上启用 droppable 功能，并为可拖拽小部件创建目标
<html>
<head>
<title>JQuery UI</title>
<style>
.block {
width: 100px;
height: 100px;
background-color: yellow;
border: 1px solid yellow;
}
.drop {
width: 100px;
height: 100px;
border: 1px dashed black;
opacity: 0.5;
}
.droppable-active {
border: 1px solid red;
}
.droppable-hover {
background-color: red;
}
</style>
</head>
<body>
<div class="block"></div>
<div class="drop"></div>
</body>
<script src="js.js/jquery-3.2.1.min.js"></script>
<script src="js.js/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.block').draggable();
$('.drop').droppable({
accept: '.block',
activeClass: 'droppable-active',
hoverClass: 'droppable-hover',
drop: function(ev, ui) {
$(this).append('<br>Dropped!');
}
});
});
</script>
</html>
更多查文档
排序（Sortable）
<html>
<head>
<title>JQuery UI</title>
<style>
li {
background-color: #eee;
margin: 10px;
list-style-type: none;
}
</style>
</head>
<body>
<ul class="sort">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</body>
<script src="js.js/jquery-3.2.1.min.js"></script>
<script src="js.js/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.sort').sortable({ axis: "y" });
});
</script>
</html>
每一个li元素都是可拖动的，并且可以放在列表里的任何位置，但是它们的拖动被限制在只能纵向变化拖动
选择（Selectable）
使用鼠标选择单个元素或一组元素
<html>
<head>
<title>JQuery UI</title>
<style>
li {
background-color: #eee;
margin: 10px;
list-style-type: none;
}
.sort .ui-selecting {
background-color: red;
}
.sort .ui-selected {
background-color: yellow;
}
</style>
</head>
<body>
<ul class="sort">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</body>
<script src="js.js/jquery-3.2.1.min.js"></script>
<script src="js.js/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//$('.sort').sortable({ axis: "y" });
$('.sort').selectable();
});
</script>
</html>
为列表添加被点击时产生的样式，支持单选和按住ctrl多选
改变大小（Resizable）
使用鼠标改变元素的尺寸
在选择器后加上Resizable()即可，更多看文档，不赘述
折叠菜单（Accordion）
在一个有限的空间内显示用于呈现信息的可折叠的内容面板
<html>
<head>
<title>JQuery UI</title>
<link rel="stylesheet" href="js.js/jquery-ui.css">
</head>
<body>
<div id="accordion">
<div>Section 1</div>
<div>
<p>
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, 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 amet
purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
suscipit 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 libero
ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
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 netus
et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
mauris vel est.
</p>
<p>
Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos.
</p>
</div>
</div>
</div>
</body>
<script src="js.js/jquery-3.2.1.min.js"></script>
<script src="js.js/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#accordion").accordion({
collapsible: true
});
});
</script>
</html>
注意：
一定要引入jquery-ui.css 否则毫无样式 也没有这样的边框
更多看文档
对话框（Dialog ）
在一个交互覆盖层中打开内容
<html>
<head>
<title>JQuery UI</title>
<link rel="stylesheet" href="js.js/jquery-ui.css">
</head>
<body>
<div id="dialog" title="Haris 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>
</body>
<script src="js.js/jquery-3.2.1.min.js"></script>
<script src="js.js/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$( "#dialog" ).dialog({
buttons: [{
text: "Ok",
click: function() {
$( this ).dialog( "close" );
}
}]
});
});
</script>
</html>
点击关闭和ok都会关闭对话框 更多功能看文档
滑动条（Slider）
拖动手柄来选择一个数值
<html>
<head>
<title>JQuery UI</title>
<link rel="stylesheet" href="js.js/jquery-ui.css">
<style>
#red, #green, #blue {
float: left;
clear: left;
width: 300px;
margin: 15px;
}
#swatch {
width: 120px;
height: 100px;
margin-top: 18px;
margin-left: 350px;
background-image: none;
}
#red .ui-slider-range { background: #ef2929; }
#red .ui-slider-handle { border-color: #ef2929; }
#green .ui-slider-range { background: #8ae234; }
#green .ui-slider-handle { border-color: #8ae234; }
#blue .ui-slider-range { background: #729fcf; }
#blue .ui-slider-handle { border-color: #729fcf; }
</style>
</head>
<body class="ui-widget-content" style="border:0;">
<p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px;">
<span class="ui-icon ui-icon-pencil" style="float:left; margin:-2px 5px 0 0;"></span>
简单的颜色选择器
</p>
<div id="red"></div>
<div id="green"></div>
<div id="blue"></div>
<div id="swatch" class="ui-widget-content ui-corner-all"></div>
</body>
<script src="js.js/jquery-3.2.1.min.js"></script>
<script src="js.js/jquery-ui.min.js"></script>
<script type="text/javascript">
function hexFromRGB(r, g, b) {
var hex = [
r.toString(16),
g.toString(16),
b.toString(16)
];
$.each(hex, function(nr, val) {
if (val.length === 1) {
hex[nr] = "0" + val;
}
});
return hex.join("").toUpperCase();
}
function refreshSwatch() {
var red = $("#red").slider("value"),
green = $("#green").slider("value"),
blue = $("#blue").slider("value"),
hex = hexFromRGB(red, green, blue);
$("#swatch").css("background-color", "#" + hex);
}
$(function() {
$("#red, #green, #blue").slider({
orientation: "horizontal",
range: "min",
max: 255,
value: 127,
slide: refreshSwatch,
change: refreshSwatch
});
$("#red").slider("value", 255);
$("#green").slider("value", 140);
$("#blue").slider("value", 60);
});
</script>
</html>
表格排序（Tablesorter ）
<html>
<head>
<title>JQuery Animation</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="/css/jquery-ui.css">
</head>
<body>
<table id="myTable" class="tablesorter">
<thead>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>Email</th>
<th>Due</th>
<th>Web Site</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith</td>
<td>John</td>
<td>jsmith@gmail.com</td>
<td>$50.00</td>
<td>http://www.jsmith.com</td>
</tr>
<tr>
<td>Bach</td>
<td>Frank</td>
<td>fbach@yahoo.com</td>
<td>$50.00</td>
<td>http://www.frank.com</td>
</tr>
<tr>
<td>Doe</td>
<td>Jason</td>
<td>jdoe@hotmail.com</td>
<td>$100.00</td>
<td>http://www.jdoe.com</td>
</tr>
<tr>
<td>Conway</td>
<td>Tim</td>
<td>tconway@earthlink.net</td>
<td>$50.00</td>
<td>http://www.timconway.com</td>
</tr>
</tbody>
</table>
</body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="/js/jquery.tablesorter.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#myTable").tablesorter();
});
</script>
</html>
按emaile排序：
按名字排序：
注意：
这里需要jquery.tablesorter.js记得下载
它内置了排序规则帮助你排序
jquey UI有很多很多插件厉害的效果动画，这里只是冰山一角，是一些基础，深入了解或者详细了解以上实例的更多功能请查文档
官方网站文档英文
菜鸟教程中文
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
