Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
34 lines (27 sloc) 2.12 KB

jQuery Button Lite Plugin. For buttons. Lots of buttons.

This jQuery plugin uses the jQuery UI CSS framework and their Button styles for rendering buttons. It supports only push buttons (no radio or checkbox) and requires more initial markup, which would be annoying to write by hand, but can easily abstracted in a serverside web framework. All the plugin does is handling the mouse and keyboard events to provide the same experience for the user as the jQuery UI Button does.

If you have lots of push buttons on a page, generated by some web framework, this plugin could be a useful replacement for the jQuery UI Button widget. On creation, it only adds a bunch of event handlers, but doesn't have to do any other DOM manipulation.

The plugin supports all the text-only, text-with-icons and icons-only variations that jQuery UI Button has. You just have to provide the right markup. A good way to start is looking that a jQuery UI Button demo, using Firebug to inspect the button element that you want, then use "Copy HTML" in the element's contextmenu (on the HTML tab). Paste that on your page and you're good to go.

Button Lite is implemented as a jQuery UI widget and supports the disabled-option (set directly or via enable/disable methods) and the destroy method. As buttonlite only binds events, calling destroy will only unbind those events.


Start with base button markup (can be whatever jQuery UI Button produces):
<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button"><span class="ui-button-text">A button element</span></button>

Then apply the buttonlite method:

A few examples: