2014-12-06 43 views
6

在我之前的问题中,我讨论的是bootstrap select插件,其中的destroy方法正在做我不想做的事情。我手动编辑插件,但这不是一个好习惯。扩展引导选择插件

Bootstrap select destroy removes the original select from DOM

我想用一个自定义的方法扩展插件,以便它可以做完全笏我想要的。

我folloing方法扩展插件:

$.extend(true, $.fn.selectpicker.prototype, { 
    customRemove: function() { 
     this.$newElement.remove(); 
     this.$element.show(); 
    } 
}); 

这个位于引导选择脚本文件下另一个js文件。

我该如何称此新方法?我尝试没有成功如下:

$('select#begin' + _week + _day).selectpicker("customRemove"); 

$('select#begin' + _week + _day).selectpicker().customRemove(); 

我缺少的东西?

的破坏功能的引导选择插件的原始方法:

remove: function() { 
    this.$newElement.remove(); 
    this.$element.show(); 
} 
+0

是否'selectpicker()''回报this'?如果没有,那么你不能链接该方法。 – 2014-12-06 17:31:55

+0

我在插件中看到'return this;'是的 – Mivaweb 2014-12-06 17:36:31

+0

try selectpicker.prototype.customRemove(); – Dave 2014-12-06 17:56:59

回答

1

你可以代理使用一个mixin关闭,就像你自己的函数功能:

(function() 
{ 
    // grab a reference to the existing remove function 
    var _remove = $.fn.selectpicker.prototype.remove; 

    // anything declared in here is private to this closure 
    // so you could declare helper functions or variables 
    // ... 

    // extend the prototype with your mixin 
    $.extend(true, $.fn.selectpicker.prototype, 
    { 
    // this will replace the original $.fn.selectpicker.prototype.remove function 
    remove: function() 
    { 
     // call whatever code you want here 
     // ... 
     // ... like grabbing the DOM element 
     // ... 
     // then call the original remove function 
     _remove.apply(this, arguments); 

     // then call whatever you want here, like re-adding the DOM element 
    } 
    }); 
}()); 

注:此将超出所有Bootstrap选择的原型并修改其行为。

1

我想,你必须在其他你的问题的正确答案:
https://stackoverflow.com/a/31852632/4928642

jQuery.fn.selectpicker.Constructor.prototype.customRemove = function() { 
    this.$newElement.remove(); 
    this.$element.show(); 
}; 

然后

$smth.selectpicker("customRemove");