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级去查询.
随机推荐
- iOS uuchart 用法
这个是 画 折线图用的 一个 第三方文件 说白了就是一个 用 贝塞尔 曲线封装好的一个 第三方. 但是有机会还是需要看下怎么用
- Network Saboteur
poj2531:http://poj.org/problem?id=2531 题意:给你一个图,图中点之间会有边权,现在问题是把图分成两部分,使得两部分之间边权之和最大.题解:一开始比知道怎么办,想用 ...
- SaaS是个不错的生意模式和创业的选择(独立SAAS厂商的三大优势)
1. 软件独特而又强大,界面绝美2. 数据存在本国3. 数据不留底 4. 可随时寻求卖身或者合作,不受制于人 --------------------------------------------- ...
- JAVA循环结合标签使用,控制跳转
public static void main(String[] args) { outer: for (int i = 0; true; i++) { inner: for (int j = 0; ...
- 根据body的内容 查找h2标签的@class="subtitle"的值
<pre name="code" class="html"><body class="api jquery listing" ...
- updatepanel刷新后重新加载js脚本问题
在页尾加 <script type="text/javascript"> Sys.WebForms.PageRequestManager.getInstance().a ...
- 数学(动态规划,GCD):COGS 469. [NOI2010]能量采集
能量采集 ★★☆ 输入文件:energy2010.in 输出文件:energy2010.out 简单对比 时间限制:1 s 内存限制:512 MB [问题描述] 栋栋有一块长方形的地, ...
- sql server 2008有关SQL的模糊查询
执行 数据库查询时,有完整查询和模糊查询之分. 一般模糊语句如下: SELECT 字段 FROM 表 WHERE 某字段 Like 条件 其中关于条件,SQL提供了四种匹配模式: 1,%:表示任意0个 ...
- 3DS MAX 导出FBX到Unity3D设置
- 限制 UITextField 输入长度
限制 UITextField 输入长度 标签(空格分隔): UITextField UITextField 是 iOS 中最经常使用的组件之中的一个.关于它也有各种各样的需求,这些需求是它本身没有提供 ...