alertifyjs
<%@ 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的更多相关文章
- 2016年最好的15个Web设计和开发工具
1.ai2html ai2html是适用于Adobe Illustrator的开源脚本,可以转换Illustrator文件为html和css. 官方网站:http://ai2html.org/ 2.A ...
- jQuery smartMenu右键自定义上下文菜单插件
http://www.zhangxinxu.com/wordpress/?p=1667 <%@ page contentType="text/html; charset=UTF-8&q ...
- 前端组件库 - 搭建web app常用的样式/组件等收集列表(移动优先)
0. 前端自动化(Workflow) 前端构建工具 Webpack - module bundler Yeoman - a set of tools for automating developmen ...
- IOS-2016年最好的15个Web设计和开发工具
设计师和开发者,web设计师和开发者遍地开花.这促使web开发人员也需要寻找最好的工具去设计出优于其他人的网站.作为一个web设计师或开发者,你必须寻找新的途径来提高自己的技能,提高自己的工作质量.下 ...
随机推荐
- 算法-java代码实现插入排序
插入排序
- tp路由+伪静态+去掉index.php
浏览:10536 发布日期:2013/10/08 分类:技术分享 关键字: 路由 伪静态 去掉index.php 之前一个网友说能不能达到这样的效果,www.olcms.com/news/id.htm ...
- 现代 PHP 新特性系列(三) —— Trait 概览
Trait是PHP 5.4引入的新概念,看上去既像类又像接口,其实都不是,Trait可以看做类的部分实现,可以混入一个或多个现有的PHP类中,其作用有两个:表明类可以做什么:提供模块化实现.Trait ...
- PHPCMS模板里面使用自定义函数
首先我在/phpcms/libs/functions/extention.func.php里面新增了一个函数 ============================================= ...
- 想要学习jQuery却不知从何开始?本文为你精选5个例子帮你快速成为jQuery大师
本文阅读对象:WEB前端开发初学者.jQuery初学者.JavaScript初学者 本文目的:jQuery真正入门.快速入门.快速搞清楚jQuery是什么,同时为你的jQuery大师之路开启第一道门. ...
- CCF系列之ISBN号码(201312-2)
试题名称: ISBN号码 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 每一本正式出版的图书都有一个ISBN号码与之对应,ISBN码包括9位数字.1位识别码和3位分隔符,其规 ...
- [转]sysctl -P 报错解决办法
问题症状 修改 linux 内核文件 #vi /etc/sysctl.conf后执行sysctl -P 报错 error: "net.bridge.bridge-nf-call-ip6ta ...
- python3 第十七章 - sequence(序列)
之前我们在讲for循环语句时就提到过序列,那么什么是序列(sequence)? 序列是Python中最基本的数据结构.序列中的每个元素都分配一个数字 —— 它的索引(位置),第一个索引是0,第二个索引 ...
- linux_硬件信息
运维关注哪些方面? CPU:对计算机工作速度和效率起决定性作用(intel amd) 内存: 临时存放数据:容量和处理速度,决定数据传输快慢 硬盘(disk):数据持久化,决定电脑反应速度:优化硬盘是 ...
- python_大学排名爬取
逻辑思路是什么? 1. 获取页面 2. 处理页面,提取信息 3. 格式输出 先走面向过程编程: 1. 要定义3个函数,对应以上三个过程 2. 在__main__函数中传入参数,并执行以上三个过程 #! ...