artDialog说明文档

artDialog说明文档

artDialog是一个基于javascript编写的对话框组件，它拥有精致的界面与友好的接口

 自适应内容

artDialog的特殊UI框架能够适应内容变化，甚至连外部程序动态插入的内容它仍然能自适应，因此你不必去考虑消息内容尺寸使用它。它的消息容器甚至能够根据宽度让文本居中或居左对齐——这一切全是XHTML+CSS原生实现。

 完善的接口

它的接口完善，可以轻易与外部程序配合使用。如异步写入消息、控制位置、尺寸、显示与隐藏、关闭等。

 细致的体验

如果不是在输入状态，它支持Esc快捷键关闭；可指定在元素附近弹出，让操作更便捷；智能给按钮添加焦点；黄金比例垂直居中；超大响应区域特别为ipad等触屏设备优化；预先缓存皮肤图片更快响应„„

 跨平台兼容

兼容：IE6+、Firefox、Chrome、Safari、Opera以及iPad等移动设备。并且IE6下也能支持现代浏览器的静止定位(fixed)、、alpha通道png背景。

下载地址：/p/artdialog/downloads/list

快速入门

一、使用传统的参数

(content, ok, cancel)

示例：

('简单愉悦的接口，强大的表现力，优雅的内部实现',

function(){alert('yes');});

(“简单愉悦的接口，强大的表现力，优雅的内部实现”);

二、使用字面量传参

(options)

示例

var dialog = ({

title: '欢迎',

content: '欢迎使用artDialog对话框组件！',

icon: 'succeed',

follow: mentById('btn2'),

ok: function(){

('警告').content('请注意artDialog两秒后将关闭！').lock().time(2);

return false;

}

});

三、扩展方法

需要对弹出后的对话框操作？artDialog简单实用的扩展方法可以使这一切变得简单。

如在ajax异步操作中，我们可以先定义一个变量引用对话框返回的扩展方法：

var myDialog = ();// 初始化一个带有loading图标的空对话框

({

url: '/content?id=1',

success: function (data) {

t(data);// 填充对话框内容

}

});

如果需要使用程序控制关闭，可以使用"close"方法关闭对话框：

();

插件：框架应用工具

artDialog针对CMS类的框架应用提供了专属插件，如穿越框架、iframe、AJAX、跨框架传值操作等。

例： 使用open方法嵌入页面，并使用data方法在各个iframe间传递数据：

var val = mentById('demoInput04-3').value;

('test', val);

('homeDemoPath', './_doc/');

// 此时 页面可以使用 ('test') 获取到数据，如：

// mentById('aInput').value = ('test');

('./_doc/');

jQuery + artDialog

artDialog提供了一个jQuery版本，功能与标准版一致，调用只需要把art前缀改成jQuery的命名空间。

// 普通调用

$.dialog({content:'hello world!'});

// 使用选择器方式，此时自动使用绑定了live click事件，同时启用follow模式

$('#main .test').dialog({content: 'hello world'});

(最低兼容jquery1.3.2，但框架应用插件需要jquery1.4+运行[?])

配置参数

名称 类型 默认值

内容

title

content

String

String

'消息'

'loading..'

标题内容

消息内容。

描述

名称 类型

HTMLElement

默认值 描述

1、如果传入的是HTMLElement类型，如果是隐藏元素会给其设置display:block以显示该元素，其他属性与绑定的事件都会完整保留，对话框关闭后此元素又将恢复原来的display属性，并且重新插入原文档所在位置

2、如果没有设定content的值则会有loading的动画

按钮

Function

ok

Boolean

null

确定按钮回调函数。

函数如果返回false将阻止对话框关闭；函数this指针指向内部api；如果传入true表示只显示有关闭功能的按钮

Function

Boolean

cancel

null

取消按钮回调函数。

函数如果返回false将阻止对话框关闭；函数this指针指向内部api；如果传入true表示只显示有关闭功能的按钮

对话框标题栏的关闭按钮其实就是取消按钮，只不过视觉不同罢了，点击同样触发cancel事件

okVal

cancelVal

String

String

Array

'确定'

'取消'

null

"确定按钮"文字

"取消按钮"文字

自定义按钮。

配置参数成员：

name —— 按钮名称

callback —— 按下后执行的函数

focus —— 是否聚焦点

disabled —— 是否标记按钮为不可用状态（后续可使用扩展方法让其恢复可用状button 态）

示例：

参数如：[{name: '登录', callback:

function () {}}, {name: '取消'}] 。注意点击按钮默认会触发按钮关闭动作，需要阻止触发关闭请让回调函数返回false

尺寸

名称 类型

Number

默认值

'auto'

描述

设置消息内容宽度，可以带单位。一般不需要设置此，对话框框架会自己适应内容。

如果设置为百分值单位，将会以根据浏览器可视范围作为基准，此时如果浏览器窗口大小被改变其也会进行相应的调整

width

