<style>
/***********/
.icon_radio {
height: 20px;
width: 20px;
background:url('../addons/admincenter/template/mobile/images/radio.png') no-repeat;
background-size: auto 20px;
margin: 0 10px;
}
.checked {
height: 20px;
width: 20px;
background:url('../addons/admincenter/template/mobile/images/radio2.png') no-repeat;
background-size: auto 20px;
margin: 0 10px;
}
.mask {
position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #777;
z-index: 1002; left: 0px;
opacity:0.5; -moz-opacity:0.5;
}
/***********/
</style>
<!-- 人员选择start -->
<div class="renyuan_select" style="display:none;background:#fff;height:auto;margin-bottom:2%;">
<link type="text/css" rel="stylesheet" href="../addons/admincenter/images/style.css?{TIMESTAMP}">
<div style="width:100%;">
<!-- 搜索框start -->
<div style="width:100%;height:55px;background:#ddd;padding-top: 7px;">
<div style="border:1px solid #fff;margin:0 auto;border-radius:7px;background:#fff;width:90%;height:40px;text-align:center;">
<div style="border-radius:7px;border:none;width:15%;height:100%;float:left;line-height:38px;text-align:right;">
<img src="../addons/admincenter/template/mobile/images/icon_sousuo.png" style="width:60%;"/>
</div>
<div style="width:85%;height:100%;float:left;text-align:center;">
<input type="text" placeholder="搜索" style="border:none;height:100%;width:100%;border-radius:5px;"/>
</div>
</div>
</div>
<!-- 搜索框end -->
<!-- 技术部start -->
<div class="div_long" style="width:100%;height:55px;border-bottom:1px solid #ddd;">
<div style="width:20%;height:100%;float:left;text-align:center;line-height:55px;">
<img src="../addons/admincenter/template/mobile/images/jishubu.png" style="width:40%;"/>
</div>
<div style="width:70%;height:100%;float:left;line-height:55px;font-size:18px;">技术部</div>
<div style="width:10%;height:100%;float:left;text-align:center;line-height:50px;font-size:20px;color:#CCCCCC;">
<span class="long"><img src="../addons/admincenter/template/mobile/images/right_icon.png" style="width:50%;"/></span>
</div>
</div>
<div class="bumen_renyuan" data-bumen="databumen" style="display:none;width:100%;height:100px;margin-bottom:10px;">
<div style="width:100%;height:50%;">
<div style="width:20%;height:100%;float:left;">
<div style="width:45px;height:45px;border-radius:100px;margin:0 auto;overflow:hidden;">
<img src="../addons/admincenter/template/mobile/images/mayun.png" style="width:110%;"/>
</div>
</div>
<div class="renming" style="width:70%;height:100%;float:left;line-height:50px;padding-left:10px;border-bottom:1px solid #ddd;">张浩</div>
<div style="width:10%;height:100%;float:left;text-align:center;line-height:50px;border-bottom:1px solid #ddd;">
<div class="icon_radio " onclick='resetobj(this);' userid="1" style="margin: 0 auto;width:80%;height:53%;margin-top:37%;"></div>
</div>
</div>
<div style="width:100%;height:50%;">
<div style="width:20%;height:100%;float:left;">
<div style="width:45px;height:45px;border-radius:100px;margin:0 auto;overflow:hidden;">
<img src="../addons/admincenter/template/mobile/images/liuqian.png" style="width:110%;"/>
</div>
</div>
<div style="width:70%;height:100%;float:left;line-height:50px;padding-left:10px;border-bottom:1px solid #ddd;">刘倩</div>
<div style="width:10%;height:100%;float:left;text-align:center;line-height:50px;border-bottom:1px solid #ddd;">
<div class="icon_radio " onclick='resetobj(this);' userid="2" style="margin: 0 auto;width:80%;height:53%;margin-top:37%;"></div>
</div>
</div>
</div>
<!-- 技术部end -->
<!-- 信息部start -->
<div style="width:100%;height:55px;border-bottom:1px solid #ddd;">
<div style="width:20%;height:100%;float:left;text-align:center;line-height:55px;">
<img src="../addons/admincenter/template/mobile/images/xinxibu.png" style="width:40%;"/>
</div>
<div style="width:70%;height:100%;float:left;line-height:55px;font-size:18px;">信息部</div>
<div style="width:10%;height:100%;float:left;text-align:center;line-height:50px;font-size:20px;color:#CCCCCC;">
<span class="long"><img src="../addons/admincenter/template/mobile/images/right_icon.png" style="width:50%;"/></span>
</div>
</div>
<!-- 信息部end -->
<!-- 建设部start -->
<div style="width:100%;height:55px;border-bottom:1px solid #ddd;">
<div style="width:20%;height:100%;float:left;text-align:center;line-height:55px;">
<img src="../addons/admincenter/template/mobile/images/renshibu.png" style="width:40%;"/>
</div>
<div style="width:70%;height:100%;float:left;line-height:55px;font-size:18px;">人事部</div>
<div style="width:10%;height:100%;float:left;text-align:center;line-height:50px;font-size:20px;color:#CCCCCC;">
<span class="long"><img src="../addons/admincenter/template/mobile/images/right_icon.png" style="width:50%;"/></span>
</div>
</div>
<!-- 建设部end -->
<!-- 建设部start -->
<div style="width:100%;height:55px;border-bottom:1px solid #ddd;">
<div style="width:20%;height:100%;float:left;text-align:center;line-height:55px;">
<img src="../addons/admincenter/template/mobile/images/jianshebu.png" style="width:40%;"/>
</div>
<div style="width:70%;height:100%;float:left;line-height:55px;font-size:18px;">建设部</div>
<div style="width:10%;height:100%;float:left;text-align:center;line-height:50px;font-size:20px;color:#CCCCCC;">
<span class="long"><img src="../addons/admincenter/template/mobile/images/right_icon.png" style="width:50%;"/></span>
</div>
</div>
<!-- 建设部end -->
<!--物资部start -->
<div style="width:100%;height:55px;border-bottom:1px solid #ddd;">
<div style="width:20%;height:100%;float:left;text-align:center;line-height:55px;">
<img src="../addons/admincenter/template/mobile/images/wuzibu.png" style="width:40%;"/>
</div>
<div style="width:70%;height:100%;float:left;line-height:55px;font-size:18px;">物资部</div>
<div style="width:10%;height:100%;float:left;text-align:center;line-height:50px;font-size:20px;color:#CCCCCC;">
<span class="long"><img src="../addons/admincenter/template/mobile/images/right_icon.png" style="width:50%;"/></span>
</div>
</div>
<!-- 物资部end -->
<input type="hidden" id="selector" value=""/>
<div style="width:100%;height:65px;position:fixed;bottom:0px;background:#fff;border-top:1px solid #ddd;">
<div style="width:30%;height:100%;float:left;text-align:center;line-height:60px;padding-left:1px;">已选择<span class="span_xuanze">0</span>人</div>
<div style="width:70%;height:100%;float:left;padding-top:10px;text-align:right;padding-right:10px;">
<button class="qu_xiao" style="width:85px;height:40px;background:#F08300;color:#fff;font-size:16px;border:none;">取消</button>
<button class="button" style="width:85px;height:40px;background:#F08300;color:#fff;font-size:16px;border:none;">确 定</button>
</div>
</div>
</div>
<script>
//显示遮罩层
function showMask(){
$("#mask").css("height",$(document).height());
$("#mask").css("width",$(document).width());
$("#mask").show();
}
//隐藏遮罩层
function hideMask(){
$("#mask").hide();
}
function showDiv(obj) {
$(obj).show();
center(obj);
$(window).scroll(function() {
center(obj);
});
$(window).resize(function() {
center(obj);
});
}
function center(obj) {
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = $(obj).height();
var popupWidth = $(obj).width();
$(obj).css({
"position": "absolute",
"top": (windowHeight - popupHeight) / 2 + $(document).scrollTop(),
"left": (windowWidth - popupWidth) / 2
});
}
$(function(){
var i=0;
$(".long").click(function(){
if(i==0){
$(this).children().attr("src","../addons/admincenter/template/mobile/images/top_icon.png")
$(this).parent().parent().after('<div class="bumen_renyuan" style="width:100%;height:100px;margin-bottom:10px;"><div style="width:100%;height:50%;"><div style="width:20%;height:100%;float:left;"><div style="width:45px;height:45px;border-radius:100px;margin:0 auto;overflow:hidden;"><img src="../addons/admincenter/template/mobile/images/mayun.png" style="width:110%;"/></div></div><div style="width:70%;height:100%;float:left;line-height:50px;padding-left:10px;border-bottom:1px solid #ddd;">张浩</div> <div style="width:10%;height:100%;float:left;text-align:center;line-height:50px;border-bottom:1px solid #ddd;"><div class="icon_radio " onclick="resetobj(this);" userid="1" style="margin: 0 auto;width:80%;height:53%;margin-top:37%;"></div></div></div><div style="width:100%;height:50%;"><div style="width:20%;height:100%;float:left;"><div style="width:45px;height:45px;border-radius:100px;margin:0 auto;overflow:hidden;"><img src="../addons/admincenter/template/mobile/images/liuqian.png" style="width:110%;"/></div></div><div style="width:70%;height:100%;float:left;line-height:50px;padding-left:10px;border-bottom:1px solid #ddd;">刘倩</div><div style="width:10%;height:100%;float:left;text-align:center;line-height:50px;border-bottom:1px solid #ddd;"><div class="icon_radio " onclick="resetobj(this);" userid="2" style="margin: 0 auto;width:80%;height:53%;margin-top:37%;"></div></div></div></div>');
i=1;
$("#selector").val('');
$(".span_xuanze").text("0");
}else{
$(this).children().attr("src","../addons/admincenter/template/mobile/images/right_icon.png")
$(this).parent().parent().next(".bumen_renyuan").remove();
i=0;
//var userid=$(this).attr("userid");
$("#selector").val('');
$(".span_xuanze").text("0");
}
$(".div_long").click(function(){
if(i==0){
$(this).children().attr("src","../addons/admincenter/template/mobile/images/top_icon.png")
$(this).parent().parent().after('<div class="bumen_renyuan" style="width:100%;height:100px;margin-bottom:10px;"><div style="width:100%;height:50%;"><div style="width:20%;height:100%;float:left;"><div style="width:45px;height:45px;border-radius:100px;margin:0 auto;overflow:hidden;"><img src="../addons/admincenter/template/mobile/images/mayun.png" style="width:110%;"/></div></div><div style="width:70%;height:100%;float:left;line-height:50px;padding-left:10px;border-bottom:1px solid #ddd;">张浩</div> <div style="width:10%;height:100%;float:left;text-align:center;line-height:50px;border-bottom:1px solid #ddd;"><div class="icon_radio " onclick="resetobj(this);" userid="1" style="margin: 0 auto;width:80%;height:53%;margin-top:37%;"></div></div></div><div style="width:100%;height:50%;"><div style="width:20%;height:100%;float:left;"><div style="width:45px;height:45px;border-radius:100px;margin:0 auto;overflow:hidden;"><img src="../addons/admincenter/template/mobile/images/liuqian.png" style="width:110%;"/></div></div><div style="width:70%;height:100%;float:left;line-height:50px;padding-left:10px;border-bottom:1px solid #ddd;">刘倩</div><div style="width:10%;height:100%;float:left;text-align:center;line-height:50px;border-bottom:1px solid #ddd;"><div class="icon_radio " onclick="resetobj(this);" userid="2" style="margin: 0 auto;width:80%;height:53%;margin-top:37%;"></div></div></div></div>');
i=1;
$("#selector").val('');
$(".span_xuanze").text("0");
}else{
$(this).children().attr("src","../addons/admincenter/template/mobile/images/right_icon.png")
$(this).parent().parent().next(".bumen_renyuan").remove();
i=0;
//var userid=$(this).attr("userid");
$("#selector").val('');
$(".span_xuanze").text("0");
}
})
$(".icon_radio").click(function(){
if($(this).hasClass('checked')){
$(this).removeClass( 'checked');
//checkcart(id,2);//未选中
}else{
$(this).addClass('checked');
//checkcart(id,1);//选中
}
})
//申请人选择按钮图片
$(".shenqingren_img").click(function(){
var screen_height = $(document).height();
showMask();
$(".renyuan_select2").hide();
$(".renyuan_select").css({"position":"absolute","top":"0","left":"0","z-index":"9999","width":"100%","overflow":"hidden","height":screen_height});
$(".renyuan_select").show();
})
//人员选择确认按钮
$(".button").click(function(){
//alert("111");
var userid = $('#selector').val();
if(userid == 1){
userid='张浩';
}else{
userid = '刘倩';
}
//alert(userid);
hideMask();
$(".renyuan_select").hide();
$(".select01").css("width","70%");
$(".select02").css({"width":"30%","font-size":"14px","text-align":"right","padding-right":"15px"});
$(".shenqingren_div").text(userid);
//return false;
})
//返回按钮
$(".qu_xiao").click(function(){
hideMask();
$(".renyuan_select").hide();
})
})
function resetobj(obj){
if($(obj).hasClass('checked')){
$(obj).removeClass( 'checked');
//checkcart(id,2);//未选中
}else{
$(obj).addClass('checked');
//checkcart(id,1);//选中
}
var userid = $(obj).attr("userid");
console.log($(userid));
$("#selector").val(userid);
/*
var arr new Array();
$('.ctiem').each(function)
var el= $('.check');
var arr=new Array();
$('.citem').each(function(index, element) {
if($(this).find('.check').hasClass('checked')){
arr.push(index);
}
});
*/
/*if(arr.length!==el.length){
$('i#all').removeClass('checked');
}
else{
$('i#all').addClass('checked');
}*/
//计算选择的人数
var count = $(".checked").length;
//alert(count);
$(".span_xuanze").text(count);
}
</script>
</div>
<div id="mask" class="mask"></div>
<!-- 人员选择end --> 最佳答案
