您的位置：首页 > Web前端 > JQuery

jQuery dialog组件的使用(1.7以上版本)

2012-11-21 00:00 435 查看

jquery ui组件的使用一般都是包括两个部分：

定义标签;

初始化组件

dialog组件的使用

首先定义标签，例 “<div id="dd">你好</div>”,标签里的内容“你好”就是将来弹出对话框的内容，标签元素的内容可随意扩展,在定义标签时,一定要给个ID,目的就是将此元素标签与dialog对话框关联起来。注意：所定义的标签元素是隐藏的，只有在触发事件时，才会弹出标签定义的内容。

初始化dialog组件
$("#dd").dialog({
title:"消息",//对话框标题
autoOpen:false,//是否自动弹出，一般为false,不自动弹出
width:300,//对话框的宽度
height:200,//对话框的高度
minWidth:290,//对话框最小宽度
minHeight:160,//对话框最小高度
maxWidth:390,//对话框最大宽度
maxHeight:260,//对话框最大高度
position:["left","top"],//弹出对话框的位置
draggable:true,//是否可以拖动
resizable:true,//是否可以改变对话框的大小
closeOnEscape:false,//是否激活ESC关闭
modal:true //是否屏蔽窗口
});

触发对话框
触发对话框可以使任意一个事件，在此我以单击事件为例
例，“<div id='da'></div>”
在单击此元素是，触发对话框
$("#da").click(function(){
$("#dd").dialog("open");//打开对话框
}

<html>
<head>
<script src="jquery.ui.core.js"></script>
<script src="jquery.ui.widget.js"></script>
<script src="jquery.ui.mouse.js"></script>
<script src="jquery.ui.position.js"></script>
<script src="jquery.ui.resizable.js"></script>
<script src="jquery.ui.draggable.js"></script>
<script src="jquery.ui.sortable.js"></script>
<script src="jquery.ui.dialog.js"></script>
</head>
<body>
<div id="dd"><span>你好</span></div>
<div id="da"></div>
<script type="text/javascript">
$(function(){
$("#dd").dialog({
title:"",
autoOpen:false,
width:300,
height:200,
closeOnEscape:false,
draggable:true,
resizable:false,
modal:true,
position:["center","center"]
});

$("#da").click(function(){
$("#dd").dialog("open");
});
});
</script>
<body>
</html>

);

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航