jquery ui dialog弹出div层对话框

jQuery UI目前的版本已经更新到了1.8.7。

个人感觉和easyui相比起来，jQuery UI在界面的美观程度和可定制型更强一些。

所以再次将一些jQuery UI组件的用法说明一下，方便日后查阅。

也方面没接触jQuery UI的人能早日使用jQuery UI套件(一)首先来说jQuery UI使用频率较高dialog组件：dialog就是我们常说的弹出层，应用还是比较广泛的，比如：可以使用弹出层做登录、注册和消息提示等功能下面来详细说说dialog的使用方法在官方提供的官方文档和示例中有六种形式的dialog,但是前五种都是大同小异，包括在编写代码方面也仅仅是多设置两个属性而已，没什么太大的不同，先来看看使用jQuery UI组件的时候需要那些前期贮备工作。

首先将需要依赖的js文件导入到你的页面中。

需要依赖的文件如下：jquery-ui-1.8.7.custom.css这个是jQuery UI套件的CSS样式表，demos.css这个是jQuery UIdemo中用到的CSS样式，因为我用到了这些样式所以将它导入进来，如果大家不需要可以不导这个文件，jquery-1.4.4.min.js这个不用说了吧，jQuery的核心文件，没有它一切工作都无法开展。

切记一点：一定要在引入其他的js文件之前引入jquery-1.4.4.min.js文件，别问为什么，懂点jQuery的人都能想的到。

jquery-ui-1.8.7.custom.min.js这个是jQueryUI的核心js文件，也是必须的。

有了上述的引用后就可以在你的页面中使用jQuery UI了。

先看一个超级简单的DEMO：<div id="dialog" title="basic dialog"><p>这是一个采用默认样式的对话框</p></div>在页面中加入上边的一行代码，然后加入一个script标签对，在脚本写如下代码：$(function(){$("#dialog").dialog();});打开你的页面看一下吧，如果没什么意外你会看到一个类似这样的对话框简单吧，这就是一个弹出层，其中div的title被当作了dialog的title,右上角有关闭的xx，右下角则可以拖拽改变大小这就是一个默认的dialog，虽然我们没有为它指定高度和宽度，但是它有默认的值，在我们没有设定情况下dialog默认会弹出在屏幕的中央，大小也是有默认值的，可以改变大小，显示关闭按钮，这都是默认的样式，那么如果我们想自己定制一下dialog，不想让他这样显示该如何做？下面介绍一些属性和方法来改变一下这个dialog，用到的属性如下：autoOpen,modal,buttons，根据这些属性我们来定制一个不会自动打开(当点击按钮或者通过其他的事件来触发弹出dialog的事件)，并且带有遮罩(模式窗体)和按钮的dialogbuttons属性是一个复合属性，使用形式如下：buttons{ok:function(){点击按钮执行的事件},cancel:function(){点击按钮执行的事件}}其中ok是按钮显示的文本，而function是点击按钮后执行的事件。

实现了弹出DIV对话框实现了弹出DIV对话框[原]关于弹出DIV对话框，网上已经有许多代码可提供参考。

愚认为，许多代码具有以下两个缺点。

其一、代码都是通过DOM来实现的，很难对它进行修改以适应自己应用。

其二、这些弹出的DIV大多注重如何实现弹出的对话框，但并没有强调与页面的交互。

下面实现的弹出DIV对话框，代码简单，同时它通过向网页注册回调方法的，使得与页面的交互非常方便。

布局假设假设页面的布局如下，Content页面放面main.html下面的一个iframe里面。

Divdlg.js 由main.html加载。

这个布局可以使得js文件不必要在每次请求都需要加载，提高了速度。

但是，如果页面不是这样的布局，同样可以工作。

对话框实现原理实现图如下。

整个对话框显示子系统由半透明的遮罩层，对话框层，iframe页面容器，和对话框内容页面组成。

显示对话框：显示遮罩层和对话框层，并在iframe中加载对话框内容页面。

隐藏对话框：隐藏遮罩层和对话框层。

代码实现：接口对话框参数配置结构包括内容页面的URL，标题，高宽等一些定制。

此外，还包括一个回调函数用来与页面交互。

//// 对话框配置类的定义//var cfgClass = function(sUrl, sTitle, callBack, nDlgWidth, nDlgHeight){this.url = sUrl;this.title = sTitle;this.width = nDlgWidth;this.height = nDlgHeight;this.callBack = callBack;}方法createDlg：创建对话框openDialog：打开对话框hideDialog：关闭对话框onDialogCallBack：回调事件定义////生成对话框html//function createDlg() {// 遮罩层document.write('document.write(' \n');document.write('。

