smoke.js

李亦鸿

浏览: 11748 次
性别:
来自: 海南

最近访客更多访客>>

不平凡的人

baiyj71

u013486840

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

web前端

smoke.js alert confirm prompt 弹出框

smoke.js 是一套跨浏览器标准化了的警告窗口，因为平常使用的alert,confirm prompt等警告框在不同的浏览器弹出来的时候会有不同的样式，所以就有了smoke.js；smoke.js是一个轻量级且灵活的JavaScript插件,支持回调函数,在不同浏览器上都好用，比较个性化。

如果你想在不同浏览器上弹出统一样式的警告窗口，那你就得使用smoke.js了，smoke.js包含了这几个警告框：Alert：常规的alert窗口

Comfirm:带有yes和no按钮的Alert窗口

Prompt:带有输入框的Alert窗口

quiz:带有选择的Alert窗口

在使用smoke.js之前你得需要下载插件，即下载smoke需要的smoke.css和smoke.js然后引入你写的页面中；

这些插件你可以到http://smoke-js.com下载。

话不多说，下面给演示一下这几个框怎么使用：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>smokeTest</title>
		<link rel="stylesheet" href="css/smoke.css" type="text/css" media="all">
		<script type="text/javascript" src="js/smoke.js" ></script>
	</head>
	<body>
		<input type="button" value="alert" onclick="alertTest();" />
		<input type="button" value="confirm" onclick="confirmTest();" />
		<input type="button" value="prompt" onclick="promptTest();" />
		<input type="button" value="quiz" onclick="quizTest();" />
		
	</body>
	<script type="text/jscript">
//alert对话框

	function alertTest (){
		
smoke.alert("您已经点击按钮了！", function(e){
	
}, {
	ok: "确定",
	cancel: "Nope",
	classname: "custom-class"
});
		
	}	
		
	//confirm对话框
	
	function confirmTest (){
		
smoke.confirm("是否要删除？", function(e){
	if (e){

	}else{

	}
}, {
	ok: "确定",
	cancel: "取消",
	classname: "custom-class",
	reverseButtons: true
});
	}	
		
	//prompt对话框
	
	function promptTest (){
		
smoke.prompt("请输入您要添加的内容", function(e){
	if (e){

	}else{
	
	}
}, {
	ok: "确定",
	cancel: "取消",
	classname: "custom-class",
	reverseButtons: true,
	value: "此处输入内容"
});
	}	
		
	//qiuz对话框
	
    function quizTest(){
		
smoke.quiz("你的选择是？", function(e){
	if (e == "A"){

	}
}, {
	button_1: "A",
	button_2: "B",
	button_3: "C",
	button_4: "D",
	button_cancel: "Nothing"
});
	}	
		
		
	
		
		
	</script>
</html>

alert演示

confirm演示

prompt演示

quiz演示

查看图片附件

分享到：

html5进度条 | 笑傲江湖之人物分析

2014-03-22 01:08
浏览 1433
评论(1)
分类:Web前端
查看更多

1 楼 baiyj71 2017-01-17

quiz的例子因为浏览器版本的问题会出现报错，需要在smoke.js文件加入如下代码：
if(!document.getElementsByClassName){ document.getElementsByClassName = function(className, element){ var children = (element || document).getElementsByTagName('*'); var elements = new Array(); for (var i=0; i<children.length; i++){ var child = children[i]; var classNames = child.className.split(' '); for (var j=0; j<classNames.length; j++){ if (classNames[j] == className){ elements.push(child); break; } } } return elements; }; }

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

smoke.js

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

smoke.js

评论

发表评论

相关推荐

html5进度条

最近访客更多访客>>