注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

千年绿叶

黑夜给了我黑色的眼睛,我却用它来寻找光明......

 
 
 

日志

 
 

Jquery UI dialog 讲解  

2013-06-13 10:58:50|  分类: JQuery UI |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
一 属性
1 autoOpen ,这个属性为true的时候dialog被调用的时候自动打开dialog窗口。当属性为false的时候,一开始隐藏窗口,知道.dialog("open")的时候才弹出dialog窗口。默认为:true。
初始化例:请注意,$('.selector')是dialog 的类名,在本例中.selector=#dialoag,。
$('.selector').dialog({ autoOpen: false });
初始化后,得到和设置此属性例:
//获得
var autoOpen = $('.selector').dialog('option', 'autoOpen');
//设置
$('.selector').dialog('option', 'autoOpen', false);

2 bgiframe 默认为false 
为true时,在IE6下,让后面那个灰屏盖住select。
初始化例:
$('.selector').dialog({ bgiframe: true });
初始化后,得到和设置:
//获取
var bgiframe = $('.selector').dialog('option', 'bgiframe');
//设置
$('.selector').dialog('option', 'bgiframe', true);

3 buttons 显示一个按钮,并写上按钮的文本,设置按钮点击函数。默认为{},没有按钮。
最上面的例子中已经有buttons属性的用法,请注意。
初始化例:
$('.selector').dialog({ buttons: { "Ok": function() { $(this).dialog("close"); } } });
初始化后,得到和设置:
//获取
var buttons = $('.selector').dialog('option', 'buttons');
//设置
$('.selector').dialog('option', 'buttons', { "Ok": function() { $(this).dialog("close"); } });

4 closeOnEscape 为true的时候,点击键盘ESC键关闭dialog,默认为true;
初始化例:
$('.selector').dialog({ closeOnEscape: false });
初始化后,得到和设置:
//获取
var closeOnEscape = $('.selector').dialog('option', 'closeOnEscape');
//设置
$('.selector').dialog('option', 'closeOnEscape', false);

5 dialogClass 类型将被添加到dialog,默认为空
初始化例:
$('.selector').dialog({ dialogClass: 'alert' });
初始化后,得到和设置:
//获取
var dialogClass = $('.selector').dialog('option', 'dialogClass');
//设置
$('.selector').dialog('option', 'dialogClass', 'alert');

6 draggable、resizable : draggable是否可以使用标题头进行拖动,默认为true,可以拖动;resizable是否可以改变dialog的大小,默认为true,可以改变大小。
初始化例:
$('.selector').dialog({ draggable: false,resizable:false });
初始化后,得到和设置:
//获取
var draggable = $('.selector').dialog('option', 'draggable');
//设置
$('.selector').dialog('option', 'draggable', false);

7 width、height ,dialog的宽和高,默认为auto,自动。
初始化例:
$('.selector').dialog({ height: 530,width:200 });
初始化后,得到和设置:同上
 
8 maxWidth、maxHeight、minWidth、minHeight ,dialog可改变的最大宽度、最大高度、最小宽度、最小高度。maxWidth、maxHeight的默认为false,为不限。minWidth、minHeight的默认为150。要使用这些属性需要ui.resizable.js 的支持。
初始化例:
$('.selector').dialog({ maxHeight: 400,maxWidth:600,minHeight:300,minWidth:300 });
初始化后,得到和设置:同上

9 hide、show ,当dialog关闭和打开时候的效果。默认为null,无效果
初始化例:最上面的实例中用到,请自己看吧。
初始化后,得到和设置:同上

10 modal,是否使用模式窗口,模式窗口打开后,页面其他元素将不能点击,直到关闭模式窗口。默认为false不是模式窗口。
初始化例:$('.selector').dialog({ modal: true });
初始化后,得到和设置:同上

11 title,dialog的标题文字,默认为空。
初始化例:见最上面的实例。1.113 初始化后,得到和设置:同上

12 position ,dialog的显示位置:可以是'center', 'left', 'right', 'top', 'bottom',也可以是top和left的偏移量也可以是一个字符串数组例如['right','top']。
初始化例:$('.selector').dialog({ position: ['top','right'] }); 1.123 初始化后,得到和设置:同上

13 zIndex, dialog的zindex值,默认值为1000.
初始化例:$('.selector').dialog({ zIndex: 3999 }); 
初始化后,得到和设置:同上

14 stack 默认值为true,当dialog获得焦点是,dialog将在最上面。
初始化例:$('.selector').dialog({ stack: false }); 
初始化后,得到和设置:同上


二 事件 

1 beforeclose 类型dialogbeforeclose , 当dialog尝试关闭的时候此事件将被触发,如果返回false,那么关闭将被阻止。
初始化例:$('.selector').dialog({
   beforeclose: function(event, ui) { ... }
});
使用类型绑定此事件例:$('.selector').bind('dialogbeforeclose', function(event, ui) {
...
});

2 close 类型:dialogclose ,当dialog被关闭后触发此事件。
初始化例:$('.selector').dialog({
   close: function(event, ui) { ... }
});
使用类型绑定此事件例:$('.selector').bind('dialogclose', function(event, ui) {
...
});

3 open 类型:dialogopen ,当dialog打开时触发。(篇幅有限,该省略的就省略了啊,初始化例和使用类型绑定事件可以向上参考。)

4 focus 类型:dialogfocus ,当dialog获得焦点时触发。

5 dragStart 类型:dragStart,当dialog拖动开始时触发。

6 drag 类型:drag ,当dialog被拖动时触发。

7 dragStop 类型:dragStop ,当dialog拖动完成时触发。

8 resizeStart 类型:resizeStart ,当dialog开始改变窗体大小时触发。

9 resize 类型:resize,当dialog被改变大小时触发。

10 resizeStop 类型:resizeStop,当改变完大小时触发。


三 方法

1 destroy , 销毁对话框对象。 例:.dialog( 'destroy' ) 

2 disable,禁用对话框。例:.dialog('disable');

3 enable,启用对话框。例,如3.2

4 close,open,关闭、打开dialog

5 option ,设置和获取dialog属性,例如:.dialog( 'option' , optionName , [value] ) ,如果没有value,将是获取。

6 isOpen ,如果dialog打开则返回true,例如:.dialog('isOpen')

7 moveToTop ,将dialog移到最上层,例如:.dialog( 'moveToTop' )
  评论这张
 
阅读(216)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017