artDialog是一个基于javascript编写的对话框组件,它拥有精致的界面与友好的接口

自适应内容
artDialog的特殊UI框架能够适应内容变化,甚至连外部程序动态插入的内容它仍然能自适应,因此你不必去考虑消息内容尺寸使用它。它的消息容器甚至能够根据宽度让文本居中或居左对齐——这一切全是XHTML+CSS原生实现。
完善的接口
它的接口完善,可以轻易与外部程序配合使用。如异步写入消息、控制位置、尺寸、显示与隐藏、关闭等。
细致的体验
如果不是在输入状态,它支持Esc快捷键关闭;可指定在元素附近弹出,让操作更便捷;智能给按钮添加焦点;黄金比例垂直居中;超大响应区域特别为ipad等触屏设备优化;预先缓存皮肤图片更快响应……
跨平台兼容
兼容:IE6+、Firefox、Chrome、Safari、Opera以及iPad等移动设备。并且IE6下也能支持现代浏览器的静止定位(fixed)、覆盖下拉控件、alpha通道png背景。

快速入门

一、使用传统的参数

art.dialog(content, ok, cancel)

art.dialog('简单愉悦的接口,强大的表现力,优雅的内部实现', function(){alert('yes');});

运行»

二、使用字面量传参

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;
    }
});

运行»

更多配置参数用法请查阅API文档: ./_doc/API.html#options

三、扩展方法

需要对弹出后的对话框操作?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();

更多扩展方法用法请查阅API文档: ./_doc/API.html#API

插件:框架应用工具

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');

请输入测试文字:  运行»

插件更多功能请查阅API文档: ./iframeTop.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+运行[?])

jQuery弹出层---artDialog 文档的更多相关文章

  1. JQuery弹出层,实现弹层切换,可显示可隐藏。

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  2. JQuery弹出层,点击按钮后弹出遮罩层,有关闭按钮

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  3. JQuery弹出层,点击按钮后弹出遮罩层,有关闭按钮【转】

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  4. 基于jQuery弹出层图片动画查看代码

    分享一款基于jQuery弹出层图片动画查看代码是一款鼠标单击文字或图片内容放大显示且含圆角投影效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=&q ...

  5. 【jquery】fancybox 是一款优秀的 jquery 弹出层展示插件

    今天给大家分享一款优秀的 jquery 弹出层展示插件 fancybox.它除了能够展示图片之外,还可以展示 flash.iframe 内容.html 文本以及 ajax 调用,我们可以通过 css ...

  6. jQuery弹出层效果

    <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta ...

  7. 效果非常好的 Jquery弹出层插件 jQuery Sweet alert

    介绍款交互性非常不错的jquery弹出层插件,支持消息提示.错误提示.确认框提示等. 交互式体验感非常不错,比如咱们现在体验非常不错的微信支付.支付宝等完成后的效果. 不过本插件至少支持IE9+ Jq ...

  8. jQuery弹出层始终垂直居中相对于屏幕或当前窗口

    把弹出层的位置设为fixed,设置top:50%,然后获取当前元素的整体的高度height,用获取的高度height/2,设置margin-top:-height/2.即可把当前的弹出层始终垂直居中于 ...

  9. layer —— 一个简单的jQuery弹出层插件

    layer的使用 4.24更新:注意:layer现在有旧版1.8.5版本和新版本3.0版本的,对应引入的JQ也要不同,相对应的JQ引入1.1和3.1,否则JQ会出问题 4.21更新: 解答4-19的问 ...

随机推荐

  1. 【转】adb uninstall卸载apk文件说明

    昨天在使用adb卸载程序,结果死活卸载不了.我输入的命令和系统提示如下: [plain] view plaincopy   arthur@arthur-laptop:~$ adb uninstall  ...

  2. JavaScript高级程序设计(第三版)学习笔记22、24、25章

    第22章,高级技巧 高级函数 安全的类型检测 typeof会出现无法预知的行为 instanceof在多个全局作用域中并不能正确工作 调用Object原生的toString方法,会返回[Object ...

  3. 聊聊css盒子模型

    css盒子模型原理: 在网页设计中常听的属性名:内容(content).填充/内边距(padding).边框(border).外边距(margin), CSS盒子模式都具备这些属性. 这些属性我们可以 ...

  4. scala中的call-by-name和call-by-value

    http://www.jianshu.com/p/93eefcb61d4f val和def的区别 在scala中,可以用val和def前缀来定义变量,例如: val x = 1 def y = &qu ...

  5. 对象创建型模式------Builder(生成器)

    本文系转载,转载地址http://blog.sina.com.cn/s/blog_59b6af690100zj3l.html,只供自己学习使用. 假设现在有三种产品,是玩具,都是由三部分组成,头,身体 ...

  6. 常用经典SQL语句大全(提升)

    二.提升 1.说明:复制表(只复制结构,源表名:a 新表名:b) (Access可用) 法一:select * into b from a where 1<>1(仅用于SQlServer) ...

  7. Extjs4使用iframe注意事项

    "video" : { render : function(panel, eOpts) { // 因为iframe在video // panel渲染的时候就已经完全移动到video ...

  8. iss 防火墙

    控制面板\系统和安全\Windows 防火墙\允许的程序 如下图 将万维网服务(HTTP)打勾即可访问你的网站. 转自:http://bbs.pcbeta.com/viewthread-604506- ...

  9. 第四篇、C_快速、冒泡、选择、插入排序、二分查找排序、归并、堆排序

    1.快速排序 实现: 1.取中间一个数作为支点 2.分别在支点的左右两边进行查找,如果左边查找到比支点大,右边查找到比支点小,就交换位置,如此循环,比支点小的数就排在了左边,比支点大的就排在右边 3. ...

  10. 帝国CMS附件大小限制

    做文件的上传下载,在我们本地测试总是顺利通过,一上传到服务器各种问题都来了. 帝国CMS,我们先看网站配制中附件大小限制. 附件存放目录设置: 单击菜单“系统”>“系统设置”>“系统参数设 ...