Jquery UI学习笔记（4）

最新推荐文章于 2024-07-11 20:52:59 发布

SANZ1991

最新推荐文章于 2024-07-11 20:52:59 发布

阅读量1.2k

点赞数

分类专栏： Javascript 文章标签： jquery ui jquery dialog ajax

本文链接：https://blog.csdn.net/gxhacx/article/details/11626935

版权

Javascript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

这里主要的讲解的是dialog,也就是对话框，对于对话框有许多特点，可以包含许多按钮和内容。

<div id="dialog" title="Window title">
		<p>Content of the dialog box </p>
	</div>	
	<script type="text/javascript">
		$("#dialog").dialog({
              buttons:{"确定":function(){},
			"取消":function(){}	
		},	title:"我们的中国",
			content:"One two three four five six seven eight nine ten",
			height:300,
			width:500,
			show:"clip",//这里是特效
			hide:"puff",//blind/bounce/clip/drop/fold/highlight/puff/pulsate/scale/slide
			draggable:false,//是否可拖拽
			autoOpen:true,
			resizable:false,//是否可调整大小
			modal:true,//页面是模态的，无法访问页面其他元素
			stack:true,//对话框能否被叠加
              open:function(){
		          $(this).load("actions.php");
	          }//用ajax加载内容
		});
	</script>
//对话框的一些事件:
focus/open/beforeclose/close/drag/dragStart/dragStop/resize/resizeStart/resizeStop
$(".button").click(function(){		
		$("#dialog").dialog().dialog("close");
	});

一些功能的扩展：通过对特效的选择来控制对话框的显示与消失。

<!DOCTYPE>
<html>
	<head>
		<title>特效显示对话框</title>
		<meta charset="utf-8"/>
		<script src="../jquery-ui/jquery-1.9.1.js"></script>
		<script src="../jquery-ui/ui/jquery-ui.js"></script>
		<link rel="stylesheet" href="../jquery-ui/themes/base/jquery-ui.css">
	</head>
	<body>
		<div id="effect-dialog" title="特效显示">
			<p>Hello World</p>
		</div>		
		Open Effect
		<select id="effectopen">
			<option>No Effect</option>
			<option>Blind</option>
			<option>Bounce</option>
			<option>Clip</option>
			<option>Drop</option>
			<option>Fold</option>
			<option>HighLight</option>
			<option>Puff</option>
			<option>Pulsate</option>
			<option>Scale</option>
			<option>Slide</option>
		</select>
		<br>
		Close Effect 
		<select id="effectclose">
			<option>No Effect</option>
			<option>Blind</option>
			<option>Bounce</option>
			<option>Clip</option>
			<option>Drop</option>
			<option>Fold</option>
			<option>HighLight</option>
			<option>Puff</option>
			<option>Pulsate</option>
			<option>Scale</option>
			<option>Slide</option>
		</select>
		<br/>
		<input id="open" type="button" value="open">				<script type="text/javascript">
			$("#effect-dialog").dialog({
				autoOpen:false
			});
			$("#effectopen").change(function(event){
				var effect=$(this).val();
				alert(effect);
				if(effect=="No Effect") effect=false;
				$("div#effect-dialog").dialog("option","show",effect);
			});
			$("#effectclose").change(function(){
				var effect=$(this).val();
				if(effect == "No Effect") effect=false;
				$("div#effect-dialog").dialog("option","hide",effect);
			});			
			$("#open").click(function(event){
				$("#effect-dialog").dialog("open");
			});
		</script>

</body></html>

SANZ1991

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery UI学习笔记（4）

这里主要的讲解的是dialog,也就是对话框，对于对话框有许多特点，可以包含许多按钮和内容。 Content of the dialog box $("#dialog").dialog({ buttons:{"确定":function(){}, "取消":function(){} }, title:"我们的中国", cont
复制链接

扫一扫