mobileSelect实现手机弹出多级选择框效果代码
代码语言:html
所属分类:选择器
代码描述:mobileSelect实现手机弹出多级选择框效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mobile插件单选与多选的混合</title>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/mobileSelect.css">
<style type="text/css">
body {
font-size: 38px;
}
.mobileSelect .content {
display: flex;
flex-direction: column;
}
.content .panel {
order: 1;
}
.content .btnBar {
order: 2;
}
.choose {
width: 100%;
order: 0;
display: flex;
position: fixed;
bottom: 198px;
z-index: 100000;
left: 0;
}
.table {
width: 100%;
overflow-x: scroll;
}
.selectContainer li {
color: #666666;
font-family: "SourceHanSansCN";
}
.selectContainer .big {
color: #000000;
font-family: "SourceHanSansCN";
}
.cartype,.carnum,.money {
height: 65px;
font-family: "SourceHanSansCN";
font-size: 14px;
flex: 1;
text-align: center;
cursor: pointer;
}
.yl {
color: #333333;
font-weight: 600;
background-color: #FFFFFF;
}
.bgc {
color: #666666;
background-color: #F2F2F2;
}
li {
list-style: none;
}
.carssd,.salary {
display: none;
}
.dbtc {
display: none;
}
.tc_tit {
font-size: 12px;
color: #666666;
font-weight: 400;
margin: 13px 0 8px 0;
}
.tc_cs {
font-size: 14px;
color: #333333;
letter-spacing: 1px;
font-weight: 400;
}
.cor {
color: #4286FF;
}
</style>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.1.11.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/mobileSelect.js"></script>
</head>
<body>
<h3>mobileselect的应用</h3>
.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0