This time I will share jQuery Plugin and tutorial about Bootstrap Popover Enhancement Plugin with jQuery – WebUI Popover, hope it will help you in programming stack.
| File Size: | 274 KB |
|---|---|
| Views Total: | 30314 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
WebUI Popover is a powerful yet easy jQuery plugin used to extend the Bootstrap popover component with following advanced features:
- Auto position.
- More specific positions.
- Custom triggers.
- Multiple popovers at once.
- Popover title.
- Closeable popover.
- Pop with any elements (table, list, iframe, etc…)
- Custom callback events.
How to use it:
1. Load the required jQuery WebUI Popover stylesheet in the head section.
1 |
<link rel="stylesheet" href="dist/jquery.webui-popover.min.css"> |
2. Load jQuery library and the jQuery WebUI Popover plugin at the bottom for faster page loading.
1 |
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> |
2 |
<script src="dist/jquery.webui-popover.min.js"></script> |
3. Basic usage.
1 |
$('SELECTOR').webuiPopover(settings); |
4. All the default settings.
001 |
// auto,top,right,bottom,left,top-right, |
002 |
// top-left,bottom-right,bottom-left |
003 |
placement:'auto',//values: |
004 |
005 |
container: null, |
006 |
007 |
// can be set with number |
008 |
width:'auto', |
009 |
height:'auto', |
010 |
011 |
// hover,click,sticky,manual |
012 |
trigger:'click', |
013 |
014 |
// custom styles |
015 |
style:'', |
016 |
017 |
// jQuery selector, if a selector is provided, popover objects will be delegated to the specified. |
018 |
selector: false, |
019 |
020 |
// show and hide delay time of the popover |
021 |
// works only when trigger is 'hover' |
022 |
// the value can be number or object |
023 |
delay: { |
024 |
show: null, |
025 |
hide: 300 |
026 |
}, |
027 |
028 |
async: { |
029 |
type: 'GET', |
030 |
//executed before ajax request |
031 |
before: function(that, xhr) {}, |
032 |
// executed after successful ajax request |
033 |
success: success(that, data) {}, |
034 |
//function(that, xhr, data){} |
035 |
error: null |
036 |
}, |
037 |
038 |
// if set to false,popover will destroy and recreate |
039 |
cache:true, |
040 |
041 |
// multiple popovers in page at same time |
042 |
multi:false, |
043 |
044 |
// show arrow or not |
045 |
arrow:true, |
046 |
047 |
// the popover title |
048 |
title:'', |
049 |
050 |
// content of the popover,content can be function |
051 |
content:'', |
052 |
053 |
// display close button or not |
054 |
closeable:false, |
055 |
056 |
// content padding |
057 |
padding:true, |
058 |
059 |
// if not empty ,plugin will load content by url |
060 |
url:'' |
061 |
062 |
// 'html','iframe','async' |
063 |
type:'html', |
064 |
065 |
// ltr,rtl |
066 |
direction: '', |
067 |
068 |
// custom animation |
069 |
animation: null, |
070 |
071 |
// custom template |
072 |
template: '<div class="webui-popover">' + |
073 |
'<div class="arrow"></div>' + |
074 |
'<div class="webui-popover-inner">' + |
075 |
'<a href="#" class="close">x</a>' + |
076 |
'<h3 class="webui-popover-title"></h3>' + |
077 |
'<div class="webui-popover-content"><i class="icon-refresh"></i> <p> </p></div>' + |
078 |
'</div>' + |
079 |
'</div>', |
080 |
081 |
// if backdrop is set to true, popover will use backdrop on open |
082 |
backdrop: false, |
083 |
084 |
// if popover can be dismissed by outside click or escape key |
085 |
dismissible: true, |
086 |
087 |
// callbacks |
088 |
onShow: null, |
089 |
onHide: null, |
090 |
091 |
// abort XHR |
092 |
abortXHR: true, |
093 |
094 |
// automatic hide the popover by a specified timeout, the value must be false,or a number(1000 = 1s). |
095 |
autoHide: false, |
096 |
097 |
// offset the top of the popover |
098 |
offsetTop: 0, |
099 |
100 |
// offset the left of the popover |
101 |
offsetLeft: 0, |
102 |
103 |
iframeOptions: { |
104 |
frameborder: '0', |
105 |
allowtransparency: 'true', |
106 |
id: '', |
107 |
name: '', |
108 |
scrolling: '', |
109 |
onload: '', |
110 |
height: '', |
111 |
width: '' |
112 |
}, |
113 |
114 |
hideEmpty: false |
5. API Methods.
01 |
// Show Popover with options |
02 |
WebuiPopovers.show('#el',{title:' hello popover',width:300}); |
03 |
04 |
//Hide Popover by jQuery selector |
05 |
WebuiPopovers.hide('#el'); |
06 |
07 |
//Hide All Popovers |
08 |
WebuiPopovers.hideAll(); |
09 |
