jQuery手机通讯录选中删除特效代码下载



13 51 18



特效描述:手机通讯录 选中删除,jQuery手机通讯录选中删除特效代码下载

代码结构

1. 引入CSS

<link href="css/style.css?v=4.1.0" rel="stylesheet">
<link rel="stylesheet" href="css/weui.min.css">
<link rel="stylesheet" href="css/jquery-weui.min.css">
<link rel="stylesheet" href="css/mailList2.css">
<link href="css/style.css?v=4.1.0" rel="stylesheet">
<link rel="stylesheet" href="css/weui.min.css">
<link rel="stylesheet" href="css/jquery-weui.min.css">
<link rel="stylesheet" href="css/mailList2.css">

2. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/icheck.min.js"></script>
<script src="js/jquery-weui.js"></script>
<script src="js/doT.min.js"></script>
<script src="js/mailList2.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/icheck.min.js"></script>
<script src="js/jquery-weui.js"></script>
<script src="js/doT.min.js"></script>
<script src="js/mailList2.js"></script>

3. HTML代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body class="gray-bg">
<div id="indexPage">
	<div class="bar bar-nav weui-search-bar" id="searchBar">
		<form class="weui-search-bar__form">
			<div class="weui-search-bar__box">
				<i class="weui-icon-search"></i>
				<input type="input" class="weui-search-bar__input" id="searchInput" readonly placeholder="搜索" >
				<a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
			</div>
		</form>
		<!-- <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a> -->
	</div>
	<div class="bar bar-footer pull-right">
		<!-- <span class="sels">提交</span>
		<span>取消</span> -->
		<span class="sel-btn">已选择: <strong>0</strong>人</span>
		<a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary">确认</a>
		<a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_default">取消</a>
	</div>
	<div class="content sel-con">
		<div class="weui-cells weui-cells_checkbox">
			<div class="list-item">
				<label class="weui-cell weui-check__label all-input">
					<div class="weui-cell__hd">
						<input type="checkbox" name="checkbox" class="weui-check">
						<i class="weui-icon-checked"></i>
					</div>
					<div class="weui-cell__bd">
						<p>全选</p>
					</div>
				</label>
			</div>
			<h3 class="list-item-tit">部门</h3>
			<div class="list-item1">
			</div>
			<div class="list-item2">
				<div class="list-item-box">
					<h3 class="list-item-tit">A</h3>
					<label class="weui-cell weui-check__label item-input">
						<div class="weui-cell__hd">
							<input type="checkbox" name="checkbox" class="weui-check" peoId="1">
							<i class="weui-icon-checked"></i>
						</div>
						<div class="weui-cell__bd touxiang">
							<img src="img/tx.png">
						</div>
						<div class="weui-cell__bd">
							<p>姓名1</p>
						</div>
						<div class="weui-cell__ft">教学部</div>
					</label>
					<label class="weui-cell weui-check__label item-input">
						<div class="weui-cell__hd">
							<input type="checkbox" name="checkbox" class="weui-check" peoId="13">
							<i class="weui-icon-checked"></i>
						</div>
						<div class="weui-cell__bd touxiang">
							<img src="img/tx.png">
						</div>
						<div class="weui-cell__bd">
							<p>姓名13</p>
						</div>
						<div class="weui-cell__ft">教学部</div>
					</label>
					<label class="weui-cell weui-check__label item-input">
						<div class="weui-cell__hd">
							<input type="checkbox" name="checkbox" class="weui-check" peoId="14">
							<i class="weui-icon-checked"></i>
						</div>
						<div class="weui-cell__bd touxiang">
							<img src="img/tx.png">
						</div>
						<div class="weui-cell__bd">
							<p>姓名14</p>
						</div>
						<div class="weui-cell__ft">教学部</div>
					</label>
					<label class="weui-cell weui-check__label item-input">
						<div class="weui-cell__hd">
							<input type="checkbox" name="checkbox" class="weui-check" peoId="15">
							<i class="weui-icon-checked"></i>
						</div>
						<div class="weui-cell__bd touxiang">
							<img src="img/tx.png">
						</div>
						<div class="weui-cell__bd">
							<p>姓名15</p>
						</div>
						 <div class="weui-cell__ft">教学部</div>
					</label>
				</div>
				<div class="list-item-box">
					<h3 class="list-item-tit">B</h3>
					<label class="weui-cell weui-check__label item-input">
						<div class="weui-cell__hd">
							<input type="checkbox" name="checkbox" class="weui-check" peoId="16">
							<i class="weui-icon-checked"></i>
						</div>
						<div class="weui-cell__bd touxiang">
							<img src="img/tx.png">
						</div>
						<div class="weui-cell__bd">
							<p>姓名16</p>
						</div>
						 <div class="weui-cell__ft">教学部</div>
					</label>
					<label class="weui-cell weui-check__label item-input">
						<div class="weui-cell__hd">
							<input type="checkbox" name="checkbox" class="weui-check" peoId="17">
							<i class="weui-icon-checked"></i>
						</div>
						<div class="weui-cell__bd touxiang">
							<img src="img/tx.png">
						</div>
						<div class="weui-cell__bd">
							<p>姓名17</p>
						</div>
						<div class="weui-cell__ft">教学部</div>
					</label>
				</div>
			</div>
		</div>
	</div>
