`
李亦鸿
  • 浏览: 12001 次
  • 性别: Icon_minigender_1
  • 来自: 海南
社区版块
存档分类
最新评论
  • baiyj71: quiz的例子因为浏览器版本的问题会出现报错,需要在smoke ...
    smoke.js

smoke.js

阅读更多

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演示                             
 
 

  • 描述: alert
  • 大小: 2.1 KB
  • 描述: confirm
  • 大小: 2.1 KB
  • 描述: prompt
  • 大小: 3 KB
  • 描述: quiz
  • 大小: 2.8 KB
分享到:
评论
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-master

    Smoke.js 是一个专为替换传统 JavaScript `alert`, `confirm` 和 `prompt` 对话框而设计的轻量级、高度可定制的 JavaScript 插件。它的核心理念是通过HTML和CSS3技术提供更加美观且交互性更强的对话框体验,让用户...

    smoke.js, 框架风格的javascript风格警报系统.zip

    smoke.js, 框架风格的javascript风格警报系统 SMOKE.JS --0.1.3快速而有效地通知或者获得用户的批准。 这里警报系统使用css动画和 background ( 所以没有图像或者js动画代码。所以它很轻) 。实现和修改样式很简单。...

    HTML5 Canvas逼真烟雾效果js插件

    这款名为smoke.js的插件简化了这一过程,使得非专业图形编程的开发者也能在网页中轻松添加这种高级视觉特效。 smoke.js的主要特点和功能包括: 1. **实时渲染**:烟雾效果是实时生成的,这意味着烟雾的形状、颜色...

    smokejs是一款基于HTML5Canvas的逼真烟雾特效js插件

    smoke.js正是利用了Canvas的这一特性,通过精心编写的JavaScript代码模拟出逼真的烟雾流动效果。 **烟雾特效的实现原理** 烟雾特效的生成主要涉及以下几个关键步骤: 1. **初始化Canvas**:首先,smoke.js会在...

    smoke.zip js效果

    js效果

    smoke-pure.js:一个用于JS(Javascript)的简单轻便的模式弹出库。 urge鱼的警告

    smoke-pure.js 受启发。 我想摆脱Smoke.js所具有的DOM ID依赖性。 这也修复了一个错误,即实际的基本元素在使用后永远不会被删除,只会被隐藏。 我删除了一些功能。 以后可能会以其他方式添加它们。 删除的功能...

    smoke.js:与javascript无关的框架式警报系统

    SMOKE.JS-0.1.3 快速,时尚地通知或获得用户的批准。 此警报系统使用CSS动画和背景(因此没有图像或JS动画代码...因此非常轻巧)。 实施起来很简单,而且真的很容易更改样式。 看一下该演示: : 此外,我们还为...

    使用js模块实现,再threejs实现的3d场景中展示烟囱冒烟效果

    例如,可以创建一个名为`smoke.js`的模块专门处理烟雾的生成和更新。 2. **3D场景构建**:首先,我们需要创建一个Three.js的基本场景(Scene)、相机(Camera)和渲染器(Renderer)。相机的视角应设置得当,以便...

    HTML5 Canvas逼真烟雾效果js插件特效代码

    在这个场景中,我们关注的是一个名为"smoke.js"的JavaScript插件,它专门用于在Canvas上实现逼真的烟雾效果。这款插件为网页设计师和开发者提供了一种简单的方法来增强网页的互动性和视觉吸引力。 烟雾效果在许多...

    HTML5 Canvas逼真烟雾效果js插件.zip

    "smoke.js" 是一个利用HTML5 Canvas技术实现的JavaScript插件,专用于创建逼真的烟雾效果。这款插件通过细腻的粒子动画,为网页带来栩栩如生的烟雾模拟,可以广泛应用于游戏、艺术设计或者动态视觉效果中。 烟雾...

    基于Threejs的火焰烟雾动画效果代码

    Three.js 是一个JavaScript库,它为WebGL提供了一种易于使用的接口,用于在浏览器中创建3D图形。WebGL是一种在网页上实现硬件加速的3D图形渲染技术,无需插件即可运行。Three.js通过简化复杂的WebGL API,让开发者...

    Three.js烟雾文字背景动画特效.zip

    Three.js,作为一款强大的JavaScript库,使得开发者能够在浏览器上创建复杂的3D图形和动画,无需深入理解WebGL的底层细节。本篇文章将详细解析如何利用Three.js制作烟雾文字背景动画特效,以及涉及到的关键技术点。 ...

    study-three.js:Three.js研究的片段

    #6烟雾平流与卷曲噪音https://aadebdeb.github.io/study-three.js/smoke-advection-with-curl-noise.html #7与GPGPU粒子和鼠标不互动...

    烟雾视频特效.zip

    JavaScript库如jQuery或Vue.js可以简化这一步骤,提供更加动态和用户友好的体验。 在实际项目中,"烟雾视频特效.zip"可能包含了实现这一特效的HTML文件、CSS文件、烟雾视频文件(如smoke.mp4)以及可能的烟雾图片...

    CamelotVFX: Fire & Smoke 火焰与烟雾特效

    This package contains realistic fire and smoke FX rendered from 3D software by an FX Artist professional in the Animation/Film industry. Included are the sprite sheets and prefabs for 12 effects, in ...

    小而好的javascript烟熏效果:wind_face::dashing_away:-JavaScript开发

    演示您可以在此处进行现场演示→安装基础将smoke.js文件复制到项目中,并与脚本标签一起使用:[removed] &lt;/ script&gt;该def演示您可以使用这里的实时演示→安装基础将smoke.js文件复制到您的项目中,并将其与...

    smoke-0.0.2-源码.rar

    源代码通常由各种编程语言编写,例如Java、Python、C++或JavaScript等。在"smoke-0.0.2"这个项目中,我们无法直接确定使用的是哪种语言,但通过解压并查看源文件可以找到线索。源码文件夹结构通常包括项目的配置文件...

    smoke-effect-react:一个简单的破烟效果React成分。 通过react学习Three.js的一步。 从原始创作者Teo Litto在Codepen https上进行的实验移植而来

    通过react学习Three.js的一步。 从原始创作者Teo Litto在codepen 上进行的实验移植而来。 有关使用此组件的演示, 。安装npm i -S smoke-effect-react如何使用将包导入到您的React项目中。 import SmokeElement ...

    smoke

    10. **自动化测试工具**:为了提高效率,可以使用自动化工具进行smoke测试,例如Selenium、Jest、Mocha或Nightwatch.js。这些工具能快速地执行预定义的测试脚本,节省手动测试的时间。 总之,HTML的smoke测试是一个...

Global site tag (gtag.js) - Google Analytics