xqlee 1135 0 2017-07-27 18:37:31

文章位置:左搜> 编程技术> 正文

问题:

artdialog怎么使用?

一、获取artdialog组件

获取途径:
  1. 官网下载:http://aui.github.io/artDialog/
  2. GitHub获取:https://github.com/aui/artDialog

二、下载后的文档目录

    在官网或者GitHub下载下来的artDialog文件目录如下图:
    artDialog目录结构

三、引入必要的文件

    引入artDialog v7.0必要的js文件
    
<!-- 映入必要的文件 -->
<script type="text/javascript" src="../../libs/jQuery/jquery.js"></script>
<script src="../../libs/artDialog/v7.0/dialog.js?skin=default"></script>

四、编写一个简单demo

    这里编写一个简单的demo来告诉你,artDialog怎么使用
    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo artDialog</title>
</head>
<body>
<button id="alert-btn">弹出页面按钮</button>
<!-- 映入必要的文件 -->
<script type="text/javascript" src="../../libs/jQuery/jquery.js"></script>
<script src="../../libs/artDialog/v7.0/dialog.js?skin=default"></script>
<script type="text/javascript">
$(function(){
	
	//绑定按钮事件
	$('#alert-btn').click(function(){
		var d = dialog({
			title: '欢迎',
			content: '欢迎使用 artDialog 对话框组件!'
		});
		d.show();
	});
});
</script>
</body>
</html>

效果图:
artdialog弹出demo

其他的options可以参考官方的文档进行配置。

评论区域

暂无评论,快来抢首发吧!!!