This time I will share jQuery Plugin and tutorial about Easy Corner Notification Box Plugin With jQuery – Tips, hope it will help you in programming stack.
| File Size: | 17.5 KB |
|---|---|
| Views Total: | 344 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
Tips.js is a jQuery plugin used for displaying a notification popup with custom styles, message text and jump url at the corner of the browser window.
How to use it:
1. Add references to jQuery library and the jQuery tips.js plugin’s files.
1 |
<script src="//code.jquery.com/jquery.min.js"></script> |
2 |
<link rel="stylesheet" href="css/tips.css"> |
3 |
<script src="tips.js"></script> |
2. Create a new notificaiton box as the other jQuery plugins:
1 |
$('.el').creatTips(OPTIONS) |
3. Customize the notification box with the following options:
01 |
$('.el').creatTips({ |
02 |
03 |
// topLeft,topRight,bottomLeft,bottomRight |
04 |
post: "bottomRight" , |
05 |
06 |
// url |
07 |
gurl: "#" , |
08 |
09 |
// text for url |
10 |
gword: "", |
11 |
12 |
// succeed,error,info,warm |
13 |
status: "info" , |
14 |
15 |
// for auto close |
16 |
// 0 = disable |
17 |
close: 0 , |
18 |
19 |
// animation speed |
20 |
anitime:"500" , |
21 |
22 |
// title |
23 |
title:"<a href="https://www.jqueryscript.net/tags.php?/Notification/">Notification</a> Box" , |
24 |
25 |
// message title |
26 |
content:"Success" , |
27 |
28 |
// message content |
29 |
detail:"Success" , |
30 |
31 |
// size of notification box |
32 |
height:200, |
33 |
width:360, |
34 |
35 |
// remark text |
36 |
remark:"", |
37 |
38 |
// trigger evetns |
39 |
// 'auto', 'click' or 'all' |
40 |
cbtype:"", |
41 |
42 |
// callback function when the notification box is closed |
43 |
cbfun:function(){} |
44 |
|
45 |
}) |
This awesome jQuery plugin is developed by wsDever. For more Advanced Usages, please check the demo page or visit the official website.
source : jqueryscript.net
