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上面啊,非常 ...
随机推荐
- 安恒杯2月月赛-应该不是xss
1. 打开题目一看,是个留言板 2. 查看源码发现有几个js文件 依次打开发现在main.js里存在这样一段代码 3. 访问 /#login是登录的界面,/#chgpass是修改密码的界面,其中修改密 ...
- gitlab邮箱服务配置
配置邮箱服务的用途 有合并请求时,邮件通知 账号注册时,邮件验证 修改密码时,通过邮件修改 配置步骤: .开启QQ邮箱的smtp服务(不建议使用163邮箱,发几次之后,就不能发送) 设置-->账 ...
- 关闭SSD(固态硬盘)节能功能 提搞SSD性能
此方法可以缓解比如QQ聊天时能明显感觉到打字过程不连续,0.1s左右的间歇停顿,操作系统并不会锁死,系统突然停止响应,硬盘灯狂闪,鼠标指针成为圆圈,点什么都没反应,这种状况可能会持续1-2分钟, ...
- Mysql分库分表方案,如何分,怎样分?
https://www.cnblogs.com/phpper/p/6937896.html 为什么要分表和分区? 日常开发中我们经常会遇到大表的情况,所谓的大表是指存储了百万级乃至千万级条记录的表.这 ...
- Nginx和Apache区别
Nginx VS Apache 相同点: 1.都是HTTP服务器软件 2.功能上都采用模块化结构设计 3.都支持通用的语言接口,如PHP.Perl.Python等 4.支持正向.反向代理.虚拟主机. ...
- vue 组件 组件2
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>T ...
- Codechef_JULY14
感觉这套比赛题目比较容易,没有以前做过的某次codechef那么凶残.题目还是很有意思的,最好的是有中文翻译. CSUB:签到题,直接从左往右扫一遍即可,维护前面出现过多少个1. #include & ...
- PostgreSQL窗口函数
窗口函数允许在查询的SELECT列表和ORDER BY子句中使用. 如果有排序,要保证唯一,否则会有下面的错误: 修改方式是:保证唯一,修改方法如下:
- BZOJ2878 NOI2012迷失游乐园(树形dp+环套树+概率期望)
考虑树的部分分怎么做.令f[i]为i向子树内走的期望路径长度,转移比较显然.算答案时先把其父亲的答案弄好就可以统计自己的答案了. 环套树也类似.树里直接dp,对环上点暴力考虑环上的每条路径,算完后再在 ...
- 消除unchecked cast Warning
在Java中,经常会将一个Object类型转成自己想要的Map.List等等.通常的做法是: Object obj = ....; Map<String, String> castMap ...