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

本文实例讲述了扩展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的程序设计有所帮助。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索bootstrap
, 扩展
, Tooltip插件
可交互
bootstrap tooltip、bootstrap tooltip.js、bootstrap动态tooltip、bootstrap的tooltip、bootstrap2 tooltip,以便于您获取更多的相关知识。

时间: 2016-11-07

扩展Bootstrap Tooltip插件使其可交互的方法_javascript技巧的相关文章

扩展Bootstrap Tooltip插件使其可交互

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

BootStrap Table 获取同行不同列元素的方法_javascript技巧

表格同行中存在元素的相互调用,如何保证元素能够被同行不同列的其他方框使用,方法如下: 页面元素示例如下: <div id="MyTableId" class="content-main-container"> <div class="panel panel-primary gd-panel" id="mywindow"> <div class="panel-heading"&g

Bootstrap基本插件学习笔记之标签切换(17)_javascript技巧

Bootstrap可以很轻松就实现标签切换的效果. 0x01 样式1 基本样式: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link

全面解析Bootstrap中tab(选项卡)的使用方法_javascript技巧

本文实例为大家介绍实现tab选项卡的应用,此插件相对比较简单,具体内容如下源码文件: tab.js 实现原理:1.单击一个元素时,首先将原来高亮的元素取消 2.然后给被单击元素进行高亮 3.如果单击元素是下拉框中某个选项,则选中本身,还要选中下拉框 5.如果定义了动画,先执行动画,然后回调 源码分析:1.Show方法,是在单击一个元素的时候触发,会触发如下四个事件  1.1.Hiden.bs.tab:隐藏上一个元素   1.2.Show.bs.tab:显示当前元素   1.3.Hideen.bs

Bootstrap三种表单布局的使用方法_javascript技巧

Bootstrap提供了三种表单布局:垂直表单,内联表单和水平表单  创建垂直或基本表单: •·向父 <form> 元素添加 role="form".  •·把标签和控件放在一个带有 class .form-group 的 <div> 中.这是获取最佳间距所必需的.  •·向所有的文本元素 <input>.<textarea> 和 <select> 添加 class .form-control <form role=&q

Bootstrap字体图标无法正常显示的解决方法_javascript技巧

bootstratp作为一个优秀的前端框架,最近使用了其中的Glyphicon Halflings的字体图标.起初一直显示不出来,后面通过搜索相关资料直到成功显示,在此做一些总结,方便后面复习. 1.在html页面引入bootstrap <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>xxxx</title> <link href=&qu

fix-ie5.js扩展在IE5下不能使用的几个方法_javascript技巧

在IE5下的Javascript: Array不支持push(),pop():Function不支持apply():String对象的replace方法不支持替换成一个处理函数. 使用下面的代码就可修复上述方法在IE5下无效的问题. /*   fix-ie5.js, version 1.0 (pre-release) (2005/05/15) x3   Copyright 2005, Dean Edwards   Web: http://dean.edwards.name/   This sof

Bootstrap教程JS插件滚动监听学习笔记分享_javascript技巧

本文主要来学习一下JavaScript插件--滚动监听. 1.案例 滚动监听插件可以根据滚动条的位置自动更新所对应的导航标记.你可以试试滚动这个页面,看看左侧导航的变化. 先把实现的代码上了,你可以通过测试代码先来看看效果. <!DOCTYPE html> <html> <head> <title>Bootstrap</title> <meta name="viewport" content="width=de

bootstrap日历插件datetimepicker使用方法_javascript技巧

如何使用bootstrap日历datetimepicker插件? 一.引入文件 1.css样式 <link href="/css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen"> 2.js文件 <script type="text/javascript" src="/js/bootstrap-datetimepick