JS~Boxy和JS模版实现一个标准的消息提示框
面向对象的封装
面向对象一个入最重要的特性就是“封装”,将一些没有必要公开的方法和属性以特定的方式进行组装,使它对外只公开一个接口,外界在调用它时,不需要关注它实现的细节,而只要关注它的方法签名即可,而对于JS来说,我们也可以利用面向对象的封装性来实现一个标准的消息提示框。
JS模版
使用JS模版可以大大提高开发效率,有了模版,你不用在去拼接JS串了,这对于开发者来说绝对是个福音!看它多少漂亮:
aaarticlea/png;base64,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" alt="" />
标准消息弹出框的完整代码
<script src="~/Scripts/jquery-plugin-boxy/js/jquery.boxy.js"></script>
<link href="~/Scripts/jquery-plugin-boxy/css/boxy.css" rel="stylesheet" />
<script type="text/html" id="alertBox">
<div style="width: 200px; text-align: center;">
<b>[Content]</b>
</div>
</script>
<script type="text/ecmascript">
function alertBox(msg, timer) {
var reg = new RegExp("\\[([^\\[\\]]*?)\\]", 'igm'); //i g m是指分别用于指定区分大小写的匹配、全局匹配和多行匹配。
var html = document.getElementById("alertBox").innerHTML;
var result = html.replace(reg, function (node, key) { return { 'Content': msg }[key]; }); var options = { title: '消息提示', closeText: 'x' };
var timer = timer || ;//5s
new Boxy(result, $.extend({
behaviours: function () {
setTimeout('$(".boxy-wrapper").hide();', timer);
}
}, options));
}
下面是调用时候的代码
alertBox("您有1个消息,请注意查收!", );
下面是运行效果图
aaarticlea/png;base64,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" alt="" />
怎么样够精简吧,呵呵!
JS~Boxy和JS模版实现一个标准的消息提示框的更多相关文章
- js消息提示框插件-----toastr用法
(本文系转载) 因为个人项目中有一个提交表单成功弹出框的需求,从网上找了一些资料,发现toastr这个插件的样式还是不错的.所以也给大家推荐下,但是网上的使用资料不是很详细,所以整理了一下,希望能给 ...
- 基于jquery的消息提示框toastr.js
//消息提示全局配置 toastr.options = { "closeButton": false,//是否配置关闭按钮 "debug": false,//是 ...
- 一个vue的全局提示框组件
<template> <!-- 全局提示框 --> <div v-show="visible" class="dialog-tips dia ...
- 一个简单的消息提示jquery插件
最近在工作中写了一个jquery插件,效果如下: 就是一个简单的提示消息的一个东西,支持最大化.最小化.关闭.自定义速度.自定义点击事件,数据有ajax请求和本地数据两种形式.还有不完善的地方,只做了 ...
- 原生wcPop.js消息提示框(移动端)、内含仿微信弹窗效果
wcPop.js移动端消息对话框插件是之前的wxPop.js的升级版,优化了js和css,并且新增了仿微信弹窗效果, 是一款含有多种情景模式的原生模态消息对话框代码,可用于替代浏览器默认的alert弹 ...
- jquery 实现一个简单的成功提示框,失败提示框
主要的jquery代码:var TS={ successAlert:function(str){ //调用成功的方法 var html='<div class="alert alert ...
- 使用jquery封装一个可以复用的提示框
首先在html中 <div class="backcap"> <div class="diolag"> <div class=&q ...
- h5 录音 自动生成proto Js语句 UglifyJS-- 对你的js做了什么 【原码笔记】-- protobuf.js 与 Long.js 【微信开发】-- 发送模板消息 能编程与会编程 vue2入坑随记(二) -- 自定义动态组件 微信上传图片
得益于前辈的分享,做了一个h5录音的demo.效果图如下: 点击开始录音会先弹出确认框: 首次确认允许后,再次录音不需要再确认,但如果用户点击禁止,则无法录音: 点击发送 将录音内容发送到对话框中.点 ...
- [js插件]分享一个文章内容信息提示插件Colortip
引用 项目中需要一个信息提示的功能,就上网找了一个插件,发现colortip实现比较简单,就定了这个插件. 实现过程 官网:http://tutorialzine.com/2010/07/colort ...
随机推荐
- 利用dedecms给近三天(或当天)发布的文章显示红色日期或加上new字或new小图片
1)红色日期 <br>[field:pubdate runphp='yes'] <br>$a="<font color=red>".strfti ...
- servlet下载,解决文件名中有中文下载路径出现乱码不能正常下载问题
方法很多种,我只试用了两种. 主页面JSP中引入下载功能所需的js文件.引入的时候设置编码格式例如 <script type="text/javascript" charse ...
- 调用百度地图API实现手机自动定位 (逆地址解析)
//声明地址解析器 var geoc = new BMap.Geocoder(); //自动定位 var autoLocation = function () { if (navigator.geol ...
- WebApi2官网学习记录---Tracing
安装追踪用的包 Install-Package Microsoft.AspNet.WebApi.Tracing Update-Package Microsoft.AspNet.WebApi.WebHo ...
- webform 验证控件
验证: 一.非空验证 RequiredFieldValidator ErrorMessage - 验证出错后的提示信息 ControlToValidate - 要验证的控件的ID Display - ...
- apache 反向代理配置(ubuntu)
1.配置apache2的站点文件 cd /etc/apache2/site-avaliable sudo vim edy.conf 具体配置如下: # 反向代理配置 # 监听所有80端口的访问 < ...
- 编译XSIP过程中环境配置
昨天在编译XSip的过程中,有很多问题首先是出现了很多的error C1083. 然后到XSIP自己的文件夹中,也找不到对应的.h文件. 上网查阅后发现应该是缺少了对应的头文件的路径. 于是到可以 ...
- (原)torch7中添加新的层
转载请注明出处: http://www.cnblogs.com/darkknightzh/p/6069627.html 参考网址: http://torch.ch/docs/developer-doc ...
- Oracle11g R2学习系列 之四Maven+Struts+Spring实验
今天试一下Java调用Oracle来看一下.会不会也如昨天实验的一样坑呢?由于我对于Java也接触的不多,所以不打算直接使用该收提供的实验文档,而是自己利用Maven+Struts+Spring来自己 ...
- 编写优秀jQuery插件的10个技巧
前言:在开发过很多 jQuery 插件以后,我慢慢的摸索出了一套开发jQuery插件比较标准的结构和模式.这样我就可以 copy & paste 大部分的代码结构,只要专注最主要的逻辑代码就行 ...