转载▼

1 属性

1.11 autoOpen ,这个属性为true的时候dialog被调用的时候自动打开dialog窗口。当属性为false的时候,一开始隐藏窗口,知道.dialog("open")的时候才弹出dialog窗口。默认为:true。

1.12 初始化例:请注意,$('.selector')是dialog 的类名,在本例中.selector=#dialoag,以后不再说明。

$('.selector').dialog({ autoOpen: false });

1.13 初始化后,得到和设置此属性例:

//获得

var autoOpen = $('.selector').dialog('option', 'autoOpen');

//设置

$('.selector').dialog('option', 'autoOpen', false);

1.21 bgiframe 默认为false ,When true, the bgiframe plugin will be used, to fix the issue in IE6 where select boxes show on top of other elements, regardless of zIndex. Requires including the bgiframe plugin. Future versions may not require a separate plugin.

在IE6下,让后面那个灰屏盖住select。

1.22 初始化例:

$('.selector').dialog({ bgiframe: true });

1.23 初始化后,得到和设置:

//获取

var bgiframe = $('.selector').dialog('option', 'bgiframe');

//设置

$('.selector').dialog('option', 'bgiframe', true);

1.31 buttons 显示一个按钮,并写上按钮的文本,设置按钮点击函数。默认为{},没有按钮。

最上面的例子中已经有buttons属性的用法,请注意。

1.32 初始化例:

$('.selector').dialog({ buttons: { "Ok": function() { $(this).dialog("close"); } } });

1.33 初始化后,得到和设置:

//获取

var buttons = $('.selector').dialog('option', 'buttons');

//设置

$('.selector').dialog('option', 'buttons', { "Ok": function() { $(this).dialog("close"); } });

1.41 closeOnEscape 为true的时候,点击键盘ESC键关闭dialog,默认为true;

1.42 初始化例:

$('.selector').dialog({ closeOnEscape: false });

1.43 初始化后,得到和设置:

//获取

var closeOnEscape = $('.selector').dialog('option', 'closeOnEscape');

//设置

$('.selector').dialog('option', 'closeOnEscape', false);

1.51 dialogClass 类型将被添加到dialog,默认为空

1.52 初始化例:

$('.selector').dialog({ dialogClass: 'alert' });

1.53 初始化后,得到和设置:

//获取

var dialogClass = $('.selector').dialog('option', 'dialogClass');

//设置

$('.selector').dialog('option', 'dialogClass', 'alert');

1.61 draggable、resizable : draggable是否可以使用标题头进行拖动,默认为true,可以拖动;resizable是否可以改变dialog的大小,默认为true,可以改变大小。

1.62 初始化例:

$('.selector').dialog({ draggable: false,resizable:false });

1.63 初始化后,得到和设置:

//获取

var draggable = $('.selector').dialog('option', 'draggable');

//设置

$('.selector').dialog('option', 'draggable', false);

1.71 width、height ,dialog的宽和高,默认为auto,自动。

1.72 初始化例:

$('.selector').dialog({ height: 530,width:200 });

1.73 初始化后,得到和设置:请参考1.63

1.81 maxWidth、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.91 hide、show ,当dialog关闭和打开时候的效果。默认为null,无效果

1.92 初始化例:最上面的实例中用到,请自己看吧。

1.93 初始化后,得到和设置:请参考1.63

1.101 modal,是否使用模式窗口,模式窗口打开后,页面其他元素将不能点击,直到关闭模式窗口。默认为false不是模式窗口。

1.102 初始化例:$('.selector').dialog({ modal: true });

1.103 初始化后,得到和设置:请参考1.63

1.111 title,dialog的标题文字,默认为空。

1.112 初始化例:见最上面的实例。1.113 初始化后,得到和设置:请参考1.63

1.121 position ,dialog的显示位置:可以是'center', 'left', 'right', 'top', 'bottom',也可以是top和left的偏移量也可以是一个字符串数组例如['right','top']。

1.122 初始化例:$('.selector').dialog({ position: ['top','right'] }); 1.123 初始化后,得到和设置:请参考1.63

1.131 zIndex, dialog的zindex值,默认值为1000.

1.132 初始化例:$('.selector').dialog({ zIndex: 3999 }); 1.133 初始化后,得到和设置:请参考1.63

1.141 stack 默认值为true,当dialog获得焦点是,dialog将在最上面。

1.142 初始化例:$('.selector').dialog({ stack: false }); 1.143 初始化后,得到和设置:请参考1.63

2 事件

2.11 beforeclose 类型dialogbeforeclose , 当dialog尝试关闭的时候此事件将被触发,如果返回false,那么关闭将被阻止。

2.12 初始化例:$('.selector').dialog({

beforeclose: function(event, ui) { ... }

});

2.13 使用类型绑定此事件例:$('.selector').bind('dialogbeforeclose', function(event, ui) {

...

});

2.21 close 类型:dialogclose ,当dialog被关闭后触发此事件。

2.22 初始化例:$('.selector').dialog({

close: function(event, ui) { ... }

});

2.23 使用类型绑定此事件例:$('.selector').bind('dialogclose', function(event, ui) {

...

});

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

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

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

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

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

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

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

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

3 方法

3.1 destroy ,我喜欢这个哦,摧毁地球。。。 例:.dialog( 'destroy' )

3.2 disable,dialog不可用,例:.dialog('disable');

3.3 enable,dialog可用,例,如3.2

3.4 close,open,关闭、打开dialog

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

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

