代码拉取完成,页面将自动刷新
同步操作将从 笔下光年/Light Year Admin Using v5 For Example 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<meta name="keywords" content="LightYear,LightYearAdmin,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="Light Year Admin V5是一个基于Bootstrap v5.1.3的后台管理系统的HTML模板。">
<title>选择样式一 - 光年(Light Year Admin V4)后台管理系统模板</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<link rel="stylesheet" type="text/css" href="css/materialdesignicons.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.min.css">
<style>
.list-chose li {
margin-bottom: 10px;
}
.list-chose li:last-child {
margin-bottom: 0px;
}
.list-chose li span.title {
font-weight: 700;
}
.list-chose li a {
color: #4d5259;
margin: 0px 5px;
padding: 3px 5px;
line-height: 30px;
white-space: nowrap;
}
.list-chose li a:hover,
.list-chose li a.active {
background-color: var(--bs-primary);
color: #fff;
}
.multi-chosen .mdi-close {
display: none;
}
.multi-chosen a.active .mdi-close {
display: inherit;
}
.list-chose li.positions {
position: relative;
height: 30px;
overflow: hidden;
}
.list-chose li a.more {
position: absolute;
cursor: pointer;
padding: 0px;
top: 0px;
right: 0px;
}
.list-chose li a.more:after {
font-family: "Material Design Icons";
content: "\f35d";
font-size: 18px;
-webkit-transition: -webkit-transform 0.25s linear;
transition: -webkit-transform 0.25s linear;
transition: transform 0.25s linear;
transition: transform 0.25s linear, -webkit-transform 0.25s linear;
}
.list-chose li.positions.on {
height: auto;
}
.list-chose li.positions.on a.more:after {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.list-chose li a.more:hover {
color: #4d5259;
background-color: transparent;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="card">
<header class="card-header">
<div class="card-title">选择样式一</div>
</header>
<div class="card-body">
<p>该示例是做页面的实际跳转的,也就是 <code>localtion.href</code>,跳转后选项的选中效果也是用js实现的,你也可以用后台程序实现。</p>
<ul class="list-unstyled list-chose">
<li class="multi-chosen positions">
<span class="title">工作地点:</span>
<a href="javascript:;" data-search-name="cs" data-search-id="-1" class="active">全国</a>
<a href="javascript:;" data-search-name="cs" data-search-id="1">北京</a>
<a href="javascript:;" data-search-name="cs" data-search-id="2">上海</a>
<a href="javascript:;" data-search-name="cs" data-search-id="3">深圳</a>
<a href="javascript:;" data-search-name="cs" data-search-id="4">广州</a>
<a href="javascript:;" data-search-name="cs" data-search-id="5">杭州</a>
<a href="javascript:;" data-search-name="cs" data-search-id="6">成都</a>
<a href="javascript:;" data-search-name="cs" data-search-id="7">南京</a>
<a href="javascript:;" data-search-name="cs" data-search-id="8">武汉</a>
<a href="javascript:;" data-search-name="cs" data-search-id="9">西安</a>
<a href="javascript:;" data-search-name="cs" data-search-id="10">厦门</a>
<a href="javascript:;" data-search-name="cs" data-search-id="11">长沙</a>
<a href="javascript:;" data-search-name="cs" data-search-id="12">苏州</a>
<a href="javascript:;" data-search-name="cs" data-search-id="13">天津</a>
<a href="javascript:;" data-search-name="cs" data-search-id="14">重庆</a>
<a href="javascript:;" data-search-name="cs" data-search-id="15">郑州</a>
<a href="javascript:;" data-search-name="cs" data-search-id="16">青岛</a>
<a href="javascript:;" data-search-name="cs" data-search-id="17">合肥</a>
<a href="javascript:;" data-search-name="cs" data-search-id="18">福州</a>
<a href="javascript:;" data-search-name="cs" data-search-id="19">济南</a>
<a href="javascript:;" data-search-name="cs" data-search-id="20">大连</a>
<a href="javascript:;" data-search-name="cs" data-search-id="21">珠海</a>
<a href="javascript:;" data-search-name="cs" data-search-id="22">无锡</a>
<a href="javascript:;" data-search-name="cs" data-search-id="23">佛山</a>
<a href="javascript:;" data-search-name="cs" data-search-id="24">东莞</a>
<a href="javascript:;" data-search-name="cs" data-search-id="25">宁波</a>
<a href="javascript:;" data-search-name="cs" data-search-id="26">常州</a>
<a href="javascript:;" data-search-name="cs" data-search-id="27">沈阳</a>
<a href="javascript:;" data-search-name="cs" data-search-id="28">石家庄</a>
<a href="javascript:;" data-search-name="cs" data-search-id="29">昆明</a>
<a href="javascript:;" data-search-name="cs" data-search-id="30">南昌</a>
<a href="javascript:;" data-search-name="cs" data-search-id="31">南宁</a>
<a href="javascript:;" data-search-name="cs" data-search-id="32">哈尔滨</a>
<a href="javascript:;" data-search-name="cs" data-search-id="33">海口</a>
<a href="javascript:;" data-search-name="cs" data-search-id="34">中山</a>
<a href="javascript:;" data-search-name="cs" data-search-id="35">惠州</a>
<a href="javascript:;" data-search-name="cs" data-search-id="36">贵阳</a>
<a href="javascript:;" data-search-name="cs" data-search-id="37">长春</a>
<a href="javascript:;" data-search-name="cs" data-search-id="38">太原</a>
<a href="javascript:;" data-search-name="cs" data-search-id="39">嘉兴</a>
<a href="javascript:;" data-search-name="cs" data-search-id="40">泰安</a>
<a href="javascript:;" data-search-name="cs" data-search-id="41">昆山</a>
<a href="javascript:;" data-search-name="cs" data-search-id="42">烟台</a>
<a href="javascript:;" data-search-name="cs" data-search-id="43">兰州</a>
<a href="javascript:;" data-search-name="cs" data-search-id="44">泉州</a>
<a href="javascript:;" class="more"></a>
</li>
<li class="multi-chosen">
<span class="title">工作性质:</span>
<a href="javascript:;" data-search-name="gzxz" data-search-id="-1" class="active">不限</a>
<a href="javascript:;" data-search-name="gzxz" data-search-id="1">应届 <i class="mdi mdi-close"></i></a>
<a href="javascript:;" data-search-name="gzxz" data-search-id="2">实习 <i class="mdi mdi-close"></i></a>
</li>
<li class="multi-chosen">
<span class="title">学历要求:</span>
<a href="javascript:;" data-search-name="xl" data-search-id="-1" class="active">不限</a>
<a href="javascript:;" data-search-name="xl" data-search-id="1">大专 <i class="mdi mdi-close"></i></a>
<a href="javascript:;" data-search-name="xl" data-search-id="2">本科 <i class="mdi mdi-close"></i></a>
<a href="javascript:;" data-search-name="xl" data-search-id="3">硕士 <i class="mdi mdi-close"></i></a>
<a href="javascript:;" data-search-name="xl" data-search-id="4">博士 <i class="mdi mdi-close"></i></a>
<a href="javascript:;" data-search-name="xl" data-search-id="5">不要求 <i class="mdi mdi-close"></i></a>
</li>
<li class="multi-chosen">
<span class="title">公司规模:</span>
<a href="javascript:;" data-search-name="gsgm" data-search-id="-1" class="active">不限</a>
<a href="javascript:;" data-search-name="gsgm" data-search-id="1">少于15人 <i class="mdi mdi-close"></i></a>
<a href="javascript:;" data-search-name="gsgm" data-search-id="2">15-50人 <i class="mdi mdi-close"></i></a>
<a href="javascript:;" data-search-name="gsgm" data-search-id="3">50-150人 <i class="mdi mdi-close"></i></a>
<a href="javascript:;" data-search-name="gsgm" data-search-id="4">150-500人 <i class="mdi mdi-close"></i></a>
<a href="javascript:;" data-search-name="gsgm" data-search-id="5">500-2000人 <i class="mdi mdi-close"></i></a>
<a href="javascript:;" data-search-name="gsgm" data-search-id="6">2000人以上 <i class="mdi mdi-close"></i></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/popper.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/main.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(document).on('click', 'li.positions .more', function() {
$(this).parent('li').toggleClass('on');
});
var queryConfig = new Array();
var host = window.location.host;
var pathname = window.location.pathname;
var protocol = document.location.protocol;
var queryStr = location.search.substr(1);
queryStr = queryStr.split('&');
for (let i = 0; i < queryStr.length; i++) {
let q = queryStr[i].split('=')
if (q.length === 2) {
queryConfig[q[0]] = q[1];
}
$('li.multi-chosen a').each(function() {
if ($(this).data('search-name') == q[0] && $(this).data('search-id') == q[1]) {
$(this).addClass('active').siblings().removeClass('active');
}
});
}
$(document).on('click', 'li a i.mdi-close', function() {
var name = $(this).parent('a').data('search-name');
delete queryConfig[name];
var urlStr = assemblyURL(queryConfig);
window.location.href = urlStr;
});
$(document).on('click', 'li.multi-chosen a:not(.more)', function(ev) {
if(ev.target!=this) return false;
var name = $(this).data('search-name');
var id = $(this).data('search-id');
queryConfig[name] = id;
var urlStr = assemblyURL(queryConfig);
window.location.href = urlStr;
});
// 组装url地址
function assemblyURL(queryConfig) {
var _str = "";
for(var o in queryConfig){
if(queryConfig[o] != -1){
_str += o + "=" + queryConfig[o] + "&";
}
}
var query_str = _str.substring(0, _str.length-1);
return protocol + '//' + host + pathname + '?' + query_str;
}
});
</script>
</body>
</html>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。