推荐一款不错的dialog小工具,
地址:http://www.planeart.cn/demo/artDialog/_doc/labs.html
相关介绍例如以下:
artDialog是一个基于javascript编写的对话框组件,它拥有精致的界面与友好的接口
自适应内容
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的更多相关文章

  1. 给你推荐10款优秀的 HTML5 动画工具

    HTML5 在过去三年快速增长,已经成为 Web 开发人员最喜欢的编程语言之一.强大的编程语言拥有开发更好的网页应用的能力. HTML5 中引入的新技术都非常好,像 Chrome.Firefox.Sa ...

  2. 值得拥有!精心推荐几款超实用的 CSS 开发工具

    当你开发一个网站或 Web 应用程序的时候,有合适的工具,绝对可以帮助您节省大量的时间.在这篇文章中,我为大家收集了超有用的 CSS 开发工具. 对于 Web 开发人员来说,找到有用的 CSS 开发工 ...

  3. 推荐一款免费的PDF转换工具 | PDFCandy

    相信大家在用的PDF转换工具也很多,下面良心推荐这款软件(PDFCandy)给大家,方便在今后的工作中进行运用.提高大家的工作效率. PDFCandy分为两种:网页端和客户端.(根据大家的喜好度来进行 ...

  4. 推荐一款MongoDB的客户端管理工具--nosqlbooster

    今天给大家推荐一款MongoDB的客户端工具--nosqlbooster,这个也是我工作中一直使用的连接管理MongoDB的工具.这个工具还有个曾用名--mongobooster.nosqlboost ...

  5. 推荐五款Android 应用的自动化测试工具

    如今自动化测试已经应用到每天的测试中.这不足为奇,因为自动化测试在测试过程中节约了时间,还能避免包括人为因素造成的测试错误和遗漏. 自动化测试工具选择很多.一些是开源的,一些非常贵.一些自动化工具是几 ...

  6. 给大家推荐几款OSX上非常好工具(针对程序员)

    前两天,在App Store无意中发现几款免费工具,感觉非常好用,推荐给大家,希望大家喜欢. 一个是帮助文档管理软件,Dash.以前在Windows上开发,经常要自己搜集一些手册,文档,什么html手 ...

  7. 7款不错的 CI/CD工具

    时至今日,越来越多的工程团队开始实行敏捷开发,借以推动更短.更快的发布周期.而代码库的增长与更高的生产构建频率,也带动持续集成与持续部署/交付工具快速兴起.如果您有意提升发布频率,或者是不太清楚哪些工 ...

  8. 8款不错的 CI/CD工具

    Jenkins Jenkins是CI市场中最知名且最常见的名号之一.其最初是由Sun公司的一位工程师打造的一个辅助项目,并迅速扩展为最大的开源CI工具之一,可帮助工程团队实现自动化部署.顺带一提:我们 ...

  9. 推荐一款超好用的工具cmder

    今天来推荐一个超级好用的命令行工具:cmder 一款Windows环境下非常简洁美观易用的cmd替代者,它支持了大部分的Linux命令.支持ssh连接linux,使用起来非常方便.比起cmd.powe ...

随机推荐

  1. 【转】block一点也不神秘————如何利用block进行回调

    我们在开发中常常会用到函数回调,你可以用通知来替代回调,但是大多数时候回调是比通知方便的,所以何乐而不为呢?如果你不知道回调使用的场景,我们来假设一下: 1.我现在玩手机 2.突然手机没有电了 3.我 ...

  2. Multiple dex files define Lcom/sina/sso/RemoteSSO错误解决办法

    在安卓上遇到了Multiple dex files define Lcom/sina/sso/RemoteSSO的编译错误 在网上找解决办法 搜到了解决办法是这样的 方案1:Eclipse->P ...

  3. 跟我学android-常用控件之 TextView

    TextView 是Android文本控件,用于显示文字. 我们先看一看TextView的结构(developer.android.com) 从这里我们可以得知,TextView是View的子类,他有 ...

  4. 优秀的弹窗插件 jquery.lightbox_me.js

    项目地址: https://github.com/buckwilson/Lightbox_me用法:http://buckwilson.me/lightboxme/ var opt = { 'cent ...

  5. 关于$GLOBALS['ecs']->table()的问题?

    $ecs对象定义数据库和表前缀 class ECS { var $db_name = ''; var $prefix = 'ecs_'; function ECS($db_name, $prefix) ...

  6. 让织梦CMS的后台编辑器支持优酷视频

    最近做了一些视频教程传到优酷网站上,但我想引入这些视频教程到我的网站,在发表时我发现织梦CMS自带的编辑器又不直接支持优酷等视频网站的引用.所以为了方便教程的发布,特意在网站搜索到本篇教程,详细讲解如 ...

  7. thinkphp T方法

    为了更方便的输出模板文件,新版封装了一个T函数用于生成模板文件名. 用法: T([资源://][模块@][主题/][控制器/]操作,[视图分层]) T函数的返回值是一个完整的模板文件名,可以直接用于d ...

  8. UIAlertView的使用方法

    UIAlertView的使用方法 1. 最简单的用法 UIAlertView*alert = [[UIAlertView alloc]initWithTitle:@"提示" mes ...

  9. solr拼写检查配置

    拼写检查功能,能在搜索时,提供一个较好用户体验,所以,主流的搜索引擎都有这个功能. 那么什么是拼写检查,其实很好理解,就是你输入的搜索词,可能是你输错了,也有可能在它的检索库里面根本不存在这个词,但是 ...

  10. Solr In Action 笔记(4) 之 SolrCloud分布式索引基础

    Solr In Action 笔记(4) 之 SolrCloud Index 基础 SolrCloud Index流程研究了两天,还是没有完全搞懂,先简单记下基础的知识,过几天再写个深入点的.先补充上 ...