• alertifyjs


      1 <%@ page contentType="text/html; charset=UTF-8"%>
      2 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
      3 <html>
      4 <head>
      5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      6 <title>alertifyjsDemo</title>
      7 <!-- resource http://alertifyjs.com/guide.html -->
      8 <!-- see http://alertifyjs.com/guide.html -->
      9 <link rel="stylesheet" href="../component/alertifyjs/css/themes/bootstrap.min.css">
     10 <link rel="stylesheet" href="../component/alertifyjs/css/alertify.css">
     11 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
     12 <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Droid+Sans:400,700">
     13 <script src="../component/alertifyjs/alertify.js"></script>
     14 <script type="text/javascript" src="../component/jquery-1.11.1.js"></script>
     15 <script type="text/javascript">
     16 alertify.defaults.transition = "slide";
     17 alertify.defaults.theme.ok = "btn btn-primary";
     18 alertify.defaults.theme.cancel = "btn btn-danger";
     19 alertify.defaults.theme.input = "form-control";
     20 function interval(e){
     21     alertify.dismissAll();
     22     setCookie("a","c");
     23 }
     24 //设置cookie
     25 function setCookie(name, value) {
     26     var Days = 30;
     27     var exp = new Date();
     28     exp.setTime(exp.getTime() + Days*24*60*60*1000);
     29     document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
     30 }
     31 function getCookie(name){
     32     var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
     33     if(arr=document.cookie.match(reg))
     34     return unescape(arr[2]);
     35     else
     36     return null;
     37 }
     38 $(function(){
     39     $('#alert').click(function(){
     40         alertify.alert('Bootstrap');
     41     });
     42     
     43     $('#confirm').click(function(){
     44         alertify.confirm('Bootstrap');
     45     });
     46     
     47     $('#prompt').click(function(){
     48         alertify.prompt('Bootstrap');
     49     });
     50     
     51     $("#notify").click(function() {
     52         alertify.notify('sample', 'success', 5, function(){  console.log('dismissed'); });
     53     });
     54     
     55     $("#alert1").click(function() {
     56         var closable = alertify.alert().setting('closable');
     57          alertify.confirm('labels changed!')
     58              .set('labels', {ok:'确定!', cancel:'取消!'})
     59              .set('onok', function(closeEvent){ alertify.success('Ok');}); ;
     60     });
     61     
     62     $("#notify1").click(function() {
     63         if(getCookie("a") != "c") {
     64             var msg = alertify.message("<button onclick='interval("aaa");'>不再显示</button>", 100, function(){ });
     65         }
     66     });
     67 });
     68 </script>
     69 <style type="text/css">
     70     body { 
     71         font-family:"Droid Sans","Helvetica Neue","Helvetica","Arial",sans-serif;
     72         -webkit-overflow-scrolling: touch;     
     73     }
     74     .btn{
     75         margin: .25em;
     76     }
     77     </style>
     78 </head>
     79 <body>
     80 ----------基本功能-----------------
     81     <div style="text-align:center;padding:40px;">
     82         <a id="alert" class="btn btn-primary btn-lg">
     83             Alert
     84         </a>
     85 
     86         <a id="confirm" class="btn btn-primary btn-lg">
     87             Confirm
     88         </a>
     89 
     90         <a id="prompt" class="btn btn-primary btn-lg">
     91             Prompt
     92         </a>
     93         
     94         <a id="notify" class="btn btn-primary btn-lg">
     95             Notify
     96         </a>
     97     </div>
     98     <hr>
     99     
    100     <div style="text-align:center;padding:40px;">
    101         <a id="alert1" class="btn btn-primary btn-lg">
    102             alert1
    103         </a>
    104         
    105         <a id="notify1" class="btn btn-primary btn-lg">
    106             Notify1
    107         </a>
    108     </div>
    109     
    110 </body>
    111 </html>

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

    1 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);};
    ");
    2 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);};
    ");
    3 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);};
    ");
    4 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);}};
    ");
  • 相关阅读:
    1013:温度表达转化
    1012:计算多项式的值
    1012:计算多项式的值
    1012:计算多项式的值
    数据结构——线性表
    数据结构——线性表
    数据结构——线性表
    SqlSever查询某个表的列名称、说明、备注、注释,类型等
    SqlSever查询某个表的列名称、说明、备注、注释,类型等
    SQL:将查询结果插入到另一个表的三种情况
  • 原文地址:https://www.cnblogs.com/sun-space/p/5641404.html
Copyright © 2020-2023  润新知