ArtDialog V6的简单使用

artDialog v6 —— 经典的网页对话框组件，内外皆用心雕琢。兼容性测试通过：IE6~IE11、Chrome、Firefox、Safari、Opera授权协议免费，且开源，基于LGPL协议。支持开源贡献代码 ||捐赠一杯咖啡 ||商业授权artDialog，献给那些愿意为 web 极致体验付出的人们！四年来，有超过 40 万网

Joyce-Luo

6452人浏览 · 2014-09-02 11:32:23

Joyce-Luo · 2014-09-02 11:32:23 发布

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="普通对话框" οnclick="javascript:test1();">
    <input type="button" value="模态对话框" οnclick="javascript:test2();">
    <input type="button" value="气泡浮层" οnclick="javascript:test3(this);">
    <input type="button" value="statusbar" οnclick="javascript:test4();">
    <input type="button" value="自定义按钮组" οnclick="javascript:test5();">
  </body>
</html>