</div>
<div id="selectPage" class="weui-popup__container">
	<div class="weui-popup__overlay"></div>
	<div class="weui-popup__modal">
		<header class="bar bar-nav">
			<a href="javascript:void(0)" class="back-btn close-popup"><返回</a>
			<h3 class="show-peo-num">已选择<strong></strong>人</h3>
		</header>
		<div class="content">
		<!-- 	<div class="list-con yxzr" style="padding-left: 0;background: #fff;">
				<label class="weui-cell weui-check__label" id="17">
					<div class="weui-cell__bd touxiang">
						<img src="img/tx.png">
					</div>
					<div class="weui-cell__bd">
						<p>姓名2</p>
					</div>
					<div class="weui-cell__ft">教学部<i class="weui-icon-cancel" style="margin-top: -3px; color:#b3b3b3"></i></div>
				</label>
			</div>
			 -->
		</div>
	</div>	
</div>
<div id="seachPage" class="weui-popup__container">
	<div class="weui-popup__overlay"></div>
	<div class="weui-popup__modal">
		<div class="bar bar-nav weui-search-bar" id="searchBar">
			<form class="weui-search-bar__form">
				<div class="weui-search-bar__box">
					<i class="weui-icon-search weui-search-btn"></i>
					<input type="seach" class="weui-search-bar__input" peoId="searchInputs" placeholder="搜索" >
					<a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
				</div>
			</form>
			<!-- <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a> -->
		</div>
		<div class="content seach-con">
			<div class="weui-cells weui-cells_checkbox list-con" style="padding-left: 0;">
			</div>
		</div>
	</div>	