3.7 moveToTop ,将dialog移到最上层,例如:.dialog( 'moveToTop' )

eg:

var $dialog = $('<div></div>')
            .html('Do you want to save changes before exiting?')
            .dialog({
                autoOpen: false,
                title: 'Warning',
                resizable: false,
                height:140,
                width:400,
                modal: true,
                buttons: {
                    "Yes": function() {
                        if(trigger_inf == '#PREVISIONS_TAB') {
                            $('#P24_TAB').val('2');
                        }else {
                            $('#P24_TAB').val('3');
                        }
                        apex.submit('P24_SAVE');
                    },
                    "No":function(){
                        $( this ).dialog( "close" );           
                    },
                    Cancel: function() {
                        $( this ).dialog( "close" );
                        $('#P24_DESIGN_TAB_FLAG').val(1);
                        $("a[href='#DESIGN_TAB']").click();
                    }
                }
            });
        $dialog.dialog('open');

Jquery UI dialog 详解 (中文)的更多相关文章

  1. jquery ui tabs详解(中文)

    1 属性1.11 ajaxOptions,当选项卡加载内容时,添加一个ajax选项.只有ajax时,添加的ajax选项才起作用.默认值为null.上面的例子中,添加了beforeSend和succes ...

  2. jquery.ui.widget详解

    案例详解 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

  3. 解决Select2控件不能在jQuery UI Dialog中不能搜索的bug

    本文使用博客园Markdown编辑器进行编辑 1.问题呈现 项目中使用了jQuery UI的Dialog控件,一般用来处理需要提示用户输入或操作的简单页面.逻辑是修改一个广告的图片和标题. 效果截图如 ...

  4. Dialog详解(包括进度条、PopupWindow、自定义view、自定义样式的对话框)

    Dialog详解(包括进度条.PopupWindow.自定义view.自定义样式的对话框)   Android中提供了多种对话框,在实际应用中我们可能会需要修改这些已有的对话框.本实例就是从实际出发, ...

  5. jquery的css详解(二)

    jq的工具方法style用于设置样式,jq的实例方法css在设置样式时就是调用的它,接下来分析一下源码. jQuery.extend({ ............................ st ...

  6. jQuery.attr() 函数详解

    一,jQuery.attr()  函数详解: http://www.365mini.com/page/jquery-attr.htm 二,jQuery函数attr()和prop()的区别: http: ...

  7. [转]jQuery UI Dialog Modal Popup Yes No Confirm example in ASP.Net

    本文转自:http://www.aspsnippets.com/Articles/jQuery-UI-Dialog-Modal-Popup-Yes-No-Confirm-example-in-ASPN ...

  8. jQuery 事件用法详解

    jQuery 事件用法详解 目录 简介 实现原理 事件操作 绑定事件 解除事件 触发事件 事件委托 事件操作进阶 阻止默认事件 阻止事件传播 阻止事件向后执行 命名空间 自定义事件 事件队列 jque ...

  9. API分析——Jquery UI Dialog

    1.阅读API文档的一般方法? 通常地, API由三部分构成:属性.方法.事件. 属性表示参数配置,作为一个组件的微调,或者功能的开启与关闭: 方法表示组件能够发生的动作,或者组件的状态监测: 事件表 ...

随机推荐

  1. Java面向对象程序设计--泛型编程

    1. 为何要进行泛型编程? 泛型变成为不同类型集合提供相同的代码!省去了为不同类型而设计不同代码的麻烦! 2. 一个简单泛型类的定义: public class PairTest1 { public ...

  2. IOS 学习笔记 2015-04-03 OC-API-文件读写

    // // WPFileHelper.m // OC-API-文件操作 // // Created by wangtouwang on 15/4/3. // Copyright (c) 2015年 w ...

  3. MySQL主从同步原理 部署【转】

    一.主从的作用:1.可以当做一种备份方式2.用来实现读写分离,缓解一个数据库的压力二.MySQL主从备份原理master 上提供binlog ,slave 通过 I/O线程从 master拿取 bin ...

  4. 微信公众号-加解密数据demo坑

    demo里面的MsgSignature作为url参数一部分了,demo也不更新下 坑爹的微信! 解密信息部分 include_once "wxBizMsgCrypt.php"; $ ...

  5. smarty

    模板引擎是用于把模板文件和数据内容合并在一起的程序,便于网站开发有利于代码分离和维护,了解一个模板最好知道其工作原理,以便于实现一通万通. 模板文件一般是HTML xml js等类型文件,如果不用模板 ...

  6. Nginx+uWSGI+Django+Python在Linux上的部署

    搞了一整天,终于以发现自己访问网络的端口是错误的结束了. 首先要安装Nginx,uWSGI,Django,Python,这些都可以再网上查到. 安装好后可以用 whereis 命令查看是否安装好了各种 ...

  7. Tasklist 命令的使用

    1,根据PID查找进程 tasklist /fi "pid eq 2245" 2,根据名称查找进程 tasklist /fi "imagename eq notepad. ...

  8. std::copy的使用

    看到有人在用std::copy这个东西,很简洁和爽啊,,所以找些帖子学习学习 http://blog.sina.com.cn/s/blog_8655aeca0100t6qe.html https:// ...

  9. SQL Join PK ChinaJoy

    P PK  

  10. it warning: LF will be replaced by CRLF解决

    LF是linux下的换行符,而CRLF是enter + 换行,这就知道为啥我当初拷贝第一份代码的时候没报这个错误了,因为第一份是在win下写的. 然后解决办法: git config --global ...