String

Number

height

String

'auto'

设置消息内容高度，可以带单位。不建议设置此，而应该让内容自己撑开高度。

如果设置为百分值单位，将会以根据浏览器可视范围作为基准，此时如果浏览器窗口大小被改变其也会进行相应的调整

位置

Boolean

fixed

false

开启静止定位。静止定位是css2.1的一个属性，它静止在浏览器某个地方不动，也不受滚动条拖动影响。（artDialog支持IE6 fixed）

HTMLElement

follow

String

Number

left

String

'50%'

null

让对话框依附在指定元素附近。

可传入元素ID名称，注意ID名称需要以“#”号作为前缀

相对于可视区域的X轴的坐标。

可以使用'0%' ~ '100%'作为相对坐标，如果浏览器窗口大小被改变其也会进行相应的调整

Number

top

String

'38.2%'

相对于可视区域的Y轴的坐标。

可以使用'0%' ~ '100%'作为相对坐标，如果浏览器窗口大小被改变其也会进行相应的调整

视觉

Boolean

lock

false

开启锁屏。

中断用户对话框之外的交互，用于显示非常重要的操作/消息，所以不建议频繁使用它，它会让操作变得繁琐

background

opacity

String

Number

String

icon

'#000'

0.7

null

锁屏遮罩颜色

锁屏遮罩透明度

定义消息图标。可定义“skins/icons/”目录下的图标名作为参数名（不包含后缀名）

名称

padding

类型

String

默认值

'20px 25px'

交互

描述

内容与边界填充边距(即css padding)

time

resize

drag

esc

Number

Boolean

Boolean

Boolean

null

true

true

true

高级

设置对话框显示时间。以秒为单位

是否允许用户调节尺寸

是否允许用户拖动位置

是否允许用户按Esc键关闭对话框

String

id

Number

null

设定对话框唯一标识。用途：

1、防止重复弹出

2、定义id后可以使用[youID]获取扩展方法

Number 1987

重置全局zIndex初始值。

用来改变对话框叠加高度。比如有时候配合外部浮动层UI组件，但是它们可能默认zIndex没有artDialog高，导致无法浮zIndex 动到artDialog之上，这个时候你就可以给对话框指定一个较小的zIndex值。

请注意这是一个会影响到全局的配置，后续出现的对话框叠加高度将重新按此累加。

init

Function

Function

null

null

对话框弹出后执行的函数

对话框关闭前执行的函数。函数如果返回false将阻止对话框关闭。

请注意这不是关闭按钮的回调函数，无论何种方式关闭对话框，close都将执行。

close

show

Boolean true

是否显示对话框

扩展方法

名称

close()

show()

hide()

title(value)

关闭对话框

显示对话框

隐藏对话框

写入标题。无参数则返回标题容器元素

描述

名称

content(value)

描述

向消息容器中写入内容。参数支持字符串、DOM对象，无参数则返回内容容器元素

插入一个自定义按钮。

配置参数成员：

name —— 按钮名称

callback —— 按下后执行的函数

focus —— 是否聚焦点

disabled —— 是否标记按钮为不可用状态（后续可使用扩展方法让其恢复可用状态）

示例：

button(arguments)

button({

name: '登录',

focus: true,

callback: function () {}

}, {

name: '取消'

})

follow(element) 让对话框吸附到指定元素附近

position(left, top) 重新定位对话框

size(width, height) 重新设定对话框大小

lock()

unlock()

time(val)

锁屏

解锁

定时关闭（单位秒）

配置参数演示

内容 [content]

1. 传入字符串

({

content: '我支持HTML'

});

运行»

2. 传入HTMLElement

备注：1、元素不是复制而是完整移动到对话框中，所以原有的事件与属性都将会保留 2、如果隐藏元素被传入到对话框，会设置display:block属性显示该元素 3、对话框关闭的时候元素将恢复到原来在页面的位置，style display属性也将恢复

({

content: mentById('demoCode_content_DOM'),

id: 'EF893L'

});

运行»

标题 [title]

({

title: 'hello world!'

});

运行»

确定取消按钮 [ok & cancel]

备注：回调函数this指向扩展接口，如果返回false将阻止对话框关闭

({

content: '如果定义了回调函数才会出现相应的按钮',

ok: function () {

('3秒后自动关闭').time(3);

return false;

},

cancelVal: '关闭',

cancel: true //为true等价于function(){}

});

运行»

自定义按钮 [button]

备注：回调函数this指向扩展接口，如果返回false将阻止对话框关闭；button参数对应的扩展方法名称也是"button"

({

id: 'testID',

content: 'hello world!',

button: [

{

name: '同意',

callback: function () {

t('你同意了').time(2);

return false;

},

focus: true

},

{

name: '不同意',

callback: function () {

alert('你不同意')

}

},

{

name: '无效按钮',

disabled: true

},

{

name: '关闭我'

}

]

});

运行»

