jquery UI 学习

最新推荐文章于 2022-11-28 13:22:37 发布

Horrison

最新推荐文章于 2022-11-28 13:22:37 发布

阅读量2k

点赞数 2

分类专栏： JavaScript 文章标签： jquery ui dialog function stylesheet button

本文链接：https://blog.csdn.net/huozhicheng/article/details/6706088

版权

JavaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

源文件地址：http://download.csdn.net/source/3536967

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
		<title>jQuery UI Example Page</title>
		<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet" />	
		<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
		<style type="text/css">
			#drag { background:red;width:100px;height:100px}
		</style>
		<script type="text/javascript">
			$(document).ready(function(){
				$("#drag").draggable({ disabled: false });
				//获取draggable的状态  false为可拖动 true为不可拖动
				//alert($("#drag").draggable("option","disabled"));
				//设置可拖动   同draggable
				$("#drag").resizable({disabled: false });
				
				$("#sortable").sortable();
				
				$("#dialog").dialog({
					autoOpen:false,//是否自动打开
					
					buttons: {"确定":function(){$(this).dialog("close");},"取消":function(){$(this).dialog("close");}},//添加按钮
					closeOnEscape: true,//按ESC键时，是否可关闭dialog  true为可关闭，false为不可关闭
					draggable: true,//是否可拖动
					height: 300,
					width: 400,
					show: "scale",//打开dialog的效果
					hide: "scale",//关闭dialog的效果
					modal: true,//true表示为模式dialog
					position: "center",//显示dialog的位置
					resizable: true,//是否可调整大小
					title: "对话框",
					bgiframe: true
				});
				$("#dialogBtn").click(function(){
					$("#dialog").dialog("open");
				});
				
				//选项卡
				$("#tabs").tabs();
				
				//留言板格式输出
				var divHtml ="";
				$(":button:first").click(function(){
					divHtml += $("#name").val();
					divHtml += "</br>";
					$("#write").html(divHtml);
				});
			})
			
		</script>
	</head>
	<body>
		<table>
			<tr>
			<td valign="top">
				<div>
					<input type="text" id="name">
					<input type="button" value="input_click">
					<div id="write"></div>
				</div>
			</td>
			<td valign="top" style="width:100px;height:100px;">
				<div id="drag">draw me</div>
			</td>
			<td valign="top">
				<div>
					<ul id="sortable">
						<li>星期一</li>
						<li>星期二</li>
						<li>星期三</li>
						<li>星期四</li>
						<li>星期五</li>
						<li>星期六</li>
						<li>星期日</li>
					</ul>
				</div>
			</td>
			<td valign="top">
				<input type="button" value="dialog" id="dialogBtn">
				<div id="dialog">
					<table>
						<tr>
							<td>编号：</td>
							<td><input type="text" name="id"></td>
						</tr>
						<tr>
							<td>姓名：</td>
							<td><input type="text" name="name"></td>
						</tr>
						<tr>
							<td>年龄：</td>
							<td><input type="text" name="age"></td>
						</tr>
						<tr>
							<td>性别：</td>
							<td>
								<select>
									<option>男</option>
									<option>女</option>
								<select>
							</td>
						</tr>
					</table>
				</div>
			</td>
			<td align="top">
				<div id="tabs" style="height:300px;width:400px;">
					<ul>
						<li><a href="#fragment-1"><span>One</span></a></li>
						<li><a href="#fragment-2"><span>Two</span></a></li>
						<li><a href="#fragment-3"><span>Three</span></a></li>
					</ul>
					<div id="fragment-1">
						<p>First tab is active by default:</p>
						<pre><code>$('#example').tabs();</code></pre>
					</div>
					<div id="fragment-2">
						Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
						Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
					</div>
					<div id="fragment-3">
						Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
						Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
						Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
					</div>
				</div>
			</td>
			</tr>
		</table>
	</body>
</html>

最后附上源文件，有兴趣的朋友可以下载看看http://download.csdn.net/source/3536967