Press "Enter" to skip to content

HTML View Select Element As a Grid with Clickable Elements | Grid Picker

jQuery grid picker plugin that transforms a regular checkbox into a grid picker containing a horizontal set of selectable / non-selectable toggle buttons similar to the split control in iOS.

How to make use of it:

1. Add jQuery library and the Grid picker plugin’s information to the HTML web 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 goal select box and the plugin will do the remainder.

<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>

3. Determine if the choices are selectable & unselectable.

$(".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";
  }
})

Convert Select Box Into A Segmented Control, jQuery Grid Picker Plugin/Github

Clickable-Elements-Grid-Picker-Demo


See Demo And Download

Official Website(fffilo): Click Here

This superior jQuery/javascript plugin is developed by fffilo. For extra Advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.