secret
Last active

Hack Twitter Bootstrap button to be compatible with jQuery-UI button

  • Download Gist
bootstrap-button-hack.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107
/* ============================================================
* bootstrap-button.js v2.0.0
* http://twitter.github.com/bootstrap/javascript.html#buttons
* ============================================================
* Copyright 2012 Twitter, Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* ============================================================ */
 
!function( $ ){
 
"use strict"
 
/* BUTTON PUBLIC CLASS DEFINITION
* ============================== */
 
var Button = function ( element, options ) {
this.$element = $(element)
this.options = $.extend({}, $.bootstrap.button.defaults, options)
}
 
Button.prototype = {
 
constructor: Button
 
, setState: function ( state ) {
var d = 'disabled'
, $el = this.$element
, data = $el.data()
, val = $el.is('input') ? 'val' : 'html'
 
state = state + 'Text'
data.resetText || $el.data('resetText', $el[val]())
 
$el[val](data[state] || this.options[state])
 
// push to event loop to allow forms to submit
setTimeout(function () {
state == 'loadingText' ?
$el.addClass(d).attr(d, d) :
$el.removeClass(d).removeAttr(d)
}, 0)
}
 
, toggle: function () {
var $parent = this.$element.parent('[data-toggle="buttons-radio"]')
 
$parent && $parent
.find('.active')
.removeClass('active')
 
this.$element.toggleClass('active')
}
 
}
 
 
/* BUTTON PLUGIN DEFINITION
* ======================== */
 
/* Hack for compatibility with jQuery-UI
* $.widget.bridge('jqbutton', $.ui.button) doesn't work well with third party jquery-ui plugins
* replace $.fn.button with $.bootstrap.button and define $.fn.btn directly
* https://github.com/twitter/bootstrap/issues/393
* https://gist.github.com/1344584
*/
if ($.bootstrap == null) {
$.bootstrap = {};
}
 
$.fn.btn = $.bootstrap.button = function ( option ) {
return this.each(function () {
var $this = $(this)
, data = $this.data('button')
, options = typeof option == 'object' && option
if (!data) $this.data('button', (data = new Button(this, options)))
if (option == 'toggle') data.toggle()
else if (option) data.setState(option)
})
}
 
$.bootstrap.button.defaults = {
loadingText: 'loading...'
}
 
$.bootstrap.button.Constructor = Button
 
/* BUTTON DATA-API
* =============== */
 
$(function () {
$('body').on('click.button.data-api', '[data-toggle^=button]', function ( e ) {
$(e.target).btn('toggle')
})
})
 
}( window.jQuery )

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.