jQuery UI dialog 参数说明

前段时间碰到个问题 jquery UI dialog弹出层 弹出多个层是 比如弹出两个层A和B  B层如果显示的数据表格太大,伸到了A层的外面,那伸到A层之外的部分就看不到了,因为B层是在A层上弹出的 B的大小受到A层大小的限制

于是找到了这个资料 保存下来

-----------------------------------------------------------------------------------------------------

初始化参数

对于 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://blog.csdn.net/xue_feitian/article/details/6462105

时间: 2024-10-05 04:35:30

jQuery UI dialog 参数说明的相关文章

Select2 在jquery UI Dialog 搜索项失效且不能focus到搜索框解决方案

今天在项目到遇到一个select2插件在jquery UI Dialog 不能focus到搜索框的问题,后来在js 代码中加入(位置可以自己选 ,我选的位置是select2.min.js 后面,因为很多地方都用到,不用针对一个一个功能去修改): $.ui.dialog.prototype._allowInteraction = function(e) {     return !!$(e.target).closest('.ui-dialog, .ui-datepicker, .select2-

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

本文使用博客园Markdown编辑器进行编辑 1.问题呈现 项目中使用了jQuery UI的Dialog控件,一般用来处理需要提示用户输入或操作的简单页面.逻辑是修改一个广告的图片和标题. 效果截图如下: 使用Select2,主要是因为它支持下拉式搜索.所以在数据稍微多一点,作为搜索选择功能的首选.但是运行出来之后,发现搜索框无法点击.开始想到的index不够大,被其他的元素覆盖了.但是跳转z-index也无法解决.在普通的页面,搜索框是ok的. 2.解决办法 通过Google搜索,发现sele

API分析——Jquery UI Dialog

1.阅读API文档的一般方法? 通常地, API由三部分构成:属性.方法.事件. 属性表示参数配置,作为一个组件的微调,或者功能的开启与关闭: 方法表示组件能够发生的动作,或者组件的状态监测: 事件表示触发,即提供一个观测点,当触碰到观测点时,将产生通知或函数回调: 这三类几乎覆盖了可能的用户动作.数据传递. 2.如何看Jquery UI Dialog的API? 2.1了解对话框的构成 要掌握一个东西,就必须先了解他,就像吃饭睡觉那么自然,才能更好地掌握. 对于对话框,我们也要做同样的了解. 我

JQuery UI dialog Demo

原文:JQuery UI dialog Demo 源代码下载地址:http://www.zuidaima.com/share/1550463533812736.htm 小例子

个人学习jQuery uI dialog +mvcpager心得

最近上班过程中用到了jQuery ui,说实话我也没得用过这个jQuery ui 框架,写的不好的地方希望大家多多指点. 首先,我们在用到这个dialog这个弹出层方法事,先定义一个 ,当然你也可以直接用这个dialog方法里面的属性来实现,本人针对这个dialog的方法做了一个增删查改. 控制器方法: /// /// 公共字典信息集合 /// /// /// public ActionResult Vocabulary(int id=1) { var List = comm_DictTypeB

jquery ui dialog 内部使用asp.net控件

dialog中只要加上 appendTo:"form", 就能解决后端无法获取asp.net控件的值,同时解决了 modal: true, 启动模式对话框时无法操作对话框. jquery ui dialog代码: $(document).ready(function() { $( "#dialog" ).dialog({ autoOpen: true, appendTo:"form", height: 250, width: 300, modal

基于Jquery UI Dialog 的改写

我最近在做的这个项目是纯粹的js+html5文件,java肯定有涉及,不过现在基本上在使用js和html5的特性. 项目要使用一种类似于dialog的功能,让一部分页面能够弹出来,并且可以移动,当然使用dialog是很不错的选择 但是在真正使用的时候发现,jquery UI的dialog虽然能满足基本的要求但是,有些功能是不能满足,如果自己写这个dialog,显然不太合适,因为jquery只有一点不能满足需求,是要在dialog的右上角多加几个按钮,单纯的一个关闭按钮不能满足需求.因为jquer

jquery ui dialog autofocus 去掉默认第一个元素获取焦点

经常在dialog窗口中第一个元素为日期控件时,打开窗口则会自动显示日期下拉框. 解决办法:在dialog的open事件中,设置父对象获得焦点. p1_dialog_seniorSearch.dialog({ title:"高级查询", autoOpen:false,//默认关闭 modal: true,//开启遮罩层 width:570, height:330, buttons: { "查询":function(){ seniorSearch(1,20) } ,

Jquery UI Dialog 导致C#页面后台事件失效

$(function () { dialog = $("#dialog-form").dialog({ autoOpen: false, height: 450, width: 500, modal: true, close: function () { } }); //添加下面的代码就可解决了 dialog.parent().appendTo(jQuery("form:first")); })