143 lines
3.7 KiB
Markdown
143 lines
3.7 KiB
Markdown
WebUI-Popover
|
|
=============
|
|
|
|
A lightWeight popover plugin with jquery ,enchance the popover plugin of bootstrap with some awesome new features. It works well with bootstrap ,but bootstrap is not necessary!
|
|
|
|
|
|
Browser compatibility: ie8+,Chrome,Safari,Firefox,Opera
|
|
|
|
## Requirement
|
|
|
|
jquery1.7+
|
|
|
|
##Features
|
|
* fast,lightweight
|
|
* support more placements
|
|
* auto caculate placement
|
|
* close button in popover
|
|
* multipule popovers in same page
|
|
* different styles
|
|
* support url and iframe
|
|
* support async mode
|
|
|
|
##Demo
|
|
[WebUI Popover Demo](http://sandywalker.github.io/webui-popover/demo/)
|
|
|
|
##Getting Started
|
|
|
|
####Including it on your page
|
|
```html
|
|
<link rel="stylesheet" href="jquery.webui-popover.css">
|
|
...
|
|
<script src="jquery.js"></script>
|
|
<script src="jquery.webui-popover.js"></script>
|
|
```
|
|
|
|
####Use the plugin as follows:
|
|
|
|
```javascript
|
|
$('a').webuiPopover(options);
|
|
```
|
|
|
|
####Some Examples:
|
|
|
|
Create Simplest Popover
|
|
```javascript
|
|
$('a').webuiPopover({title:'Title',content:'Content'});
|
|
```
|
|
|
|
Create Popover by dom element data-* attribute
|
|
```html
|
|
<a href="#" data-title="Title" data-content="Contents..." data-placement="right"></a>
|
|
```
|
|
```javascript
|
|
$('a').webuiPopover();
|
|
```
|
|
|
|
Create Popover with bottom placement
|
|
```javascript
|
|
$('a').webuiPopover({title:'Title',content:'Content',placement:'bottom'});
|
|
```
|
|
|
|
Create Popover trigged by mouse hover
|
|
```javascript
|
|
$('a').webuiPopover({title:'Title',content:'Content',trigger:'hover'});
|
|
```
|
|
|
|
Create inversed style Popover
|
|
```javascript
|
|
$('a').webuiPopover({title:'Title',content:'Content',style:'inverse'});
|
|
```
|
|
Create Popover with fixed width and height
|
|
```javascript
|
|
$('a').webuiPopover({title:'Title',content:'Content',width:300,height:200});
|
|
```
|
|
|
|
Create Popover with close button
|
|
```javascript
|
|
$('a').webuiPopover({title:'Title',content:'Content',closeable:true});
|
|
```
|
|
|
|
Create and Animate the Popover
|
|
```javascript
|
|
$('a').webuiPopover({title:'Title',content:'Content',animation:'pop'});
|
|
```
|
|
|
|
Create Popover with iframe
|
|
```javascript
|
|
$('a').webuiPopover({type:'iframe',url:'http://getbootstrap.com'});
|
|
```
|
|
|
|
Create Popover Async Mode
|
|
```javascript
|
|
$('a').webuiPopover({
|
|
type:'async',
|
|
url:'https://api.github.com/',
|
|
content:function(data){
|
|
var html = '<ul>';
|
|
for(var key in data){html+='<li>'+data[key]+'</li>';}
|
|
html+='</ul>';
|
|
return html;
|
|
}
|
|
});
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
### default options
|
|
```javascript
|
|
{
|
|
placement:'auto',//values: auto,top,right,bottom,left,top-right,top-left,bottom-right,bottom-left,auto-top,auto-right,auto-bottom,auto-left
|
|
width:'auto',//can be set with number
|
|
height:'auto',//can be set with number
|
|
trigger:'click',//values: click,hover,manual
|
|
style:'',//values:'',inverse
|
|
constrains:null, // constrains the direction when placement is auto, values: horizontal,vertical
|
|
animation:null, //pop with animation,values: pop,fade (only take effect in the browser which support css3 transition)
|
|
delay: {//show and hide delay time of the popover, works only when trigger is 'hover',the value can be number or object
|
|
show: null,
|
|
hide: 300
|
|
},
|
|
async: {
|
|
before: function(that, xhr) {},//executed before ajax request
|
|
success: function(that, data) {}//executed after successful ajax request
|
|
},
|
|
cache:true,//if cache is set to false,popover will destroy and recreate
|
|
multi:false,//allow other popovers in page at same time
|
|
arrow:true,//show arrow or not
|
|
title:'',//the popover title ,if title is set to empty string,title bar will auto hide
|
|
content:'',//content of the popover,content can be function
|
|
closeable:false,//display close button or not
|
|
padding:true,//content padding
|
|
type:'html',//content type, values:'html','iframe','async'
|
|
url:''//if not empty ,plugin will load content by url
|
|
}
|
|
```
|
|
|
|
|
|
|
|
|
|
|