Jquery_artDialog对话框弹出

时间  2019-12-15
标签 jquery artdialog 对话框 弹出 栏目 JQuery 繁體版
原文   原文链接

artDialog是一个基于javascript编写的对话框组件，它拥有精致的界面与友好的接口
l  自适应内容
artDialog的特殊UI框架可以适应内容变化，甚至连外部程序动态插入的内容它仍然能自适应，所以你没必要去考虑消息内容尺寸使用它。它的消息容器甚至可以根据宽度让文本居中或居左对齐——这一切全是XHTML+CSS原生实现。

l  完善的接口
它的接口完善，能够轻易与外部程序配合使用。如异步写入消息、控制位置、尺寸、显示与隐藏、关闭等。

l  细致的体验
若是不是在输入状态，它支持Esc快捷键关闭；可指定在元素附近弹出，让操做更便捷；智能给按钮添加焦点；黄金比例垂直居中；超大响应区域特别为ipad等触屏设备优化；预先缓存皮肤图片更快响应……

l  跨平台兼容
兼容：IE6+、Firefox、Chrome、Safari、Opera以及iPad等移动设备。而且IE6下也能支持现代浏览器的静止定位(fixed)、、alpha通道png背景。
下载地址：http://code.google.com/p/artdialog/downloads/list

 
快速入门
1、使用传统的参数
art.dialog(content, ok, cancel)
示例：
art.dialog('简单愉悦的接口，强大的表现力，优雅的内部实现', function(){alert('yes');});
art.dialog(“简单愉悦的接口，强大的表现力，优雅的内部实现”);

2、使用字面量传参
art.dialog(options)
示例
    var dialog = art.dialog({
    title: '欢迎',
    content: '欢迎使用artDialog对话框组件！',
    icon: 'succeed',
    follow: document.getElementById('btn2'),
    ok: function(){
        this.title('警告').content('请注意artDialog两秒后将关闭！').lock().time(2);
        return false;
    }
});

3、扩展方法
须要对弹出后的对话框操做？artDialog简单实用的扩展方法可使这一切变得简单。
如在ajax异步操做中，咱们能够先定义一个变量引用对话框返回的扩展方法：

var myDialog = art.dialog();// 初始化一个带有loading图标的空对话框
jQuery.ajax({
    url: 'http://web5.qq.com/content?id=1',
    success: function (data) {
        myDialog.content(data);// 填充对话框内容
    }
});

若是须要使用程序控制关闭，可使用"close"方法关闭对话框：
myDialog.close();


插件：框架应用工具
artDialog针对CMS类的框架应用提供了专属插件，如穿越框架、iframe、AJAX、跨框架传值操做等。
例： 使用open方法嵌入页面，并使用data方法在各个iframe间传递数据：

var val = document.getElementById('demoInput04-3').value;
art.dialog.data('test', val);
art.dialog.data('homeDemoPath', './_doc/');
// 此时iframeA.html 页面可使用art.dialog.data('test') 获取到数据，如：
// document.getElementById('aInput').value = art.dialog.data('test');
art.dialog.open('./_doc/iframeA.html');

jQuery + artDialog
artDialog提供了一个jQuery版本，功能与标准版一致，调用只须要把art前缀改为jQuery的命名空间。
// 普通调用
$.dialog({content:'hello world!'});
// 使用选择器方式，此时自动使用绑定了live click事件，同时启用follow模式
$('#main .test').dialog({content: 'hello world'});
(最低兼容jquery1.3.2，但框架应用插件须要jquery1.4+运行[?])

配置参数javascript

