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>
有不懂,想要其它效果的能够去看看API,一切就都能够轻松搞定了