jQuery UI Extensions

This my collection of customizations and enhancements to the standard jQuery UI library.

Download Latest Version

Features

Spinner: Add alignment to the available options to create four different alternative layouts for the spin buttons.
SlideSpinner: Adds a Slider control to the Spinner to enable visual reference to where a user is in the valid range and a faster way to change values.
LabeledSlider: Adds tick marks at configurable intervals to the Slider control. Optional text labels can also be passed to the widget.
ComboBox: Enhances the demo provided on the jQueryUI site by adding a value function and some addtional features.
WaitButton: Extends the default jQueryUI Button widget by adding a spinner and disabling the button when its clicked. Prevents multiple clicking and provides visual feedback that something is happening.
TimePicker: Uses several Spinner widgets to allow entering time. The spinners will automatically rollover another time component (ie hours flip from 11 -> 12 so AM -> PM and minutes cause hours to increment/decrement). Read this blog post for more information.
Scrollable: Moved to bseth99/jquery-ui-scrollable

Usage

Either download the Minified or the Full source and add it after the normal jQuery UI scripts.

Also download the CSS file and include it after any jQuery UI CSS files.

You can also just browse the source and grab what you want to use. Just be mindful of the dependencies:

SlideSpinner: Requires the enhanced Spinner control
TimePicker: Requires the enhanced Spinner control

WaitButton

WaitButton adds two options that enable controling the label and icon used to show the waiting status:

  $('#save')
     .waitbutton({
        waitLabel: 'Saving ...',
        waitIcon: 'my-icon-class'
     })

Neither are required to use the widget. When omitted, the label will remain the same as the current label and the class used for the primary icon will be the default ui-icon-waiting class which expects a GIF named waitbutton-loading.gif to be present in a images folder relative to the CSS file. You can use the one I have created or design your own. Just be aware that the ui-icon class on the button widget a lot 16x16 pixels for the icon.

The widget triggers a waiting event when a user clicks the button. An object is passed to the handler with a callback that should be called once the action is complete. Failure to call the callback will result in the button remaining in the waiting state.

  $('#save')
     .waitbutton({
        waiting: function ( e, ui ) {

           // do something
           ui.done();
        }
     })

  $('#save')
     .waitbutton()
     .on( 'buttonwaiting',  function ( e, ui ) {

           // do something
           ui.done();
        }
     })

The done() callback takes up to two option arguments that control the new label and state of the button. Review the demo for examples of each variation.

TimePicker

TimePicker currently exposes the getter/setter function value. After initializing the widget, set the value using a time string:

   $( '#picker' ).timepicker();

   $( '#picker' ).timepicker( 'value', '8:25 AM' );

And retrieve the value as a time string:

   time = $( '#picker' ).timepicker( 'value' );
   // time == '8:25 AM'

You can also initialize the picker to show time in either a 12 or 24 hour clock:

12-hour (default)

   $( '#picker' ).timepicker({ format: 'hh:mm a' });

24-hour

   $( '#picker' ).timepicker({ format: 'HH:mm' });

Optionally, you can include MomentJS to activate more advanced value handling. Without Moment, only time strings will be accepted/returned by the value function. With Moment, you can pass Date, String, or Moment instances to the value function and it will return Moment instances representing the selected time:

   $( '#picker' ).timepicker();

   $( '#picker' ).timepicker( 'value', '8:25 AM' );

   time = $( '#picker' ).timepicker( 'value' );

   time.format( 'HH:mm' ); // 08:25
   time.add( 'm', 5 );
   time.format( 'h:mm A' ); // 8:30 AM

Demo

I created some tests that show what the widgets can do.