jQuery select下拉框转换成iOS分段控制器风格插件

演示  website 下载

这是一款简单易用的jQuery插件,可以将一个正常的下拉框转换成似于iOS分段控制器风格。用户可以选择和取消选择选项就像使用复选框或单选按钮一样。

使用方法：

1. 在html页面中加载jQuery库和jquery-grid-picker.js插件文件。

<link rel="stylesheet" href="jquery-grid-picker.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="jquery-grid-picker.js"></script>

2. 创建select选项，初始化插件

<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. 必选/可不选

$(".select").gridPicker({
  canSelect: function(element) {
    return !$(element).is(":disabled");
  },
  canUnselect: function(element) {
    return typeof this._$ui.element.attr("multiple") !== "undefined";
  }
})

4. 自定义渲染

$(".select").gridPicker({
  render: function(element) {
    return $("<a />")
    .attr("href", "#")
    .attr("title", label)
    .text(label)
    .get(0);
  }
})

5. 覆盖选择器默认样式

$(".select").gridPicker({
  canSelect: function(element) {
    return !$(element).is(":disabled");
  },
  canUnselect: function(element) {
    return typeof this._$ui.element.attr("multiple") !== "undefined";
  }
})

会员登陆后即可下载资源文件。更多好用网站特效插件，请关注帝国模板之家。