InlineOptions jQuery Plugin

Creates inline tab/slider options from traditional <select> dropdowns. When a tab is selected with the inline options, the value of the <select> is changed.

####from

Inspiration from this Dribbble shot by Joel Beukelman (@joelbeukelman).

Demo

Might need to see this one to get a full understanding of what it does... Check out the demo here!

Usage

1. Render traditional <select></select> dropdown markup.
2. Call $('select').inlineOptions(); on a jQuery object (with any/all select objects you want to transform)
3. Include default CSS to style the appended markup
4. Enjoy non-dropdown life.

Markup

Just use the same HTML markup you would use to render a dropdown.

<select>
  <option value="option-1">Label 1</option>
  <option value="option-2">Label 2</option>
  <option value="option-3">Label 2</option>
</select>

jQuery

$('select').inlineOptions();

Markup Generated

<ul class="iop">
  <select> ... </select>
  <li><a href="#option-1">Label 1</a></li>
  <li><a href="#option-2">Label 2</a></li>
  <li><a href="#option-3">Label 3</a></li>
  <span class="window"><span class="wrapper">
    <small>Label 1</small>
    <small>Label 2</small>
    <small>Label 3</small>
  </span></span>
</ul>

Optional Configuration

You can customize the speed of the animation and the className rendered as the wrapping parent (for CSS styles).

$('select').inlineOptions({ animate: true, speed: 250, easing: 'swing', className: 'iop' });

---

You can also attach a custom data-iop attribute to the <select> element with a JSON list of options.

<select data-iop='{"speed":"500","easing":"linear"}'>

This would make it easier to set <select>-specific options and call the plugin globally, with $('[data-iop]').inlineOptions();;

---

Defaults

• animate: true
• speed: 250 (250ms)
• easing: swing
• className: iop (for inline-options-plugin)

Update on Manual <select> value change

If you change the value of the <select> via JavaScript, make sure to manually trigger the change event; the plugin will handle the update of the inline options:

$('select').trigger('change');

Removing Inline Options

Once it's been installed, you can restore the original markup and dropdown interface by calling the destroy() function.

for all <select> elements:

$.fn.inlineOptions('destroy');

for specific instances:

$.fn.inlineOptions('destroy','select.this-one');
$('select.that-one').inlineOptions('destroy');

Support

Currently tested only on Firefox and Chrome on Mac OS X

Feel free to add bugs to the Issues list, I'll get to them as soon as possible.

Acknowledgements

Thanks to Luke Stebner (github.com/lstebner, @ahhsumx) for direction and tips on jQuery plugin namespacing