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).
Might need to see this one to get a full understanding of what it does... Check out the demo here!
- Render traditional
<select></select>
dropdown markup. - Call
$('select').inlineOptions();
on a jQuery object (with any/all select objects you want to transform) - Include default CSS to style the appended markup
- Enjoy non-dropdown life.
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>
$('select').inlineOptions();
<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>
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();
;
- animate:
true
- speed:
250
(250ms) - easing:
swing
- className:
iop
(for inline-options-plugin)
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');
Once it's been installed, you can restore the original markup and dropdown interface by calling the destroy()
function.
$.fn.inlineOptions('destroy');
$.fn.inlineOptions('destroy','select.this-one');
$('select.that-one').inlineOptions('destroy');
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.
Thanks to Luke Stebner (github.com/lstebner, @ahhsumx) for direction and tips on jQuery plugin namespacing