<link type="text/css" rel="stylesheet" href="css/multipicker.min.css">
<script type="text/javascript" src="js/jquery-latest.min.js"></script>
<script type="text/javascript" src="js/multipicker.min.js"></script>
<script type="text/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"
}
});
});
</script> <h1>jQuery元素选择器插件-multiPicker</h1>
<div>
<ul id="days">
<li>周日</li>
<li>周一</li>
<li>周二</li>
<li>周三</li>
<li>周四</li>
<li>周五</li>
<li>周六</li>
</ul>
</div>
<div>
<ul id="days-single">
<li>周日</li>
<li>周一</li>
<li>周二</li>
<li>周三</li>
<li>周四</li>
<li>周五</li>
<li>周六</li>
</ul>
</div>
<div>
<ul id="days-prepopulated">
<li data-value="Sunday">周日</li>
<li data-value="Monday">周一</li>
<li data-value="Tuesday">周二</li>
<li data-value="Wednesday">周三</li>
<li data-value="Thursday">周四</li>
<li data-value="Friday">周五</li>
<li data-value="Saturday">周六</li>
</ul>
</div>
<div>
<div id="days-vertical">
<span>周日</span>
<span>周一</span>
<span>周二</span>
<span>周三</span>
<span>周四</span>
<span>周五</span>
<span>周六</span>
</div>
</div>
<br>
<div>
<div id="clubs">
<label for="zero">1月</label>
<input id="zero" type="checkbox" name="club" value="0">
<label for="one">2月</label>
<input id="one" type="checkbox" name="club" value="1">
<label for="two">3月</label>
<input id="two" type="checkbox" name="club" value="2">
<label for="three">4月</label>
<input id="three"type="checkbox" name="club" value="3">
<label for="four">5月</label>
<input id="four" type="checkbox" name="club" value="4">
<label for="five">6月</label>
<input id="five" type="checkbox" name="club" value="5">
<label for="six">7月</label>
<input id="six" type="checkbox" name="club" value="6">
<label for="seven">8月</label>
<input id="seven" type="checkbox" name="club" value="7">
<label for="eight">9月</label>
<input id="eight" type="checkbox" name="club" value="8">
<label for="nine">10月</label>
<input id="nine" type="checkbox" name="club" value="9">
<label for="ten">11月</label>
<input id="ten" type="checkbox" name="club" value="10">
<label for="eleven">12月</label>
<input id="eleven" type="checkbox" name="club" value="11">
</div>
</div>
<br>
<div>
<div id="programming-languages">
<input type="checkbox" name="lang" value="C">
<input type="checkbox" name="lang" value="JS">
<input type="checkbox" name="lang" value="Swift">
<input type="checkbox" name="lang" value="Java">
<input type="checkbox" name="lag" value="C#">
<input type="checkbox" name="lang" value="C++">
<input type="checkbox" name="lang" value="PHP">
</div>
</div>
<br>
<div>
<div id="languages">
<input type="checkbox" name="language" value="CN">
<input type="checkbox" name="language" value="EN">
<input type="checkbox" name="language" value="RU">
<input type="checkbox" name="language" value="KR">
<input type="checkbox" name="language" value="JP">
<input type="checkbox" name="language" value="DE">
<input type="checkbox" name="language" value="FR">
</div>
</div> 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;
}
*
回帖描述:*
链接类型:*
下载链接:*
描述:*
回帖描述:*
链接类型:*
阅读权限:*
下载链接: