function addPlanCycleInfo(page,listnum){ var myDialog = $.dialog.open('planCycleInfo.php?id='+$("#yearId").val(),{ id:'unit_edit', title:'计划周期添加', window:'top', 550, height:400, lock:true, opacity:0.3, button: [ { name: '保存', callback: function () { var iframe = this.iframe.contentWindow; var re=iframe.addPlanInfo();//调用弹出窗口的方法 pagelist(page,listnum);查询数据 return re; }, focus: true }, { name: '关闭', callback: function () { }, focus: false } ] }); }
//嵌入iframe art.dialog({title:'dialog内嵌iframe', iframe:'http://www.baidu.com', '900', height:'500'});
//tips框 art.dialog.tips('截取图片的高度或宽度不能小于0!', 2);
function addData(){ $.ajaxSetup({async:false});//异步很重要 var typeId=$("#typeId").find("option:selected").val(); var courseId=$("#courseId").find("option:selected").val(); var versionid=$("#versionid").find("option:selected").val(); var planCycle=$("#planCycle").find("option:selected").val(); var gradeId=$("#gradeId").val(); var unitname=$("#unitname").val(); var flag = false; //alert(gradeId+'|'+unitname+'|'+typeId+'|'+courseId+'|'+versionid+'|'+planCycle); if (gradeId==""){ $.dialog({ content:'年级不能为空', lock:true, opacity:0.3, 160, height:45, ok:function(){} }); document.baseForm.gradeId.focus(); return false; }else if(unitname==""){ $.dialog({ content:'单元不能为空', lock:true, opacity:0.3, 160, height:45, ok:function(){} }); document.baseForm.unitname.focus(); return false; }else{ $.getJSON('ajaxResult.php', { action:"addPlanManage", gradeId:gradeId, unitname:unitname, typeId:typeId, courseId:courseId, versionid:versionid, planCycle:planCycle },function(data){ //alert(data.flag); if (data.flag=="ok"){ flag = true; }else{ $.dialog({ content:'添加的数据已存在', lock:true, opacity:0.3, 160, height:45, ok:function(){} }); flag=false; } }); return flag; } }
art.dialog调用父页面的方法
window.parent.insertFileinfo(data);
子父窗口互相传值
art.dialog.data('wordid', data);//赋值
art.dialog.data('wordid');//取值
父窗口获取弹窗的页面的值
$('#tagname',iframe.document).val();
根据id关闭某个弹窗
art.dialog({id: 'addKecheng'}).close();
window.parent.art.dialog({id: 'readInfo'}).close();
去掉弹窗右上角的X关闭按钮
cancel:false,
art.dialog的全局设置
$(function(){ var d = art.dialog.defaults; d.fixed=true; d.left="60%"; d.top="20%"; });
导入中...弹窗
var dloading = art.dialog({time:30,title:'导入中……',130,height:30,opacity:0.3,lock:true});
art.prompt(content, ok, [defaultValue])
art.prompt('你的名字是什么？', function (value) {
alert(value);
}, '糖饼');
shake()
art.dialog({ id: 'shake-demo', title: '登录', content: '帐号：<input id="login-na" type="text" value="guest" />' + '<br />密码：<input id="login-pw" type="text" value="****" />', initialize: function () { document.getElementById('login-na').focus(); }, lock: true, fixed: true, ok: function () { var pw = document.getElementById('login-pw'); pw.select(); pw.focus(); this.shake(); return false; }, okValue: '登录', cancel: function () {} });
art.confirm(content, ok, [cancel])
art.confirm('你再也不相信爱情了么？', function () {
alert(0);
}, function () {
alert(1);
});
time(value)
- 概述
- 设置对话框显示时间，超过时间自动关闭 (单位：毫秒)
- 参数
- value
- 毫秒
- 示例
var dialog = art.dialog(); dialog.time(2000);
follow(element)
- 概述
- 让对话框依附在指定元素附近
- 参数
- element
- 元素
- 示例
var dialog = art.dialog(); dialog.follow(document.getElementById('api-follow-demo-runCode'));
配置参数
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| 内容 | |||
| title | String | '消息' | 标题内容 |
| content | String | null | 消息内容。 1、如果内容类型是Object还需要tmpl参数配合 2、如果传入的是HTMLElement类型，如果是隐藏元素会给其设置display:block以显示该元素，其他属性与绑定的事件都会完整保留，对话框关闭后此元素又将恢复原来的display属性，并且重新插入原文档所在位置 3、如果没有设定content的值则会有loading的动画 |
| HTMLElement | |||
| Object | |||
| 按钮 | |||
| yesFn | Function | null | 确定按钮回调函数。 函数如果返回false将阻止对话框关闭；函数this指针指向内部api；如果传入true表示只显示有关闭功能的按钮 |
| Boolean | |||
| noFn | Function | null | 取消按钮回调函数。 函数如果返回false将阻止对话框关闭；函数this指针指向内部api；如果传入true表示只显示有关闭功能的按钮 对话框标题栏的关闭按钮其实就是取消按钮，只不过视觉不同罢了，点击同样触发noFn事件 |
| Boolean | |||
| yesText | String | '确定' | "确定按钮"文字 |
| noText | String | '取消' | "取消按钮"文字 |
| button | Array | null | 自定义按钮。 配置参数成员： name —— 按钮名称
callback —— 按下后执行的函数
focus —— 是否聚焦点
disabled —— 是否标记按钮为不可用状态（后续可使用控制接口让其恢复可用状态）
示例：
参数如：[{name: '登录', callback: function () {}}, {name: '取消'}] 。注意点击按钮默认会触发按钮关闭动作，需要阻止触发关闭请让回调函数返回false |
| 尺寸 | |||
| width | Number | 'auto' | 设置消息内容宽度，可以带单位。一般不需要设置此，对话框框架会自己适应内容。 如果设置为百分值单位，将会以根据浏览器可视范围作为基准，此时如果浏览器窗口大小被改变其也会进行相应的调整 |
| String | |||
| height | Number | 'auto' | 设置消息内容高度，可以带单位。不建议设置此，而应该让内容自己撑开高度。 如果设置为百分值单位，将会以根据浏览器可视范围作为基准，此时如果浏览器窗口大小被改变其也会进行相应的调整 |
| String | |||
| 位置 | |||
| fixed | Boolean | false | 开启静止定位。静止定位是css2.1的一个属性，它静止在浏览器某个地方不动，也不受滚动条拖动影响。（artDialog支持IE6 fixed） |
| follow | HTMLElement | null | 让对话框依附在指定元素附近。 可传入元素ID名称，注意ID名称需要以“#”号作为前缀 |
| String | |||
| left | Number | '50%' | X轴的坐标。 1、如果开启了fixed参数则以浏览器视口为基准； 2、可以使用'0%' ~ '100%'作为相对坐标，如果浏览器窗口大小被改变其也会进行相应的调整 |
| String | |||
| top | Number | 'goldenRatio' | Y轴的坐标。 1、如果开启了fixed参数则以浏览器视口为基准； 2、可以使用'0%' ~ '100%'、''goldenRatio''作为相对坐标，如果浏览器窗口大小被改变其也会进行相应的调整，其中'goldenRatio'表示为黄金比例垂直居中，绝对居中请使用'50%' |
| String | |||
| 视觉 | |||
| lock | Boolean | false | 开启锁屏。 中断用户对话框之外的交互，用于显示非常重要的操作/消息，所以不建议频繁使用它 |
| background | String | '#000' | 锁屏遮罩颜色 |
| opacity | Number | 0.7 | 锁屏遮罩透明度 |
| icon | String | null | 定义消息图标。可定义“skins/icons/”目录下的图标名作为参数名（不包含后缀名） |
| padding | String | '20px 25px' | 内容与边界填充边距(即css padding) |
| 交互 | |||
| time | Number | null | 设置对话框显示时间。以秒为单位 |
| resize | Boolean | true | 是否允许用户调节尺寸 |
| drag | Boolean | true | 是否允许用户拖动位置 |
| esc | Boolean | true | 是否允许用户按Esc键关闭对话框 |
| 高级 | |||
| id | String | null | 设定对话框唯一标识。用途： 1、防止重复弹出 2、可后续使用art.dialog.list[youID]获取控制接口 |
| Number | |||
| tmpl | String | null | 启用模板引擎拼接消息内容，还需要与content参数传入字面量对象才能生效，详情见示例 |
| zIndex | Number | 1987 | 重置全局zIndex初始值。 用来改变对话框叠加高度。比如有时候配合外部浮动层UI组件，但是它们可能默认zIndex没有artDialog高，导致无法浮动到artDialog之上，这个时候你就可以给对话框指定一个较小的zIndex值。 请注意这是一个会影响到全局的配置，后续出现的对话框叠加高度将重新按此累加。 |
| initFn | Function | null | 对话框弹出后执行的函数 |
| closeFn | Function | null | 对话框关闭前执行的函数。函数如果返回false将阻止对话框关闭。 请注意这不是关闭按钮的回调函数，无论何种方式关闭对话框，closeFn都将执行。 |
| show | Boolean | true | 是否显示对话框 |