</div>
<script id="list_tpl" type="text/x-dot-template">
   {{for(var i = 0; i < it.childList.length; i ++){ }}
		<div class="list-item1-box">
			<label class="weui-cell weui-check__label items-input" z-indexs="1">
				<div class="weui-cell__hd">
					<input type="checkbox" name="checkbox" class="weui-check" peoId='{{=it.childList[i].id}}'>
					<i class="weui-icon-checked"></i>
				</div>
				<div class="weui-cell__bd">
					<p>{{=it.childList[i].name}}</p>
				</div>
				<i class="icon-arrow-l icons-btn rotate"></i>
			</label>
			<div class="list-con animete none">
				{{for(var j = 0; j < it.childList[i].childList.length; j ++){ }}
					<div class="list-item1-box">
						<label class="weui-cell weui-check__label items-input" z-indexs="2">
							<div class="weui-cell__hd">
								<input type="checkbox" name="checkbox" class="weui-check" peoId='{{=it.childList[i].childList[j].id}}'>
								<i class="weui-icon-checked"></i>
							</div>
							<div class="weui-cell__bd">
								<p>{{=it.childList[i].childList[j].name}}</p>
							</div>
							<i class="icon-arrow-l icons-btn rotate"></i>
						</label>
						<div class="list-con animete none">
							{{for(var h = 0; h < it.childList[i].childList[j].childList.length; h ++){ }}
								<div class="list-item1-box">
									<label class="weui-cell weui-check__label items-input" z-indexs="3">
										<div class="weui-cell__hd">
											<input type="checkbox" name="checkbox" class="weui-check" peoId='{{=it.childList[i].childList[j].childList[h].id}}'>
											<i class="weui-icon-checked"></i>
										</div>
										<div class="weui-cell__bd">
											<p>{{=it.childList[i].childList[j].childList[h].name}}</p>
										</div>
										<i class="icon-arrow-l icons-btn rotate"></i>
									</label>
									<div class="list-con animete none">
										{{for(var e = 0; e < it.childList[i].childList[j].childList[h].userList.length; e ++){ }}
											<label class="weui-cell weui-check__label item-input">
												<div class="weui-cell__hd">
													<input type="checkbox" name="checkbox" class="weui-check" peoId='{{=it.childList[i].childList[j].childList[h].userList[e].id}}'>
													<i class="weui-icon-checked"></i>
												</div>
												<div class="weui-cell__bd touxiang">
													<img src="img/tx.png">
												</div>
												<div class="weui-cell__bd">
													<p>{{=it.childList[i].childList[j].childList[h].userList[e].realName}}</p>
												</div>
												<div class="weui-cell__ft">教学部</div>
											</label>	
										{{ } }}
									</div>
								</div>
							{{ } }}
							{{for(var h = 0; h < it.childList[i].childList[j].userList.length; h ++){ }}
								<label class="weui-cell weui-check__label item-input">
									<div class="weui-cell__hd">
										<input type="checkbox" name="checkbox" class="weui-check" peoId='{{=it.childList[i].childList[j].userList[h].id}}'>
										<i class="weui-icon-checked"></i>
									</div>
									<div class="weui-cell__bd touxiang">
										<img src="img/tx.png">
									</div>
									<div class="weui-cell__bd">
										<p>{{=it.childList[i].childList[j].userList[h].realName}}</p>
									</div>
									<div class="weui-cell__ft">教学部</div>
								</label>	
							{{ } }}
						</div>
					</div>
				{{ } }}
				{{for(var j = 0; j < it.childList[i].userList.length; j ++){ }}
					<label class="weui-cell weui-check__label item-input">
						<div class="weui-cell__hd">
							<input type="checkbox" name="checkbox" class="weui-check" peoId='{{=it.childList[i].userList[j].id}}'>
							<i class="weui-icon-checked"></i>
						</div>
						<div class="weui-cell__bd touxiang">
							<img src="img/tx.png">
						</div>
						<div class="weui-cell__bd">
							<p>{{=it.childList[i].userList[j].realName}}</p>
						</div>
						<div class="weui-cell__ft">教学部</div>
					</label>
				{{ } }}
			</div>
		</div>
	{{ } }}
	{{for(var i = 0; i < it.userList.length; i ++){ }}
		<label class="weui-cell weui-check__label item-input">
			<div class="weui-cell__hd">
				<input type="checkbox" name="checkbox" class="weui-check" peoId='{{=it.userList[i].id}}'>
				<i class="weui-icon-checked"></i>
			</div>
			<div class="weui-cell__bd touxiang">
				<img src="img/tx.png">
			</div>
			<div class="weui-cell__bd">
				<p>{{=it.userList[i].realName}}</p>
			</div>
			<div class="weui-cell__ft">教学部</div>
		</label>
	{{ } }}
</script>
<script id="list_tpl1" type="text/x-dot-template">
{{~it:val:key}}
	<div class="list-con yxzr" style="padding-left: 0;background: #fff;">
		<label class="weui-cell weui-check__label" peoId="{{=val.id}}">
			<div class="weui-cell__bd touxiang">
				<img src="img/tx.png">
			</div>
			<div class="weui-cell__bd">
				<p>姓名2</p>
			</div>
			<div class="weui-cell__ft">教学部
				<i class="weui-icon-cancel"  peoId="{{=val.id}}" style="margin-top: -3px; color:#b3b3b3"></i>
			</div>
		</label>
	</div>
{{~}}
</script>
<script type="text/javascript">
	// 判断是否为pc还是移动端。true为移动端
	function detectmob() {  
		if( navigator.userAgent.match(/Android/i)  
		|| navigator.userAgent.match(/webOS/i)  
		|| navigator.userAgent.match(/iPhone/i)  
		|| navigator.userAgent.match(/iPad/i)  
		|| navigator.userAgent.match(/iPod/i)  
		|| navigator.userAgent.match(/BlackBerry/i)  
		|| navigator.userAgent.match(/Windows Phone/i)  
		){  
			return true;  
		}  
		else {  
			return false;  
		}  
	}  
	if(!detectmob()) {
		$("#selectPage").removeClass('weui-popup__container');
		$("#selectPage .weui-popup__modal").css({
			"-webkit-transform": "none",
			"-moz-transform": "none",
			"-ms-transform": "none",
			"transform": "none"
		})
		$("#seachPage").css({
			"z-index": 120 
		})
		$("#selectPage .weui-popup__overlay").addClass('hide');
		$(".sel-btn,.back-btn").addClass('hide');
		$(".gray-bg").css({
			"position":"relative",
			"width": 740,
			"height": 600,
			"margin": "auto"
		})
		$("#indexPage").css({
			"width": 370
		})
		$("#selectPage").css({
			"width": 370,
			"position": "absolute",
			"height": "100%",
			"top":0,
			"right":0
		})
	}
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 收缩收起展开 切换按钮 form表单 收缩导航菜单 按钮控制 添加删除

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到