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级去查询.
随机推荐
- java 知识结构
JAVA基础阶段 阶段 技术名称 技术内容 T线 JavaSE JAVA 开发基础知识 | Eclipse 开发环境 | JavaSE 7.0 API | JavaSE 8.0新特性 | 多线程技术 ...
- Java库使用----xstream1.3.1
package com.xstream; import java.util.Map; /** * XStream可以自动生成相关的xml配置 */ public class XstreamTest { ...
- [BZOJ 1692] [Usaco2007 Dec] 队列变换 【后缀数组 + 贪心】
---恢复内容开始--- 题目链接:BZOJ - 1692 题目分析 首先,有个比较简单的贪心思路:如果当前剩余字符串的两端字母不同,就选取小的字母,这样显然是正确的. 然而若两端字母相同,我们怎么选 ...
- codeforces Minesweeper 1D
题意:就是挖地雷,给你一个字符串,‘*’代表地雷,‘1’代表在它的周围有1个地雷,‘2’代表在左右都有个地雷,‘?’代表不确定是不是地雷,可以是1,2,*,问你最后有几种方式确定所有的的地雷. 思路: ...
- SSH:Connection closed by foreign host
以为和防火墙,性能,HOSTS.DENY,端口之类的有关,后来查了下,啥都没有关系. 就是同一台机器NAT之后,被另一台抢了先机. http://blog.sina.com.cn/s/blog_6d0 ...
- Qt学习 之 Socket通信(世界上最简单的例子了)
最近写大作业用到Qt的Socket部分,网上关于这部分的资料都太过复杂,现在总结一下一些简单的应用.有机会可以给大家讲讲用Socket传送文件的代码. 这里主要讲解如何实现TCP和UDP的简单通信. ...
- Android Wear开发 - 数据通讯 - 第零节 : 打包Wear应用(手机和手表应用如何连接)
之所以将打包这一特殊的内容作为数据通讯的第零节,是因为如果没有通过配置打包的一些信息,则没有办法将手机端应用和手表端应用连接起来,则无法继续进行接下来的数据通讯的开发. 以下依然只针对Eclipse平 ...
- Maven实战三
转载:http://www.iteye.com/topic/1123228 1. 三套生命周期 Maven拥有三套相互独立的生命周期,它们分别为clean,default和site. 每个生命 ...
- 【调侃】IOC前世今生(转)
前些天,参与了公司内部小组的一次技术交流,主要是针对<IOC与AOP>,本着学而时习之的态度及积极分享的精神,我就结合一个小故事来初浅地剖析一下我眼中的“IOC前世今生”,以方便初学者能更 ...
- If one session has a shared or exclusive lock on record R in an index, another session cannot insert
If one session has a shared or exclusive lock on record R in an index, another session cannot insert ...