初始化参数

对于 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"]
};

eg:

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

close     关闭对话框

$(this).dialog('close');
            $oneCalendar.dialog({
title: '测试标题 ',
autoOpen: true,
modal: true,
width: ,
height: ,
dialogClass: "my-dialog"
}); $("#one").dialog().dialog("close"); //隐藏某dialog
function HideMoreMonthDialog() {
$("#divMore").dialog("close");
$("#divMore").dialog("destroy");
} //初始化dialog
function initMoreDrag() {
$("#divMore").hide();
$("#divMore").dialog({
autoOpen: true,
height: ,
width: ,
modal: true,
title: "详情",
close: function (event, ui) {
IsShowTwelveMonth = false;
hideDivClickAndDivDayCount();
$("#divMore").dialog("destroy");
}
});
} $("#dvEditStaffDaily").dialog({
autoOpen: false,
width: ,
height: ,
dialogClass: "my-dialog",
resizable: false,
position: "center",
title: "**详情"),
close:function()
{
if (flagclicked == true) {
SearchStaffDailyList2();
flagclicked = false;
}
$("#dvEditStaffDaily").html("<span style=\"color:red\">数据正在加载,请稍侯……</span>");
}
});

封装一个弹出层方法

    <div id="ps_alert">
<p id="showP">
</p>
</div>
/*
* 提供ps_alert和ps_confirm两种dialog
* 参数:
* 调用时参数情况:
ps_alert("test",function1,function2,setting);
ps_alert("test");
ps_alert("test",function1);
ps_alert("test",function1,function2);
ps_alert("test",function1,null,setting);
ps_alert("test",null,function2,setting);
ps_alert("test",null,null,setting);
* 1 text:dialog显示的内容
* 2 psCallbackYes:yes按钮的回调函数
* 3 psCallbackNo:no按钮的回调函数
* 4 setting:设置dialog的属性
title:标题(目前不显示标题)
text:显示内容:若参数text没有值,则显示此值
errorType:错误图标
width:宽度
height:高度
buttons:1 ps_alertLanguages中的第一个 2 ps_alertLanguages中的第二 A ps_alertLanguages中全部显示
* 公共变量:默认的语言ps_alertLanguages={buttonYes:"Yes",buttonNO:"No"}
*/ //默认的语言buttonText
var ps_alertLanguages = {
buttonYes: "Yes",
buttonNo: "No"
}; //alert
/*
method({title:"",contents:"",errorType:"",width:0,height:0,buttons:""})
*/
ps_alert = function (text, psCallbackYes, psCallbackNo, setting) {
ps_return = "";
if (isNaN(setting) && setting != undefined) {
ps_alert1(text, psCallbackYes, psCallbackNo, { title: setting.title,
contents: setting.contents,
errorType: setting.errorType,
width: setting.width,
height: setting.height,
buttons: ""
});
} else {
ps_alert1(text, psCallbackYes, psCallbackNo, { buttons: "" });
}
} //confirm
ps_confirm = function (text, psCallbackYes, psCallbackNo, setting) {
ps_return = "";
if (isNaN(setting) && setting != undefined) {
ps_alert1(text, psCallbackYes, psCallbackNo, { title: setting.title,
contents: setting.contents,
errorType: setting.errorType,
width: setting.width,
height: setting.height,
buttons: "A"
});
} else {
ps_alert1(text, psCallbackYes, psCallbackNo, { buttons: "A" });
}
} //method({title:"",text:"",errorType:"",width:0,height:0})
ps_alert1 = function (text, psCallbackYes, psCallbackNo, setting) { //alert and confirm 的返回值
var ps_return; //default parameter
var defaultSetting = {
title: "",
text: "",
errorType: "",
width: ,
height: ,
buttons: ""
};
//init
$("#ps_alert").dialog({
dialogClass: "no-close",
dialogClass: "no-title",
modal: true,
autoOpen: false,
draggable: false,
resizable: false,
closeOnEscape: false
}); //默认回调函数Yes
if (!isNaN(psCallbackYes) || psCallbackYes == undefined) {
psCallbackYes = psCallbackDefaultYes;
} //默认回调函数No
if (!isNaN(psCallbackNo) || psCallbackNo == undefined) {
psCallbackNo = psCallbackDefaultNo;
} /*
* load div ps_alert
*/
$.extend(defaultSetting, setting); //获得对象变量
var dialogE = $("#ps_alert");
var isOpen = dialogE.dialog("isOpen"); //清空dialog的text
$("#showP").text(""); //deal the buttons
var buttons;
if (defaultSetting.buttons == "") {
buttons = [{
text: ps_alertLanguages.buttonYes,
click: function () {
ps_return = ps_alertLanguages.buttonYes;
$("#ps_alert").dialog("close"); //关闭ps_alert
$("#ps_alert").dialog("destroy"); //销毁ps_alert
$("#showP").hide();
if (psCallbackYes) {
psCallbackYes(ps_return); //执行回调函数
}
}
}];
} else if (defaultSetting.buttons == "") {
buttons = [{
text: ps_alertLanguages.buttonNo,
click: function () {
ps_return = ps_alertLanguages.buttonNo;
$("#ps_alert").dialog("close"); //关闭ps_alert
$("#ps_alert").dialog("destroy"); //销毁ps_alert
$("#showP").hide();
if (psCallbackNo) {
psCallbackNo(ps_return); //执行回调函数
}
}
}];
} else if (defaultSetting.buttons == "A") {
buttons = [{
text: ps_alertLanguages.buttonYes,
click: function () {
ps_return = ps_alertLanguages.buttonYes;
$("#ps_alert").dialog("close"); //关闭ps_alert
$("#ps_alert").dialog("destroy"); //销毁ps_alert
$("#showP").hide();
if (psCallbackYes) {
psCallbackYes(ps_return); //执行回调函数
}
}
}, {
text: ps_alertLanguages.buttonNo,
click: function () {
ps_return = ps_alertLanguages.buttonNo;
$("#ps_alert").dialog("close"); //关闭ps_alert
$("#ps_alert").dialog("destroy"); //销毁ps_alert
$("#showP").hide();
if (psCallbackNo) {
psCallbackNo(ps_return); //执行回调函数
}
}
}];
} if (!isOpen) {//如果关闭 //加载新buttons
$("#ps_alert").dialog({
buttons: buttons
}); // dialogE.dialog("dialogClass", "no-title"); //修改title
dialogE.dialog("option", "title", defaultSetting.title); //add icon
var Indexs = "<span class='" + defaultSetting.errorType + "' style='float: left; margin: 0 7px 50px 0;'></span>";
$("#showP").append(Indexs); //显示text
if (isNaN(text))
$("#showP").append(text);
else
$("#showP").append(defaultSetting.contents); //打开
$("#showP").show();
dialogE.dialog("open");
}
} //默认回调函数1
psCallbackDefaultYes = function () { } //默认回调函数1
psCallbackDefaultNo = function () { }

