转载

基于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教程 Jenkins进阶系列 openfire参考指南 Java设计模式 HBase教程 java-demo Maven教程 springcloud-demo hibernate教程 Docker 教程 memcached教程 Quartz指南 Hive教程 ANTLR教程 SpringCloud Ant教程 java实例教程 Hazelcast教程 XStream教程 Elastic-Job-Lite 深入浅出MyBatis ibaties教程 SVN教程 rabittmq教程 Hadoop教程 solr教程 WebService CXF学习 JPA教程 ActiveMQ中文指南 Java内存模型 dubbo教程 python3-demo Linux入门视频教程
近期评论
  1. 1 使用 Docker 打包和运行 Vue 应用
  2. 2 Dependency Check命令行方式扫描jar包的安全漏洞
  3. 3 maven使用Dependency-Check来扫描安全漏洞
  4. 4 使用sonarqube分析代码质量
  5. 5 使用screw来对比数据库表和字段差异
  6. 6 Spring Boot 实现防盗链功能
  7. 7 在Spring Boot中的实现国际化（i18n）
  8. 8 一个用于 SMB/CIFS 网络的 Java 库-JCIFS
  9. 9 Spring Boot 3.x嵌入MongoDB 进行测试
  10. 10 java如何解析和生成yaml文件？
网站信息
  • 文章总数：82,737 篇
  • 文件总数：284,312 个
  • 标签总数：2,416 个
  • 分类总数：85 个
  • 留言数量：2,559 条
  • 在线人数：617 人
  • 运行天数：4,439天
  • 最后更新：2024年12月22日19点
Loading...

其他链接

关于本站

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

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

问题交流

[HBLOG]公众号 HBLOG HBLOG