推荐大家一款jQuery出色的插件jQuery UI

JavaScript 2012-07-18 jQuery,UI,插件

这款插件是基于jQuery运行的,所以语法跟jQuery类似,这款插件集合了多种功能,如浮窗,日期选择等等,自己可以到官网看看都有哪些功能。

jQuery UI

下载地址:jqueryui.com/download/jquery-ui-1.8.21.custom.zip

下载后得到以下文件夹

我们需要js与css文件夹里的内容,把它拷贝到桌面jquery ui文件夹内,并新建一个demo.html

jqueryui

在demo.html输入以下代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>jQuery UI 实例 - 琼台博客 www.qttc.net</title>
		<link type="text/css" href="css/smoothness/jquery-ui-1.8.21.custom.css" rel="stylesheet" />
		<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
		<script type="text/javascript">	
			$(document).ready(function(){
				// 弹窗
				$('button').click(function(){$('#dialog').dialog()});
				// 日期输入框
				$('#date').datepicker();
				// 标签卡
				$('#tab').tabs();
			});
		</script>
	</head>
	<body>
		<div id="dialog" style="display:none">这里是弹窗的内容</div>		
		<p><button>点这里弹窗</button></p>
		<p>点这里输入日期<input type="text" id="date" /></p>
		<p>
		<div id="tab">
			<ul>
				<li><a href="#tab-1">标签一</a></li>
				<li><a href="#tab-2">标签二</a></li>
				<li><a href="#tab-3">标签三</a></li>
			</ul>
			<div id="tab-1">这里是标签一的内容</div>
			<div id="tab-2">这里是标签二的内容</div>
			<div id="tab-3">这里是标签三的内容</div>
		</div>
		</p>
		<p><a href="http://www.qttc.net">琼台博客</a></p>
	</body>
</html>

以上DEMO实现了弹窗,日期输入,标签切换功能

运行效果图

jquery UI

演示地址:www.qttc.net/static/demo/jqueryui

文字链接:《推荐大家一款jQuery出色的插件jQuery UI

文章地址:http://www.qttc.net/201207135.html

除非标注,琼台博客所有博文均为原创,转载请加文字链接注明来源

乳名?小名?昵称?网名?均可

email,放心,我不会给你乱投广告的

想获得回访就把你的站点URL写上(没有留空)

[NOTICE]木要投放广告
[NOTICE]木要骂人,说不该说的话
[NOTICE]自由言论,但要遵纪守法

Comments 0

    Hi,你想第一个做沙发么?