文档章节

jQuery UI dialog 的使用

银月光海
 银月光海
发布于 2014/06/26 14:16
字数 1096
阅读 105
收藏 9

初始化参数

对于 dialog 来说,首先需要进行初始化,在调用 dialog 函数的时候,如果没有传递参数,或者传递了一个对象,那么就表示在初始化一个对话框。

没有参数,表示按照默认的设置初始化对话框,在当前最新版本的 jQuery UI 1.8.9 中, dialog 支持下列属性。

autoOpen   初始化之后,是否立即显示对话框,默认为 true

modal        是否模式对话框,默认为 false

closeOnEscape   当用户按 Esc 键之后,是否应该关闭对话框,默认为 true

draggable  是否允许拖动,默认为 true

resizable    是否可以调整对话框的大小,默认为 true

title           对话框的标题,可以是 html 串,例如一个超级链接。

position     用来设置对话框的位置,有三种设置方法

     1.  一个字符串,允许的值为  'center', 'left', 'right', 'top', 'bottom'.  此属性的默认值即为 'center',表示对话框居中。
     2.  一个数组,包含两个以像素为单位的位置,例如, 

var  dialogOpts  =  {
    position: [
100 100 ]
};

     3. 一个字符串组成的数组,例如, ['right','top'],表示对话框将会位于窗口的右上角。

var  dialogOpts  =  {
    position: [
" left " " bottom " ]
};

 

一组关于尺寸的属性,以像素为单位。

width     宽度, 默认 300

height    高度,默认 'auto'

minWidth     最小宽度,默认 150

minHeight    最小高度,默认 150

maxWidth   最大宽度

maxHeight   最大高度

 

还有关于关闭的效果

hide       当对话框关闭时的效果,默认为 null, 例如, hide: 'slide'

show     当对话框打开时的效果。默认为 null

 

堆叠

stack     对话框是否叠在其他对话框之上。默认为 true

zIndex   对话框的 z-index 值,一个整数,越大越在上面。默认 1000

 

按钮

buttons   一个对象,属性名将会被作为按钮的提示文字,属性值为一个函数,即按钮的处理函数。

复制代码
var  dialogOpts  =  {
   buttons: {
      
" Ok " function () { } ,
      
" Cancel " function () {}
   }
}
$(
" #myDialog " ).dialog(dialogOpts);
复制代码

 

IE6 的 select 元素穿透问题

bgiframe     解决 IE6 的 select 元素穿透问题,通过增加一个 iframe 来解决。默认为  true

这一功能需要使用脚本 jquery.bgiframe-2.1.2,脚本在 jQuery UI 压缩包中 development-bundle\external 文件夹中,需要将这个文件加入到页面中。

< script src = " ../jquery-1.4.4.js " >< / script>
< script src = " ../external/jquery.bgiframe-2.1.2.js " >< / script>
< script src = " ../ui/jquery.ui.core.js " >< / script>

 

这个控件现在有一个bug,在弹出窗口有遮罩层的情况下,在chrome下,如果出现纵向滚动条,无法用鼠标拖动,只能使用滚轮。

上边的说明来自 王洋

设置前

设置后

 

示例

复制代码
$( " #dialog " ).dialog({
    bgiframe: 
true ,
    resizable: 
false ,
    height:
140 ,
    modal: 
true ,
    overlay: {
        backgroundColor: 
' #000 ' ,
        opacity: 
0.5
    },
    buttons: {
        
' Delete all items in recycle bin ' function () {
            $(
this ).dialog( ' close ' );
        },
        Cancel: 
function () {
            $(
this ).dialog( ' close ' );
        }
    }
});
复制代码

效果如下。

复制代码
复制代码

 

对话框的方法

初始化之后,就可以使用对话框了,比如说打开对话框,关闭对话框,这需要通过对话框的方法来完成。

对话框的方法需要通过调用 dialog 函数,并传递字符串形式的方法来完成。例如,dialog( "open" )  表示调用对话框的 open 方法。

open     打开对话框,需要注意的是,并没有 open() 方法,而是通过 dialog( "open" ) 来调用。例如,  .dialog( "open" )

close     关闭对话框

$( this ).dialog( ' close ' );

destroy  摧毁一个对话框,去除对话框功能,将元素还原为初始化之前的状态。

isOpen   检查对话框的状态,如果已经打开,返回 true.

moveToTop  将对话框移到对话框的顶端

option    设置或者读取对话框某个属性的值,有两种用法。

    如果第二个参数为字符串,如果提供了三个参数,表示设置,如果两个参数,表示读取。 例如 .dialog( "option" , optionName , [value] )

    如果第二个参数为对象,表示一次性设置多个属性。

