PHPCMS系统使用的弹出窗口插件artDialog
来源:
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+运行[?])
联系
如果你对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相关推荐
- html5 popup,popup.js-jQuery和CSS3可互动的3D弹出窗口插件
popup.js是一款使用jQuery和CSS3制作并可以使用鼠标进行互动的3D弹出窗口插件.该3D弹出窗口插件使用简单,并且在旧的浏览器中会回退为非3D状态,兼容IE8+的所有现代浏览器. 使用方法 ...
- 实用的 jquery 弹出窗口 插件winbox
实用的 jquery 弹出窗口 插件winbox 一个基于jQuery的弹出层.支持拖拽,支持内容为文字,图片,URL等!至于兼容性.在IE6下,弹出对像无法绝对固定.其他应该没啥大问题: 应用演示: ...
- lhgdialog 弹出窗口插件 API
lhgdialog是一功能强大的简单迷你并且高效的弹出窗口组件 通过以下代码弹出窗口 使用字面量传参 $.dialog(options) vardialog=$.dialog({title:'欢迎', ...
- jQuery的弹出窗口插件colorbox
支持 照片,照片组,幻灯片,ajax,内联 和 iframe 框架. 通过CSS 控制外观,使用用户可以很容易重新定制外观. 不需要更改 ColorBox 的 javascript 文件就可以重新设定 ...
- vue 提示框modal_v-dialogs v1.9.0 - 基于 Vue2 的简洁易用的弹出窗口,包含 modal, alert, mask, toast 等功能模式...
v-dialogs 基于Vue2.x的简洁易用的弹出窗口插件,其包含有 Modal, Alert, Mask 与 Toast 等功能模式 更多文档.Demo 请访问: the jQuery versi ...
- html转chm后脚本错误,win10系统打开chm资料弹出窗口提示脚本出现错误的恢复办法...
有关win10系统打开chm资料弹出窗口提示脚本出现错误的操作方法想必大家有所耳闻.但是能够对win10系统打开chm资料弹出窗口提示脚本出现错误进行实际操作的人却不多.其实解决win10系统打开ch ...
- extjs 关闭弹出窗口_【实用工具】一键关闭/开启Windows防火墙、禁止更新系统
WinUpdatesDisabler 19.05.31.晴 因为本公众号分享的很多(可能以后会称的上很多)资源都是pojie资源,其中有些是需要关闭杀毒软件和Windous防火墙然后再下载安装的.以前 ...
- 可拖拽的弹出窗口Js插件
下载地址 jsWindow是一个功能丰富的弹出窗口js插件,创建可拖放,可调整大小的弹出窗口.提醒.确认对话框和消息框在屏幕上. dd:
- matlab已经停止工作,win10系统运行Matlab弹出已停止工作窗口的修复步骤
有关win10系统运行Matlab弹出已停止工作窗口的操作方法想必大家有所耳闻.但是能够对win10系统运行Matlab弹出已停止工作窗口进行实际操作的人却不多.其实解决win10系统运行Matlab ...
最新文章
- Java基础与实践题库_Java程序设计基础与实践(题库版)
- zabbix3.0安装
- 蓝牙进阶之路 (001) - HC-05蓝牙无线模块设置
- npm安装不上nodemon_node.js - NPM安装在nodemon@1.18.9后安装脚本处失败 - 堆栈内存溢出...
- 数据结构(严蔚敏)之二——链表的c语言实现
- 构造代码块会想你所想
- 服务器如何安装多系统,服务器如何安装双操作系统
- AngularJS快速入门指南14:数据验证
- ICE专题:实现简单的聊天室(一)
- bootstrap --- 按钮
- vue获取table一列数据_vue表格含有一列多选框,如何获取被选中的行的数据?
- mysql sqlserver firstrow=2_将CSV文件导入SQLServer
- centos7 mysql启动失败_Mysql主从复制
- 4.线性和卷积——边界问题、解决边界方法和Matlab实战_3
- react打包后图片丢失_手写Webpack从0编译Vue/React项目
- 拳王虚拟项目公社:微信朋友圈卖虚拟资源教程怎么做,月入过万发方法
- 移动端前端笔记 — 遇到的常见JS与CSS问题及解决方法
- 机器人学(机构学)笔记
- 浅谈Clean Code
- Word图文混排的“ 锚 “