名称 类型 默认值 描述
内容
title String '消息' 标题内容
content String 'loading..' 消息内容。
一、若是传入的是HTMLElement类型，若是是隐藏元素会给其设置display:block以显示该元素，其余属性与绑定的事件都会完整保留，对话框关闭后此元素又将恢复原来的display属性，而且从新插入原文档所在位置
二、若是没有设定content的值则会有loading的动画
HTMLElement
按钮
ok Function null 肯定按钮回调函数。
函数若是返回false将阻止对话框关闭；函数this指针指向内部api；若是传入true表示只显示有关闭功能的按钮
Boolean
cancel Function null 取消按钮回调函数。
函数若是返回false将阻止对话框关闭；函数this指针指向内部api；若是传入true表示只显示有关闭功能的按钮
对话框标题栏的关闭按钮其实就是取消按钮，只不过视觉不一样罢了，点击一样触发cancel事件
Boolean
okVal String '肯定' "肯定按钮"文字
cancelVal String '取消' "取消按钮"文字
button Array null 自定义按钮。
配置参数成员：
name —— 按钮名称
callback —— 按下后执行的函数
focus —— 是否聚焦点
disabled —— 是否标记按钮为不可用状态（后续可以使用扩展方法让其恢复可用状态）
 
示例：
参数如：[{name: '登陆', callback: function () {}}, {name: '取消'}] 。注意点击按钮默认会触发按钮关闭动做，须要阻止触发关闭请让回调函数返回false
尺寸
width Number 'auto' 设置消息内容宽度，能够带单位。通常不须要设置此，对话框框架会本身适应内容。
若是设置为百分值单位，将会以根据浏览器可视范围做为基准，此时若是浏览器窗口大小被改变其也会进行相应的调整
String
height Number 'auto' 设置消息内容高度，能够带单位。不建议设置此，而应该让内容本身撑开高度。
若是设置为百分值单位，将会以根据浏览器可视范围做为基准，此时若是浏览器窗口大小被改变其也会进行相应的调整
String
位置
fixed Boolean false 开启静止定位。静止定位是css2.1的一个属性，它静止在浏览器某个地方不动，也不受滚动条拖动影响。（artDialog支持IE6 fixed）
follow HTMLElement null 让对话框依附在指定元素附近。
可传入元素ID名称，注意ID名称须要以“#”号做为前缀
String
left Number '50%' 相对于可视区域的X轴的坐标。
可使用'0%' ~ '100%'做为相对坐标，若是浏览器窗口大小被改变其也会进行相应的调整
String
top Number '38.2%' 相对于可视区域的Y轴的坐标。
可使用'0%' ~ '100%'做为相对坐标，若是浏览器窗口大小被改变其也会进行相应的调整
String
视觉
lock Boolean false 开启锁屏。
中断用户对话框以外的交互，用于显示很是重要的操做/消息，因此不建议频繁使用它，它会让操做变得繁琐
background String '#000' 锁屏遮罩颜色
opacity Number 0.7 锁屏遮罩透明度
icon String null 定义消息图标。可定义“skins/icons/”目录下的图标名做为参数名（不包含后缀名）
padding String '20px 25px' 内容与边界填充边距(即css padding)
交互
time Number null 设置对话框显示时间。以秒为单位
resize Boolean true 是否容许用户调节尺寸
drag Boolean true 是否容许用户拖动位置
esc Boolean true 是否容许用户按Esc键关闭对话框
高级
id String null 设定对话框惟一标识。用途：
一、防止重复弹出
二、定义id后可使用art.dialog.list[youID]获取扩展方法
Number
zIndex Number 1987 重置全局zIndex初始值。
用来改变对话框叠加高度。好比有时候配合外部浮动层UI组件，可是它们可能默认zIndex没有artDialog高，致使没法浮动到artDialog之上，这个时候你就能够给对话框指定一个较小的zIndex值。
请注意这是一个会影响到全局的配置，后续出现的对话框叠加高度将从新按此累加。
init Function null 对话框弹出后执行的函数
close Function null 对话框关闭前执行的函数。函数若是返回false将阻止对话框关闭。
请注意这不是关闭按钮的回调函数，不管何种方式关闭对话框，close都将执行。
show Boolean true 是否显示对话框

扩展方法css

名称 描述
close() 关闭对话框
show() 显示对话框
hide() 隐藏对话框
title(value) 写入标题。无参数则返回标题容器元素
content(value) 向消息容器中写入内容。参数支持字符串、DOM对象，无参数则返回内容容器元素
button(arguments) 插入一个自定义按钮。
配置参数成员：
name —— 按钮名称
callback —— 按下后执行的函数
focus —— 是否聚焦点
disabled —— 是否标记按钮为不可用状态（后续可以使用扩展方法让其恢复可用状态）
 
