|
Topbar message box plug-in can be used to showing message box or notifications on a web page. This is very simple to use and easy to configure. Of course you need jQuery to use this.
Usage
To use this plug-in include jQuery and juery.topbar.js in you web page -
<script src="jquery.js" type="text/javascript"></script>
<script src="juery.topbar.js" type="text/javascript"></script>
Now create a html element which you want to show in topbar as messagebox -
<p>
<a href="javascript:void(0)" id="demo01">Demo 1 - Simple</a>
</p>
<div id="demo01-body" style="display:none;">
This is a simple demo
<span style="font-size: small">(click to close)</span>
</div>
Now use showTopbarMessage to show the notification on topbar -
$(function () {
$("#demo01").click(function () {
$('#demo01-body').showTopbarMessage();
});
});
Currently you can configure following attributes -
- background: Hex code of color for bar background. Default value is - "#888".
- borderColor: Hex code of color for bar border color. Default value is - "#000".
- foreColor: Hex code of color for bar fore color. Default value is - "#000".
- height: Height of the bar. Default value is "50px".
- fontSize: Size of the text displayed in the top bar. Default value is - "20px"
- close: Specify how the notifications will be closed. "click" – means it will be closed on click, else specify number of milliseconds after which bar will be closed automatically.
You can view full usage and demonstration on the demo page.
|