artDialog v6 —— 经典的网页对话框组件,内外皆用心雕琢。
兼容性
測试通过:IE6~IE11、Chrome、Firefox、Safari、Opera
授权协议
免费,且开源。基于LGPL协议。
支持开源
artDialog,献给那些愿意为 web 极致体验付出的人们!
四年来。有超过 40 万站点在使用 artDialog,当中不乏国内顶尖的产品:
在artDialog的使用中,使用较多版本号为4.1.7和6了,曾经我都是使用4.1.7版本号,所以来研究了一下v6版本号的使用。直接上代码:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>"> <title>ArtDialog V6</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
--> <link rel="stylesheet" type="text/css" href="artDialog/css/ui-dialog.css"> <script type="text/javascript" src="jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="artDialog/js/dialog-min.js"></script> <script type="text/javascript">
function test1(){
var d = dialog({
title:'欢迎',
content:'欢迎使用 artDialog v6对话框组件。'
});
d.show();
} function test2(){
var d = dialog({
title:'欢迎',
content:'欢迎使用 artDialog v6对话框组件! '
});
d.showModal();
} function test3(obj){
var d = dialog({
content: 'Hello World!',
quickClose: true// 点击空白处高速关闭
});
d.show(obj);
} function test4(){
var d = dialog({
title: '欢迎',
content: '欢迎使用 artDialog 对话框组件! ',
ok: function () {},
statusbar: '<label><input type="checkbox">不再提醒</label>'
});
d.show();
} function test5(){
dialog({
button:[{
value: '允许',
callback: function () {
this
.content('你允许了');
return false;
},
autofocus: true
},{
value: '不允许',
callback: function () {
alert('你不允许')
}
},{
id: 'button-disabled',
value: '无效按钮',
disabled: true
},{
value: '关闭我'
}]
}).show();
}
</script>
</head> <body>
<input type="button" value="普通对话框" onclick="javascript:test1();">
<input type="button" value="模态对话框" onclick="javascript:test2();">
<input type="button" value="气泡浮层" onclick="javascript:test3(this);">
<input type="button" value="statusbar" onclick="javascript:test4();">
<input type="button" value="自己定义按钮组" onclick="javascript:test5();">
</body>
</html>
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbHVvMjAxMjI3/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbHVvMjAxMjI3/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">
有不懂,想要其它效果的能够去看看API,一切就都能够轻松搞定了