扩展bootstrap的popover， 增加在指定时间内fadeOut的功能

项目上需要一个popover，这个popover的需要接收一个时间参数，然后在这个时间内fadeOut。看了下bootstrap的popover，它是继承与tooltip的，很奇怪的是，发现bootstrap的tooltip，也就是popover，在show的时候会加一个fade in这个css class，但是hide时，却没有相应的fade out class。好吧，反正项目要求不能改bootstrap源码，所以我还是去扩展它的hide方法比较好。

boostrap其实能接收一个delay参数，使用方式如下：

   $("target").popover({delya:{show:500,hide:100}})

但是这个参数其实是指触发后500ms后popover开始显示出来，触发后100ms后开始隐藏，而不是说触发后在100ms内慢慢隐藏，所以这个参数不符合我的需求，放弃。

一开始想到是不是能用on（）去bind在bootstrap的hide方法或者show方法上。但是，代码大概如下：

   $("target").on("hide.on.popover"),function(){$("popover").fadeOut(time)}

</pre><span style="white-space:pre"></span>可是函数执行的顺序上，委托函数一定先于被委托函数，所以导致先hide在fadeOut，所以也不行，放弃这个方法。</p><p></p><p><span style="white-space:pre"></span>没办法，只能扩展hide方法了。</p><p><pre name="code" class="javascript">(function() {

            var orig = $.fn.popover,
                    proto = $.extend({}, $.fn.popover.Constructor.prototype);

            $.fn.popover = function(options) {
                return this.each(function() {
                    orig.call($(this), options);
                    if (typeof options.time === 'number') {
                        $(this).data('bs.popover').hide = function() {
                            var fadeFun = function(){
                                $(this).fadeOut(options.time,function(){
                                    proto.hide.call(popover_pro);
                                });
                            }

                            var popover_pro=this;
                            fadeFun.call(this.$tip,this);

                        };
                    }
                });
            }

        })();

扩展完毕，使用方式如下：

$('target').popover({
            time: 1000
        });

扩展里用到了原型这个概念，其实对于原型现在还不是特别清晰，希望在以后的工作中增强对这个概念的了解。