JavaScript练习六之仿bootstrap之Popover

前言
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)