最近在做项目的时候需要对很多的页面进行改造,将已有的页面已div的形式弹出来,自己在网上找了很多jQuery的插件但是都觉得不够好,最后发现了一个国产的插件“artDialog”还不错(支持国产啊:D ),使用很简单、上手快、API全!
一、下载
地址:http://code.google.com/p/artdialog/downloads/list
官方网站:
http://www.planeart.cn
二、应用到项目
1、将下载的zip包解压后整体copy到项目中
2、在页面head引入一个js文件
Js代码
- src="artDialog3.0.4/artDialog.min.js"></script>
<script src="artDialog3.0.4/artDialog.min.js"></script>
Js代码
- <script>
- // 设置对话框全局默认配置
- (function(){
- var d = art.dialog.defaults;
- // 按需加载要用到的皮肤,数组第一个为默认皮肤
- // 如果只使用默认皮肤,可以不填写skin
- d.skin = ['default', 'chrome', 'facebook', 'aero'];
- // 支持拖动
- d.drag = true;
- // 超过此面积大小的对话框使用替身拖动
- d.showTemp = 100000;
- })();
<script>// 设置对话框全局默认配置 (function(){ var d = art.dialog.defaults; // 按需加载要用到的皮肤,数组第一个为默认皮肤 // 如果只使用默认皮肤,可以不填写skin d.skin = ['default', 'chrome', 'facebook', 'aero']; // 支持拖动 d.drag = true; // 超过此面积大小的对话框使用替身拖动 d.showTemp = 100000; })(); </script>
4、在自己的js函数里面使用
Js代码
- function test(){
- art.dialog({
- lock: true,
- content: '中断用户在对话框以外的交互,展示重要操作与消息',
- yesFn: function(){
- art.dialog({content: '再来一个锁屏', lock: true});
- return false;
- },
- noFn: true
- }
function test(){ art.dialog({ lock: true, content: '中断用户在对话框以外的交互,展示重要操作与消息', yesFn: function(){ art.dialog({content: '再来一个锁屏', lock: true}); return false; }, noFn: true }); }
效果如下:
更多参数配置可以查看下载中自带的API。。
http://imshare.iteye.com/blog/823859