Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
tree: a7d4663985
Fetching contributors…

Cannot retrieve contributors at this time

162 lines (106 sloc) 8.364 kb
<!DOCTYPE html>
<html>
<head>
<title>smoke.js</title>
<!-- include these -->
<link rel="stylesheet" href="smoke/smoke.css" type="text/css" media="screen" />
<script src="smoke/smoke.min.js" type="text/javascript"></script>
<!-- you only need this if you want to include a theme...duh -->
<link id="theme" rel="stylesheet" href="smoke/themes/default.css" type="text/css" media="screen" />
<!-- styles/js for the demo page. ignore them...or don't. i don't really care. -->
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<link rel="stylesheet" href="base.css" type="text/css" media="screen" />
<script>
$(function(){
$("#shortthemes a").click(function(e){
e.preventDefault();
$("link#theme").attr('href',$(this).attr('href'));
$("#shortthemes a").removeClass('selected');
$(this).addClass('selected');
});
});
function tstconfirm(){
smoke.confirm('this is still cool, yeah?',function(e){
if (e){
smoke.alert('OK pressed');
}else{
smoke.alert('CANCEL pressed');
}
});
}
function tstprompt(){
smoke.prompt('what\'s my name?',function(e){
if (e){
smoke.alert('my name is '+e);
}else{
smoke.alert('no');
}
},{value:"skrillex"});
}
</script>
</head>
<body>
<div id="content">
<div id="head">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQcAAAA/CAYAAADt9Q3TAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MUQ5MUEyNjM5RkI4MTFFMDkzOTVBOTU1RjIyMDgxMEQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MUQ5MUEyNjQ5RkI4MTFFMDkzOTVBOTU1RjIyMDgxMEQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoxRDkxQTI2MTlGQjgxMUUwOTM5NUE5NTVGMjIwODEwRCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoxRDkxQTI2MjlGQjgxMUUwOTM5NUE5NTVGMjIwODEwRCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PoVNnCoAAAnoSURBVHja7F3LcdtI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" width="263" height="63" />
</div>
<div id="demo">
<a onClick="javascript:smoke.alert('this is a normal alert');">smoke.alert('this is a normal alert');</a>
<a onClick="javascript:smoke.signal('this goes away after a sec');">smoke.signal('this goes away after a sec');</a>
<a onClick="javascript:tstconfirm();">smoke.confirm('behaves like a normal confirm?');</a>
<a onClick="javascript:tstprompt();">smoke.prompt('behaves like a normal prompt?');</a>
</div>
<hr />
<p>You can implement these the same way you'd use the js alert()...just put "smoke." in front of it.</p>
<p>The confirm() replacement, however, needs to be used just a little differently:</p>
<pre>smoke.confirm('this is still cool, yeah?',function(e){
if (e){
smoke.alert('OK pressed');
}else{
smoke.alert('CANCEL pressed');
}
});</pre>
<p>prompt(), similarly:</p>
<pre>smoke.prompt('what\'s my name?',function(e){
if (e){
smoke.alert('my name is '+e);
}else{
smoke.alert('no');
}
});</pre>
<p>And if you want the smoke.alert() to behave exactly like a native alert(), you can have subsequent actions happen in a callback like so:</p>
<pre>smoke.alert('look at that alert, man.', {}, function(){
// oh what now?
});</pre>
<hr />
<p>Want to do custom button labels? Try this:</p>
<pre>smoke.alert('this is cool', {ok:"yeah it is"});
smoke.confirm('this is still cool, yeah?',function(e){
if (e){
smoke.alert('OK pressed');
}else{
smoke.alert('CANCEL pressed');
}
}, {ok:"yeah it is", cancel:"no way"});
</pre>
<p>Need a default value for a prompt? Prepare to be amazed:</p>
<pre>smoke.prompt('what\'s for dinner? (omg please say pizza, please say pizza)',function(e){
if (e){
smoke.alert(e);
}else{
smoke.alert('no');
}
},{value:"pizza"});
</pre>
<p>Maybe you want to specify different styles for a specific alert. Just add a classname parameter like this:</p>
<pre>smoke.alert('this is cool', {classname:"myclassname"});</pre>
<hr />
<div id="shortthemes">
<a href="smoke/themes/default.css" class="selected">light style (default)</a>
<a href="smoke/themes/dark.css">dark style</a>
<a href="smoke/themes/100s.css">100s style</a>
<a href="smoke/themes/tiger.css">tiger style</a>
</div>
</div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.