<%@ page contentType="text/html; charset=UTF-8"%>

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <title>alertifyjsDemo</title>

 <!-- resource http://alertifyjs.com/guide.html -->

 <!-- see http://alertifyjs.com/guide.html -->

 <link rel="stylesheet" href="../component/alertifyjs/css/themes/bootstrap.min.css">

 <link rel="stylesheet" href="../component/alertifyjs/css/alertify.css">

 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

 <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Droid+Sans:400,700">

 <script src="../component/alertifyjs/alertify.js"></script>

 <script type="text/javascript" src="../component/jquery-1.11.1.js"></script>

 <script type="text/javascript">

 alertify.defaults.transition = "slide";

 alertify.defaults.theme.ok = "btn btn-primary";

 alertify.defaults.theme.cancel = "btn btn-danger";

 alertify.defaults.theme.input = "form-control";

 function interval(e){

     alertify.dismissAll();

     setCookie("a","c");

 }

 //设置cookie

 function setCookie(name, value) {

     var Days = 30;

     var exp = new Date();

     exp.setTime(exp.getTime() + Days*24*60*60*1000);

     document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();

 }

 function getCookie(name){

     var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");

     if(arr=document.cookie.match(reg))

     return unescape(arr[2]);

     else

     return null;

 }

 $(function(){

     $('#alert').click(function(){

         alertify.alert('Bootstrap');

     });

     $('#confirm').click(function(){

         alertify.confirm('Bootstrap');

     });

     $('#prompt').click(function(){

         alertify.prompt('Bootstrap');

     });

     $("#notify").click(function() {

         alertify.notify('sample', 'success', 5, function(){  console.log('dismissed'); });

     });

     $("#alert1").click(function() {

         var closable = alertify.alert().setting('closable');

          alertify.confirm('labels changed!')

              .set('labels', {ok:'确定!', cancel:'取消!'})

              .set('onok', function(closeEvent){ alertify.success('Ok');}); ;

     });

     $("#notify1").click(function() {

         if(getCookie("a") != "c") {

             var msg = alertify.message("<button onclick='interval(\"aaa\");'>不再显示</button>", 100, function(){ });

         }

     });

 });

 </script>

 <style type="text/css">

     body {

         font-family:"Droid Sans","Helvetica Neue","Helvetica","Arial",sans-serif;

         -webkit-overflow-scrolling: touch;

     }

     .btn{

         margin: .25em;

     }

     </style>

 </head>

 <body>

 ----------基本功能-----------------

     <div style="text-align:center;padding:40px;">

         <a id="alert" class="btn btn-primary btn-lg">

             Alert

         </a>

         <a id="confirm" class="btn btn-primary btn-lg">

             Confirm

         </a>

         <a id="prompt" class="btn btn-primary btn-lg">

             Prompt

         </a>

         <a id="notify" class="btn btn-primary btn-lg">

             Notify

         </a>

     </div>

     <hr>

     <div style="text-align:center;padding:40px;">

         <a id="alert1" class="btn btn-primary btn-lg">

             alert1

         </a>

         <a id="notify1" class="btn btn-primary btn-lg">

             Notify1

         </a>

     </div>

 </body>

 </html>

公司使用插件，随便封装一下非常好用，这里我们预想做一个不再显示的功能，修改了alertify.js里面的一个create函数function clickDelegate，屏蔽了点击消失的功能，然后把这个alert记录到Cookie中，以后读取cookie有值则不再显示，

 builder.append("window.ep.alert=function(msg,callback,cls){alertify.set({labels:{ok:'确定',cancel:'取消'},delay:2000,buttonReverse:true,buttonFocus:'ok'});alertify.alert(msg,callback,cls);};\n");

 builder.append("window.ep.confirm=function(msg,callback,cls){alertify.set({labels:{ok:'确定',cancel:'取消'},delay:2000,buttonReverse:true,buttonFocus:'ok'});alertify.confirm(msg,callback,cls);};\n");

 builder.append("window.ep.prompt=function(msg,defaultValue,callback,cls){alertify.set({labels:{ok:'确定',cancel:'取消'},delay:2000,buttonReverse:true,buttonFocus:'ok'});alertify.prompt(msg,function(e,str){callback.call(window, e?(!!str?str:''):null);},defaultValue,cls);};\n");

 builder.append("window.ep.notify=function(msg,type,time){alertify.set({delay:2000});if(!time&&time!==0){time=2000;}if(type=='success'){alertify.success(msg,time);}else if(type=='error'){alertify.error(msg,time);}else{alertify.log(msg,type,time);}};\n");

