来源:

http://aui.github.io/artDialog/doc/index.html  (官方)

http://lab.seaning.com/

http://www.mb5u.com/jscode/html/ajax/426_artDialog2_0_4/

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+运行[?])

联系

注意!artDialog4+即将停止维护,在框架满天飞的时代结束后,其历史使命已经完成。新版本artDialog 5+很小,却依然动人。若要迁移,请抛弃iframe,使用ajax技术。

如果你对artDialog有什么意见建议可以用下面任意一种联系方式找到作者。artDialog一直在不断完善自身,这个愉悦的过程中感谢有你的参与~

提交BUG必备项:1、浏览器名称,版本 2、artDialog版本号(只支持4+版本) 3、简明扼要的描述信息 4、建议提取一份BUG DEMO,这样解决问题的概率增加300%

如果对使用问题有疑惑,可以前往由 artDialog 爱好者建立的QQ群寻求帮助(前提是先自己阅读文档): 44030323

作者:糖饼
邮箱:(仅用作bug提交)
网站:PlaneArt.Cn
微博:t.qq.com/tangbin

转载于:https://www.cnblogs.com/cblx/p/5014576.html

PHPCMS系统使用的弹出窗口插件artDialog相关推荐

  1. html5 popup,popup.js-jQuery和CSS3可互动的3D弹出窗口插件

    popup.js是一款使用jQuery和CSS3制作并可以使用鼠标进行互动的3D弹出窗口插件.该3D弹出窗口插件使用简单,并且在旧的浏览器中会回退为非3D状态,兼容IE8+的所有现代浏览器. 使用方法 ...

  2. 实用的 jquery 弹出窗口 插件winbox

    实用的 jquery 弹出窗口 插件winbox 一个基于jQuery的弹出层.支持拖拽,支持内容为文字,图片,URL等!至于兼容性.在IE6下,弹出对像无法绝对固定.其他应该没啥大问题: 应用演示: ...

  3. lhgdialog 弹出窗口插件 API

    lhgdialog是一功能强大的简单迷你并且高效的弹出窗口组件 通过以下代码弹出窗口 使用字面量传参 $.dialog(options) vardialog=$.dialog({title:'欢迎', ...

  4. jQuery的弹出窗口插件colorbox

    支持 照片,照片组,幻灯片,ajax,内联 和 iframe 框架. 通过CSS 控制外观,使用用户可以很容易重新定制外观. 不需要更改 ColorBox 的 javascript 文件就可以重新设定 ...

  5. vue 提示框modal_v-dialogs v1.9.0 - 基于 Vue2 的简洁易用的弹出窗口,包含 modal, alert, mask, toast 等功能模式...

    v-dialogs 基于Vue2.x的简洁易用的弹出窗口插件,其包含有 Modal, Alert, Mask 与 Toast 等功能模式 更多文档.Demo 请访问: the jQuery versi ...

  6. html转chm后脚本错误,win10系统打开chm资料弹出窗口提示脚本出现错误的恢复办法...

    有关win10系统打开chm资料弹出窗口提示脚本出现错误的操作方法想必大家有所耳闻.但是能够对win10系统打开chm资料弹出窗口提示脚本出现错误进行实际操作的人却不多.其实解决win10系统打开ch ...

  7. extjs 关闭弹出窗口_【实用工具】一键关闭/开启Windows防火墙、禁止更新系统

    WinUpdatesDisabler 19.05.31.晴 因为本公众号分享的很多(可能以后会称的上很多)资源都是pojie资源,其中有些是需要关闭杀毒软件和Windous防火墙然后再下载安装的.以前 ...

  8. 可拖拽的弹出窗口Js插件

    下载地址 jsWindow是一个功能丰富的弹出窗口js插件,创建可拖放,可调整大小的弹出窗口.提醒.确认对话框和消息框在屏幕上. dd:

  9. matlab已经停止工作,win10系统运行Matlab弹出已停止工作窗口的修复步骤

    有关win10系统运行Matlab弹出已停止工作窗口的操作方法想必大家有所耳闻.但是能够对win10系统运行Matlab弹出已停止工作窗口进行实际操作的人却不多.其实解决win10系统运行Matlab ...

最新文章

  1. Java基础与实践题库_Java程序设计基础与实践(题库版)
  2. zabbix3.0安装
  3. 蓝牙进阶之路 (001) - HC-05蓝牙无线模块设置
  4. npm安装不上nodemon_node.js - NPM安装在nodemon@1.18.9后安装脚本处失败 - 堆栈内存溢出...
  5. 数据结构(严蔚敏)之二——链表的c语言实现
  6. 构造代码块会想你所想
  7. 服务器如何安装多系统,服务器如何安装双操作系统
  8. AngularJS快速入门指南14:数据验证
  9. ICE专题:实现简单的聊天室(一)
  10. bootstrap --- 按钮
  11. vue获取table一列数据_vue表格含有一列多选框,如何获取被选中的行的数据?
  12. mysql sqlserver firstrow=2_将CSV文件导入SQLServer
  13. centos7 mysql启动失败_Mysql主从复制
  14. 4.线性和卷积——边界问题、解决边界方法和Matlab实战_3
  15. react打包后图片丢失_手写Webpack从0编译Vue/React项目
  16. 拳王虚拟项目公社:微信朋友圈卖虚拟资源教程怎么做,月入过万发方法
  17. 移动端前端笔记 — 遇到的常见JS与CSS问题及解决方法
  18. 机器人学(机构学)笔记
  19. 浅谈Clean Code
  20. Word图文混排的“ 锚 “

热门文章

  1. 遥感高光谱图像分类数据集总结
  2. vaspkit使用_vaspkit的使用
  3. 浅谈学校OA办公系统实施的必要性和可行性
  4. java2012国信蓝点杯全国软件设计大赛编程大题
  5. SEO百度快排-百度排名软件
  6. 前端还是后端,该怎么选择
  7. 别人的随笔(非常有用)
  8. CUDA(33)之ETH Mining(Parallel-mining project based on Opencl/GPU )
  9. S60手机通过JoikuSpot实现无线热点功能
  10. 2012龙年北京庙会全攻略