html picker插件,jQuery元素选择器插件-multiPicker

一款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;

}