jquery dialog 详解
82550495 2012-09-07
还是先看例子吧。另外如果要拖动、改变dialog的大小的话要加上ui.draggble.js和ui.resizable.js
<!DOCTYPEhtml>
<html>
<head>
<linktype="text/css"href="http://jqueryui.com/latest/themes/base/ui.all.css"rel="stylesheet"/>
<scripttype="text/javascript"src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<scripttype="text/javascript"src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<scripttype="text/javascript"src="http://jqueryui.com/latest/ui/ui.dialog.js"></script>
<script>
$("#dialog").dialog({autoOpen:false,buttons:{"确定":function(){$(this).dialog("close");}},closeOnEscape:true,hide:"slide",modal:true,title:"对话框"}).dialog("open");
</script><div id="dialog" title="Dialog Title">你是个猪头！</div>
1属性
1.11autoOpen，这个属性为true的时候dialog被调用的时候自动打开dialog窗口。当属性为false的时候，一开始隐藏窗口，知道.dialog("open")的时候才弹出dialog窗口。默认为：true。
1.12初始化例：请注意，$('.selector')是dialog的类名，在本例中.selector=#dialoag,以后不再说明。
$('.selector').dialog({autoOpen:false});
1.13初始化后，得到和设置此属性例：
//获得</p>
<p>varautoOpen=$('.selector').dialog('option','autoOpen');</p>
<p>//设置</p>
<p>$('.selector').dialog('option','autoOpen',false);</p>
<p><strong>1.21bgiframe
</strong>
默认为false
，Whentrue,thebgiframepluginwillbeused,tofixtheissueinIE6
whereselectboxesshowontopofotherelements,regardlessofzIndex.
Requiresincludingthebgiframeplugin.Futureversionsmaynotrequirea
separateplugin.暂时没有弄明白是做什么用的。谁知道的话，请告诉我啊。</p>
<p>补充说明：bgiframe用来设置dialog和select等层控件的相对位置`````
不设置的时候,就会出现select等控件挡在你的dialog上面
，在IE6中。</p>
<p>1.22初始化例：</p>
<p>$('.selector').dialog({bgiframe:true});</p>
<p>1.23初始化后，得到和设置：</p>
<p>//获取</p>
<p>varbgiframe=$('.selector').dialog('option','bgiframe');</p>
<p>//设置</p>
<p>$('.selector').dialog('option','bgiframe',true);</p>
<p><strong>1.31buttons
</strong>
显示一个按钮，并写上按钮的文本，设置按钮点击函数。默认为{}，没有按钮。</p>
<p>最上面的例子中已经有buttons属性的用法，请注意。</p>
<p>1.32初始化例：</p>
<p>$('.selector').dialog({buttons:{"Ok":function(){
$(this).dialog("close");}}});</p>
<p>1.33初始化后，得到和设置：</p>
<p>//获取</p>
<p>varbuttons=$('.selector').dialog('option','buttons');</p>
<p>//设置</p>
<p>$('.selector').dialog('option','buttons',{"Ok":function(){
$(this).dialog("close");}});</p>
<p><strong>1.41closeOnEscape
</strong>
为true的时候，点击键盘ESC键关闭dialog，默认为true；</p>
<p>1.42初始化例：</p>
<p>$('.selector').dialog({closeOnEscape:false});</p>
<p>1.43初始化后，得到和设置：</p>
<p>//获取</p>
<p>varcloseOnEscape=$('.selector').dialog('option','closeOnEscape');</p>
<p>//设置</p>
<p>$('.selector').dialog('option','closeOnEscape',false);</p>
<p><strong>1.51dialogClass
</strong>
类型将被添加到dialog，默认为空</p>
<p>1.52初始化例：</p>
<p>$('.selector').dialog({dialogClass:'alert'});</p>
<p>1.53
初始化后，得到和设置：</p>
<p>
//获取</p>
<p>vardialogClass=$('.selector').dialog('option','dialogClass');</p>
<p>//设置</p>
<p>$('.selector').dialog('option','dialogClass','alert');</p>
<p><strong>1.61draggable、resizable
</strong>
:
draggable是否可以使用标题头进行拖动，默认为true，可以拖动;resizable是否可以改变dialog的大小，默认为true，可以改
变大小。</p>
<p>1.62初始化例：</p>
<p>$('.selector').dialog({draggable:false,resizable:false});</p>
<p>1.63初始化后，得到和设置：</p>
<p>//获取</p>
<p>vardraggable=$('.selector').dialog('option','draggable');</p>
<p>//设置</p>
$('.selector').dialog('option', 'draggable', false);
1.71 width、height ，dialog的宽和高，默认为auto，自动。
1.72初始化例：
$('.selector').dialog({height:530,width:200});
1.73初始化后，得到和设置：请参考1.63
1.81maxWidth、maxHeight、minWidth、minHeight，dialog可改变的最大宽度、最大高度、最小宽度、最小高度。maxWidth、maxHeight的默认为false，为不限。minWidth、minHeight的默认为150。要使用这些属性需要ui.resizable.js的支持。
1.82初始化例：
$('.selector').dialog({maxHeight:400,maxWidth:600,minHeight:300,minWidth:300});
1.83初始化后，得到和设置：请参考1.63
1.91hide、show，当dialog关闭和打开时候的效果。默认为null，无效果
1.92初始化例：最上面的实例中用到，请自己看吧。
1.93初始化后，得到和设置：请参考1.63
1.101modal,是否使用模式窗口，模式窗口打开后，页面其他元素将不能点击，直到关闭模式窗口。默认为false不是模式窗口。
1.102初始化例：$('.selector').dialog({modal:true});
1.103初始化后，得到和设置：请参考1.63
1.111title，dialog的标题文字，默认为空。
1.112初始化例：见最上面的实例。1.113初始化后，得到和设置：请参考1.63
1.121position，dialog的显示位置：可以是'center','left','right','top','bottom',也可以是top和left的偏移量也可以是一个字符串数组例如['right','top']。
1.122初始化例：$('.selector').dialog({position:['top','right']});1.123初始化后，得到和设置：请参考1.63
1.131zIndex,dialog的zindex值，默认值为1000.
1.132初始化例：$('.selector').dialog({zIndex:3999});1.133初始化后，得到和设置：请参考1.63
1.141stack默认值为true，当dialog获得焦点是，dialog将在最上面。
1.142初始化例：$('.selector').dialog({stack:false});1.143初始化后，得到和设置：请参考1.63
2事件
2.11beforeclose类型dialogbeforeclose，当dialog尝试关闭的时候此事件将被触发，如果返回false，那么关闭将被阻止。
2.12初始化例：$('.selector').dialog({
beforeclose:function(event,ui){...}
});
2.13使用类型绑定此事件例：$('.selector').bind('dialogbeforeclose',function(event,ui){
...
});
2.21close类型：dialogclose，当dialog被关闭后触发此事件。
2.22初始化例：$('.selector').dialog({
close:function(event,ui){...}
});
2.23使用类型绑定此事件例：$('.selector').bind('dialogclose',function(event,ui){
...
});
2.3open类型：dialogopen，当dialog打开时触发。（篇幅有限，该省略的就省略了啊，初始化例和使用类型绑定事件可以向上参考。）
2.4focus类型：dialogfocus，当dialog获得焦点时触发。
2.5dragStart类型：dragStart，当dialog拖动开始时触发。
2.6drag类型：drag，当dialog被拖动时触发。
2.7dragStop类型：dragStop，当dialog拖动完成时触发。
2.8resizeStart类型：resizeStart，当dialog开始改变窗体大小时触发。
2.9resize类型：resize，当dialog被改变大小时触发。
2.10resizeStop类型：resizeStop，当改变完大小时触发。
3方法
3.1destroy，我喜欢这个哦，摧毁地球。。。例：.dialog('destroy')
3.2disable，dialog不可用，例：.dialog('disable');
3.3enable,dialog可用，例，如3.2
3.4close，open，关闭、打开dialog
3.5option，设置和获取dialog属性，例如：.dialog('option',optionName,[value])，如果没有value，将是获取。
3.6isOpen，如果dialog打开则返回true，例如：.dialog('isOpen')
3.7moveToTop,将dialog移到最上层，例如：.dialog('moveToTop')
相关推荐
jquery easyui dialog可以两种方式使用1)定义div,使用iframe<div id="openRoleDiv" class="easyui-window" closed="true