Convert Select Box Into A Segmented Control - Grid Picker
File Size: | 7.59 KB |
---|---|
Views Total: | 1591 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
A simple-to-use jQuery plugin that converts a normal select box into a grid picker containing a horizontal set of selectable/unselectable toggle buttons similar to the iOS segmented control.
The goal of this plugin is to replace select boxes with a user-friendly toggle UI where users can select & deselect options just like using checkboxes or radio buttons.
How to use it:
1. Add jQuery library and the Grid picker plugin's files to the HTML page.
<link rel="stylesheet" href="/path/to/src/jquery-grid-picker.css" /> <script src="/path/to/cdn/jquery.slim.min.js"></script> <script src="/path/to/src/jquery-grid-picker.js"></script>
2. Call the function gridPicker
on the target select
box and the plugin will do the rest.
<select class="select"> <option value="ford">Ford</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> <option value="bmw">Bmw</option> <option value="volvo">Volvo</option> </select> <select class="select" multiple> <option value="ford">Ford</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> <option value="bmw">Bmw</option> <option value="volvo">Volvo</option> </select>
$(function(){ $(".select").gridPicker() });
3. Determine if the options are selectable & unselectable. Can be True, False or a Function.
$(".select").gridPicker({ canSelect: function(element) { return !$(element).is(":disabled"); }, canUnselect: function(element) { return typeof this._$ui.element.attr("multiple") !== "undefined"; } })
4. Customize the render function.
$(".select").gridPicker({ render: function(element) { return $("<a />") .attr("href", "#") .attr("title", label) .text(label) .get(0); } })
5. Override the default styles of the grid picker.
$(".select").gridPicker({ canSelect: function(element) { return !$(element).is(":disabled"); }, canUnselect: function(element) { return typeof this._$ui.element.attr("multiple") !== "undefined"; } })
This awesome jQuery plugin is developed by fffilo. For more Advanced Usages, please check the demo page or visit the official website.