enable   启用对话框

disable  禁用对话框

对话框的事件

在对话框使用过程中,还将触发多种事件,我们可以自定义事件处理函数进行响应。

create

open

focus

dragStart

drag

dragStop

resizeStart

resize

resizeStop

beforeClose

close

例如,下面的设置了 open,close,beforeClose 的事件处理,显示窗口的状态。

复制代码
var  dialogOpts  =  {
     open: 
function () {
             $(
" #status " ).find( " .ui-widget-content " ).text( " The dialog is open " );
         },
     close: 
function () {
             $(
" #status " ).find( " .ui-widget-content " ).text( " The dialog is closed " );
         },
     beforeclose: 
function () {
             
if  (parseInt($( " .ui-dialog " ).css( " width " ))  ==   300   ||
                 parseInt($(
" .ui-dialog " ).css( " height " ))  ==   300 ) {
               
return   false
             }
         }
};
$(
" #myDialog " ).dialog(dialogOpts);
复制代码

 效果如下

本文转载自:http://www.cnblogs.com/haogj/archive/2011/02/16/1956523.html

共有 人打赏支持
银月光海

银月光海

粉丝 37
博文 365
码字总数 46223
作品 0
浦东
项目经理
私信 提问
jQuery UI dialog 的使用

jQuery UI dialog 的使用 上一篇文章分享了一下 jQuery UI dialog 的简单使用,看到这么多同学都在学习,就将 jQuery UI dialog 的使用总结一下,也为学习其他的 jQuery UI 打个基础。 初始化...

Neo_
2013/03/30
0
0
Jquery Dialog DatePicker 控件使用问题

场景: 项目中使用Jquery的DataPicker作为我们的时间控件。有个页面需要在Dialog中使用DatePicker时间控件。 问题: Jquery的DatePicker时间控件显示总是在Dialog层之下。 解决: 找到jquer...

保罗的寓言
2012/03/19
0
0
分享一款jQuery的UI插件:Ninja UI

日期:2011/12/26 来源:GBin1.com 在线演示 本地下载 今天分享一款jQuery的UI插件 - Ninja UI, 这个插件使用jQuery本身的语法来开发界面元素,而且你不需要关注CSS样式相关设定,因为整个C...

gbin1
2011/12/26
0
0
ckfinder在IE10,IE9中的弹出框不能选择,或者不能上传解决方法

在IE9,或IE10中ckfinder在IE10,IE9中的弹出框不能选择,或者不能上传解决方法 把弹出框嵌入到jquery dialog中。可以解决 I did: // javascript files Jquery you can download from jquery...

随智阔
2013/09/29
0
0
jQuery EasyUI 开源插件套装 完全替代ExtJS

我要告诉大家,现在JQuery也有一个很好的UI插件了,几乎完全可以替代ExtJS,下面来看看对比: 上图是ExtJS和EasyUI的界面对比,是不是很类似呢,很强大呢? 呵呵~~ 漂亮的消息弹出,支持遮罩...

Amamatthew
2014/09/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

JavaScript实现Apache .htaccess 转化nginx生成器工具-toolfk程序员工具网

本文要推荐的[ToolFk]是一款程序员经常使用的线上免费测试工具箱,ToolFk 特色是专注于程序员日常的开发工具,不用安装任何软件,只要把内容贴上按一个执行按钮,就能获取到想要的内容结果。T...

toolfk
11分钟前
0
0
一个EOS区块链RPC API接口的PHP SDK包

作为我们Block Producer对社区利益的承诺的一部分,我们希望专注于构建有助于提高EOS平台采用率的工具/应用程序。与大多数大型应用程序一样,当你只有少量或过时的文档并且缺乏工具来帮助你进...

笔阁
13分钟前
1
0
比特币和Dapp

在比特币的简史中,它已经从一种不受管制的非法活动货币转变为一种合法便捷的全球商业促进者。当然,加密货币受到无数因素的影响,这些因素共同使其成为世界上最难以预测的货币之一。但是,尽...

geek12345
16分钟前
0
0
php中流行的rpc框架详解

什么是RPC框架? 如果用一句话概括RPC就是:远程调用框架(Remote Procedure Call)那什么是远程调用?通常我们调用一个php中的方法,比如这样一个函数方法: localAdd(10, 20),localAdd方法...

hansonwong
17分钟前
1
0
Linux系统信息面板管理工具psdash

Psdash 是一款查看 Linux 系统信息的 web 面板,和另一款系统监控工具 Glances 一样,psDash 的系统信息的采集也是由 psutil 完成的。和 Glances 不同的是,psdash 没有提供 API,只带了一个...

linuxprobe16
20分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部