jquery实现点击弹出对话框HTML<div class="dialog" id="delallpartdialog"><div class="title"><img alt="点击可以关闭" src="/static/images/disk.png" width="30px" height="30px;">确认提⽰</div><div class="content"><span>你真的要删除所有分区吗？</span></div><div class="bottom"><input type="button" value="确定" class="btnok"><input type="button" value="取消" class="btnnoOk"></div></div>CSS.dialog{width:360px;border:1px #666 solid;position:absolute;display:none;z-index:101;}.dialog .title {background: #333;padding:10px; color: #fff; font-weight: bold; }.dialog .content {background: #fff;padding:25px;height: 60px;}.dialog .content img {float: left;}.dialog .content span {float: left;padding:10px;}.dialog .bottom {text-align: right;padding:10px 10px 10px 0px;background: #eee;}.dialog .btn {border: #666 1px solid;width:65px;}JQuery$(".delallpart").on("click",function () {$.ajax({url:"/osd/opt/delallpart",type: "POST",datatype:'json',data: {"action":"del_all","del_mount":"2"},beforeSend: function (xhr, settings) {xhr.setRequestHeader("X-CSRFToken", getCookie2('csrftoken'));},success: function (arg) {var div = $("#delallpartdialog");div.css("display", "block");div.css("left", 500).css("top", 500);}});});$(".dialog").on("click",".btnnoOk", function () {alert("not ok");$(this).parents(".dialog").css("display", "none");});$("#delallpartdialog").on("click",".btnok", function () {alert("ok!");});。

jQuery Dialog对话框事件用法实例分析这篇文章主要介绍了jQuery Dialog对话框事件用法,结合实例形式分析了Dialog对话框实现的静态提示类对话框、动态提示类对话框以及遮罩类对话框的概念、使用方法与相关注意事项,需要的朋友可以参考下本文实例讲述了jQuery Dialog对话框事件用法。

分享给大家供大家参考，具体如下：Dialog对话框事件对话框应用场景对话框是最常用、最实用的功能。

1）静态提示类对话框，对话框的内容是固定的2）动态提示类对话框，对话框内容是根据事件源变化的3）遮罩类对话框，对话框弹出时背景变灰并且不可选使用jQuery UI的Dialog 组件可以轻松实现上面三种效果Dialog组件的主要特点是可以拖动（Draggable），可以改变大小（Resizable）。

Dialog对话框的使用也十分简单，选中了一个元素后，可以通过对这个元素使用".dialog "让其变成一个对话框，通过传递各种options属性类修改对话框的各种行为。

通常一个对话框是一个div元素：弹出层下面的语句将使用默认的options属性生成一个对话框。

jQuery("#divTip").dialog ;执行完上面的语句后，这个div元素变成了一个可以拖动、可以拉伸的对话框。

当然这只是最简单的应用。

下面通过一个完整的实例来快速上手dialog对话框组件。

使用Dialog控件实现三种具体的弹出框。

一种是静态弹出层，即弹出层的内容是固定的。

一种是动态弹出层，即弹出层的内容根据事件的触发者而不同。

另外一种是常见的遮罩类弹出层，即弹出层显示后，页面上除了弹出层以外的元素都不能操作。

首先看一下页面上的几个元素的HTML片段。

Demo.共享同一个静态弹出层，弹出层内容固定：显示提示显示提示显示提示显示提示Demo.每个弹出层内容不同，弹出层内容存在事件源的元素属性中：红色绿色Demo.弹出IFrame元素页面上显示的元素，用来触发显示弹出层的事件。

弹出一个DIV层窗口<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>点击按钮弹出一个DIV层窗口</title><script type="text/javascript" src="jquery/jquery-1.11.1.min.js"></script><script type="text/javascript">$(function(){$("#imya").click(function(){alert("显示层窗口示例程序");$("#fade").show();$("#light").show();});});$(function(){$("#uduf").click(function(){alert("关闭层窗口");$("#fade").hide();$("#light").hide();});});</script><style>.black_overlay{display: none;position: absolute;top: 0%; <!-设置top、left、width、height使其在全窗口显示>left: 0%;width: 100%;height: 100%;background-color: black;z-index:1001;-moz-opacity: 0.8;opacity:0.5; <!-透明度，设置其值，可以看到层下的内容>filter: alpha(opacity=88);}.white_content {display: none;position: absolute;top: 25%; <!-调整top、left、width、height的比例，使其在中央显示>left: 25%;width: 50%;height: 50%;padding: 10px;border: 1px solid red;background-color: white;z-index:1002; <!-数字大的显示在前面>overflow: auto;}</style></head><body><h2>这是一个层窗口示例程序. </h2><div id="yz"><button id="imya">点击我测试一下</button></div><div id="fade" class="black_overlay"></div><div id="light" class="white_content"><h2>层窗口</h2><button id="uduf">关闭层窗口</button></div></body></html>。

jquery ui弹出div层对话框.以下是完整代码，保存到html文件，打开也可以预览效果：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><title>jquery ui弹出div层对话框--柯乐义</title><link rel="stylesheet"href="/keleyi/pmedia/jquery/ui/1.10.3/css/smoothness/jquery-ui.min.css"/><script type="text/javascript"src="/keleyi/pmedia/jquery-1.9.1.min.js"></script><script src="/keleyi/pmedia/jquery/ui/1.10.3/js/jquery-ui-1.10.3.min.js"type="text/javascript"></script><script type="text/javascript">function keleyidialog() {$("#dialog").dialog();}</script><style type="text/css">#dialog{display:none;}</style></head><body><div style="width:338px;height:100px;margin:10px auto;"><input type="button"onclick="keleyidialog()" value="点击我"/><a href="/a/bjac/5939d3b2c920ff6d.htm" target="_blank">原文</a><ahref="/keleyi/phtml/jui/dialog/1.htm">无动画</a><ahref="/keleyi/phtml/jui/dialog/2.htm">动画</a><a href="/keleyi/phtml/jui/dialog/3.htm">redmond</a><a href="/keleyi/phtml/jui/dialog/4.htm">sunny</a><br />点击按钮弹出对话框</div><div id="dialog" title="div层对话框"><p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p><p>柯乐义：这是一个弹出div层对话框，可用于显示信息。

jquery弹出框的⽤法⽰例（⼀）最近做⼀个项⽬，许多功能都是关于弹出框的，以前觉得弹出框就那⼀种，很容易实现，但是最近真的做起这个功能了，发现会有好多⾃⼰考虑不到的问题。

⽐如关于⼀些添加，删除，修改的弹出框，当添加⼀些⽤户的时候，弹出框⾥要提交⼀些关于⽤户的信息，设置密码等信息，当修改的时候，根据⽤户的名字和id号来修改密码等等。

例⼦如下：复制代码代码如下:<ul class="tabPanel clearfix"><li class="hover"><a href="" class="close"></a><div class="panelBox"><dl><dt id="dt1" contentid=".pwdTips">蓝枫前端</dt><dd>添加询盘【<a href="">10</a>】</dd><dd>跟踪询盘【<a href="">1000</a>】</dd></dl></div></li><li><a href="" class="close"></a><div class="panelBox"><dl><dt id="dt2" contentid=".pwdTips">蓝枫前端</dt><dd>添加询盘【<a href="">10</a>】</dd><dd>跟踪询盘【<a href="">1000</a>】</dd></dl></div></li><li><a href="" class="close"></a><div class="panelBox"><dl><dt id="dt3" contentid=".pwdTips">蓝枫前端</dt><dd>添加询盘【<a href="">10</a>】</dd><dd>跟踪询盘【<a href="">1000</a>】</dd></dl></div></li><li><a href="" class="close"></a><div class="panelBox"><dl><dt contentid=".pwdTips">蓝枫前端</dt><dd>添加询盘【<a href="">10</a>】</dd><dd>跟踪询盘【<a href="">1000</a>】</dd></dl></div></li><li><a href="" class="close"></a><div class="panelBox"><dl><dt id="" contentid=".pwdTips">蓝枫前端</dt><dd>添加询盘【<a href="">10</a>】</dd><dd>跟踪询盘【<a href="">1000</a>】</dd></dl></div></li><li><div class="panelBox addpanelBox"><a class="addPanelBtn" contentid="div#pwdRest">添加</a></div></li></ul>弹出框内容：复制代码代码如下:<div class="pwdTips" style="display:none;" id="pwdRest"><a class="closeBtn" href="javascript:;"></a><div class="traDBox"><div class="row" id="userName"><div class="label" >⽤户名：</div><div class="cell"><input type="text" class="text" id="name" name="" value=""></div></div><div class="row"><div class="label" >营销客服：</div><div class="cell"><input type="text" class="text" id="opename" name="" value=""></div> <input type="hidden" name="" id="onLineId"/></div><div class="row"><div class="label">登录密码：</div><div class="cell"><input type="text" class="text" id="" name="" value=""></div></div><div class="row"><div class="label">确认密码：</div><div class="cell"><input type="text" class="text" id="" name="" value=""></div></div><div class="row"><div class="dialogBtn"><button type="submit" class="diaSmtBtn">确认</button><button type="button" class="diaSmtRst">取消</button></div></div></div></div>实现的弹出框的js复制代码代码如下:$(function(){var $window = $(window),$doc = $(document),$body = $('body');//关于管理员添加删除的js代码var tabLi=$(".tabPanel").find("li");tabLi.hover(function(){$(this).addClass("hover").siblings().removeClass("hover");},function(){})/*弹出框定位*/$(window).scroll(function() {var pwdTips =$(".pwdTips");var height=pwdTips.height();var width=pwdTips.width();var bodyHieght=$(window).height() ;var bodyWidth=$(window).width() ;if(!pwdTips.is(":hidden")){pwdTips.css({position: "fixed",top: (bodyHieght-height)/2,left:(bodyWidth-width)/2});}});/*弹出框定位结束*//*弹出框半透明背景的设置*/var bgShadow = function(zindex) {zindex = zindex?zindex:999;var _bg = $('div.pwdTipsBg'),bg_html = '<div class="pwdTipsBg"></div>';if(_bg.length === 0) {_bg = $(bg_html);}$body.append(_bg);_bg.css({position : 'absolute',top : '0px',left : '0px',width : $window.scrollLeft()+$window.width()+'px', height : $doc.height(),'z-index' : zindex});return _bg;};/*弹出框半透明背景的设置*//*绑定事件*/var bindClick = function(obj,handlerEvent){obj.bind("click",function(e){e.preventDefault();bgShadow(1001);var select=$(this).attr('contentid');var onLineId=$(this).attr('id');var pwdTips=$(select);if(handlerEvent!=null){handlerEvent($(this));}pwdTips.show();pwdTips.find(".closeBtn,.diaSmtRst").click(function(){ pwdTips.hide();var _bg = $('div.pwdTipsBg');_bg.remove();});pwdTips.find('#onLineId').val(onLineId);});};var show=tabLi.find("dt"),addPanelBtn=$(".addPanelBtn"),clickBtn=$(".clickBtn");var setValue= function(obj){if($(obj).is('.addPanelBtn')){$('#opename').attr('value',"");$('#pwdRest').find('#userName').show();}else{$('#pwdRest').find('#userName').hide();$('#opename').attr('value',obj.text());$("input.shareId").attr('value',obj.attr('id'))}}$(function(){bindClick(show,setValue);bindClick(addPanelBtn,setValue);bindClick(clickBtn,setValue);});})所有的弹出内容根据情况做判断显⽰，获取相应的值，先根据触发的类型判断是修改密码或者添加⽤户客服，然后再显⽰相应的弹出内容。

ligerui一个dialog弹div的简单例子原理:• 为啥要弹div,因为iframe这种页面弹窗，多少涉及到内存泄漏，多次弹窗之后浏览器内存占用居高不下• 弹div没啥技术要点，关闭事件是用hide()来隐藏，初始化div隐藏外面多套一层div来控制• 这个例子的保存和删除都没有提交数据库，只是前台grid改写• 弹窗div里面的文本框有用到非空验证• 第二次之后打开dialog用show，避免重复创建liger对象<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ":///TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=":///1999/xhtml" ><head><title></title><link href="../lib/ligerUI1.1.9/skins/aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" /><link href="../lib/ligerUI1.1.9/skins/ligerui-icons.css" rel="stylesheet" type="text/css" /><script src="../lib/jquery/jquery-1.5.2.min.js" type="text/javascript"></script><script src="../lib/ligerUI1.1.9/js/core/base.js" type="text/javascript"></script><script src="../lib/ligerUI1.1.9/js/ligerui.min.js" type="text/javascript"></script><script src="../lib/jquery-validation/jquery.validate.min.js" type="text/javascript"></script><script src="../lib/jquery-validation/jquery.metadata.js" type="text/javascript"></script><script src="../lib/jquery-validation/messages_cn.js" type="text/javascript"></script><script type="text/javascript">//-----------------------全局变量------------------------------var grid=null;var dlgedit=null;var Validator = null;var edittype=null;var rowi=0;$(function () {//--------------------grid定义-------------------------------grid=$("#maingrid").ligerGrid({checkbox: true,rownumbers:true,toolbar: { items: [{ text: '新增',id:'add', icon:'add',click: itemclick}]},columns:[{ display: '编号', name:'AREAID'},{ display: '名称', name:'AREANAME'},{ display: '操作', render:function(r,i) {return '<a href="#" onclick="f_edit(\'modify\','+i+')">编辑</a>';}}],url: "/service/DataHandler.ashx?View=arealist",usePager:false});//--------------------form验证-------------------------------$.metadata.setType("attr", "validate");Validator = $("form").validate({debug: false,errorPlacement: function (l, dom){dom.ligerTip({ content: l.html(), appendIdTo: l});},success: function (l){l.ligerHideTip();}});$("form").ligerForm();$("#pageloading").hide();});//-----------------------------toolbar 按钮事件----------------------------function itemclick(item){if(item.id){switch (item.id)case "add":edittype="add"; f_edit("add",0);return; }}}//--------------------------保存事件，更新grid-------------------------------function f_save(){$("form").append($(".l-dialog"));if (!Validator.form()) return false;if (edittype=="add")grid.addRow({AREAID : $("#txtid").val(),AREANAME: $("#txtname").val()});else{var ss=grid.getRowObj(rowi);grid.updateRow(ss,{AREAID : $("#txtid").val(),AREANAME: $("#txtname").val()});}dlgedit.hide();}//-------------------------弹窗事件---------------------------------function f_edit(type,rowindex){if (type!="add"){$("#txtid").val(grid.getRow(rowindex).AREAID);$("#txtname").val(grid.getRow(rowindex).AREANAME);}else{$("#txtid").val("");$("#txtname").val("");}edittype=type;rowi=rowindex;if (dlgedit==null){dlgedit=$.ligerDialog.open({target:$("#divedit"),buttons: [ { text: '保存', onclick: function (i, d) { f_save(); }},{ text: '关闭', onclick: function (i, d) { $("input").ligerHideTip(); d.hide(); }}]});$(".l-dialog-close").bind('mousedown',function() //dialog右上角的叉{$("input").ligerHideTip();dlgedit.hide();});$(".l-dialog-title").bind('mousedown',function() //移动dialog时,隐藏tip{$("input").ligerHideTip();});}else{dlgedit.show();}}</script></head><body style="padding:20px 20px 20px 20px; overflow:hidden;"><div class="l-loading" style="display:block" id="pageloading" ></div><div style="width:80%;"><h2>这是一个dialog弹div的简单例子(1.1.9)</h2><div style="padding-left:20px"><br /><li>• 为啥要弹div,因为iframe这种页面弹窗，多少涉及到内存泄漏，多次弹窗之后浏览器内存占用居高不下</li> <li>• 弹div没啥技术要点，关闭事件是用hide()来隐藏，初始化div隐藏外面多套一层div来控制</li><li>• 这个例子的保存和删除都没有提交数据库，只是前台grid改写</li><li>• 弹窗div里面的文本框有用到非空验证</li><li>• 第二次之后打开dialog用show，避免重复创建liger对象</li></div><hr /><div id="maingrid"></div></div><form id="form1" name="form1"><div style=" display:none"><div id="divedit">编号<input id="txtid" name="txtid" ltype="text" runat="server" type="text" validate="{required:true}" />名称<input id="txtname" name="txtname" ltype="text" runat="server" type="text" validate="{required:true}" /></div></div></form></body></html>。

jquery dialog用法
jQuery Dialog 是一个用于弹出模态对话框的插件，它可以让你在HTML 文件中插入任何内容，最常用的用法是显示消息和提醒。

基本用法：
1、实例化：首先你要为对话框添加一个【div】容器：
<div id="dialog"title="消息框">。

这里是要显示的内容。

</div>。

2、初始化：然后在你的脚本中引入jQuery和jquery-ui，在你的脚
本中初始化对话框：
$('#dialog').dialog(。

autoOpen: false,。

width: 400,。

modal: true。

});。

3、打开：在你的脚本中打开对话框，只需要调用open方法：
$('#dialog').dialog(‘open’)；
4、关闭：使用close方法可以关闭对话框：
$('#dialog').dialog(‘close’)；
5、自定义事件：你可以为对话框添加一些自定义的事件处理函数：
$('#dialog').dialog(。

beforeClose: function()。

alert('要关闭对话框吗？');。

}。

});。

