jquery dialog

jquery dialog 详解

博客分类:

JavaScript

还是先看例子吧。另外如果要拖动、改变dialog的大小的话要加上ui.draggble.js和ui.resizable.js
<!DOCTYPE html>
<html>
<head>
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="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.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.暂时没有弄明白是做什么用的。谁知道的话,请告诉我啊。
补充说明:bgiframe 用来设置dialog 和 select 等层控件的相对位置`````
不设置的时候,就会出现select等控件挡在你的dialog上面
,在IE6中。

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‘ )

时间: 2024-10-20 05:55:20

jquery dialog的相关文章

jquery dialog 参数说明

var dialog = art.dialog({ title: '欢迎', content: '欢迎使用artDialog对话框组件!', icon: 'succeed', follow: document.getElementById('btn2'), ok: function(){ this.title('警告').content('请注意artDialog两秒后将关闭!').lock().time(2); return false; }, button: [ { name: '同意',

jquery dialog open后,服务器端控件失效的快速解决方法

jquery dialog为我们提供了非常漂亮实用的对话框,比单调的alert.confirm.prompt好用很多. 在使用jquery与.net共同开发时,直接调用jquery dialog的open后,服务器端控件全部失效了,不能执行相应的后台代码.只是源于jquery默认把dialog添加到body中,而不是原来所在的服务器端的form中了 解决方法: 1.可以调用dialog的open前,$("#dialog").parent().appendTo("form:fi

使用jquery dialog

网页开发中,弹窗还是很有必要的.本人比较喜欢jquery ui的dialog. 但是jquery dialog中也有一些略显不方便的,如:没有z-index的参数设置,脚部的按钮样式没办法自定义…… 我自己简单地写了个使用jquery dialog封装函数,有兴趣的朋友看看. JavaScript(看起来有点多,但放到vs里,ctrl+m+o,还是比较清楚明了的): $.ivanjs = $.ivanjs || {}; $.ivanjs.com = $.ivanjs.com || {}; $.i

jQuery Dialog弹出层对话框插件

Dialog.js的相关注释已经添加,可以按照注释,进行相关样式的修改,适用于自定义的各个系统! dialog.js 1 /** 2 * jQuery的Dialog插件. 3 * 4 * @param object content 5 * @param object options 选项. 6 * @return 7 */ 8 function Dialog(content, options) 9 { 10 var defaults = { // 默认值. 11 title:'标题', // 标

jquery dialog的一些坑

jquery dialog工具可以方便的生成一个弹出框,但是在一些需要多个弹出框的应用场景上会有一些bug 具体场景: 当使用过一次模态框之后,使用另外的一个模态框时,已经消失不见的模态框会重新出来 错误排查之后发现:这是由于当第一次使用模态框关闭之后,jquery会在body最后新增一个div,display:none,不可见,下一次调用的时候直接取用,(主要作用是保存该模态框所在的位置参数) 但是当唤醒一个另外的模态框时,除新增一个模态框div外,会把已有的不可见div唤醒 通过定义模态框的

修改 Jquery Dialog 的位置

今天在做一个功能的时候使用到了Jquery UI中的dialog组件,应为是一个很简单的组件,有很多功能都没有提供,比如说直接获取到dialog的位置,直接修改dialog的位置都是不行的,并且但可拖动的位置看不见的时候,这个时候就是坑了,关闭不了,也拖动不了,这个时候只能刷新页面来重新初始化界面了. 我今天解决的就是这个问题:解决这种问题有两种方式(个人认为) 1.修改属性让可拖动局域可见,进行拖动 2.不让出现可拖动区域不可见的情况. 针对第一种情况,我没有想到合适的办法.下面给出第二种情况

jquery dialog属性的简单配置

记录是为了更好的成长! <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery UI Dialog - Default f

jquery dialog 打开的时候自动聚焦解决方法

方法一: p1_dialog_seniorSearch.dialog({ title:"高级查询", autoOpen:false,//默认关闭 modal: true,//开启遮罩层 width:570, height:330, buttons: { "查询":function(){ seniorSearch(1,20) } , "关闭": function() { p1_dialog_seniorSearch.dialog( "cl

JQUERY DIALOG窗格内不能使用FORM

今天在做AJAX DIALOG数据提交实验,实验目的是,在DIALOG内显示另一页面,并将FORM组件信息提交保存至数据库.代码如下: DIALOG实现: function OpenDialog(url,title,width,height,top,left) { var div = $("<div id='div_Info' title='"+title+"'></div>").appendTo($("BODY"));