buttons = document.querySelectorAll("[data-toggle='button']") for btn in buttons btn.button()
buttons = document.querySelectorAll("[data-toggle='button']") for btn in buttons btn.button beforeactive: -> d = $.Deferred() button = @data['kitButton'] button.el.innerHTML = 'Loading...' button._addClass '_disabled_' setTimeout -> d.resolve() ,2000 d.promise() onactive: -> button = @data['kitButton'] button.el._removeClass '_disabled_' button.el.innerHTML = 'Checked' ondeactive: -> button = @data['kitButton'] button.el.innerHTML = 'Checkbox'
buttons = document.querySelectorAll(".radio-with-before") for btn in buttons beforeactive: -> d = $.Deferred() button = @data['kitButton'] button.el.innerHTML = 'Loading...' button._addClass '_disabled_' setTimeout -> d.resolve() ,2000 d.promise() onactive: -> button = @data['kitButton'] button.el.innerHTML = 'Checked' button._removeClass '_disabled_' beforedeactive: -> d = $.Deferred() button = @data['kitButton'] button.el.innerHTML = 'Unchecking...' button._addClass '_disabled_' setTimeout -> d.resolve() ,3000 d.promise() ondeactive: -> button = @data['kitButton'] button._removeClass '_disabled_' button.el.innerHTML = 'Radio'
Name | Default | Description |
---|---|---|
toggle | @el.getAttribute( 'data-toggle' ) or 'button' | Set toggle type of the element. |
type | @el.getAttribute( 'data-type' ) or 'button' |
button , radio , checkbox . Define button's behaviour. If radio , then will uncheck all buttons from it's group.
|
group | @el.getAttribute( 'data-group' ) or no |
String . Uses for type: radio , just type any name for group of radiobuttons or checkboxes.
|
event | @el.getAttribute( 'data-event' ) or "click" | This event will be used to activate/deactivate button. |
selfish | @el.getAttribute( 'data-selfish' ) or no | Deactivate all instances of Button when current instance activated. |
Method | Description |
---|---|
activate |
Activate button. |
deactivate |
Deactivate button. |
enable |
Enable button, events will work. |
disable |
Disable button, events will not work. |
Inside each method to get button use@
orthis
in js. Class instance always stores in data attribute of the button element@data['kitButton']
orthis.data['kitButton']
in js.
Event | Description |
---|---|
beforeactive |
Set a function to call it before activate button. If it returns buttons = document.querySelectorAll(".radio-with-before") for btn in buttons beforeactive: -> d = $.Deferred() button = @data['kitButton'] button.el.innerHTML = 'Loading...' button._addClass '_disabled_' setTimeout -> d.resolve() ,2000 d.promise() onactive: -> button = @data['kitButton'] button.el.innerHTML = 'Checked' button._removeClass '_disabled_' beforedeactive: -> d = $.Deferred() button = @data['kitButton'] button.el.innerHTML = 'Unchecking...' button._addClass '_disabled_' setTimeout -> d.resolve() ,3000 d.promise() ondeactive: -> button = @data['kitButton'] button._removeClass '_disabled_' button.el.innerHTML = 'Radio' |
onactive |
Set a function to call it after button activation. |
failactive |
Set a function to call it if activation failed. |
beforedeactive |
Call this function before deactivate button. |
ondeactive |
Call this function after deactivate button. |
faildeactive |
Set a function to call it if deactivation failed. |