alertifyjs的更多相关文章

  1. 2016年最好的15个Web设计和开发工具

    1.ai2html ai2html是适用于Adobe Illustrator的开源脚本,可以转换Illustrator文件为html和css. 官方网站:http://ai2html.org/ 2.A ...

  2. jQuery smartMenu右键自定义上下文菜单插件

    http://www.zhangxinxu.com/wordpress/?p=1667 <%@ page contentType="text/html; charset=UTF-8&q ...

  3. 前端组件库 - 搭建web app常用的样式/组件等收集列表(移动优先)

    0. 前端自动化(Workflow) 前端构建工具 Webpack - module bundler Yeoman - a set of tools for automating developmen ...

  4. IOS-2016年最好的15个Web设计和开发工具

    设计师和开发者,web设计师和开发者遍地开花.这促使web开发人员也需要寻找最好的工具去设计出优于其他人的网站.作为一个web设计师或开发者,你必须寻找新的途径来提高自己的技能,提高自己的工作质量.下 ...

随机推荐

  1. 怎么看vue版本

    查看vue版本号是 vue -V 而不是npm vue -v ,npm vue -v 等同于npm -v vue -V: 后面那个V是大写的.

  2. CGI,FAST-CGI,PHP-FPM的区别

    http://blog.csdn.net/xsgnzb/article/details/52875331 CGI全称Common Gateway Interface即公共网关接口,它遵循cgi规范,定 ...

  3. 虚拟主机、VPS以及云主机的区别和对比

    对于很多需要建网站的朋友来说,虚拟主机是必须要了解的基础知识.虚拟主机相对于VPS与云主机来说出现的较早,也是被大多数站长所了解的主机.很多人容易将这三者混淆,弄不清楚三者的联系与区别.那么虚拟主机. ...

  4. web组件开发入门

    本文是学习慕课网阿当大话西游之WEB组件后的一个总结. 组件的分类 1 框架组件:依赖于某种框架的组件 2 定制组件:根据公司业务定制的组件 3 独立组件:不依赖框架的组件 定义和加载组件 解决css ...

  5. DOS基本命令（基本部分）

    一.cls(clear screen的简写) 命令作用:清屏屏幕 详细介绍:屏幕显示的所有字符信息都是存放在一个屏幕缓冲区中,cls命令的作用是清除屏幕上的文字,并将该缓冲区清空. 二.dir(dir ...

  6. 可变数目参数----关键字params的使用

    如何定义和使用可变数目参数的方法,使用关键字params. 即其他语言的可变参数 Code public class App { static void Main() { //常规使用方法 Conso ...

  7. 直接请求转发(Forward)和间接请求转发(Redirect)两种区别?

    用户向服务器发送了一次HTTP请求,该请求肯能会经过多个信息资源处理以后才返回给用户,各个信息资源使用请求转发机制相互转发请求,但是用户是感觉不到请求转发的.根据转发方式的不同,可以区分为直接请求转发 ...

  8. C# 将Access中时间段条件查询的数据添加到ListView中

    C# 将Access中时间段条件查询的数据添加到ListView中 一.让ListView控件显示表头的方法 在窗体中添加ListView 空间,其属性中设置:View属性设置为:Detail,Col ...

  9. Performance Testing 入门小结

    从事软件测试两年多了,一直在做功能测试.2016年计划学习Performance.今天,先把之前听过的同事session以及自己查阅的资料小结一下. 一.什么是性能测试 首先来说一下软件的性能是什么. ...

  10. .net Core学习笔记1 创建简单的 .net core项目

    1.打开vs2017>Web 1:创建实体类: namespace ProductMvc.Models { //商品类型 public class ProductType { public in ...