以上就是关于jQuery dialog的用法，它可以让你轻松快捷地创建一个模态对话框。

一.摘要本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍.本文是实战篇. 使用jQueryUI完成制作网站的大部分常用功能.二.前言经过公司内部收集, 整理了一些经常使用javascript实现的功能. 实现这些功能的主角不是让人眼花缭乱的jQuery插件, 而是jQuery UI.如果你还在为了一个小小的特效而去下载并安装插件, 发现Bug还没有人替你解决. 记住插件是我们没有办法的最后选择.使用插件有太多的坏处:1.不利于维护2.增加页面大小3.不利于成员间交流共享,具有学习成本.4.不够健壮, 不能保证插件版本一直更新并修复所有问题.下面就引入今天的主角:jQuery UI三.jQuery UIjQuery UI 是jQuery 的一部分, 是在jQuery之上的一套专门用于UI交互的类库. 使用jQuery UI 可以实现底层交互, 各种高级特效, 动画, 并且可定制主题.我们可以用它轻松的构建高度交互的Web应用程序.官方首页:/下载:/download示例和文档:/demos/皮肤:/themeroller/jQuery UI 的在线网站十分强大. 首先就是在下载时可以组装自己想要的功能定制下载:并且针对各种控件不仅提供了详细的参数说明和实例, 还可以随时更换实例的皮肤:本文主要讲解实例, 大家可以通过实例代码快速上手jQuery UI. 使用jQuery UI我们可以再不借助其他插件的情况下完成大部分页面应用, 说其是一个官方的超级UI插件也不为过. 包含所有功能的jQuery UI类库文件为188K, 启用Gzip压缩后是45K. 虽然较大但是一次加载全网站获益.而且45K大小在当今的互谅网时代还算可以接受.()目前还没有jQuery UI的中文教程. 因为本文是实战篇, 所以不会仔细讲解基础内容. 在后面的章节中我会加入jQuery UI的基础教程.争取成为中文jQuery UI第一教程.四. 准备工作我将所有相关的文件, 包括各种类库文件, Theme模板放置在如下路径:/JSLib/此路径开通了目录浏览, 可以直接查找需要的文件. 目录组织结构按照本系列: (八) 插播:jQuery实施方案中介绍的方案组织.另外也可以从Google上引用文件, Google的CDN速度更快也更有保证, 参见: Google's CDN 本文的实例的所有引用都使用WebConfig.ResourceServer 这个属性:public class WebConfig{public static string ResourceServer = @"http://www.dotn /";}五.弹出层对话框弹出框是最常用最实用的功能. 先来看一下艺龙网上的一些应用场景.1. 艺龙网应用场景举例(1) 静态提示类弹出层. 弹出层的内容是固定的.(2) 动态提示类弹出层. 弹出层内容是根据事件源变化的.(3)遮罩类弹出层. 弹出时背景变灰并不可点击.2. 应用实例使用jQuery UI 的Dialog 组件. 我以轻松实现上面三种效果.Dialog组件的主要特点是可以拖动(Draggable), 可以改变大小(Resizable) .示例完整代码如下:<%@ Page Language="C#" %><!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional/ /EN""/TR/xhtml1/DTD/xhtml1-transitional. dtd"><html xmlns="/1999/xhtml"><head id="Head1"runat="server"><title>jQuery UI - 弹出层应用实例 Dialog</title><!--black-tie,blitzer,blitzer,dot-luv,excite-bike,hot-sneaks,humanity,mint-choc,redmond,smoothness,south-street, start,swanky-purse,trontastic,ui-darkness,ui-lightness,vad er--><link rel="stylesheet"type="text/css"href="<%=WebConf ig.ResourceServer +"/JsLib/jquery/themes/redmond/style.css "%>"/><script type="text/javascript"src="<% =WebConfig.Resou rceServer %>/JsLib/jquery/jquery-min-lastest.js"></script><script src="<% =WebConfig.ResourceServer %>/JsLib/jque ry/ui/jquery-ui-all-min-lastest.js"type="text/javascript"></script><% if (false){%><script src="~/js/jquery-vsdoc-lastest.js" type=" text/javascript"></script><% }%><script type="text/javascript">/*========== 必须放在头部加载的语句块. 尽量避免使用 == ========*/</script><style type="text/css"></style></head><body><!-- Demo 静态提示类弹出层 --><div class="ui-widget ui-widget-content ui-corner-all" style="width: 700px; padding: 5px;"><h3>Demo. 共享同一个静态弹出层, 弹出层内容固定: </h3><div><span id="spanShowTip1">显示提示</span>&nbsp;&nb sp; <span id="spanShowTip2">显示提示</span>&nbsp;&nbsp;<span id="spanShowTip3">显示提示</span>&nbsp;&nb sp; <span id="spanShowTip4">显示提示</span>&nbsp;&nbsp;</div></div><br /><br /><!-- Demo 动态提示类弹出层 --><div class="ui-widget ui-widget-content ui-corner-all" style="width: 700px; padding: 5px;"><h3>Demo. 每个弹出层内容不同, 弹出层内容存储在事件源的元素属性中: </h3><div><span id="spanShowDataTip1" data="颜色是红色">红色</span>&nbsp;&nbsp;<span id="spanShowDataTip2" data="颜色是绿色">绿色</span>&nbsp;&nbsp;</div></div><br /><br /><!-- Demo 遮罩类弹出层 --><div class="ui-widget ui-widget-content ui-corner-all" style="width: 700px; padding: 5px;"><h3>Demo. 弹出IFrame </h3><div><input type="button" id="btnShowIframe" name="b tnShowIframe" value="显示弹出层"/></div></div><!-- 提示类弹出层 --><div id="divTip" title="自定义标题"><p>弹出层</p></div><!-- 遮罩类弹出层 --><div id="divIframe" title="iFrame弹出层" style="text-al ign:center;"><iframe src="" width="450px" he ight="230px"></iframe></div><script type="text/javascript">/*==========用户自定义方法==========*//*==========事件绑定==========*/$(function(){//静态提示类弹出层$("span[id^=spanShowTip]").css("cursor", "point er").click(function(event){$("*").stop();event.stopPropagation();var top = $(event.target).offset().top + 20;var left = $(event.target).offset().left;$("#divTip").dialog("option", "position", [l eft, top]);$("#divTip").dialog("open");});//动态提出类弹出层$("span[id^=spanShowDataTip]").css("cursor", "p ointer").click(function(event){$("*").stop();$("#divTip").dialog("close");event.stopPropagation();var top = $(event.target).offset().top + 20;var left = $(event.target).offset().left;$("#divTip").html($(event.target).attr("dat a"));$("#divTip").dialog("option", "position", [l eft, top]);$("#divTip").dialog("open");});//遮罩类弹出层$("#btnShowIframe").click(function(event){event.preventDefault();event.stopPropagation();$("#divIframe").dialog("open");});//单击自身取消冒泡$("#divTip, #divIframe").bind("click", function (event){event.stopPropagation();});//document对象单击隐藏所有弹出层$(document).bind("click", function(event){$("#divTip").dialog("close");$("#divIframe").dialog("close");});});/*==========加载时执行的语句==========*/$(function(){//初始化提示类弹出层$("#divTip").dialog({show: null,bgiframe: false,autoOpen: false});//初始化遮罩类弹出层$("#divIframe").dialog({show: null,bgiframe: false,autoOpen: false,width: 500,height: 300,draggable: true, resizable: false,modal: true});});</script></body></html>效果如图:静态提示类弹出层动态提示类弹出层:遮罩类弹出层:3.关键点讲解(1)计算弹出层位置提示类弹出框最重要的是计算弹出框的位置. 通过事件对象获取到事件源, 使用offset()函数计算事件源相对于document的位置:var top = $(event.target).offset().top;var left = $(event.target).offset().left;需要将弹出层放在Body元素中的第一层.即父类因为是相对于document, 即页面左上角的位置, 所以需要将弹出层放在就是body. 如果包含在其他元素中, 需要确定任何一个父类的position样式设置为了relative.计算出来的top和left是事件源的位置, 在此位置显示会将事件源对象遮盖住. 所以通常需要手工做一些偏移, 比如top+20.(2) 取消冒泡和浏览器默认行为如果我们为document对象绑定了单击后关闭弹出层的事件, 那么就一定要取消事件的冒泡. 使用event 对象的stopPropagation()方法可以取消冒泡.event.stopPropagation();对于具有默认行为的元素,比如提交按钮的提交表单行为, <a>元素的超链接行为等, 我们如果在这些元素上应用事件, 还需要取消它们的默认行为:event.preventDefault();(3) 设置动画效果与取消动画通过设置dialog的配置项的show属性, 可以设置显示dialog时候的动画效果:$('.selector').dialog({ show: 'slide' });show默认为null即无动画, 可以是使用下列值:'blind', 'clip', 'drop', 'explode', 'fold', 'puff', 'slide', 'scale', 'size', 'pulsate'.对于这些动画的效果, 可以在此页观看:/demos/show/当一个动画效果执行时, 如果用户在此对这个元素进行操作, 就会出现各种问题, 比如定位不准确等. 所以如果应用了动画, 我们在对其操作时需要使用stop()函数来停止动画, 通常是停止虽有元素的动画:$("*").stop();但是即使停止了动画再进行操作, 如果操作的太快也容易产生问题. 所以至于是否使用动画需要经过权衡决定.(4) 动态提示类弹出层的数据传递动态提示类弹出层的数据是不同的, 本文实例使用的是将数据存储在元素属性data上:<span id="spanShowDataTip1"data="颜色是红色">红色</span>这是一种简单直观的方式. 比较容易编程实现(尤其是在使用MVC编程模型的时候.)还有一种常用方式是使用javascript变量存储数据.这两种方式在第5章时有过讲解:/zhangziqiu/archive/2009/05/06/jQuery-Learn-5.html(5)更换主题大家注意实例中的弹出层没有为其编辑任何样式, 但是显示出来后已经被美化过了. 这是因为我引用了jQ uery UI的主题:<!--black-tie,blitzer,blitzer,dot-luv,excite-bike,hot-sneaks,humanity,mint-choc,redmond,smoothness,south-street, start,swanky-purse,trontastic,ui-darkness,ui-lightness,vader-->ig.ResourceServer +"/JsLib/jquery/themes/redmond/style.css "%>"/>注释中有很多的主题, 只需要将引用路径中的"redmond"改为其中任何一个, 弹出层的样式会立刻发生变化.VS中有一个Bug, 就是针对link标签, href中的语句块编译有问题, 某些情况下<%%>不被编辑解析. 所以我使用上面代码中的方式构造href属性值.()可以在下面的地址查看各个主题的效果:/themeroller/#themeGallery六.Tab标签不刷新页面, 在页面中的不同标签间切换:本实例通过jQuery UI的Tabs组件实现. Tabs组件的使用与dialog一样十分简单, 默认的配置即可实现最简单的tab, 通过设置更多的options可以实现更复杂的应用.1.应用实例源代码:<%@ Page Language="C#" %><!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional. dtd"><html xmlns="/1999/xhtml"><head id="Head1"runat="server"><title>jQuery UI - 弹出层应用实例 Dialog</title><!--black-tie,blitzer,blitzer,dot-luv,excite-bike,hot-sneaks,humanity,mint-choc,redmond,smoothness,south-street, start,swanky-purse,trontastic,ui-darkness,ui-lightness,vader-->ig.ResourceServer +"/JsLib/jquery/themes/redmond/style.css "%>"/><script type="text/javascript"src="<% =WebConfig.Resou rceServer %>/JsLib/jquery/jquery-min-lastest.js"></script> <script src="<% =WebConfig.ResourceServer %>/JsLib/jque ry/ui/jquery-ui-all-min-lastest.js"type="text/javascript"></script><% if (false){%><script src="~/js/jquery-vsdoc-lastest.js" type=" text/javascript"></script><% }%><script type="text/javascript">/*========== 必须放在头部加载的语句块. 尽量避免使用 == ========*/</script><style type="text/css"></style></head><body><!--Demo.默认Tab与Ajax Tab --><div id="tabs1" style="width:300px;"><ul><li><a href="#tabs1-1">One</a></li><!-- Ajax Tab --><li><a href="TabData.htm">Two</a></li><li><a href="#tabs1-3">Three</a></li></ul><div id="tabs1-1"><p>Tab1内容</p></div><div id="tabs1-3"><p>Tab3内容</p></div></div><br /><br /><br /><!--Demo. 可折叠的Tab --><div id="tabs2" style="width: 300px;"><ul><li><a href="#tabs2-1">One</a></li> <li><a href="#tabs2-2">Two</a></li> <li><a href="#tabs2-3">Three</a></li> </ul><div id="tabs2-1"><p>Tab1内容</p></div><div id="tabs2-2"><p>Tab2内容</p></div><div id="tabs2-3"><p>Tab3内容</p></div></div><br /><br /><br /><!--Demo. 鼠标滑动即切换的Tab --><div id="tabs3" style="width: 300px;"><ul><li><a href="#tabs3-1">One</a></li> <li><a href="#tabs3-2">Two</a></li> <li><a href="#tabs3-3">Three</a></li> </ul><div id="tabs3-1"><p>Tab1内容</p></div><div id="tabs3-2"><p>Tab2内容</p></div><div id="tabs3-3"><p>Tab3内容</p></div></div><script type="text/javascript">/*==========用户自定义方法==========*//*==========事件绑定==========*/$(function(){});/*==========加载时执行的语句==========*/ $(function(){//默认Tabs$("#tabs1").tabs();//可折叠的Tabs$("#tabs2").tabs({collapsible: true});//鼠标滑动即切换的Tabs$("#tabs3").tabs({event: "mouseover"});});</script></body></html>效果:1. 默认设置的Tabs, Two标签内容使用Ajax获取2.再折叠tab3.鼠标滑动即切换的tab2.要点讲解(1) 注意Tabs中的HTML结构.使用ul构建标签. 内容div一定要和标签关联, 没有关联的div将不被处理直接显示.容器中.内容放入指定容器中(2) 使用Ajax可以不指定内容容器, 但是也可以将Ajax内容放入指定<li><a href="hello/world.html"title="Todo Overview"> ... </a></li><div id="Todo_Overview"> ... </div>(3) 活用事件tab有很多事件:select, load, show, add, remove, enable, disable使用这些事件可以完成很多复杂任务. 需要注意事件的签名:$('#example').bind('tabsselect', function(event, ui) { // Objects available in the function context:ui.tab // anchor element of the selected (clicked)tabui.panel // element, that contains the selected/clicked tab contentsui.index // zero-based index of the selected (clicked) tab});第一个是事件对象, 第二个ui对象是传递的额外参数, 我们可以获取tab对象, tab所在容器和tab的索引值.比如我们可以在事件中做验证:$('#example').tabs({select: function(event, ui) {var isValid = ... // form validation returning trueor falsereturn isValid;}});或者当添加一个tab时立刻切换到选中状态:var $tabs = $('#example').tabs({add: function(event, ui) {$tabs.tabs('select', '#' + ui.panel.id);}});活学活用, 更多应用大家也可以参见tab组件的官方文档:/demos/tabs七. 手风琴菜单使用jQuery UI的accordion组件可以实现手风琴菜单. 效果见下图.accordion文档地址: /demos/accordion/1.实例效果2.实例代码<%@ Page Language="C#" %><!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional/ /EN""/TR/xhtml1/DTD/xhtml1-transitional. dtd"><html xmlns="/1999/xhtml"><head id="Head1"runat="server"><title>jQuery UI - 手风琴菜单应用实例 Accordion </title> <!--black-tie,blitzer,blitzer,dot-luv,excite-bike,hot-sneaks,humanity,mint-choc,redmond,smoothness,south-street, start,swanky-purse,trontastic,ui-darkness,ui-lightness,vad er--><link rel="stylesheet"type="text/css"href="<%=WebConf ig.ResourceServer +"/JsLib/jquery/themes/redmond/style.css "%>"/><script type="text/javascript"src="<% =WebConfig.Resou rceServer %>/JsLib/jquery/jquery-min-lastest.js"></script> <script src="<% =WebConfig.ResourceServer %>/JsLib/jque ry/ui/jquery-ui-all-min-lastest.js"type="text/javascript"></script><% if (false){%><script src="~/js/jquery-vsdoc-lastest.js" type=" text/javascript"></script><% }%><script type="text/javascript">/*========== 必须放在头部加载的语句块. 尽量避免使用 == ========*/</script><style type="text/css">body{font-size: 12px;}</style></head><body><!-- Demo. 默认配置的Accordion菜单 --><div style="width: 300px; float:left; margin-left:20px; "><div id="accordion1"><h3><a href="#">菜单1</a></h3><div>菜单1的内容<br />菜单1的内容<br />菜单1的内容<br />菜单1的内容<br />菜单1的内容<br />菜单1的内容<br />菜单1的内容<br /></div><h3><a href="#">菜单2</a></h3><div>菜单2的内容</div><h3><a href="#">菜单3</a></h3><div>菜单3的内容</div></div></div><!-- Demo. 取消自动高度, 可折叠 --><div style="width: 300px; float: left; margin-left: 20p x;"><div id="accordion2"><h3><a href="#">菜单1</a></h3><div>菜单1的内容<br />菜单1的内容<br />菜单1的内容<br />菜单1的内容<br />菜单1的内容<br />菜单1的内容<br />菜单1的内容<br /></div><h3><a href="#">菜单2</a></h3><div>菜单2的内容</div><h3><a href="#">菜单3</a></h3><div>菜单3的内容</div></div></div><!-- Demo. 鼠标滑动触发, 自定义图标 --><div style="width: 300px; float: left; margin-left: 20p x;"><div id="accordion3"><h3><a href="#">菜单1</a></h3><div>菜单1的内容<br />菜单1的内容<br />菜单1的内容<br />菜单1的内容<br />菜单1的内容<br />菜单1的内容<br />菜单1的内容<br /></div><h3><a href="#">菜单2</a></h3><div>菜单2的内容</div><h3><a href="#">菜单3</a></h3><div>菜单3的内容</div></div></div><script type="text/javascript">/*==========用户自定义方法==========*//*==========事件绑定==========*/$(function(){});/*==========加载时执行的语句==========*/$(function(){//默认配置的Accordion菜单$("#accordion1").accordion();//取消自动高度, 可折叠$("#accordion2").accordion({autoHeight:false,collapsible: true});//鼠标滑动触发, 自定义图标$("#accordion3").accordion({icons: {header: "ui-icon-circle-arrow-e", headerSelected: "ui-icon-circl e-arrow-s"},event: "mouseover"});});</script></body></html>3. 关键点讲解(1) 注意高度设置过小问题当包含accordion控件的容器高度设计过小时, 在FireFox3中在此容器后面的内容会被accordion控件部分遮盖. 在IE中没有此问题. 经检查是因为容器高度小于菜单高度导致. 所以我们在应用时应当注意不要将容器高度设置过小.(2) 部分关键属性autoHeight: 设置是否自动将内容高度设置为容器高度.collapsible: 设置是否可折叠一般上面两个配合使用, 以为折叠后肯定会改变菜单高度, 会导致autoHeight设置为true无效.更多属性和事件使用请参阅官方文档.八.总结本章简单介绍了jQueryUI, 并且使用jQuery UI完成了弹出层,tabs,手风琴菜单的应用实例. 使用jQu ery UI可以不需要额外寻找插件. 并且实现简单.但是有些功能是必须使用插件完成的. 下一张讲解两个插件实例: 自动完成插件AutoComplete 和表单验证插件jQuery Validate.本章源代码下载:/zhangziqiu/Code-jQueryStudy-10.rar。