jQuery学习笔记(六) jQuery UI自动补齐，折叠菜单，Tab标签页和日期拾取器

最新推荐文章于 2017-03-01 16:52:00 发布

有理叔

最新推荐文章于 2017-03-01 16:52:00 发布

阅读量830

点赞数 1

分类专栏： Web前端文章标签： jquery ui

本文链接：https://blog.csdn.net/yjp19871013/article/details/54574114

版权

Web前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

辛苦堆砌，转载请注明出处，谢谢！

今天的东西相对来说比较简单，样式上的变化也比较少，其中自动补齐，折叠菜单和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>

由于自动补全和日期选择器都是动态触发的，截图中看不出来，这里就不进行截图了，感兴趣的可以自己试试。