artDialog.js各种用法

最新推荐文章于 2018-08-02 17:44:13 发布

weixin_30467087

最新推荐文章于 2018-08-02 17:44:13 发布

阅读量222

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/penty/archive/2013/01/06/2847521.html

版权

下面的是出现artDailog.js官网的例子。官网地址：http://www.planeart.cn/demo/artDialog/ 想学新的就参考官方网址。我这是4.1.2版本的。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/artDialog/artDialog.js"></script>
<script type="text/javascript" src="js/artDialog/artDialog.source.js?skin=default"></script>
<title>artDialog</title>
<script type="text/javascript">

}
function eight(){
art.dialog({
icon: 'succeed',
content: '我可以定义消息图标哦'
});
}
function nine(){
art.dialog({
padding: 0,
title: '照片',
content: '<img src="./image/one/5.jpg" width="379" height="500" />',
lock: true
});
}
function ten(){
art.dialog({
lock: true,
background: '#600', // 背景色
opacity: 0.87, // 透明度
content: '中断用户在对话框以外的交互，展示重要操作与消息',
icon: 'error',
ok: function () {
art.dialog({content: '再来一个锁屏', lock: true});
return false;
},
cancel: true
});
}
function eleven(){
art.dialog({
follow: document.getElementById('followTestBtn'),
content: '让对话框跟着某个元素，一个元素同时只能出现一个对话框,还有另一种参考说明文档'
});
}
function twelve(){
art('#demoCode_follow_a').dialog({
content: '让对话框跟着某个元素，一个元素同时只能出现一个对话框'
});
}
function thirteen(){
art.dialog({
left: 100,
top: '60%',
content: '我改变坐标了'
});
}
function fourteen(){
art.dialog({
id: 'msg',
title: '公告',
content: 'hello world!',
width: 320,
height: 240,
left: '100%',
top: '100%',
fixed: true,
drag: false,
resize: false
})
}
function fifteen(){
art.dialog({
width: '20em',
height: 55,
content: '尺寸可以带单位'
});
}
function sixteen(){
art.dialog({
width: '100%',
height: '100%',
left: '0%',
top: '0%',
fixed: true,
resize: false,
drag: false
})
}
function seventeen(){
art.dialog({
fixed: true,
content: '请拖动滚动条查看'
});
}
function eighteen(){
art.dialog({
drag: false,
resize: false,
content: '禁止拖拽'
});
}
function nineteen(){
var dialog = art.dialog({
title: '我是对话框',
content: '我是初始化的内容'
});

dialog.content('对话框内容被扩展方法改变了').title('提示');
}
function twenty(){
art.dialog({
id: 'KDf435',
title: '警告',
content: '我是初始化的内容'
});

art.dialog.list['KDf435'].content('对话框内容被扩展方法改变了');
}
function twentyOne(){
art.dialog({
title: '警告',
content: '我是初始化的内容',
ok: function () {
this.content('你点了确定按钮').lock();
return false;
},
init: function () {
this.content('对话框内容被扩展方法改变了');
}
});

}
function twentyTwo(){
var list = art.dialog.list;
for (var i in list) {
list[i].close();
};
}
function twentyThree(){
var dialog = art.dialog({
title: '警告',
content: '点击管理按钮将让删除按钮可用',
width: '20em',
button: [{
name: '管理',
callback: function () {
this
.content('我更改了删除按钮')
.button({
name: '删除',
disabled: false
})
.lock();
return false;
},
focus: true
}]
});
dialog.button(
{
name: '删除',
callback: function () {
alert('delect')
},
disabled: true
}
)
}

function twentyFour(){
var timer;
art.dialog({
content: '时间越来越少，越来越少..',
init: function () {
var that = this, i = 5;
var fn = function () {
that.title(i + '秒后关闭');
!i && that.close();
i --;
};
timer = setInterval(fn, 1000);
fn();
},
close: function () {
clearInterval(timer);
}
}).show();
}
function twentyFive(){
art.dialog({
id: 'show-hide',
content: '关闭后阻止对话框被删除，只隐藏对话框',
close: function () {
this.hide();
return false;
}
}).show();
}
function twentySix(){
var dialog = art.dialog({id: 'N3690',title: false});

// jQuery ajax
$.ajax({
url: './artDialog2.html',
success: function (data) {
dialog.content(data);
},
cache: false
});

}
function timeCole(){
var timer;
art.dialog({
content: '时间越来越少，越来越少..',
init: function () {
var that = this, i = 5;
var fn = function () {
that.title(i + '秒后关闭');

!i && that.close();
i --;
};
timer = setInterval(fn, 1000);
fn();
},
close: function () {
clearInterval(timer);
}
}).show();
}
</script>
</head>
<body>
<input type="button" οnclick="one()" value="传入字符串"></br>
<input type="button" οnclick="two()" value="传入HTMLElement"><input type="text" id='demoCode_content_DOM' value="你好"></br>
<input type="button" οnclick="three()" value="标题[title]"></br>
<input type="button" οnclick="four()" value="确定取消按钮[ok & cancel]"></br>
<input type="button" οnclick="five()" value="自定义按钮[button]"></br>
<input type="button" οnclick="six()" value="定时关闭的消息[time]"></br>
<input type="button" οnclick="seven()" value="防止重复弹出[id]"></br>
<input type="button" οnclick="eight()" value="定义消息图标[icon]"></br>
<input type="button" οnclick="nine()" value="内容与边界填充边距[padding]"></br>
<input type="button" οnclick="ten()" value="锁屏 [lock & background & opacity]"></br>
<input type="button" οnclick="eleven()" value="跟随元素 [follw]"><input value="跟随元素 [follw]" type="text" id="followTestBtn"></br>
<input type="button" οnclick="twelve()" value="跟随元素 [follw]"><input value="跟随元素 2[follw]" type="text" id="demoCode_follow_a"></br>
<input type="button" οnclick="thirteen()" value="自定义坐标 [left & top]"></br>
<input type="button" οnclick="fourteen()" value="创建一个右下角浮动的消息窗口"></br>
<input type="button" οnclick="fifteen()" value="设置大小 [width & height]"></br>
<input type="button" οnclick="sixteen()" value="创建一个全屏对话框"></br>
<input type="button" οnclick="seventeen()" value="静止定位 [fixed]"></br>
<input type="button" οnclick="eighteen()" value="不许拖拽 [drag & resize] "></br>
<input type="button" οnclick="nineteen()" value="获取扩展方法一：直接引用返回"></br>
<input type="button" οnclick="twenty()" value="获取扩展方法二：通过对话框ID"></br>
<input type="button" οnclick="twentyOne()" value="获取扩展方法三：回调函数中this"></br>
<input type="button" οnclick="twentyTwo()" value="关闭页面所有对话框"></br>
<input type="button" οnclick="twentyThree()" value="回调函数如果返回false将阻止对话框关闭"></br>
<input type="button" οnclick="twentyFour()" value="标题倒计时"></br>
<input type="button" οnclick="twentyFive()" value="关闭不删除内容"></br>
<input type="button" οnclick="twentySix()" value="AJAX高级应用：执行HTML片段中特殊script标签"></br>

</body>
</html>

转载于:https://www.cnblogs.com/penty/archive/2013/01/06/2847521.html

weixin_30467087

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
artDialog.js各种用法

下面的是出现artDailog.js官网的例子。官网地址：http://www.planeart.cn/demo/artDialog/ 想学新的就参考官方网址。我这是4.1.2版本的。<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&...
复制链接

扫一扫