jQuery弹出信息插件WebUI Popover使用教程

 

WebUI Popover是一个轻量级的jQuery弹出信息插件,配合Bootstrap使用,能制作一些很棒的新功能效果,他的使用可以和Bootstrap结合,但是没有Bootstrap也能使用,依赖jQuery插件版本1.7+以上。
WebUI Popover轻量级的jQuery弹出信息插

兼容性

WebUI Popover能完美兼容以下浏览器中的显示效果
ie8+
Chrome
Safari
Firefox
Opera

使用方法

引入插件的文件

<link rel="stylesheet" href="jquery.webui-popover.css">
...
<script src="jquery.js"></script>
<script src="jquery.webui-popover.js"></script>

使用插件

$('a').webuiPopover(options);

一些使用的例

创建简单的Popover

$('a').webuiPopover({title:'Title',content:'Content'});

创建Popover,通过DOM自定义属性设置弹出内容的值

<a href="#" data-title="Title" data-content="Contents..." data-placement="right"></a>
$('a').webuiPopover();

在底部弹出窗口

$('a').webuiPopover({title:'Title',content:'Content',placement:'bottom'});

特征

快速,轻量级
支持更多的位置
自动计算的位置
关闭弹出按钮
在同一页多的弹出
不同的风格
支持URL和iframe
支持异步模式
默认选项

{
    placement:'auto',//values: auto,top,right,bottom,left,top-right,top-left,bottom-right,bottom-left
    width:'auto',//can be set with  number
    height:'auto',//can be set with  number
    trigger:'click',//values:click,hover
    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
}

时间: 2024-09-11 07:22:27

jQuery弹出信息插件WebUI Popover使用教程的相关文章

jQuery弹出层插件与使用方法

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-

jquery弹出框插件jquery.ui.dialog用法分析_jquery

本文实例讲述了jquery弹出框插件jquery.ui.dialog用法.分享给大家供大家参考,具体如下: 1. jquery.ui.dialog 官方地址 http://jqueryui.net/dialog/ jquery.ui.dialog是一个非常灵活的模式框,它的官方地址为: http://docs.jquery.com/UI/Dialog 2. 文件引用 要使用jquery.ui.dialog,需要引用两个文件,1个是js,另外1个是css 在contentpage中添加: <scr

jQuery弹出下拉列表插件(实现kindeditor的@功能)_jquery

这几天有个工作需求,就是在富文本输入区域(kindeditor)可以有@功能,能够容易提示用户名的(像在qq群组@人一样).在网上找了一个叫bootstrap-suggest的插件,却不能满足我的需求,于是我决定在该插件上改良,主要是下面几点: 1. @内容的输入,能够匹配多个属性值. 2. 选中列表值后,是成块插入kindeditor的(方便删除,也利于区分文本). 3. 修正输入偶数关键字@功能失效问题. 前言 在一开始,我用bootstrap-suggest(https://github.

jQuery 弹出层插件(推荐)_jquery

最近在研究弹出层插件时发现网上很多插件功能很强大,同时插件也很庞大.在这里个人写了一个比较秀珍的弹出层插件. jquery.popdialog.js $(function () { $.fn.PopDialog = function (options) { var defaults = { Event: "click", //触发响应事件 title: "title", //弹出层的标题 type: "text", //弹出层类型(text.容器

原创jQuery弹出层插件分享_jquery

依赖jquery,兼容IE6\7\8 火狐 chrom 等主流浏览器(绝对原创), 不过请求大神帮我提升点效率. /** * jQuery弹出层插件 * * @author lanhaoooo@163.com * @since 2014-08-23 */ (function($) { var methods = { o : { isIe : !-[ 1, ] || document.documentMode >= 9,//后面的是判断IE9.IE10的 ie6 : !-[ 1, ] &&am

jQuery弹出层插件Lightbox_me使用指南_jquery

网站开发过程中,为了增加网站交互效果,我们有时需要在当前页面弹出诸如登陆.注册.设置等窗口.而这些窗口就是层,弹出的窗口就是弹出层.jQuery中弹出层插件很多,但有些在html5+css3浏览器下,支持完美.而在例如ie8一下的浏览器下显示不出应有的效果.例如jquery.avgrund插件在ie8下就无法显示. 本文介绍的插件Lightbox_me可以完美的支持chrome,firefox和ie7,ie8,ie9等主流浏览器. 1.Lightbox_me插件功能 用于显示弹出层 2.Ligh

jQuery弹出层插件Lightbox

  在使用discuzx中有一个Message以及Dialog方法来显示信息对话框.今天写项目的时候,需要一个信息对话框,所以就着手利用lightbox_me插件来写一个做备用. 网站开发过程中,为了增加网站交互效果,我们有时需要在当前页面弹出诸如登陆.注册.设置等窗口.而这些窗口就是层,弹出的窗口就是弹出层.jQuery中弹出层插件很多,但有些在html5+css3浏览器下,支持完美.而在例如ie8一下的浏览器下显示不出应有的效果.例如jquery.avgrund插件在ie8下就无法显示. 本

jQuery弹出层插件hwLayer使用方法详解

我们知道,jQuery为开发者提供了插件开发机制,其中一种方法是使用$.extend()来扩展jQuery,它其实就是用来在jQuery命名空间上增加新函数.而另一种也是我们常用来开发jQuery插件的方法是通过$.fn 向jQuery添加新的方法. 基本模板 我们来使用$.fn来做插件开发,这里所说的基本模板也可以说是基本格式吧,经常做jQuery插件开发的朋友会先把插件格式定下来,然后就是往格式里填业务代码. 以下代码是一个基本的jQuery插件的格式结构. ;(function($,win

Jquery弹出层插件Thickbox使用心得

前段时间在建设银行项目上用EXT完整做了个单页系统,太赶了,没有记录下任何东西, 现在都忘了,怪可惜的.这次项目用JQuery做js的东西.主要用了个弹出层控件thickbox, 自己也扩展和修改了一下.这里就记下来,也提供大家下载,希望对大家有用吧. thickbox官方网站(上面有例子和基本的使用方法): http://jquery.com/demo/thickbox/ 就我使用过程中,thickbox常见问题: 1 .跨iframe的弹出层. 症状:每次thickbox都只在frame中弹