定时关闭的消息 [time]

({

time: 2,

content: '两秒后关闭'

});

运行»

防止重复弹出 [id]

({

id: 'testID2',

content: '再次点击运行看看'

});

({id: 'testID2'}).title('3秒后关闭').time(3);

运行»

定义消息图标 [icon]

请查看skin/icons目录下的图标

({

icon: 'succeed',

content: '我可以定义消息图标哦'

});

运行»

内容与边界填充边距 [padding]

有时候并不需要默认的内容填充边距，如展示图片与视频

({

padding: 0,

title: '照片',

content: '

/>',

lock: true

});

运行»

锁屏 [lock & background & opacity]

({

lock: true,

background: '#600', // 背景色

opacity: 0.87, // 透明度

content: '中断用户在对话框以外的交互，展示重要操作与消息',

icon: 'error',

ok: function () {

({content: '再来一个锁屏', lock: true});

return false;

},

cancel: true

});

运行»

跟随元素 [follw]

1、标准形式

({

follow: mentById('followTestBtn'),

content: '让对话框跟着某个元素，一个元素同时只能出现一个对话框'

});

运行»

2、使用简写形式 （已经绑定onclick事件，注意此返回值不再是对话框扩展方法）

art('#demoCode_follow_a').dialog({

content: '让对话框跟着某个元素，一个元素同时只能出现一个对话框'

});

元素触发运行»

自定义坐标 [left & top]

({

left: 100,

top: '60%',

content: '我改变坐标了'

});

运行»

创建一个右下角浮动的消息窗口

({

id: 'msg',

title: '公告',

content: 'hello world!',

width: 320,

height: 240,

left: '100%',

top: '100%',

fixed: true,

drag: false,

resize: false

})

运行»

设置大小 [width & height]

({

width: '20em',

height: 55,

content: '尺寸可以带单位'

});

运行»

创建一个全屏对话框

({

width: '100%',

height: '100%',

left: '0%',

top: '0%',

fixed: true,

resize: false,

drag: false

})

运行»

静止定位 [fixed]

({

fixed: true,

content: '请拖动滚动条查看'

});

运行»

不许拖拽 [drag & resize]

({

drag: false,

resize: false,

content: '禁止拖拽'

});

运行»

扩展方法演示

特别说明：扩展方法支持链式操作

获取扩展方法一：直接引用返回

var dialog = ({

title: '我是对话框',

content: '我是初始化的内容'

});

t('对话框内容被扩展方法改变了').title('提示');

获取扩展方法二：通过对话框ID

({

id: 'KDf435',

title: '警告',

content: '我是初始化的内容'

});

['KDf435'].content('对话框内容被扩展方法改变了');

获取扩展方法三：回调函数中this

({

title: '警告',

content: '我是初始化的内容',

ok: function () {

t('你点了确定按钮').lock();

return false;

},

init: function () {

t('对话框内容被扩展方法改变了');

}

});

关闭页面所有对话框

var list = ;

for (var i in list) {

list[i].close();

};

按钮接口演示

备注：回调函数如果返回false将阻止对话框关闭

var dialog = ({

title: '警告',

content: '点击管理按钮将让删除按钮可用',

width: '20em',

button: [{

name: '管理',

callback: function () {

this

.content('我更改了删除按钮')

.button({

name: '删除',

disabled: false

})

.lock();

return false;

},

focus: true

}]

});

(

{

name: '删除',

callback: function () {

alert('delect')

},

disabled: true

}

)

标题倒计时

var timer;

({

content: '时间越来越少，越来越少..',

init: function () {

var that = this, i = 5;

var fn = function () {

(i + '秒后关闭');

!i && ();

i --;

};

timer = setInterval(fn, 1000);

fn();

},

close: function () {

clearInterval(timer);

}

}).show();

关闭不删除内容

({

id: 'show-hide',

content: '关闭后阻止对话框被删除，只隐藏对话框',

close: function () {

();

return false;

}

}).show();

AJAX高级应用：执行HTML片段中特殊script标签

HTML片段中的标签包裹的javascript将会在artDialog内部执行，其this指向对话框扩展方法，这样可以进一步实现消息内容模块化。

(本例子使用了AJAX，需要在服务器上运行。可打开 ./ajaxContent/ 查看源码中的自定义脚本)

var dialog = ({id: 'N3690',title: false});

// jQuery ajax

$.ajax({

url: './ajaxContent/',

success: function (data) {

t(data);

},

cache: false

});

应用到你的项目

在页面head引入artDialog，其中skin参数表示对话框使用的风格文件(如果项目采用jQuery作为框架，则引用jQuery artDialog版本)。

如果需要在iframe应用下提供 更好的支持 ，可加载插件：

配置全局默认参数(可选):

(function (config) {

config['lock'] = true;

config['fixed'] = true;

config['okVal'] = 'Ok';

config['cancelVal'] = 'Cancel';

// [more..]

})(ts);