在使用上一篇博客html实现带全选功能复选框的Listview页面时,发现因为listview子项使用了absolute绝对布局,所有如果要使用jquery动态添加子项那会十分不方便,需要设置每个子项的位置如:top:70%
这里的改进主要有两点:
1.修改了listview中列表项的布局position为relative,避免在使用absolute布局时要对每一项设置位置
2将头部的“全选”的div隔离出来,不在内容页面中,同时设置了
当合同数超出页面高度所能显示的内容后,产生滚动条效果,即overflow
效果:
html代码(引用了layui的按钮样式,自己写的样式文件为ListViewTest2.css,见下文)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" href="ListViewTest2.css">
<script>
$(function () {
//实现点击变深色效果
$(".checkStatus").click(function () {
if($(this).hasClass("layui-btn-primary")){
$(this).removeClass("layui-btn-primary");
$(this).addClass("layui-btn-normal");
}
else if($(this).hasClass("layui-btn-normal")){
$(this).removeClass("layui-btn-normal");
$(this).addClass("layui-btn-primary");
}
});
//实现全选反选效果
$("#head-all").click(function () {
console.info($(this).prop("checked"));
if($(this).prop("checked")===true){
$(".gcs-checkbox").prop("checked",true);
}
else{
$(".gcs-checkbox").prop("checked",false);
}
})
})
</script>
<!-- 这里使用了layui的样式,实际使用时需要改成实际路径-->
<link rel="stylesheet" href="../LayuiTest/layui/css/layui.css">
</head>
<body>
<div id="mainContentDiv">
<div class="mainDivMainImgDiv" style="">
<div class="headLeftDiv headLeftDivFont">我收到的</div>
<div class="headRightDiv">
<div class="layui-inline">
<input class="layui-input" style="width: 250px; font-size:15px" name="id" id="demoReload" placeholder="搜索合同主题、发起人姓名" autocomplete="off">
</div>
<button class="layui-btn layui-btn-normal" data-type="reload">搜索</button>
</div>
<div class="link-top"></div>
<div class="headLineBlowDiv">
<div class="headLeftDiv">状态:</div>
<div class="headButtonDiv">
<button type="button" class="checkStatus layui-btn layui-btn-xs layui-btn-primary">填写中</button>
<button type="button" class="checkStatus layui-btn layui-btn-xs layui-btn-primary">签署中</button>
<button type="button" class="checkStatus layui-btn layui-btn-xs layui-btn-primary">已完成</button>
<button type="button" class="checkStatus layui-btn layui-btn-xs layui-btn-primary">已撤回</button>
<button type="button" class="checkStatus layui-btn layui-btn-xs layui-btn-primary">已拒绝</button>
<button type="button" class="checkStatus layui-btn layui-btn-xs layui-btn-primary">已过期</button>
</div>
</div>
</div>
<div class="mainDivMainInfoiv">
<div class="mainDivHeadDiv" >
<div class="mainDivHeadCheckDiv">
<input type="checkbox" id="head-all" class="gcs-checkbox">
<label for="head-all"></label>
</div>
<div class="mainDivHeadLeftText flexFont" >
全选本页
</div>
<div class="mainDivHeadRightText flexFont" >
共7条
</div>
</div>
<div class="mainInfoSubDiv">
<div class="mainDIvMainInfoDivSubInfoDiv" >
<div class="mainDivCheckDiv">
<input type="checkbox" id="1" class="gcs-checkbox">
<label for="1"></label>
</div>
<div class="mainDivMainInfoiv_HeadTextDiv" >
<div class="mainDivMainInfoiv_HeadTextDiv_TextBox cardInfoTitle" >
论电子合同的法律效力及问题_于晓松
</div>
</div>
<div class="mainDivMainInfoiv_mainTextDiv"
style="display: flex; font-size: 12px; color: rgb(102, 102, 102); height: 20px;">
发起人:张三
</div>
<div class="mainDivMainInfoiv_TrailTextDiv" >
<div class="mainDivMainInfoiv_TrailTextDiv_TextBox flexFont" >
参与人:张三,李四
</div>
</div>
<div class="InfoDiv_Right_1 rightFlexFont statusColor" >
已完成
</div>
<div class="InfoDiv_Right_2 rightFlexFont">
2020-02-12 18:41:11
</div>
</div>
<div class="mainDIvMainInfoDivSubInfoDiv" >
<div class="mainDivCheckDiv">
<input type="checkbox" id="2" class="gcs-checkbox">
<label for="2"></label>
</div>
<div class="mainDivMainInfoiv_HeadTextDiv" >
<div class="mainDivMainInfoiv_HeadTextDiv_TextBox cardInfoTitle" >
论电子合同的法律效力及问题_于晓松
</div>
</div>
<div class="mainDivMainInfoiv_mainTextDiv"
style="display: flex; font-size: 12px; color: rgb(102, 102, 102); height: 20px;">
发起人:张三
</div>
<div class="mainDivMainInfoiv_TrailTextDiv" >
<div class="mainDivMainInfoiv_TrailTextDiv_TextBox flexFont" >
参与人:张三,李四
</div>
</div>
<div class="InfoDiv_Right_1 rightFlexFont" >
已撤回
</div>
<div class="InfoDiv_Right_2 rightFlexFont">
2020-02-12 18:41:11
</div>
</div>
<div class="mainDIvMainInfoDivSubInfoDiv" >
<div class="mainDivCheckDiv">
<input type="checkbox" id="3" class="gcs-checkbox">
<label for="3"></label>
</div>
<div class="mainDivMainInfoiv_HeadTextDiv" >
<div class="mainDivMainInfoiv_HeadTextDiv_TextBox cardInfoTitle" >
论电子合同的法律效力及问题_于晓松
</div>
</div>
<div class="mainDivMainInfoiv_mainTextDiv"
style="display: flex; font-size: 12px; color: rgb(102, 102, 102); height: 20px;">
发起人:张三
</div>
<div class="mainDivMainInfoiv_TrailTextDiv" >
<div class="mainDivMainInfoiv_TrailTextDiv_TextBox flexFont" >
参与人:张三,李四
</div>
</div>
<div class="InfoDiv_Right_1 rightFlexFont statusColor" >
已完成
</div>
<div class="InfoDiv_Right_2 rightFlexFont">
2020-02-12 18:41:11
</div>
</div>
<div class="mainDIvMainInfoDivSubInfoDiv" >
<div class="mainDivCheckDiv">
<input type="checkbox" id="4" class="gcs-checkbox">
<label for="4"></label>
</div>
<div class="mainDivMainInfoiv_HeadTextDiv" >
<div class="mainDivMainInfoiv_HeadTextDiv_TextBox cardInfoTitle" >
论电子合同的法律效力及问题_于晓松
</div>
</div>
<div class="mainDivMainInfoiv_mainTextDiv"
style="display: flex; font-size: 12px; color: rgb(102, 102, 102); height: 20px;">
发起人:张三
</div>
<div class="mainDivMainInfoiv_TrailTextDiv" >
<div class="mainDivMainInfoiv_TrailTextDiv_TextBox flexFont" >
参与人:张三,李四
</div>
</div>
<div class="InfoDiv_Right_1 rightFlexFont statusColor" >
已完成
</div>
<div class="InfoDiv_Right_2 rightFlexFont">
2020-02-12 18:41:11
</div>
</div>
<div class="mainDIvMainInfoDivSubInfoDiv" >
<div class="mainDivCheckDiv">
<input type="checkbox" id="5" class="gcs-checkbox">
<label for="5"></label>
</div>
<div class="mainDivMainInfoiv_HeadTextDiv" >
<div class="mainDivMainInfoiv_HeadTextDiv_TextBox cardInfoTitle" >
论电子合同的法律效力及问题_于晓松
</div>
</div>
<div class="mainDivMainInfoiv_mainTextDiv"
style="display: flex; font-size: 12px; color: rgb(102, 102, 102); height: 20px;">
发起人:张三
</div>
<div class="mainDivMainInfoiv_TrailTextDiv" >
<div class="mainDivMainInfoiv_TrailTextDiv_TextBox flexFont" >
参与人:张三,李四
</div>
</div>
<div class="InfoDiv_Right_1 rightFlexFont statusColor" >
已完成
</div>
<div class="InfoDiv_Right_2 rightFlexFont">
2020-02-12 18:41:11
</div>
</div>
<div class="mainDIvMainInfoDivSubInfoDiv" >
<div class="mainDivCheckDiv">
<input type="checkbox" id="6" class="gcs-checkbox">
<label for="6"></label>
</div>
<div class="mainDivMainInfoiv_HeadTextDiv" >
<div class="mainDivMainInfoiv_HeadTextDiv_TextBox cardInfoTitle" >
论电子合同的法律效力及问题_于晓松
</div>
</div>
<div class="mainDivMainInfoiv_mainTextDiv"
style="display: flex; font-size: 12px; color: rgb(102, 102, 102); height: 20px;">
发起人:张三
</div>
<div class="mainDivMainInfoiv_TrailTextDiv" >
<div class="mainDivMainInfoiv_TrailTextDiv_TextBox flexFont" >
参与人:张三,李四
</div>
</div>
<div class="InfoDiv_Right_1 rightFlexFont statusColor" >
已完成
</div>
<div class="InfoDiv_Right_2 rightFlexFont">
2020-02-12 18:41:11
</div>
</div>
<div class="mainDIvMainInfoDivSubInfoDiv" >
<div class="mainDivCheckDiv">
<input type="checkbox" id="7" class="gcs-checkbox">
<label for="7"></label>
</div>
<div class="mainDivMainInfoiv_HeadTextDiv" >
<div class="mainDivMainInfoiv_HeadTextDiv_TextBox cardInfoTitle" >
论电子合同的法律效力及问题_于晓松
</div>
</div>
<div class="mainDivMainInfoiv_mainTextDiv"
style="display: flex; font-size: 12px; color: rgb(102, 102, 102); height: 20px;">
发起人:张三
</div>
<div class="mainDivMainInfoiv_TrailTextDiv" >
<div class="mainDivMainInfoiv_TrailTextDiv_TextBox flexFont" >
参与人:张三,李四
</div>
</div>
<div class="InfoDiv_Right_1 rightFlexFont statusColor" >
已完成
</div>
<div class="InfoDiv_Right_2 rightFlexFont">
2020-02-12 18:41:11
</div>
</div>
<div class="mainDIvMainInfoDivSubInfoDiv" >
<div class="mainDivCheckDiv">
<input type="checkbox" id="8" class="gcs-checkbox">
<label for="8"></label>
</div>
<div class="mainDivMainInfoiv_HeadTextDiv" >
<div class="mainDivMainInfoiv_HeadTextDiv_TextBox cardInfoTitle" >
论电子合同的法律效力及问题_于晓松
</div>
</div>
<div class="mainDivMainInfoiv_mainTextDiv"
style="display: flex; font-size: 12px; color: rgb(102, 102, 102); height: 20px;">
发起人:张三
</div>
<div class="mainDivMainInfoiv_TrailTextDiv" >
<div class="mainDivMainInfoiv_TrailTextDiv_TextBox flexFont" >
参与人:张三,李四
</div>
</div>
<div class="InfoDiv_Right_1 rightFlexFont statusColor" >
已完成
</div>
<div class="InfoDiv_Right_2 rightFlexFont">
2020-02-12 18:41:11
</div>
</div>
<div class="mainDIvMainInfoDivSubInfoDiv" >
<div class="mainDivCheckDiv">
<input type="checkbox" id="9" class="gcs-checkbox">
<label for="9"></label>
</div>
<div class="mainDivMainInfoiv_HeadTextDiv" >
<div class="mainDivMainInfoiv_HeadTextDiv_TextBox cardInfoTitle" >
论电子合同的法律效力及问题_于晓松
</div>
</div>
<div class="mainDivMainInfoiv_mainTextDiv"
style="display: flex; font-size: 12px; color: rgb(102, 102, 102); height: 20px;">
发起人:张三
</div>
<div class="mainDivMainInfoiv_TrailTextDiv" >
<div class="mainDivMainInfoiv_TrailTextDiv_TextBox flexFont" >
参与人:张三,李四
</div>
</div>
<div class="InfoDiv_Right_1 rightFlexFont statusColor" >
已完成
</div>
<div class="InfoDiv_Right_2 rightFlexFont">
2020-02-12 18:41:11
</div>
</div>
</div>
</div>
</div>
</body>
</html>
css样式文件代码(ListViewTest2.css)
body {
background: whitesmoke;
}
#mainContentDiv {
position: absolute;
width: 70%;
height: 100%;
background: whitesmoke;
top: 10%;
left: 10%;
}
.mainDivMainImgDiv {
position: absolute;
width: 100%;
height: 120px;
background: white;
}
.mainDivMainInfoiv {
position: absolute;
width: 100%;
height: 100%;
background: whitesmoke;
top: 130px;
}
.mainInfoSubDiv{
position: relative;
width: 100%;
height: 100%;
background: whitesmoke;
overflow-y: auto;
overflow-x: hidden;
}
.headLeftDiv {
position: absolute;
width: 50%;
height: 100%;
left: 4%;
top: 25%;
}
.headLeftDivFont {
font-weight: 500;
/*line-height: 58px;*/
font-size: 20px;
color: #333;
}
.headRightDiv {
position: absolute;
width: 40%;
height: 100%;
right: 2%;
top: 20%;
}
/*中间的过度的横线*/
.link-top {
position: absolute;
top: 60%;
left: 4%;
width: 90%;
height: 1px;
border-top: solid #e8edf3 1px;
}
.headLineBlowDiv {
position: absolute;
top: 63%;
height: 40%;
width: 100%;
}
.headButtonDiv {
position: absolute;
top: 21%;
left: 9%;
}
/*复选框*/
.gcs-checkbox {
display: none;
}
.gcs-checkbox+label {
background-color: white;
border-radius: 0px;
border: 1px solid #d3d3d3;
width: 15px;
height: 15px;
display: inline-block;
text-align: center;
vertical-align: bottom;
line-height: 15px;
}
.gcs-checkbox+label:hover {
cursor: pointer;
border: 1px solid #2783FB;
}
.gcs-checkbox:checked+label {
background-color: #eee;
background: #2783FB;
}
.gcs-checkbox:checked+label:after {
content: "\2714";
color: white;
}
/*---------------------------subInfoDiv--------------*/
.mainDIvMainInfoDivSubInfoDiv {
position: relative;
width: 100%;
height: 13%;
background: white;
border: 1px solid #eaeaea;
}
.mainDivHeadDiv {
position: relative;
width: 100%;
height: 5%;
background: white;
border: 1px solid #eaeaea;
}
/*复选框div*/
.mainDivHeadCheckDiv{
position: absolute;
left: 1%;
top: 30%;
z-index: 15;
}
.mainDivHeadLeftText {
position: absolute;
top: 30%;
left: 4%;
width: 95%;
height: 20%;
background: rgba(0, 0, 0, 0);
}
.mainDivHeadRightText {
position: absolute;
top: 30%;
right: 1%;
width: 5%;
height: 20%;
background: rgba(0, 0, 0, 0);
}
/*子类复选框的div*/
.mainDivCheckDiv{
position: absolute;
left: 1%;
top: 18%;
z-index: 15;
}
.mainDIvMainInfoDivSubInfoDiv:hover {
background: rgba(0, 0, 0, 0.05);
}
.mainDivMainInfoiv_HeadTextDiv {
position: absolute;
top: 10%;
left: 4%;
width: 30%;
height: 30%;
background: rgba(0, 0, 0, 0);
}
.mainDivMainInfoiv_mainTextDiv {
position: absolute;
top: 52%;
left: 4%;
width: 95%;
height: 20%;
background: rgba(0, 0, 0, 0);
}
.mainDivMainInfoiv_TrailTextDiv {
position: absolute;
bottom: 3%;
left: 4%;
width: 30%;
height: 30%;
background: rgba(0, 0, 0, 0);
}
.mainDivMainInfoiv_HeadTextDiv_TextBox {
position: absolute;
top: 25%;
width: 100%;
height: 50%;
background: rgba(0, 0, 0, 0);
}
.cardInfoTitle {
font-weight: 700;
/*color: #1f264d;*/
height: 22px;
display: inline-block;
max-width: 600px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
}
.flexFont {
display: flex;
font-size: 12px;
color: rgb(102, 102, 102);
height: 20px;
}
.rightFlexFont {
color: #b3b3b3;
font-weight: 500;
text-align: right;
font-size: 12px;
color: rgb(179, 179, 179);
}
.InfoDiv_Right_1 {
position: absolute;
top: 30%;
right: 2%;
width: 30%;
height: 30%;
background: rgba(0, 0, 0, 0);
}
.InfoDiv_Right_2 {
position: absolute;
top: 55%;
right: 2%;
width: 30%;
height: 30%;
background: rgba(0, 0, 0, 0);
}
.mainDivMainInfoiv_TrailTextDiv_TextBox {
position: absolute;
top: 25%;
width: 100%;
height: 50%;
background: rgba(0, 0, 0, 0);
}
.mainDivMainInfoiv_mainTextDiv_TextBox {
position: absolute;
top: 25%;
width: 100%;
height: 50%;
background: rgba(0, 0, 0, 0);
}
.statusColor{
color: #6db56d;;
}