jQuery UI dialog的更多相关文章

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

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

  2. [转]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 ...

  3. API分析——Jquery UI Dialog

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

  4. jQuery UI dialog 的使用

    今天用到了客户端的对话框,把 jQuery UI 中的对话框学习了一下. 准备 jQuery 环境 首先,我们创建一个按钮,点击这个按钮的时候,将会弹出一个对话框. 1 <input type= ...

  5. jQuery UI dialog 參数说明

    前段时间碰到个问题 jquery UI dialog弹出层 弹出多个层是 比方弹出两个层A和B  B层假设显示的数据表格太大,伸到了A层的外面,那伸到A层之外的部分就看不到了,由于B层是在A层上弹出的 ...

  6. Jquery - UI - Dialog(转)

    jQuery UI Dialog常用的参数有: 1.autoOpen:默认true,即dialog方法创建就显示对话框 2.buttons:默认无,用于设置显示的按钮,可以是JSON和Array形式: ...

  7. jQuery UI dialog 参数说明

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

  8. JQuery UI dialog 弹窗实例及参数说明

    按钮代码: <a id="suprise" style="margin-left: 0.5em;cursor:pointer;">点我会有惊喜< ...

  9. jQuery UI dialog插件出错信息:$(this).dialog is not a function

    使用jQuery UI 1.7.2 dialog插件,遇到这样的错误: [img]http://dl.iteye.com/upload/attachment/308166/97c428e4-2ce2- ...

随机推荐

  1. PowerDesigner概述(系统分析与建模)以及如何用PowerDesigner快速的创建出这个数据库

    PowerDesigner是Sybase公司推出的一个集成了企业架构,UML(统一建模语言)和数据库的CASE(计算机辅助软件工程)工具.它 不仅可以用于系统设计和开发的不同阶段(即业务分析,概念模型 ...

  2. CListCtrl

    CListCtrl CCmdTarget     └CListCtrl CListCtrl类封装"列表视图控件"功能,显示每个包含图标(列表视图中)和标签的收集.除图标和标签外,每 ...

  3. html不使用cache数据

    <HEAD>      <META   HTTP-EQUIV="Pragma"   CONTENT="no-cache">     &l ...

  4. Linux学习之七——乱码的解决方案

    一.乱码的原因 乱码是编码不统一引起的,有下面一些地方需要注意 1. Linux 系统默认支持的语系数据:这与 /etc/sysconfig/i18n 有关:2. 你的终端界面 (bash) 的语系: ...

  5. Shell basic1

    A shell script is a text file that typically begins with a shebang, as follows: #!/bin/bash /bin/bas ...

  6. hdu-5904 LCIS(水题)

    题目链接: LCIS Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total ...

  7. SGU 410 Galaxy in danger --贪心,想法题

    题意:有n个星球,每个星球有Ai个人,每次有两种选择,第一是从每个星球上去掉1个人,第二个选择是选择一个星球放置一个科学家,将该星球的人数加倍,问最少多少次能够将所有星球上的人数同时变为0,并且如果步 ...

  8. HOJ 1640 Mobile Phone

    题意:有一个n*n的矩阵,op==1时,在(x,y)增加值z,op==2时,求以(x1,y1)和(x2,y2)构成的矩阵的和. 思路:二维线段树. 代码: #include<stdio.h> ...

  9. 通过JDBC进行简单的增删改查(二)

    本章笔记更易理解和学习,也是我第一次初学的笔记. package javastudy; import java.sql.Connection; import java.sql.DriverManage ...

  10. Linux压力测试工具Tsung安装、使用和图形报表生成

    简介 Tsung 是一个压力测试工具,可以测试包括HTTP, WebDAV, PostgreSQL, MySQL, LDAP, and XMPP/Jabber等服务器.针对 HTTP 测试,Tsung ...