artDialog 弹层

最新推荐文章于 2021-08-05 18:59:19 发布

happyzwh

最新推荐文章于 2021-08-05 18:59:19 发布

阅读量1.2k

点赞数

分类专栏：学习交流文章标签： JavaScript

本文链接：https://blog.csdn.net/happyzwh/article/details/10096921

版权

学习交流专栏收录该内容

50 篇文章 0 订阅

订阅专栏

大家经常在网上看到弹出层，不仅效果很炫而且用户体验度很好！artDialog就是实现弹出框功能的一款国产的优秀插件，基于js编写的。

先来看下面几个弹出层效果：

怎么样，效果不错吧！

artDialog下载地址为：http://code.google.com/p/artdialog/downloads/list，已经到5.0版本了。

artDialog开发者博客：www.planeart.cn（本人看了，很干净的一个博客，不愧是搞前端的人！）

artDialog界面友好，并且兼容各个浏览器，自身功能非常强大。可以不需要jquery库就能应用。

下载的文件里面包含使用教程，那就来看看是怎么应用这款插件的吧！

js教程如下：

(1).首先当然是引入样式和脚本文件了，

(2).进行调用。

(I)使用参数调用

art.dialog(content, [ok], [cancel])

js代码：

 
 art.dialog('这是php点点通的教程', function () {alert('你点击确定了')},function(){alert('你点击取消了');});

以上js实例运行结果：

(II)字面量进行传值。

art.dialog(Object)

js代码：

 
 <html>
 <head>
  <title> jquery </title>
  <meta charset="utf-8">
  <link href="./artDialog/skins/chrome.css" rel="stylesheet" />
  <script src="./artDialog/artDialog.min.js"></script>
  <script>
function test(){
	art.dialog({
    width:300,
	height:100,
	id: 'shake-demo',
    title: '用户注册',
    content: '帐号：<input type="text" value="" /><br />'
        + '密码：<input id="login-pw" type="text" value="" />',
    lock: true,
    fixed: true,
    ok: function () {
        var pw = document.getElementById('login-pw');
        pw.select();
    	pw.focus();
        return false;
    },
    okValue: '提交',
    cancelValue:'取消',
	cancel: function () {
		alert('取消注册');
	}
    });
}
  </script>
 </head>
 <body>
  <input type="button" value="注册" onclick="test()">
  </div>
 </body>
</html>