转载

基于Bootstrap的轻量级弹出提示框插件

简要教程 webui-popover是一款基于Bootstrap的轻量级弹出提示框Tooltip插件。该提示框插件可以和Bootstrap完美结合，但是并不一定需要和Bootstrap一起使用。它支持IE8以上的浏览器。它的特点有： 运行速度快，轻量级。 支持多种定位方式。 能自动计算提示框位置。 在提示框中提供关闭按钮。 同一个页面支持多个提示框实例。 支持不同的样式。 支持使用url和iframe。

支持异步加载模式。

基于Bootstrap的轻量级弹出提示框插件

查看演示     下载插件


使用方法

使用这个提示框插件首先需要引入jQuery和jquery.webui-popover.js,jquery.webui-popover.css文件。
  1. <link rel="stylesheet" href="jquery.webui-popover.css">
  2. <script src="jquery.js"></script>
  3. <script src="jquery.webui-popover.js"></script>      
复制代码

调用插件

可以使用下面的方法来调用一个提示框。
  1. $('a').webuiPopover(options);         
复制代码

配置参数

下面是该提示框插件的默认配置参数：
  1. {
  2.     placement:'auto',//values: auto,top,right,bottom,left,top-right,top-left,bottom-right,bottom-left,auto-top,auto-right,auto-bottom,auto-left
  3.     width:'auto',//can be set with  number
  4.     height:'auto',//can be set with  number
  5.     trigger:'click',//values:  click,hover,manual
  6.     style:'',//values:'',inverse
  7.     constrains:null, // constrains the direction when placement is  auto,  values: horizontal,vertical
  8.     animation:null, //pop with animation,values: pop,fade (only take effect in the browser which support css3 transition)
  9.     delay: {//show and hide delay time of the popover, works only when trigger is 'hover',the value can be number or object
  10.         show: null,
  11.         hide: 300
  12.     },
  13.     async: {
  14.         before: function(that, xhr) {},//executed before ajax request
  15.         success: function(that, data) {}//executed after successful ajax request
  16.     },
  17.     cache:true,//if cache is set to false,popover will destroy and recreate
  18.     multi:false,//allow other popovers in page at same time
  19.     arrow:true,//show arrow or not
  20.     title:'',//the popover title ,if title is set to empty string,title bar will auto hide
  21.     content:'',//content of the popover,content can be function
  22.     closeable:false,//display close button or not
  23.     padding:true,//content padding
  24.     type:'html',//content type, values:'html','iframe','async'
  25.     url:'',//if not empty ,plugin will load content by url
  26.     backdrop:false,//if backdrop is set to true, popover will use backdrop on open
  27.     dismissible:true // if popover can be dismissed by  outside click or escape key
  28. }               
复制代码

应用举例

创建一个简单提示框：
  1. $('a').webuiPopover({title:'Title',content:'Content'});               
复制代码
通过DOM元素的data-*首先来创建提示框：
  1. <a href="#" data-title="Title" data-content="Contents..." data-placement="right"></a>               
复制代码
  1. $('a').webuiPopover();         
复制代码
在元素的下方插件一个提示框：
  1. $('a').webuiPopover({title:'Title',content:'Content',placement:'bottom'});     
复制代码
在鼠标滑过元素时弹出一个提示框：
  1. $('a').webuiPopover({title:'Title',content:'Content',trigger:'hover'});            
复制代码
创建一个inverse样式的提示框：
  1. $('a').webuiPopover({title:'Title',content:'Content',style:'inverse'});               
复制代码
创建一个固定宽度和高度的提示框：
  1. $('a').webuiPopover({title:'Title',content:'Content',width:300,height:200});   
复制代码
创建一个带关闭按钮的提示框：
  1. $('a').webuiPopover({title:'Title',content:'Content',closeable:true});     
复制代码
创建一个带动画效果的提示框：
  1. $('a').webuiPopover({title:'Title',content:'Content',animation:'pop'});            
复制代码
创建一个内容使用iframe的提示框：
  1. $('a').webuiPopover({type:'iframe',url:'https://www.baidu.com'});     
复制代码
通过异步模式插件一个提示框：
  1. $('a').webuiPopover({   
  2.     type:'async',
  3.     url:'https://api.github.com/',
  4.     content:function(data){
  5.         var html = '<ul>';
  6.         for(var key in data){html+='<li>'+data[key]+'</li>';}
  7.         html+='</ul>';
  8.         return html;
  9.     }   
  10. });        
复制代码
创建一个提示框，并通过手动方式来触发它：
  1. //Initailize
  2. $('a').webuiPopover({trigger:'manual'});
  4. ...
  6. //Show it
  7. $('a').webuiPopover('show');  
复制代码
本文版权属于jQuery之家，转载请注明出处： http://www.htmleaf.com/jQuery/Tooltips/201507162238.html
正文到此结束
所属分类： 编程技术

热门推荐

相关文章

阿里云首购8折
说给你听

本文目录
随机标签
书籍教程
springboot-demo Java入门教程 bootstrap3 CSS Apache基础教程 php ionic 教程 Python mysql教程 eclipse Ubuntu VPS系统配置 AngularJS 教程 MongoDB教程 Struts2教程 Redis教程 Spring教程 Git教程 Java设计模式 Jenkins进阶系列 openfire参考指南 HBase教程 Maven教程 hibernate教程 Docker 教程 memcached教程 Quartz指南 Hive教程 ANTLR教程 Ant教程 java实例教程 SpringCloud Elastic-Job-Lite XStream教程 深入浅出MyBatis Hazelcast教程 ibaties教程 SVN教程 rabittmq教程 Hadoop教程 solr教程 WebService CXF学习 springcloud-demo JPA教程 ActiveMQ中文指南 Java内存模型 java-demo dubbo教程 Linux入门视频教程
近期评论
  1. 1 Spring Cloud Circuit Breaker快速入门Demo
  2. 2 Spring Cloud Bus快速入门Demo
  3. 3 Spring Cloud Config快速入门Demo
  4. 4 Spring Cloud Function快速入门Demo
  5. 5 SSPanel-Uim搭建教程 2023年全新定制版主题-解决老版本命令失效问题
  6. 6 Spring Boot集成Milvus和deeplearning4j实现图搜图功能
  7. 7 Spring Boot集成Aviator实现参数校验
  8. 8 ACME自动申请免费的通配符https域名证书
  9. 9 wordpress 数据库和文件优化
  10. 10 CentOS安装Docker与Docker-Compose
网站信息
  • 文章总数：82,696 篇
  • 文件总数：284,257 个
  • 标签总数：2,380 个
  • 分类总数：84 个
  • 留言数量：2,560 条
  • 在线人数：679 人
  • 运行天数：4,392天
  • 最后更新：2024年11月05日22点
Loading...

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

[HBLOG]公众号 HBLOG HBLOG