示例：
button({
    name: '登陆',
    focus: true,
    callback: function () {}
}, {
    name: '取消'
})
follow(element) 让对话框吸附到指定元素附近
position(left, top) 从新定位对话框
size(width, height) 从新设定对话框大小
lock() 锁屏
unlock() 解锁
time(val) 定时关闭（单位秒）

配置参数演示
内容[content]
1. 传入字符串html

art.dialog({
    content: '我支持HTML'
});java


2. 传入HTMLElement
备注：一、元素不是复制而是完整移动到对话框中，因此原有的事件与属性都将会保留二、若是隐藏元素被传入到对话框，会设置display:block属性显示该元素三、对话框关闭的时候元素将恢复到原来在页面的位置，style display属性也将恢复jquery

art.dialog({
    content: document.getElementById('demoCode_content_DOM'),
    id: 'EF893L'
});web


标题[title]ajax

art.dialog({
    title: 'hello world!'
});api


肯定取消按钮[ok & cancel]
备注：回调函数this指向扩展接口，若是返回false将阻止对话框关闭浏览器

art.dialog({
    content: '若是定义了回调函数才会出现相应的按钮',
    ok: function() {
        this.title('3秒后自动关闭').time(3);
        returnfalse;
    },
    cancelVal: '关闭',
    cancel: true//为true等价于function(){}
});缓存


自定义按钮[button]
备注：回调函数this指向扩展接口，若是返回false将阻止对话框关闭；button参数对应的扩展方法名称也是"button"

art.dialog({
    id: 'testID',
    content: 'hello world!',
    button: [
        {
            name: '赞成',
            callback: function() {
                this.content('你赞成了').time(2);
                returnfalse;
            },
            focus: true
        },
        {
            name: '不一样意',
            callback: function() {
                alert('你不一样意')
            }
        },
        {
            name: '无效按钮',
            disabled: true
        },
        {
            name: '关闭我'
        }
    ]
});


定时关闭的消息[time]

art.dialog({
    time: 2,
    content: '两秒后关闭'
});


防止重复弹出[id]

art.dialog({
    id: 'testID2',
    content: '再次点击运行看看'
});
art.dialog({id: 'testID2'}).title('3秒后关闭').time(3);


定义消息图标[icon]
请查看skin/icons目录下的图标

art.dialog({
    icon: 'succeed',
    content: '我能够定义消息图标哦'
});


内容与边界填充边距[padding]
有时候并不须要默认的内容填充边距，如展现图片与视频

art.dialog({
    padding: 0,
    title: '照片',
    content: '<img src="./images/photo.jpg" _cke_saved_src="./images/photo.jpg" width="379" height="500" />',
    lock: true
});


锁屏[lock & background & opacity] 

art.dialog({
    lock: true,
    background: '#600', // 背景色
    opacity: 0.87,     // 透明度
    content: '中断用户在对话框之外的交互，展现重要操做与消息',
    icon: 'error',
    ok: function() {
        art.dialog({content: '再来一个锁屏', lock: true});
        returnfalse;
    },
    cancel: true
});


跟随元素[follw]
一、标准形式

art.dialog({
    follow: document.getElementById('followTestBtn'),
    content: '让对话框跟着某个元素，一个元素同时只能出现一个对话框'
});


二、使用简写形式 （已经绑定onclick事件，注意此返回值再也不是对话框扩展方法）

art('#demoCode_follow_a').dialog({
    content: '让对话框跟着某个元素，一个元素同时只能出现一个对话框'
});


自定义坐标[left & top]

art.dialog({
    left: 100,
    top: '60%',
    content: '我改变坐标了'
});


建立一个右下角浮动的消息窗口

art.dialog({
    id: 'msg',
    title: '公告',
    content: 'hello world!',
    width: 320,
    height: 240,
    left: '100%',
    top: '100%',
    fixed: true,
    drag: false,
    resize: false
})


