navDemo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
font-size: 16px;
font-family: "微软雅黑";
}
ul,
li {
list-style: none;
}
.box {
width: 100%;
height: 100%;
background: lightblue;
}
.box header {
width: 100%;
height: 60px;
background: lightcoral;
}
.logo {
width: 100px;
height: 100%;
background: blue;
float: left;
line-height: 60px;
text-align: center;
}
.nav {
height: 100%;
float: left;
}
.nav li {
float: left;
height: 100%;
width: 50px;
line-height: 60px;
text-align: center;
}
.edit {
float: left;
height: 100%;
width: 50px;
line-height: 60px;
background: lavender;
text-align: center;
position: relative;
}
.edit .selectBox {
display: none;
width: 200px;
/*height: 200px;*/
position: absolute;
top: 60px;
left: 0;
background: lightseagreen;
z-index: 999;
}
.selectBox .selected {
width: 100%;
height: 100px;
background: lightsteelblue;
}
.selectBox .unselected {
width: 100%;
height: 100px;
background: lightgray;
}
.selectBox .selectTitle {
height: 20px;
line-height: 20px;
text-align: center;
}
.selectBox li {
width: 60px;
height: 30px;
float: left;
border: 1px solid #333;
font-size: 12px;
line-height: 30px;
margin: 2px;
position: relative;
}
.selectBox li i {
font-style: normal;
position: absolute;
right: 0;
top: 0;
width: 12px;
height: 12px;
background: yellowgreen;
line-height: 10px;
font-size: 12px;
}
.btn span {
float: left;
width: 50%;
height: 30px;
line-height: 30px;
}
.btn span:nth-of-type(1) {
border-right: 1px solid #333;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box">
<header>
<div class="logo">logo</div>
<ul class="nav">
<li>首页</li>
<li>邮件</li>
</ul>
<div class="edit">
+
<div class="selectBox">
<div class="selected">
<p class="selectTitle">已选择</p>
<ul class="selectedCon">
<li class="fixedItem">首页</li>
<li class="fixedItem">邮件</li>
</ul>
</div>
<div class="unselected">
<p class="selectTitle">未选择</p>
<ul class="unselectedCon">
<li><span>人事</span></li>
<li><span>IT</span></li>
<li><span>工号</span></li>
</ul>
</div>
<div class="btn"><span id="confirm">确定</span><span id="cancel">取消</span></div>
</div>
</div>
</header>
</div>
<script src="//cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script>
$(".edit").click(function() {
$(".selectBox").show();
})
$(".selectBox ul").on("click", "i", function() {
$(".unselectedCon").append($(this).parent()) //点击已选择的x把此元素移到未选择里并去掉x return false是阻止冒泡 下同
$(".unselectedCon i").remove();
return false;
})
$(".unselectedCon").on("click", "li", function() {
$(".selectedCon").append($(this)) //点击未选择元素将它移到已选择里并加上x
$(".selectedCon li:not('.fixedItem')").append("<i>x</i>");
return false;
})
// $(".selectedCon li:not('.fixedItem')").on("click", "i", function() {
// $(".unselectedCon").append($(this))
// return false;
// })
$("#confirm").click(function() {
$(".nav").html("<li>首页</li><li>邮件</li>"); //每次点确定都把nav恢复成只有首页 和 邮件
var n = $(".selectedCon li").length;
for(var m = 2; m < n; m++) { //从已选择的第三个开始 把各个元素加到nav
var con = $(".selectedCon li").eq(m).find("span").html();
$(".nav").append("<li>" + con + "</li>");
}
$(".selectBox").hide();
return false;
})
$("#cancel").click(function() {
$(".selectBox").hide();
return false;
})
</script>
</body>
</html>
最新文章
- Atitit 图像处理和计算机视觉的分类 三部分 图像处理 图像分析 计算机视觉
- c++内存分布
- chrome断点调试
- mysql case then使用
- CSS第一天总结
- VMware打卡虚拟机提示“此虚拟机可能已被复制或移动”
- jQuery插件开发教程
- 昨天晚上也弄不清楚是自己密码被盗了还是由于ip冲突
- javaWEB中的HttpServlet（企业开发使用）
- Windows下搭建论坛
- 在UWSGI和NGINX配合的情况下，配置个别目录上传及超时
- 【转】Linux中history历史命令使用方法详解
- Hibernate - cascade-and -session_state
- mysql left join,right join,inner join用法分析
- vs2012运行项目提示无法连接 asp.net development server的解决方案
- Ansible详解（一）
- 利用linq的Take Skip方法解决 集合拆分的问题
- 卷积神经网络之VGG
- regression | p-value | Simple (bivariate) linear model | 线性回归 | 多重检验 | FDR | BH | R代码
- 【bug记录】OS Lab4 踩坑记