扩展Bootstrap Tooltip插件使其可交互的方法


Posted in Javascript onNovember 07, 2016

本文实例讲述了扩展Bootstrap Tooltip插件使其可交互的方法。分享给大家供大家参考,具体如下:

最近在公司某项目开发中遇见一特殊需求,请笔者帮助,因此有了本文的插件。在前端开发中tooltip是一个极其常用的插件,它能更好向使用者展示更多的文档等帮助信息。它们通常都是一些静态文本信息。但同事他们的需求是需要动态交互,在文本信息中存在帮助网页的链接。如果使用常规tooltip,则在用户移出tooltip依赖DOM节点后,tooltip panel则将被隐藏。所以用户没有办法点击到这些交互链接。

所以我们期望:给用户一定的时间使得用户能够将鼠标从依赖节点移动到tooltip panel;并且如果用户鼠标停留在tooltip上则不能隐藏,使得用户能够与位于tooltip上的链接或者是其他form表单控件交互。

也许你觉得这并不难,在网上Google就有很多代码可直接使用。是的,如下面这段来自plnkr.co的代码(http://plnkr.co/edit/x2VMhh?p=preview):

$(".pop").popover({ trigger: "manual" , html: true, animation:false})
  .on("mouseenter", function () {
    var _this = this;
    $(this).popover("show");
    $(".popover").on("mouseleave", function () {
      $(_this).popover('hide');
    });
  }).on("mouseleave", function () {
    var _this = this;
    setTimeout(function () {
      if (!$(".popover:hover").length) {
        $(_this).popover("hide");
      }
    }, 300);
});

它是使用bootstrap的popover来实现的,从bootstrap的源码能看到popover是继承至tooltip的组件之一。这里是通过将popover的触发方式设为手动触发,由我们自己来控制显示和隐藏它的时机。并且在依赖节点离开的时候,给定300ms的延迟等待用户进入tooltip panel,如果300ms还没有进入tooltip则隐藏它。否则就阻止隐藏tooltip的逻辑。

这代码虽然功能可用,但具有代码洁癖的博主并不太满意这样的代码。它难以阅读维护,同时重用性也将极差。所以笔者决定要以bootstrap插件方式来一bs way写这款插件。

当笔者查阅bootstrap tooltip源码时,发现它是一个扩展性很不错的插件。tooltip的显示和隐藏依赖于它内部的hoverState状态来控制,in代表在依赖节点元素之上,out则代表移出了DOM元素。并且它也支持延迟动画机制。所以我们可以如下方式控制hoverState的状态:

var DelayTooltip = function (element, options) {
  this.init('delayTooltip', element, options);
  this.initDelayTooltip();
};
DelayTooltip.DEFAULTS = $.extend({}, $.fn.tooltip.Constructor.DEFAULTS, {
  trigger: 'hover',
  delay: {hide: 300}
});
DelayTooltip.prototype.delayTooltipEnter = function(){
    this.hoverState = 'in';
  };
  DelayTooltip.prototype.delayTooltipLeave = function(){
    this.hoverState = 'out';
    this.leave(this);
  };
 DelayTooltip.prototype.initDelayTooltip = function(){
   this.tip()
     .on('mouseenter.' + this.type, $.proxy(this.delayTooltipEnter, this))
     .on('mouseleave.' + this.type, $.proxy(this.delayTooltipLeave, this));
 };

这里在构造tooltip对象同时也注册tooltip panel的mouseenter、mouseleave.事件,并设置对应的hoverState状态。当移出tooltip panel时,这里需要手动的调用来自tooltip继类的leave方法。对于隐藏延时则设置在默认option中,使其能够可配置。

上面的代码就是我们所需要扩展tooltip的所有的代码。当然要想作为一个通用的bootstrap插件,还需要它固定的插件配置代码。插件全部代码如下:

(function ($) {
 'use strict';
 var DelayTooltip = function (element, options) {
  this.init('delayTooltip', element, options);
  this.initDelayTooltip();
 };
 if (!$.fn.tooltip) throw new Error('Popover requires tooltip.js');
 DelayTooltip.VERSION = '0.1';
 DelayTooltip.DEFAULTS = $.extend({}, $.fn.tooltip.Constructor.DEFAULTS, {
  trigger: 'hover',
  delay: {hide: 300}
 });
 DelayTooltip.prototype = $.extend({}, $.fn.tooltip.Constructor.prototype);
 DelayTooltip.prototype.constructor = DelayTooltip;
 DelayTooltip.prototype.getDefaults = function () {
  return DelayTooltip.DEFAULTS;
 };
  DelayTooltip.prototype.delayTooltipEnter = function(){
    this.hoverState = 'in';
  };
  DelayTooltip.prototype.delayTooltipLeave = function(){
    this.hoverState = 'out';
    this.leave(this);
  };
 DelayTooltip.prototype.initDelayTooltip = function(){
   this.tip()
     .on('mouseenter.' + this.type, $.proxy(this.delayTooltipEnter, this))
     .on('mouseleave.' + this.type, $.proxy(this.delayTooltipLeave, this));
 };
 function Plugin(option) {
  return this.each(function () {
   var $this  = $(this);
   var data  = $this.data('bs.delayTooltip');
   var options = typeof option == 'object' && option;
   if (!data && /destroy|hide/.test(option)) return;
   if (!data) $this.data('bs.delayTooltip', (data = new DelayTooltip(this, options)));
   if (typeof option == 'string') data[option]();
  });
 }
 var old = $.fn.delayTooltip;
 $.fn.delayTooltip       = Plugin;
 $.fn.delayTooltip.Constructor = DelayTooltip;
 $.fn.delayTooltip.noConflict = function () {
  $.fn.delayTooltip = old;
  return this;
 };
})(jQuery);

这里基本都是bootstrap插件机制的固定模板,仅仅需要套用上就行。有了这个插件扩展,那么我们就可以如下使用这款插件:

HTML:

<div id="tooltip">bs tooltip:你能点击链接?</div>
<hr>
<div id="delayTooltip">delay tooltip:尝试点击链接</div>
<hr>
<div id="delayTooltipInHtml" data-html="true" data-placement="bottom" data-toggle="delayTooltip">delay tooltip:利用html标签实现</div>

JavaScript 代码:

(function(global, $){
  var page = function(){
  };
  page.prototype.bootstrap = function(){
    var html = 'Weclome to my blog <a target="_blank" href="greengerong.github.io">破狼博客</a>!<input type="text" placeholder="input some thing"/>';
    $('#tooltip').tooltip( {
      html: true,
      placement: 'top',
      title: html
    });
    $('#delayTooltip').delayTooltip( {
      html: true,
      placement: 'bottom',
      title: html
    });
 $('#delayTooltipInHtml').attr('title', html).delayTooltip();
 return this;
};
   global.Page = page;
})(this, jQuery);
$(function(){
  'use strict';
 var page = new window.Page().bootstrap();
  //
});

这款插件既支持jQuery在HTML中声明属性的方式,同时也可以在javascript中使用。效果如下:

扩展Bootstrap Tooltip插件使其可交互的方法

希望本文所述对大家基于bootstrap的程序设计有所帮助。

Javascript 相关文章推荐
COM中获取JavaScript数组大小的代码
Nov 22 Javascript
Javascript学习笔记二 之 变量
Dec 15 Javascript
浅谈javascript的分号的使用
May 12 Javascript
AngularJS基础 ng-keypress 指令简单示例
Aug 02 Javascript
详解Angular-cli生成组件修改css成less或sass的实例
Jul 27 Javascript
浅谈Vue的加载顺序探讨
Oct 25 Javascript
Vue写一个简单的倒计时按钮功能
Apr 20 Javascript
浅谈vue 单文件探索
Sep 05 Javascript
webpack4手动搭建Vue开发环境实现todoList项目的方法
May 16 Javascript
Vue.js实现立体计算器
Feb 22 Javascript
js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结
Mar 04 Javascript
vue中实现弹出层动画效果的示例代码
Sep 25 Javascript
js提示框替代系统alert,自动关闭alert对话框的实现方法
Nov 07 #Javascript
jQuery插件WebUploader实现文件上传
Nov 07 #Javascript
jQuery利用sort对DOM元素进行排序操作
Nov 07 #Javascript
AngularJS的ng Http Request与response格式转换方法
Nov 07 #Javascript
easyUI实现(alert)提示框自动关闭的实例代码
Nov 07 #Javascript
AngularJS ng-template寄宿方式用法分析
Nov 07 #Javascript
easyui messager alert 三秒后自动关闭提示的实例
Nov 07 #Javascript
You might like
Protoss魔法科技
2020/03/14 星际争霸
PHP 错误之引号中使用变量
2009/05/04 PHP
解析php中memcache的应用
2013/06/18 PHP
Yii中CGridView禁止列排序的设置方法
2016/07/12 PHP
关于Anemometer图形化显示MySQL慢日志的工具搭建及使用的详细介绍
2020/07/13 PHP
类之Prototype.js学习
2007/06/13 Javascript
js轮播图代码分享
2016/07/14 Javascript
JavaScript中利用构造器函数模拟类的方法
2017/02/16 Javascript
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
2017/11/19 Javascript
JavaScript中严格判断NaN的方法
2018/02/16 Javascript
JS实现前端页面的搜索功能
2018/06/12 Javascript
jQuery轻量级表单模型验证插件
2018/10/15 jQuery
如何使用vuex实现兄弟组件通信
2018/11/02 Javascript
JavaScript 生成唯一ID的几种方式
2021/02/19 Javascript
python 截取 取出一部分的字符串方法
2017/03/01 Python
python中的break、continue、exit()、pass全面解析
2017/08/05 Python
django使用html模板减少代码代码解析
2017/12/12 Python
对Python3之进程池与回调函数的实例详解
2019/01/22 Python
python并发爬虫实用工具tomorrow实用解析
2019/09/25 Python
python创建学生管理系统
2019/11/22 Python
python二元表达式用法
2019/12/04 Python
谈谈Python:为什么类中的私有属性可以在外部赋值并访问
2020/03/05 Python
python3检查字典传入函数键是否齐全的实例
2020/06/05 Python
python爬取网易云音乐热歌榜实例代码
2020/08/07 Python
matplotlib bar()实现多组数据并列柱状图通用简便创建方法
2021/02/24 Python
全球最大的在线橄榄球商店:Lovell Rugby
2018/05/20 全球购物
Hush Puppies澳大利亚官网:舒适的男女休闲和正装鞋
2019/08/24 全球购物
澳大利亚床上用品、浴巾和家居用品购物网站:Bambury
2020/04/16 全球购物
三八红旗集体先进事迹材料
2014/05/22 职场文书
大学迎新标语
2014/06/26 职场文书
市场营销工作计划书
2014/09/15 职场文书
庆祝教师节标语
2014/10/09 职场文书
七一慰问简报
2015/07/20 职场文书
致运动员赞词
2015/07/22 职场文书
SQL Server——索引+基于单表的数据插入与简单查询【1】
2021/04/05 SQL Server
win11开机发生死循环重启怎么办?win11开机发生死循环重启解决方法
2022/08/05 数码科技