<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实习状态</title>
<link rel="stylesheet" href="http://www.xybsyw.com/themes/center/css/admin_top_foot.css">
<link rel="stylesheet" href="http://www.xybsyw.com/themes/center/css/popup/popup.css">
<script src="http://www.xybsyw.com/jquery/jquery.min.js"></script>
<script src="http://www.xybsyw.com/jquery/plugs/layer/layer.min.js"></script>
<style>
/*审核状态弹窗*/
.select_director {
background-color: #fff;
display: block;
}
.select_director p.search_teacher {
display: block;
padding: 15px 0 0 35px;
}
.select_director ul {
display: block;
padding: 0 30px 30px 30px;
margin-top: 10px;
}
.select_director ul li {
display: block;
/*border-top: #ddd 1px solid*/
;
line-height: 25px;
padding: 3px 5px;
cursor: pointer;
position: relative;
width: 140px;
float: left;
margin-right: 15px;
}
.select_director ul li.ts_bg {
background-color: #f4f4f4;
}
.select_director ul li:hover,
.select_director ul li.on {
background-color: #e7f2ff;
}
.select_director ul li span {
display: inline-block;
vertical-align: middle;
*zoom: 1;
*display: inline;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
.select_director ul li span.w_1 {
width: 100px;
padding-left: 15px;
}
.select_director ul li span.w_2 {
width: 200px;
padding-left: 10px;
}
.select_director p.search_teacher input.w_1 {
width: 150px;
border: #95b8e7 1px solid;
border-radius: 5px;
padding: 3px 5px;
}
.select_director p.search_teacher input.btn_steacher {
background: url("http://www.xybsyw.com/themes/center/images/index_search_btnbg.png") no-repeat scroll 0 0;
border: 0 none;
color: #fff;
cursor: pointer;
display: inline-block;
height: 30px;
padding-left: 32px;
text-align: left;
vertical-align: middle;
width: 80px;
margin-left: 5px;
}
.select_director p.search_teacher input.btn_steacher:active {
padding-top: 2px;
}
.select_director ul li em.right_icon {
display: none;
background: url(http://www.xybsyw.com/themes/center/images/right_icon.png) 0 0 no-repeat;
width: 16px;
height: 16px;
position: absolute;
right: 10px;
;
top: 10px;
}
.select_director ul li.on em.right_icon {
display: block;
}
.tag {
display: block;
padding: 5px 30px 0 30px;
}
.tag span.tag_class {
border-radius: 5px;
color: #fff;
display: inline-block;
*zoom: 1;
*display: inline-block;
margin: 5px 10px 5px 0;
padding: 0 5px;
line-height: 25px;
background-color: #f7941d;
cursor: pointer;
}
.tag span.tag_class i.sclose {
width: 14px;
height: 14px;
background: url(http://www.xybsyw.com/themes/center/images/tag_close.png) 0px 0px no-repeat;
cursor: pointer;
display: inline-block;
*zoom: 1;
*display: inline;
vertical-align: middle;
margin-left: 5px;
position: relative;
top: -1px
}
.tag span.tag_class i.sclose:hover {
background-position: 0px -22px;
}
</style>
</head>
<body>
<input type="text" value="专业主任" id="selectDirector">
<!--选择专业主任-->
<div class="popup" id="selectDirectorBox" style="width:400px">
<h3>选择专业主任<a href="javascript:;" class="close"></a></h3>
<div class="select_director clearfix">
<p class="search_teacher">
<input type="text" placeholder="姓名" class="input_text w_1">
<input type="button" value="搜索" class="btn_steacher">
</p>
<div class="tag" id="tag"></div>
<ul class="clearfix">
<li name="copyhtml">
<em class="right_icon"></em>
<span class="tag_class" data-id="1">胡志强<i class="sclose"></i></span>
</li>
<li name="copyhtml">
<em class="right_icon"></em>
<span class="tag_class" data-id="2">胡志坚<i class="sclose"></i></span>
</li>
<li name="copyhtml">
<em class="right_icon"></em>
<span class="tag_class" data-id="3">丰红宾<i class="sclose"></i></span>
</li>
<li name="copyhtml">
<em class="right_icon"></em>
<span class="tag_class" data-id="4">益达<i class="sclose"></i></span>
</li>
<li name="copyhtml">
<em class="right_icon"></em>
<span class="tag_class" data-id="5">胡孝贤<i class="sclose"></i></span>
</li>
<li name="copyhtml">
<em class="right_icon"></em>
<span class="tag_class" data-id="6">胡一诺<i class="sclose"></i></span>
</li>
<li name="copyhtml">
<em class="right_icon"></em>
<span class="tag_class" data-id="7">丰莉琳<i class="sclose"></i></span>
</li>
<li name="copyhtml">
<em class="right_icon"></em>
<span class="tag_class" data-id="8">胡俊<i class="sclose"></i></span>
</li>
<li name="copyhtml">
<em class="right_icon"></em>
<span class="tag_class" data-id="9">郑燕<i class="sclose"></i></span>
</li>
<li name="copyhtml">
<em class="right_icon"></em>
<span class="tag_class" data-id="10">胡攀<i class="sclose"></i></span>
</li>
</ul>
</div>
<div class="w_foot">
<a href="javascript:;" id="determineTeacher" class="btn_save" title="确定">确定</a>
<a href="#" title="取消" class="btn_cancel close">取消</a>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
var pageii = null;
//选择专业主任
$('#selectDirector').on('click', function() {
pageii = $.layer({
type: 1,
title: false,
bgcolor: false,
border: [0], //去掉默认边框
shade: [0.3, '#000'], //不显示遮罩
closeBtn: [0, false], //去掉默认关闭按钮
area: ['400px', 'auto'],
fix: false,
page: {
dom: '#selectDirectorBox'
}
});
//自设关闭
$('.close').on('click', function() {
layer.close(pageii);
});
});
//tag点击事件
var oli = $(".select_director ul li");
//var copyhtml = $("[name='copyhtml']")
oli.click(function() {
var dateId = $("[data-id=" + $(this).find("span").attr("data-id") + "]").length; //data-id的长度
if (dateId < 2) { //假如data-id的长度的长度小于2 就是只有1个的情况下
$(this).toggleClass("on");
$("#tag").append($(this).find("span").clone());
var tagspan = $("#tag span");
tagspan.click(function() {
$(this).remove();
$("[data-id=" + $(this).attr("data-id") + "]").parent('li').removeClass('on');
})
} else if (dateId > 1) { //假如data-id的长度的长度小于1 就是只有3个的情况下
$(this).toggleClass("on");
$("[data-id=" + $(this).find("span").attr("data-id") + "]")[0].remove();
}
});
var btnOk = $("#determineTeacher");
//点击确定,赋值
btnOk.click(function() {
layer.close(pageii);
var tdata = [] //定义数组
$("#tag span").each(function() { //循环出所有text
var etext = $(this).text();
tdata.push(etext); //在数组的最后面加上text()
})
$("#selectDirector").attr("value", tdata.join(',')); //用逗号分开，分隔符来分隔数组中的元素：
});
});
//$(".tag").html($(".tag").html()+$(this).text()+",");
</script>
</body>
</html>
浙公网安备 33010602011771号