[简单]artDialog简单示例

53873039oycg

浏览: 843893 次
性别:

最近访客更多访客>>

junJZ_2008

nessiah

hao___feng

China丰

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jQuery

artDialog文档API链接:http://www.planeart.cn/demo/artDialog/_doc/API.html#options,上面有详细的介绍各参数的用法。

下面是一个简单的例子,代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>artDialog简单例子</title>
<link type="text/css" href="../../js/artDialog/skins/default.css"
	rel="stylesheet" />
<script type="text/javascript" src="../../js/jquery-2.1.0.js"></script>
<script type="text/javascript" src="../../js/artDialog/artDialog.js"></script>
<style>
* {
	margin: 0px;
	padding: 0px;
}

#testDiv {
	width: 900px;
	margin: 0 auto;
	border: 1px solid #f4f4f4;
}

#contentDiv {
	width: 100%;
	text-align: center;
}

#submitDiv {
	width: 100px;
	padding: 20px 0;
	text-align: center;
	margin: 0 auto;
	text-align: center;
}

#submitDiv span {
	color: #fff;
	background: #89D900;
	height: 25px;
	width: 100px;
	display: block;
	line-height: 25px;
	font-weight: bold;
}

#submitDiv a {
	text-decoration: none;
}

input {
	height: 20px;
	line-height: 20px;
	margin-bottom: 6px;
	width: 200px;
}

select {
	height: 24px;
	line-height: 20px;
	padding: 2px 0;
	margin-bottom: 6px;
}

.leftpadding {
	padding-left: 23px;
}

.fixwidth {
	width: 200px;
}
</style>
<script>
	function artDialogTest(iconType,varTitle, content) {
		if(iconType==''){
			iconType='succeed';
		}
		var dialog = art.dialog({
			title : varTitle,
			content : '<p style="font-size:16px;">' + content + '</p>',
			cancel: false,
			drag:false,
			icon : iconType,
			button : [ {
				name : '确定',
				callback : function() {
					this.close();
					return false;
				},
				focus : true
			} ]
		});
	}
	$(function() {
		$('#submitBtn').on('click', function() {
			var varIcon = $('#icon_select').find("option:selected").val();
			var varTitle = $('#title_input').val();
			var varContent = $('#content_input').val();
			artDialogTest(varIcon,varTitle, varContent);
		});
	});
</script>
</head>
<body>
	<div id="testDiv">
		<div id="contentDiv">
			<label for="v_icon" class="leftpadding">图标类型：</label>
			<select
				id="icon_select" placeholder="请选择" class="fixwidth">
				<option value="" disabled selected style='display: none;'>请选择</option>
				<option value="succeed">成功</option>
				<option value="error">错误</option>
				<option value="loading">加载</option>
				<option value="warning">警告</option>
				<option value="question">疑问</option>
			</select> <br /> 
			<label for="v_title">弹出层标题：</label>
			   <input type="text" id="title_input" name="title_input" /><br /> 
			 <label for="v_content">弹出层内容：</label>
			 <input type="text" id="content_input" name="content_input" /><br />
		</div>
		<div id="submitDiv">
			<a id="submitBtn" href="javascript:void(0);"> <span>点击弹出框</span></a>
		</div>
	</div>
</body>
</html>

运行结果如下：

全文完。