使用jQuery UI Widget Factory開發用於Bootstrap的UI組件

Question

可以使用jQuery UI Widget Factory來創建可以與Twitter Bootsrap一起使用的小部件嗎？我知道許多現有的jQuery UI小部件與Bootstrap結合使用時會導致問題。 Widget工廠本身是否對這些問題負責？

Answer 1

是的。小部件工廠只是創建一個jQuery插件。在插件代碼中，您可以將Bootstrap類分配給DOM元素，而不是jQuery UI主題類。

下面是一個（人爲）的例子，創建具有BTN-成功類引導程序按鈕：

$(function() { 
    $.widget("bs.SuccessButton", { 
     options: { 
      width: '100px', 
      text: 'Default Text' 
     }, 
     _create: function() { 
      this._button = $("<button>"); 
      this._button.text(this.options.text); 
      this._button.width(this.options.width) 
      this._button.addClass("btn btn-success") 
      $(this.element).append(this._button); 
     } 
    }); 


    $("#button1").SuccessButton({ 
     text: 'btn1 Widget' 
    });  
    $("#button2").SuccessButton({ 
     width: '100%' 
    }); 
}); 

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-xs-6"> 
      <div id="button1"></div> 
     </div> 
     <div class="col-xs-6"> 
      <div id="button2"></div> 
     </div> 
    </div> 
</div> 

工作DEMO