AmazeUI 模态框封装
/**
* 模态窗口
*/
window.Modal = {
tpls:{
alert:'<div class="am-modal am-modal-alert" tabindex="-1"><div class="am-modal-dialog"><div class="am-modal-hd message-text"></div><div class="am-modal-footer"><span class="am-modal-btn">确定</span></div></div></div>',
confirm:'<div class="am-modal am-modal-confirm" tabindex="-1" ><div class="am-modal-dialog"><div class="am-modal-bd message-text"></div><div class="am-modal-footer"><span class="am-modal-btn btn-cancel" data-am-modal-cancel>取消</span><span class="am-modal-btn btn-confirm" data-am-modal-confirm>确定</span></div></div></div>',
loading:'<div class="am-modal am-modal-loading am-modal-no-btn" tabindex="-1"><div class="am-modal-dialog"><div class="am-modal-hd message-text">正在载入...</div><div class="am-modal-bd"><span class="am-icon-spinner am-icon-spin"></span></div></div></div>'
},
register:function(events){
events = events || [];
if(events.length == 0){
events = ['alert', 'confirm', 'loading'];
}
var body = $(document.body);
this.modal = {};
for(var i=0; i<events.length; i++){
var event = events[i];
var tpl = this.tpls[event];
if(tpl){
this.modal[event] = $(tpl);
body.append(this.modal[event]);
}
}
},
alert:function(message, config){
config = config || {};
var confirmText = config.confirmText || "确定";
this.modal.alert.find(".am-modal-btn").text(confirmText);
this.modal.alert.find(".message-text").html(message);
this.modal.alert.modal("open");
},
confirm:function(message, config){
config = config || {};
var confirmText = config.confirmText || "确定";
var cancelText = config.cancelText || "取消";
this.modal.confirm.find(".btn-confirm").text(confirmText);
this.modal.confirm.find(".btn-cancel").text(cancelText);
this.modal.confirm.find(".message-text").html(message);
this.modal.confirm.modal(config).modal("open");
},
loading:function(message){
this.modal.loading.find(".message-text").html(message);
this.modal.loading.modal("open");
},
dismissLoading:function(){
this.modal.loading.find(".message-text").html("");
this.modal.loading.modal("close");
}
};
Modal.register();
AmazeUI 模态框封装的更多相关文章
- angularjs 给封装的模态框元素传值,和实现兄弟传值
本例实现封装的元素所放的位置不同,而选择不同的传值,这里举例封装了bootstrap模态框,以后也方便大家去直接使用.方法举例如下:首先主页调用css/js有: <link rel=" ...
- bootstrap3-dialog:更强大、更灵活的模态框(封装好的模态框)
用过bootstrap框架的同学们都知道,bootstrap自带的模态框用起来很不灵活,可谓鸡肋的很.但nakupanda开源作者封装了一个更强大.更灵活的模态框——bootstrap3-dialog ...
- amazeUI modal 模态框 关闭属性
$('#my-prompt').modal({ relatedTarget: this, closeViaDimmer: false, // 点击外部空白处不关闭弹窗 closeOnConfirm:f ...
- jQuery初识之选择器、样式操作和筛选器(模态框和菜单示例)
一.jQuery 1.介绍 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架). jQuery设计的 ...
- fastadmin模态框(弹出框)
用法: 在html页面新建一个按钮用来触发事件 <a href="javascript:;" class="btn btn-success btn-add &quo ...
- 每日质量NPM包模态框_react-modal
一.react-modal 官方定义: Accessible modal dialog component for React.JS 理解: 一个容易使用的React模态框组件 二.用法 有时候我们不 ...
- 基于bootstrap模态框的alert弹窗
完成的效果如下: html代码: <!-- 弹出框 --> <div class="modal fade" id="alert_like" t ...
- BootStrap母版页布局.子页面布局.BootstrapTable.模态框.警告框.html导出tabl生成Excel.HTML生成柱图.饼图.时间控件中文版
如上就是很多后台管理系统的母版页布局. 左边一列模板.上面一列系统标识. 空白处充填子页面 以ASP.NET MVC为基础 引入bootstrap.js.bootstrap.css body: < ...
- ajax+json模态框中分页(spring+struts+mybatis+easyui分页插件)
0.业务需求: 点击每个数字的时候可以显示每个对应的详细记录.也就是得点击11的时候拿着开采部与C级去查询.
随机推荐
- vm拷贝cloudera-scm-agent造成问题
------------网络问题---------- ifconfig...没有看到eth0..然后重启网卡又报下面错误. 故障现象: service network restartShutting ...
- ASP.NET导出Excel(利用NPOI和EPPlus库,无需安装Office)
网上提供了很多Asp.net中操作Excel的方法,其中大部分是调用微软的Office组件,下面提供三个无须安装Office即可从Asp.net输出Excel的方法. 1 简单方法 //下面代码输出的 ...
- Adobe Acrobat XI Pro 两种破解方式 Keygen秘钥 license替换 亲测有效
大家平时看paper比较多的话想必都是用Adobe Acrobat而非Adobe Reader吧,其功能全面之处就不啰嗦了,下面给大家分享下Adobe Acrobat XI Pro的两种破解方式(两种 ...
- input placeholder文字垂直居中(Mobile & PC)
Html5输入框支持placeholder,但是在定义文本框中定义placeholder存在兼容问题 <input type="text" placeholder=" ...
- 开始LXC,DOCKER,VAGRANT,COREOS之旅
很有兴趣哟. 有人说会重构互联基质,可能言重. 但,无疑在未来几年内,DOCKER和COREOS这样的更新布置模式会流行.
- 通用GPIO模拟串口,提供源代码,本人经过测试OK(第一版)
--------------------------serial.h------------------------------------------ #ifndef _SERIAL_H_ #def ...
- mysql 安装1
Linux 安装mysql.tar.gz包(2012-09-28 19:25:06) 标签: it 分类: linux学习编 我用的mysql的版本的是:mysql--linux-i686-icc-g ...
- COJ 2110 Day7-例3
Day7-例3 难度级别:C: 运行时间限制:5000ms: 运行空间限制:256000KB: 代码长度限制:2000000B 试题描述 输入 输入的第一行包含整数n和k,其中n(2 ≤ n ≤100 ...
- Qt入门(8)——事件和事件过滤器
在Qt里,一个事件是继承自QEvent的对象.事件通过调用QObject::event(),被发送到继承自 QObject 的对象.事件发送就是一个事件已经产生,由 QEvent正好去表达,且QObj ...
- 数学(线性规划): ZJOI2013 防守战线
偷懒用的线性规划. #include <iostream> #include <cstring> #include <cstdio> using namespace ...