Dialog插件artDialog
经本人测试,发现没有layer好用,因为artDialog不能拖拽。不过除了拖拽,其他还蛮简洁的,在自定义上的灵活性也还可以。下面是我自己写的测试demo。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title></title>
<link rel="stylesheet" href="./js/artDialog/ui-dialog.css">
</head>
<body>
<input type="button" id="test1" value="对话框" />
<input type="button" id="test2" value="tips" />
<input type="button" id="test3" value="confirm" />
<input type="button" id="test4" value="close" />
<input type="button" id="test5" value="drag" /> <script src="./js/jquery-1.11.3.min.js"></script>
<script src="./js/artDialog/dialog.js"></script>
<script type="text/javascript">
var d1 = dialog({
title: '欢迎',
content: '欢迎使用 artDialog 对话框组件!',
cancelValue: 'OK',
cancelDisplay: false,
cancel: function () {
this.close();
return false;
}
}); $("#test1").on("click", function(){
//d1.show();
d1.showModal();
}); var d2 = dialog({
content: 'Hello World!',
align: 'bottom',
quickClose: true// 点击空白处快速关闭
}); $("#test2").on("click", function(){
d2.show(document.getElementById('test2')); setTimeout(function(){
d2.close();
}, 2000);
}); var d3 = dialog({
title: '提示',
content: '按钮回调函数返回 false 则不许关闭',
okValue: '确定',
ok: function () {
this.title('提交中…');
this.close();
return false;
},
cancelValue: '取消',
cancel: function () {
this.close();
return false;
}
}); $("#test3").on("click", function(){
d3.show();
}); var d4 = dialog({
content: '对话框将在两秒内关闭'
}); $("#test4").on("click", function(){
d4.show(); setTimeout(function(){
d4.close();
}, 2000);
}); var d5 = dialog({
content:"anyway...",
title:"anyway",
width: 500,
height: 300,
cancelDisplay: false,
cancel: function(){
this.close();
return false;
}
}); $("#test5").on("click", function(){
d5.show();
});
</script>
</body>
</html>
以上demo参考自Github上artDialog的doc。
Dialog插件artDialog的更多相关文章
- 一个好用的Dialog插件
网页中常常须要弹出dialog,尽管非常多JS开源框架都提供这个功能,可是效果都不是非常好,比方easy-UI.改动样式这些又不是我擅长的,身边又没有美工兄弟,苦逼啊! (Easy-UI的BasicD ...
- jQuery UI dialog插件出错信息:$(this).dialog is not a function
使用jQuery UI 1.7.2 dialog插件,遇到这样的错误: [img]http://dl.iteye.com/upload/attachment/308166/97c428e4-2ce2- ...
- dialog插件demo
基本操作 默认窗体 new Dialog('这是一个默认对话框').show(); 非模态对话框 new Dialog('非模态对话框,可以打开多个!',{modal:false}).show(); ...
- PHPCMS系统使用的弹出窗口插件artDialog
来源: http://aui.github.io/artDialog/doc/index.html (官方) http://lab.seaning.com/ http://www.mb5u.com/ ...
- 支付宝小程序自定义弹窗插件|支付宝dialog插件|model插件
支付宝小程序自定义弹窗组件wcPop|小程序自定义对话框|actionSheet弹窗模板 支付宝小程序官方提供的alert提示框.dialog对话框.model弹窗功能比较有限,有些都不能随意自定义修 ...
- 经典Dialog插件Layer
Github上只有一个test,所以最好还是到官网去学习,官网的示例写的很详尽,难得一见的设计思路和灵活性都极好的插件.下面是我自己test过的demo <!DOCTYPE html> & ...
- artdialog插件--iframe穿透特性
使用artdialog可以实现嵌套页面间的通信. 一.引入插件 //artdialog是建立在jquery上面的所以要首先引入jquery <script src="__CLASSTP ...
- jQuery Dialog弹出层对话框插件
Dialog.js的相关注释已经添加,可以按照注释,进行相关样式的修改,适用于自定义的各个系统! dialog.js /** * jQuery的Dialog插件. * * @param object ...
- js插件---Amaze UI dialog如何使用
js插件---Amaze UI dialog如何使用 一.总结 一句话总结:别人给你列出来的参考手册照着用先 1.在哪里去找插件参考资料或者使用手册(一般位置找不到的时候)? github上面啊,非常 ...
随机推荐
- Scrum 冲刺博客链接集合
DAY1 http://www.cnblogs.com/qiaokeliweibaba/p/8901187.html DAY2 http://www.cnblogs.com/qiaokeliweiba ...
- #Leetcode# 707. Design Linked List
https://leetcode.com/problems/design-linked-list/ Design your implementation of the linked list. You ...
- DTCping 的简单使用与排错
1. 工具下载路径 https://support.microsoft.com/zh-cn/help/918331/how-to-troubleshoot-connectivity-issues-in ...
- 在Google Chrome中快速解除网页屏蔽鼠标右键、复制等限制
第一步,将书签栏设置为显示状态! 第二步,添加新书签——>在标签栏点击右键,选择“添加网页”. 第三步,设置新书签的内容. 1.起名.这个凭个人爱好吧 2.网址栏输入: javascript ...
- SQL中MAX()和MIN()函数的使用(比较字符串的大小)
在SQL数据库中,最大/最小值函数—MAX()/MIN()是经常要用到的,下面就将为您分别介绍MAX()函数和MIN()函数的使用,供您参考,希望对您学习SQL数据库能有些帮助. 当需要了解一列中的最 ...
- 探秘SpringAop(一)_介绍以及使用详解
常用的编程范式 AOP 是什么 是一种编程方式,不是编程语言 解决特定问题,不能解决所有的问题 OOP的补充,不是代替 AOP 初衷 DRY: Don't repeat yourself(代码重复) ...
- 重新认识javascript的settimeout和异步
1.简单的settimeout setTimeout(function () { while (true) { } }, 1000); setTimeout(function () { alert(' ...
- 学习Spring Boot:(七)集成Mybatis
前面都是用的是spring data JPA,现在学习下Mybatis,而且现在Mybatis也像JPA那样支持注解形式了,也非常方便,学习一下. 数据库 mysql 5.7 添加依赖 在pom文件中 ...
- 【BZOJ3675】【Apio2014】序列分割
Description 传送门 Solution 之前我也遇到过一次这种"两段之和乘积作为贡献"的问题:考虑把这一种\((\sum) *(\sum)\)的形式拆括号,就可以发现 ...
- Apache Commons IO之FileUtils的常用方法
Apache Commons IO 在学习io流的时候研究(翻译)了一下这个,只有FileUtils的某些方法,并不全面,还请谅解 org.apache.commons.io 这个包下定义了基于 st ...