jQuery元素选择器插件-multiPicker

jQuery元素选择器插件-multiPicker

添加时间:2021-03-08 12:24:06
站长推荐丨赞助论坛,可获取海量资源终身免费下载权限奥!
举报 举报
收藏
预览
附件 附件
  • 模板类型模板类型:jQuery插件
  • 模板颜色模板颜色:初级
  • 下载积分下载积分:28 米粒
  • 下载权限下载权限:

    赞助会员

一款jQuery元素选择器插件-multiPicker,可以用于星期、月份、语言等小范围的选择,有多种不同的选择方式,演示效果了可以自由体验,个人觉得实用性还是挺强的,喜欢的就收下吧。
jQuery元素选择器插件-multiPicker
分类:其它特效 > jQuery插件 难易:初级

页面的head部分先引入CSS样式、javascript插件等,代码如下:

<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>

页面的body部分设置好不同效果的容器,结构不算复杂,代码如下:

<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;
}
相关内容推荐
资源求助发帖
查看更多发帖

*

回帖描述:

*

链接类型:

*

下载链接:

密码:
发帖规则:回帖内容为会员之间的私信,普通网友无法查看。
免责声明:回帖中提供的链接内容仅供会员之间学习参考使用,获取内容后请在法律法规范围内使用。回帖提供的内容应符合法律法规要求,不得违反法律法律的要求。
站点权责:回帖内容如违反法律法规,站点有权封停账号使用权利。对用户举报的内容,站点有责任及时删除违规内容。
热点内容推荐
标题:jQuery元素选择器插件-multiPicker

*

描述:
平均回复时间:3-10分钟
规则介绍:悬赏寻求论坛网友分享资源,站点对分享内容的准确性,合法性,版权等没有足够的监管能力。如果您发现资源不正确,无法使用,不符合法律法律等情况,您可以直接举报资源。站长将尽快核实您的举报,并根据情况,采取封号,退换米粒等处理。

*

回帖描述:

*

链接类型:

*

阅读权限:

*

下载链接:

密码:
发帖规则:回帖内容为会员之间的私信,普通网友无法查看。
免责声明:回帖中提供的链接内容仅供会员之间学习参考使用,获取内容后请在法律法规范围内使用。回帖提供的内容应符合法律法规要求,不得违反法律法律的要求。
站点权责:回帖内容如违反法律法规,站点有权封停账号使用权利。对用户举报的内容,站点有责任及时删除违规内容。
  • 背景波浪
  • 背景波浪
  • 波浪
  • 波浪
客服
在线咨询
周一 至 周日 9:00 ~ 22:00
QQ:1326974360
微信:juyoubuluo6688
客服热线
18205485173
工作日 9:00 ~ 18:00
微信扫码咨询
客户服务
欢迎咨询服务
咨询量较多时,请耐心等待
社群

关注公众号

获取更多资讯

扫码进群(QQ)

与更多大牛交流沟通

0.095939s