标签:artdialog 对话框 web javascript 腾讯
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,一切就都可以轻松搞定了
标签:artdialog 对话框 web javascript 腾讯
原文地址:http://blog.csdn.net/luo201227/article/details/39003795