网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
这是一款简单易用的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";
}
})
转载请注明来源:jQuery select下拉框转换成iOS分段控制器风格插件
本文永久链接地址:https://www.moyouyouw.cn/code/679.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论