JavaScript练习六之仿bootstrap之Popover

来源：互联网发布：数据库酒店管理系统编辑：程序博客网时间：2024/06/06 19:37

前言
bootstrap是目前比较主流的前端开发框架（简称BS），里面有很多很实用的JS小组件，非常有学习及参考价值。本次参考的是popover组件。该组件是基于tooltip的。在tooltip的基础上，该组件还新增提供了标题显示。

感悟
1、该组件基本上是继承于tooltip，所以基本上改动都是围绕着tooltip进行实施。但是借此，也顺便加强了一下对JS面向对象方面的理解。待到后面该套组件稳定起来之后，可以将其单独独立出来做为一个组件，更利于今后调用。

CodeList

//@charset "utf-8" /** * @function : 仿bootstrap的Popover组件(练习) * @author    : yinggaozhen * @create    : 2016-01-15 * @version   : 0.0.0 * @example   :  * HTML :          <button type="button" class="btn btn-default" data-toggle="popover" data-placement="right" title="gaozhen'Js Test">Popover on right</button> * JavaScript :          $(function () {         $('[data-toggle="tooltip"]').popover()   }) */ +function($) {   var ext = 'popover';   var POPOVER_DEFAULTOPTIONS = {      animation : true,      placement : 'top',      templete   : '<d iv class="popover" role="tooltip"><d iv class="arrow"></div><h 3 class="popover-title"></h 3><di v class="popover-content"></d iv></d iv>',      trggier    : 'click focus',      delay       : 0,      showtitle : true   };   var Popover = function(element, options) {      this.init('popover', element, options);   };   Popover.prototype = $.extend({}, $.fn.tooltip.Constructor.prototype);   Popover.prototype.getDefaultOptions = function() {      return POPOVER_DEFAULTOPTIONS;   }   Popover.prototype.show = function() {      this.tip();      this.setGUID();      var actualTop   = this.$el.offset().top,            actualLeft = this.$el.offset().left;      this.$tip.find('.popover-title').html(this.getTitle());      this.$tip.find('.popover-content').html(this.getContent());      this.$tip.addClass(this.options.placement);      this.$el.after(this.$tip);      var elOffset = this.getCalculatedOffset(this.options.placement, actualLeft, actualTop);      this.$tip.attr('popoverid', this.getGUID())                   .addClass('fade in')                   .css('left', elOffset.left).css('top', elOffset.top);      if (!this.options.showtitle) this.$tip.find('.popover-title').remove()   };   function Plugin(option) {      return this.each(function() {         var $el   = $(this),               data = $el.data('gz.popover');         if (!data) $el.data('gz.popover', new Popover($(this), option));         return $el.data('gz.popover');      })   }   $.fn[ext] = Plugin; } (jQuery)

0 0