Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

A button widget optimized for lots of push-buttons, using the jQuery UI CSS framework and button css

branch: master

Fetching latest commit…

Octocat-spinner-32-eaf2f5

Cannot retrieve the latest commit at this time

Octocat-spinner-32 demos
Octocat-spinner-32 .gitignore
Octocat-spinner-32 README.md
Octocat-spinner-32 jquery.buttonlite.js
README.md

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.

Usage:

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:
$("button").buttonlite();

A few examples:

Something went wrong with that request. Please try again.