面向对象的封装

面向对象一个入最重要的特性就是“封装”,将一些没有必要公开的方法和属性以特定的方式进行组装,使它对外只公开一个接口,外界在调用它时,不需要关注它实现的细节,而只要关注它的方法签名即可,而对于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模版实现一个标准的消息提示框的更多相关文章

  1. js消息提示框插件-----toastr用法

     (本文系转载) 因为个人项目中有一个提交表单成功弹出框的需求,从网上找了一些资料,发现toastr这个插件的样式还是不错的.所以也给大家推荐下,但是网上的使用资料不是很详细,所以整理了一下,希望能给 ...

  2. 基于jquery的消息提示框toastr.js

    //消息提示全局配置 toastr.options = { "closeButton": false,//是否配置关闭按钮 "debug": false,//是 ...

  3. 一个vue的全局提示框组件

    <template> <!-- 全局提示框 --> <div v-show="visible" class="dialog-tips dia ...

  4. 一个简单的消息提示jquery插件

    最近在工作中写了一个jquery插件,效果如下: 就是一个简单的提示消息的一个东西,支持最大化.最小化.关闭.自定义速度.自定义点击事件,数据有ajax请求和本地数据两种形式.还有不完善的地方,只做了 ...

  5. 原生wcPop.js消息提示框(移动端)、内含仿微信弹窗效果

    wcPop.js移动端消息对话框插件是之前的wxPop.js的升级版,优化了js和css,并且新增了仿微信弹窗效果, 是一款含有多种情景模式的原生模态消息对话框代码,可用于替代浏览器默认的alert弹 ...

  6. jquery 实现一个简单的成功提示框,失败提示框

    主要的jquery代码:var TS={ successAlert:function(str){ //调用成功的方法 var html='<div class="alert alert ...

  7. 使用jquery封装一个可以复用的提示框

    首先在html中 <div class="backcap"> <div class="diolag"> <div class=&q ...

  8. h5 录音 自动生成proto Js语句 UglifyJS-- 对你的js做了什么 【原码笔记】-- protobuf.js 与 Long.js 【微信开发】-- 发送模板消息 能编程与会编程 vue2入坑随记(二) -- 自定义动态组件 微信上传图片

    得益于前辈的分享,做了一个h5录音的demo.效果图如下: 点击开始录音会先弹出确认框: 首次确认允许后,再次录音不需要再确认,但如果用户点击禁止,则无法录音: 点击发送 将录音内容发送到对话框中.点 ...

  9. [js插件]分享一个文章内容信息提示插件Colortip

    引用 项目中需要一个信息提示的功能,就上网找了一个插件,发现colortip实现比较简单,就定了这个插件. 实现过程 官网:http://tutorialzine.com/2010/07/colort ...

随机推荐

  1. ashx实现文件下载以及文件MD5码测试

    cs using System; using System.Collections.Generic; using System.Linq; using System.Web; using System ...

  2. Asp.net实现在线人数统计功能代码实例

    application最经典的一个方法:统计在线人数,这需要借助于我们的全局应用程序类来对登录的用户信息进行统计: 以下是代码片段:    void application_start(object ...

  3. Javascript实现表格行排序

    网站开发中凡是用到表格来展示数据的,往往都要根据某个列来对行排序,下面是我从书上看到的一个行排序例子,看过后受益匪浅,故分享出来. 直接献上完整代码: <!doctype html> &l ...

  4. C#图像处理(3):在图像上加条形码

    引入Aspose.BarCode用来生成条形码,方法如下: /// <summary> /// 生成条码 /// </summary> /// <param name=& ...

  5. mysql忘记密码的处理方式(整理非原创)

    方案1.通过跳过授权的方式 1.修改MySQL的登录设置: # vi /etc/my.cnf 在[mysqld]的中加上:skip-grant-tables . 2.重新启动mysqld # ubun ...

  6. Qt sqlite

    原文地址:http://blog.csdn.net/NewBee520/article/details/8247236QSqlDatabase类实现了数据库连接的操作 QSqlQuery类用来执行SQ ...

  7. JVM调优基础

    一.JVM调优基本流程 1.划分应用程序的系统需求优先级 2.选择JVM部署模式:单JVM.多JVM 3.选择JVM运行模式 4.调优应用程序内存使用 5.调优应用程序延迟 6.调优应用程序吞吐量 二 ...

  8. $.unique() 对象组成的数组去掉重复对象

    发现一件事,一个完全由对象组成的数组,用$.unique()方法去掉重复的时候不管用 var arr = [{text:'第一个',value:'1'},{text:'第二个',value:'2'}, ...

  9. [Mugeda HTML5技术教程之16]案例分析:制作跨屏互动游戏

    本节我们将要做一个跨屏互动应用的案例分析,该应用时给一家商场做活动使用的,是一个跨屏爱消除游戏.PC端页面显示在连接在PC的大屏幕上,参与活动的玩家可以用自己的手机扫描PC端页面上的二维码,连接成功后 ...

  10. My Eclipse 自动提示

    1.My Eclipse 自带代码提示快捷键 “ alt+/”. 2.输入即提示:window-->preferences-->java-->Editor 展开后点击Content ...