辛苦堆砌，转载请注明出处，谢谢！
今天的东西相对来说比较简单，样式上的变化也比较少，其中自动补齐，折叠菜单和Tab标签页可以从网络上获取数据源，日期拾取器可以进行本地化，实例中也尽可能多的用到了一些选项，其他的没有太多需要解释和强调的。不多说，给出HTML，具体的变化可以参阅jQuery UI官方文档。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Example</title>
<link rel="stylesheet" type="text/css" href="jquery-ui.css"/>
<link rel="stylesheet" type="text/css" href="jquery-ui.structure.css"/>
<link rel="stylesheet" type="text/css" href="jquery-ui.theme.css"/>
<script src="jquery-3.1.1.js" type="text/javascript"></script>
<script src="jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
var data = ["pig", "fish", "flowers", "monkey", "water"];
$("#autoComplete").autocomplete({
source: data
});
$("#accordion").accordion();
$("#tabs").tabs();
$("#date").datepicker({
changeMonth: true,
changeYear: true,
showWeek: true,
weekHeader: "Week",
showOtherMonths: true,
showButtonPanel: true
});
});
</script
</head>
<body>
<h2>自动补齐</h2>
<input id="autoComplete"/>
<h2>折叠菜单</h2>
<div id="accordion">
<h2>鲜花</h2>
<div>
<label>水仙</label>
<label>牡丹</label>
</div>
<h2>动物</h2>
<div>
<label>兔子</label>
<label>鱼</label>
</div>
<h2>树木</h2>
<div>
<label>白杨</label>
<label>柳树</label>
</div>
</div>
<h2>Tab标签页</h2>
<div id="tabs">
<ul>
<li><a href="#flower">鲜花</a></li>
<li><a href="#animal">动物</a></li>
<li><a href="#tree">树木</a></li>
</ul>
<div id="flower">
<label>水仙</label>
<label>牡丹</label>
</div>
<div id="animal">
<label>兔子</label>
<label>鱼</label>
</div>
<div id="tree">
<label>白杨</label>
<label>柳树</label>
</div>
</div>
<h2>日期拾取器</h2>
<label for="date">日期<label>
<input id="date"/>
</body>
</html>
由于自动补全和日期选择器都是动态触发的，截图中看不出来，这里就不进行截图了，感兴趣的可以自己试试。
