<%@ 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. Binlog的三个业务应用场景

    1.什么是binlog binlog是mysql的一种二进制日志文件,用来记录数据的变化.mysql使用binlog进行主从复制,如图: 客户端向master的mysql sever写入数据 当数据发 ...

  2. asp.net -mvc框架复习（3）-控制器和动作方法的任务分析

    using System;using System.Collections.Generic;using System.Linq;using System.Web;//ASP.NET核心命名空间usin ...

  3. 理解rem实现响应式布局原理及js动态计算rem

    前言 移动端布局中,童鞋们会使用到rem作为css单位进行不同手机屏幕大小上的适配.那么来讲讲rem在其中起的作用和如何动态设置rem的值. 1.什么是rem rem是相对于根元素(html标签)的字 ...

  4. MySQLdb 部署

    1.windows 下载后,直接安装即可 http://www.jb51.net/softs/73369.html#download 双击安装 MySQL-python-1.2.3.win32-py2 ...

  5. Azure Powershell对ASM资源的基本操作

    本文主要介绍Windows Azure Powershell对ASM资源的基本操作 1.登陆ASM模式,命令:Add-AzureAccount -Environment AzureChinaCloud ...

  6. 移动端 iphone锁屏文字效果

    简易的仿照iphone 效果 笔记备份 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Conten ...

  7. Linux常用命令（一）--系统命令

    命令字 命令字 [命令选项] [命令参数] 1. 命令中所有字符区分大小写 2. 命令选项分为短格式(-)及长格式(–) 3. 必须在命令行提示符下输入命令 4. 命令中的各个部分至少需要一个空格分隔 ...

  8. shell的变量处理

    shell的变量处理 一.删除 删除(删除某一段) # 从前向后删除 % 从后向前删除 删除(删除某一部分) $(var:nu1:nu2) nu1表示开始位置 nu2表示删除长度 示例如下 file= ...

  9. CSS继承、层叠和特殊性

    1.继承 (1)样式应用于某个特定的HTML标签元素,而且应用于其后代. (2)但某些标签不适用,如border: (3)例子:p{color:red;}设置了颜色 <p class=" ...

  10. WindowXp-Windows7-Windows运行命令(转)

    Win7里面按 Win+R 呼出运行界面,一下是它的一些常用命令: 1.cleanmgr: 打开磁盘清理工具 2.compmgmt.msc: 计算机管理 3.conf: 启动系统配置实用程序 4.ch ...