Jquery UI Dialog_.NET_编程开发_程序员俱乐部

中国优秀的程序员网站程序员频道CXYCLUB技术地图
热搜:
更多>>
 
您所在的位置: 程序员俱乐部 > 编程开发 > .NET > Jquery UI Dialog

Jquery UI Dialog

 2012/6/29 16:40:51  zwllxs  程序员俱乐部  我要评论(0)
  • 摘要:1.官方地址jquery.ui.dialog是一个非常灵活的模式框,它的官方地址为:http://docs.jquery.com/UI/DialogAPIhttp://jqueryui.net/dialog/2.文件引用要使用jquery.ui.dialog,需要引用两个文件,1个是js,另外1个是css在contentpage中添加<scripttype="text/javascript"src="/Content/ui.js"></script>
  • 标签:jQuery
1. 官方地址

jquery.ui.dialog是一个非常灵活的模式框,它的官方地址为: http://docs.jquery.com/UI/Dialog
API http://jqueryui.net/dialog/

2. 文件引用

要使用jquery.ui.dialog,需要引用两个文件,1个是js,另外1个是css
在contentpage中添加
<script type="text/javascript" src="/Content/ui.js"></script>
在masterpage中添加
<link href="jquery-ui.css" rel="stylesheet" type="text/css">

3. 使用方法

jquery.ui.dialog相比thinkbox要有优势,thinkbox是在$.ready中指定的,导致不能灵活的扩展弹出层的弹出时机,针对一个逻辑判断,一种情况下弹出,另外一种不弹出,thinkbox就缺乏应变能力,而jquery.ui.dialog()采用 $('..').dialog(..);的方式使得弹出更加灵活
1)弹出简单的对话框
$("#dialog").dialog();
2)弹出模式对话框
$("#dialog").dialog({ modal: true });
3)弹出模式对话框,并有遮罩效果
$("#dialog").dialog({ modal: true, overlay: { opacity: 0.5, background: "black" } });
4)带确定与取消按钮
$("#dialog").dialog({ buttons: { "Ok": function() { alert("Ok"); }, "Cancel": function() { $(this).dialog("close"); } } });
5)如何关闭对话框
$("#dialog").dialog("close");

发表评论
用户名: 匿名