设置大小[width & height]

art.dialog({
    width: '20em',
    height: 55,
    content: '尺寸能够带单位'
});


建立一个全屏对话框

art.dialog({
    width: '100%',
    height: '100%',
    left: '0%',
    top: '0%',
    fixed: true,
    resize: false,
    drag: false
})


静止定位[fixed]

art.dialog({
    fixed: true,
    content: '请拖动滚动条查看'
});


不准拖拽[drag & resize] 

art.dialog({
    drag: false,
    resize: false,
    content: '禁止拖拽'
});


扩展方法演示
特别说明：扩展方法支持链式操做
获取扩展方法一：直接引用返回
var dialog = art.dialog({
    title: '我是对话框',
    content: '我是初始化的内容'
});
     
dialog.content('对话框内容被扩展方法改变了').title('提示');
     
获取扩展方法二：经过对话框ID
art.dialog({
    id: 'KDf435',
    title: '警告',
    content: '我是初始化的内容'
});
     
art.dialog.list['KDf435'].content('对话框内容被扩展方法改变了');
     
获取扩展方法三：回调函数中this
art.dialog({
    title: '警告',
    content: '我是初始化的内容',
    ok: function () {
        this.content('你点了肯定按钮').lock();
        return false;
    },
    init: function () {
        this.content('对话框内容被扩展方法改变了');
    }
});
     
关闭页面全部对话框
var list = art.dialog.list;
for (var i in list) {
    list[i].close();
};

     

按钮接口演示
备注：回调函数若是返回false将阻止对话框关闭
var dialog = art.dialog({
    title: '警告',
    content: '点击管理按钮将让删除按钮可用',
    width: '20em',
    button: [{
        name: '管理',
        callback: function () {
            this
            .content('我更改了删除按钮')
            .button({
                name: '删除',
                disabled: false
            })
            .lock();
            return false;
        },
        focus: true
    }]
});
 
dialog.button(
    {
        name: '删除',
        callback: function () {
            alert('delect')
        },
        disabled: true
    }
)

     

标题倒计时
var timer;
art.dialog({
    content: '时间愈来愈少，愈来愈少..',
    init: function () {
        var that = this, i = 5;
        var fn = function () {
            that.title(i + '秒后关闭');
            !i && that.close();
            i --;
        };
        timer = setInterval(fn, 1000);
        fn();
    },
    close: function () {
        clearInterval(timer);
    }
}).show();
关闭不删除内容
art.dialog({
    id: 'show-hide',
    content: '关闭后阻止对话框被删除，只隐藏对话框',
    close: function () {
        this.hide();
        return false;
    }
}).show();
AJAX高级应用：执行HTML片断中特殊script标签
HTML片断中的<script type="text/dialog"></script>标签包裹的javascript将会在artDialog内部执行，其this指向对话框扩展方法，这样能够进一步实现消息内容模块化。
(本例子使用了AJAX，须要在服务器上运行。可打开 ./ajaxContent/login.html 查看源码中的自定义脚本)
var dialog = art.dialog({id: 'N3690',title: false});
 
// jQuery ajax  
$.ajax({
    url: './ajaxContent/login.html',
    success: function (data) {
        dialog.content(data);
    },
    cache: false
});
应用到你的项目
在页面head引入artDialog，其中skin参数表示对话框使用的风格文件(若是项目采用jQuery做为框架，则引用jQuery artDialog版本)。
<script src="artDialog/artDialog.js?skin=default" _cke_saved_src="artDialog/artDialog.js?skin=default"></script>
若是须要在iframe应用下提供 更好的支持 ，可加载插件：<script src="artDialog/plugins/iframeTools.js" _cke_saved_src="artDialog/plugins/iframeTools.js"></script>配置全局默认参数(可选):(function (config) {    config['lock'] = true;    config['fixed'] = true;    config['okVal'] = 'Ok';    config['cancelVal'] = 'Cancel';    // [more..]})(art.dialog.defaults);

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程