帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

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

帝国模板之家 2020-11-09 网页特效 评论

这是一款简单易用的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";
  }
})

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

这世上无忧无虑的人,反而相对寿命会长点。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言