一款jQuery元素选择器插件-multiPicker,可以用于星期、月份、语言等小范围的选择,有多种不同的选择方式,演示效果了可以自由体验,个人觉得实用性还是挺强的,喜欢的就收下吧。
查看演示
下载资源:
9
次 下载资源
下载积分:
30
积分
页面的head部分先引入CSS样式、javascript插件等,代码如下:
$(function() {
$("#days").multiPicker({ selector : "li" });
$("#days-single").multiPicker({
selector : "li",
isSingle : true
});
$("#days-prepopulated").multiPicker({
selector : "li",
prePopulate : ["Tuesday", "Friday"],
valueSource : "data-value"
});
$("#days-vertical").multiPicker({
selector : "span",
cssOptions : {
vertical: true
}
});
$("#months").multiPicker({
selector : "span",
inputName : "months",
prePopulate : "Jan", // array or single value
valueSource : "text",
isSingle: true, // default false
cssOptions : {
quadratic : true,
size : "small" // small, medium or large, default medium
}
});
$("#clubs").multiPicker({
selector : "checkbox",
prePopulate : "1", // array or single value
isSingle: true,
cssOptions : {
size : "large", // small, medium or large, default medium
element : {
"font-size" : "11px",
"color" : "#3a3a3a",
"font-weight" : "bold"
},
selected: {
"border-color" : "#ff4c4c",
"font-size" : "14px"
},
picker: {
"border-color" : "#ff4c4c",
}
}
});
$("#languages").multiPicker({
selector: "radio"
});
$("#programming-languages").multiPicker({
selector: "checkbox",
cssOptions : {
size : "large"
}
});
});
页面的body部分设置好不同效果的容器,结构不算复杂,代码如下:
jQuery元素选择器插件-multiPicker
- 周日
- 周一
- 周二
- 周三
- 周四
- 周五
- 周六
- 周日
- 周一
- 周二
- 周三
- 周四
- 周五
- 周六
- 周日
- 周一
- 周二
- 周三
- 周四
- 周五
- 周六
周日
周一
周二
周三
周四
周五
周六
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
底部在补充一下部分样式代码: body {
font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
}
h1 {
font-size: 22px;
text-align: center;
}
.checklist * {
font-size: 12px;
}