artDialog提示框、对话框
/**
* 警告
* @param {String}消息内容
*/
artDialog.alert = function (content, callback) {
return artDialog({
id: 'Alert',
icon: 'warning',
fixed: true,
// lock: true,
width:250,
height:50,
content: content,
ok: true,
close: callback
});
};
/**
* 确认
* @param {String}消息内容
* @param {Function}确定button回调函数
* @param {Function}取消button回调函数
*/
artDialog.confirm = function (content, yes, no) {
return artDialog({
id: 'Confirm',
icon: 'question',
fixed: true,
// lock: true,
opacity: .1,
width:250,
height:50,
content: content,
ok: function (here) {
return yes.call(this, here);
},
cancel: function (here) {
return no && no.call(this, here);
}
});
};
/**
* 提问
* @param {String}提问内容
* @param {Function}回调函数. 接收參数:输入值
* @param {String}默认值
*/
artDialog.prompt = function (content, yes, value) {
value = value || '';
var input; return artDialog({
id: 'Prompt',
icon: 'question',
fixed: true,
// lock: true,
width:250,
height:50,
opacity: .1,
content: [
'<div style="margin-bottom:5px;font-size:12px">',
content,
'</div>',
'<div>',
'<input value="',
value,
'" style="width:18em;padding:6px 4px" />',
'</div>'
].join(''),
init: function () {
input = this.DOM.content.find('input')[0];
input.select();
input.focus();
},
ok: function (here) {
return yes && yes.call(this, input.value, here);
},
cancel: true
});
};
/**
* 短暂提示
* @param {String}提示内容
* @param {Number}显示时间 (默认1.5秒)
*/
artDialog.tips = function (content, time) {
return artDialog({
id: 'Tips',
title: false,
cancel: false,
fixed: true,
// lock: true,
width:250,
height:50
})
.content('<div style="padding: 0 1em;">' + content + '</div>')
.time(time || 1);
};
//右下角滑动通知
artDialog.notice = function (options) {
var opt = options || {},
api, aConfig, hide, wrap, top,
duration = 800; var config = {
id: 'Notice',
left: '100%',
top: '100%',
fixed: true,
drag: false,
width:250,
height:50,
resize: false,
follow: null,
lock: false,
init: function(here){
api = this;
aConfig = api.config;
wrap = api.DOM.wrap;
top = parseInt(wrap[0].style.top);
hide = top + wrap[0].offsetHeight; wrap.css('top', hide + 'px')
.animate({top: top + 'px'}, duration, function () {
opt.init && opt.init.call(api, here);
});
},
close: function(here){
wrap.animate({top: hide + 'px'}, duration, function () {
opt.close && opt.close.call(this, here);
aConfig.close = $.noop;
api.close();
}); return false;
}
}; for (var i in opt) {
if (config[i] === undefined) config[i] = opt[i];
}; return artDialog(config);
};
//调用范例:
art.dialog.alert('人品越来越不那么稳定了,请检查!'); art.dialog.confirm('你确定要删除这掉消息吗?', function () {
art.dialog.tips('运行确定操作');
}, function () {
art.dialog.tips('运行取消操作');
}); art.dialog.prompt('请输入图片网址', function (val) {
art.dialog.tips(val);
}, 'http://'); art.dialog.tips('数据正在提交..', 2);
//[more code..]
art.dialog.tips('成功。已经保存在server');
artDialog提示框、对话框的更多相关文章
- artDialog提示框
API网址 http://aui.github.io/artDialog/doc/index.html 相关资料下载 https://code.google.com/archive/p/artdial ...
- 如何在 messager/alert/confirm等消息提示框中 获取 / 设置 嵌入 html内容中的 input[type=checkbox]等的选中状态?
总结, 有3点: 不能/不要 在 这些消息框 / 提示框/ 对话框中的 回调函数中去写代码: 获取嵌入 内容中input.checkbox的选中状态, 因为 虽然在这些框存在的时候, 这个 check ...
- js弹出框、对话框、提示框、弹窗总结
一.JS的三种最常见的对话框 //====================== JS最常用三种弹出对话框 ======================== //弹出对话框并输出一段提示信息 funct ...
- 基于Metronic的Bootstrap开发框架经验总结(6)--对话框及提示框的处理和优化
在各种Web开发过程中,对话框和提示框的处理是很常见的一种界面处理技术,用得好,可以给用户很好的页面体验,Bootstrap开发也一样,我们往往在页面新增.编辑.查看详细等界面使用弹出对话框层的方式进 ...
- jquery仿alert提示框、confirm确认对话框、prompt带输入的提示框插件[附实例演示]
jquery仿alert提示框.confirm确认对话框.prompt带输入的提示框插件实例演示 第一步:引入所需要的jquery插件文件: http://www.angelweb.cn/Inc/eg ...
- form WebBrowser自动点击弹出提示框alert、弹出对话框confirm、屏蔽弹出框、屏蔽弹出脚本错误的解决办法
针对WebBrowser控件中自动点击弹出框及禁用脚本提示问题得到如下几种实际情况的解决办法,绝对管用. 1.屏蔽弹出错误脚本 将WebBrowser控件ScriptErrorsSuppressed设 ...
- Android开发 ---构建对话框Builder对象,消息提示框、列表对话框、单选提示框、多选提示框、日期/时间对话框、进度条对话框、自定义对话框、投影
效果图: 1.activity_main.xml 描述: a.定义了一个消息提示框按钮 点击按钮弹出消息 b.定义了一个选择城市的输入框 点击按钮选择城市 c.定义了一个单选提示框按钮 点击按钮选择某 ...
- 经验总结:WebBrowser自动点击弹出提示框alert、弹出对话框confirm、屏蔽弹出框、屏蔽弹出脚本错误的解决办法
经验总结:WebBrowser自动点击弹出提示框alert.弹出对话框confirm.屏蔽弹出框.屏蔽弹出脚本错误的解决办法 网上有好多解决方法,可是不一定好使,本人经过多次试验,针对WebBrows ...
- bootstrap dialog对话框,完成操作提示框
1. 依赖文件: bootstrap.js bootstrap-dialog.js bootstrap.css bootstrap-dialog.css 2.代码 BootstrapDialog.co ...
随机推荐
- LVS+keepalived均衡nginx配置
如果单台LVS发生突发情况,例如宕机.发生不可恢复现象,会导致用户无法访问后端所有的应用程序.避免这种问题可以使用HA故障切换,也就是有一台备用的LVS,主LVS 宕机,LVS VIP自动切换到从,可 ...
- Linux学习-Ubuntu 18.04-安装图文教程
Ubuntu(友帮拓.优般图.乌班图)是一个以桌面应用为主的开源GNU/Linux操作系统,Ubuntu 是基于Debian GNU/Linux,支持x86.amd64(即x64)和ppc架构,由全球 ...
- 【转】 Java 进行 RSA 加解密时不得不考虑到的那些事儿
[转] Java 进行 RSA 加解密时不得不考虑到的那些事儿 1. 加密的系统不要具备解密的功能,否则 RSA 可能不太合适 公钥加密,私钥解密.加密的系统和解密的系统分开部署,加密的系统不应该同时 ...
- BNU 34974 MATLAB大法好
题目链接:http://www.bnuoj.com/bnuoj/problem_show.php?pid=34974 MATLAB大法好 Time Limit: 8000ms Memory Limi ...
- IDEA中如何设置自动导包
IDEA跟eclipse还是有一些差别,一些东西要自己去设置,但同时也还是有快捷键的方式来帮助我们 1.如何设置自动导包:如下图所示 点击FIle--->settings 其次还可以通过按快捷键 ...
- idea里新建maven项目时,在new module页面,一直显示loading archetype list...
不知道什么时候开始,在idea里新建maven项目时,在new module页面,一直显示loading archetype list....,导致一直没办法新建.后来我以为是防火墙问题,各种设置还是 ...
- BZOJ 3629 约数和定理+搜索
呃呃 看到了这道题 没有任何思路-- 百度了一发题解 说要用约数和定理 就查了一发 http://baike.so.com/doc/7207502-7432191.html (不会的可以先学习一下) ...
- android学习笔记二、Activity深入学习
一.创建和使用: 1.Activity是android的四大组件之一,需要继承Activity并在清单文件中进行声明才能使用.没有声明则报错. 2.启动Activity是通过Intent,有两种方式: ...
- jquery中prop()方法和attr()方法
接着上一篇笔记的疑惑,找了下prop()方法和attr()方法的区别. 原来query1.6中新加了一个方法prop(),一直没用过它,官方解释只有一句话:获取在匹配的元素集中的第一个元素的属性值. ...
- ToF相机学习笔记之基本知识
ToF相机属于一种非接触式光学传感器,通过计算发射激光的飞行时间获取对应像素的深度信息.就非接触式距离测量方法而言,其分类可用下表表示如下: 1.1 ToF传感器基础 一个逐点式的ToF传感器采用了雷 ...