推荐一款不错的dialog小工具:artDialog
- 自适应内容
- artDialog的特殊UI框架可以适应内容变化,甚至连外部程序动态插入的内容它仍然能自适应,因此你不必去考虑消息内容尺寸使用它。它的消息容器甚至可以依据宽度让文本居中或居左对齐——这一切全是XHTML+CSS原生实现。
- 完好的接口
- 它的接口完好,能够轻易与外部程序配合使用。如异步写入消息、控制位置、尺寸、显示与隐藏、关闭等。
- 仔细的体验
- 假设不是在输入状态,它支持Esc快捷键关闭;可指定在元素附近弹出,让操作更便捷;智能给button加入焦点;黄金比例垂直居中;超大响应区域特别为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+执行[?])
推荐一款不错的dialog小工具:artDialog的更多相关文章
- 给你推荐10款优秀的 HTML5 动画工具
HTML5 在过去三年快速增长,已经成为 Web 开发人员最喜欢的编程语言之一.强大的编程语言拥有开发更好的网页应用的能力. HTML5 中引入的新技术都非常好,像 Chrome.Firefox.Sa ...
- 值得拥有!精心推荐几款超实用的 CSS 开发工具
当你开发一个网站或 Web 应用程序的时候,有合适的工具,绝对可以帮助您节省大量的时间.在这篇文章中,我为大家收集了超有用的 CSS 开发工具. 对于 Web 开发人员来说,找到有用的 CSS 开发工 ...
- 推荐一款免费的PDF转换工具 | PDFCandy
相信大家在用的PDF转换工具也很多,下面良心推荐这款软件(PDFCandy)给大家,方便在今后的工作中进行运用.提高大家的工作效率. PDFCandy分为两种:网页端和客户端.(根据大家的喜好度来进行 ...
- 推荐一款MongoDB的客户端管理工具--nosqlbooster
今天给大家推荐一款MongoDB的客户端工具--nosqlbooster,这个也是我工作中一直使用的连接管理MongoDB的工具.这个工具还有个曾用名--mongobooster.nosqlboost ...
- 推荐五款Android 应用的自动化测试工具
如今自动化测试已经应用到每天的测试中.这不足为奇,因为自动化测试在测试过程中节约了时间,还能避免包括人为因素造成的测试错误和遗漏. 自动化测试工具选择很多.一些是开源的,一些非常贵.一些自动化工具是几 ...
- 给大家推荐几款OSX上非常好工具(针对程序员)
前两天,在App Store无意中发现几款免费工具,感觉非常好用,推荐给大家,希望大家喜欢. 一个是帮助文档管理软件,Dash.以前在Windows上开发,经常要自己搜集一些手册,文档,什么html手 ...
- 7款不错的 CI/CD工具
时至今日,越来越多的工程团队开始实行敏捷开发,借以推动更短.更快的发布周期.而代码库的增长与更高的生产构建频率,也带动持续集成与持续部署/交付工具快速兴起.如果您有意提升发布频率,或者是不太清楚哪些工 ...
- 8款不错的 CI/CD工具
Jenkins Jenkins是CI市场中最知名且最常见的名号之一.其最初是由Sun公司的一位工程师打造的一个辅助项目,并迅速扩展为最大的开源CI工具之一,可帮助工程团队实现自动化部署.顺带一提:我们 ...
- 推荐一款超好用的工具cmder
今天来推荐一个超级好用的命令行工具:cmder 一款Windows环境下非常简洁美观易用的cmd替代者,它支持了大部分的Linux命令.支持ssh连接linux,使用起来非常方便.比起cmd.powe ...
随机推荐
- IntelliJ IDEA 快捷键大全
IntelliJ IDEA 快捷键大全 (2012-03-27 20:33:44) 转载▼ 标签: ide intellij快捷键 杂谈 分类: IDE工具 最近刚接触IntelliJ这个工具,用了几 ...
- telnet测试端口号
telnet Ip 端口号 如:telnet localhost 1433 详见此链接(转) http://www.3lian.com/edu/2012/11-08/43232.html
- JavaWeb之HTTP协议
一.概念 协议是指计算机通信网络中两台计算机之间进行通信所必须共同遵守的规定或规则,超文本传输协议(HTTP)是一种通信协议,它允许将超文本标记语言(HTML)文档从Web服务器传送到客户端的浏览器. ...
- HTTP通过请求和响应的交换达成通信
1. 通过请求和响应的交换达成通信 首先我们来看一个HTTP请求报文: GET/index.htm HTTP/1.1 HOST : hacker.jp HTTP协议起始行开头的GET表示请求访问服务器 ...
- python * 的区别
>>> ['Spam']*5 ['Spam', 'Spam', 'Spam', 'Spam', 'Spam'] >>> ['Spam'*5] ['SpamSpamS ...
- Struts2 转换器
转换器 从一个 HTML 表单到一个 Action 对象,类型转换是从字符串到非字符串 Http 没有 "类型" 的概念,每一项表单的输入只可能是一个字符串或一个字符串数组,在服务 ...
- JDBC 关闭数据库连接与自动提交【转】
// Jdbc关闭数据库连接时,会隐含一个提交事务的操作 private final static String DB_DRIVER = "oracle.jdbc.driver.Oracle ...
- 【竞价网站绝技】根据访客ip,页面显示访客所属城市的html代码(借用YY IP地址库)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- nodejs server websocket
var WebSocketServer = require('websocket').server; var http = require('http'); var server = http.cre ...
- tomcat启动时设定环境变量
在tomcat的bin目录中修改startup.bat 设置CATALINA_HOME set "CATALINA_HOME=F:\solr\apache-tomcat\apache-tom ...