<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" type="text/css" href="../../jquery.toolkit.css" />
<link rel="stylesheet" type="text/css" href="jquery.tk.notify.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
<script src="../../jquery.toolkit.js" type="text/javascript"></script>
<script src="../../jquery.toolkit.storage.js" type="text/javascript"></script>
<script src="jquery.tk.notify.js" type="text/javascript"></script>
<style>
body{ font-size:12px;}
#test-container{ width: 350px;}
div.notify{ padding:.5em; max-width:350px; vertical-align:top;margin: .8em .4em;}
#userNbox {background:#e0e0e0;padding:.3em;}
#userNbox .title {Color:#ffffff; background:#888888;display:block;text-align:center;}
</style>
</head>
<body>
<label for="position">Select notification position</label>
<select id="position">
<option></option>
<option>top - left</option>
<option>top - center</option>
<option>top - right</option>
<option>bottom - left</option>
<option>bottom - center</option>
<option>bottom - right</option>
</select>
<br />
<div id="test-container">
<div class="notify tk-inlineStack">Click on this div will send it to default notification box </div>
<div class="notify tk-inlineStack">
Click on this div will call the notify method of the default notification box.
Doing so a cloned version of this div will be sent to notification box.
</div>
<div class="notify tk-inlineStack">
Click on this div will call the msg method of the notification box
</div>
<div class="notify tk-inlineStack">
clicking on this one will call the notify method of a user defined notifybox.
</div>
<div class="notify tk-inlineStack">
click here to make notification boxes show their options.
</div>
<div class="tk-notify tk-notify-noclose-0 tk-inlineStack">This div is sent to notification automatically when plugin is initialized</div>
</div>
<div id="userNbox" class="tk-notifybox tk-notifybox-bottom-center-250">
<span class="title">This is a user defined notification box</span>
</div>
<script>
jQuery(function(){
var nBox = $.tk.notifybox.initDefault({vPos:'top',hPos:'center'}).notifybox('msg','notification box initialized');
$('#position').change(function(){
var v = $(this).val();
var m = v.match(/(\S*) - (\S*)/);
if( ! m )
return false;
nBox.notifybox('set','vPos',m[1])
.notifybox('set','hPos',m[2])
.notifybox('msg','position change to '+v);
});
$(".notify:eq(0)").click(function(){$(this).notify();})
$(".notify:eq(1)").click(function(){nBox.notifybox('notify',this)})
$(".notify:eq(2)").click(function(){nBox.notifybox('msg',"This is just a message sent to the notification box")})
$(".notify:eq(3)").click(function(){$("#userNbox").notifybox('msg',"This is just a message sent to the notification box")})
$(".notify:eq(4)").click(function(){
dbg($(".tk-notifybox").notifybox('return_msg','trdt'))
})
//- $(".notify:eq(2)").click(function(){$("This is just a message sent to the notification box").notify()})
$.toolkit.initPlugins('notifybox|notify')
});
</script>
</body>
</html>
|
Download
