pzgz
11/7/2011 - 9:55 AM

Try to adapt bootstrap with jquery ui, mainly resolve conflict on tabs and button functions.

Try to adapt bootstrap with jquery ui, mainly resolve conflict on tabs and button functions.

$(function() {

  function setState(el, state) {
    var d = 'disabled'
      , $el = $(el)
      , data = $el.data()

    state = state + 'Text'
    data.resetText || $el.data('resetText', $el.html())

    $el.html( data[state] || $.fn.bootstrap.button.defaults[state] )

    state == 'loadingText' ?
      $el.addClass(d).attr(d, d) :
      $el.removeClass(d).removeAttr(d)
  }

  function toggle(el) {
    $(el).toggleClass('active')
  }

  $.fn.bootstrap = {};

  $.fn.bootstrap.button = function(options) {
    return this.each(function () {
      if (options == 'toggle') {
        return toggle(this)
      }
      options && setState(this, options)
    })
  };

  $.fn.bootstrap.button.defaults = {
    loadingText: 'loading...'
  };

  $(function () {
    $('body').undelegate('.btn[data-toggle]', 'click');
    $('body').delegate('.btn[data-toggle]', 'click', function () {
      $(this).bootstrap.button('toggle')
    })
  });


 /* TABS/PILLS PLUGIN DEFINITION
  * ============================ */

  $.fn.bootstrap.tabs = $.fn.bootstrap.pills = function ( selector ) {
    return this.each(function () {
      $(this).delegate(selector || '.tabs li > a, .pills > li > a', 'click', tab)
    })
  };

  $(document).ready(function () {
    $('body').bootstrap.tabs('ul[data-tabs] li > a, ul[data-pills] > li > a')
  });
});