没有合适的资源?快使用搜索试试~ 我知道了~
首页基于layui实现高级搜索(筛选)功能
基于layui写的一个高级搜索(筛选)功能。 效果图: 是一位萌新,所有写的有点儿乱。(放在上面,供新手们参考,也是自己做一个记录。) 代码如下: <html> <head> <meta http-equiv=X-UA-Compatible content=IE=edge,chrome=1 /> <base href=<%=basePath%> rel=external nofollow /> <title></title> <link rel=SHORTCUT ICON href=<%=basePath%>favicon.ico /> <!-- <link rel
资源详情
资源评论
资源推荐
基于基于layui实现高级搜索(筛选)功能实现高级搜索(筛选)功能
基于layui写的一个高级搜索(筛选)功能。
效果图:
是一位萌新,所有写的有点儿乱。(放在上面,供新手们参考,也是自己做一个记录。)
代码如下:
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<base href="<%=basePath%>" rel="external nofollow" />
<title></title>
<link rel="SHORTCUT ICON" href="<%=basePath%>favicon.ico" />
<!--
<link rel="stylesheet" type="text/css" href="fundstyle.css" />
-->
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3" />
<meta http-equiv="description" content="This is my page" />
<link rel="stylesheet" href="<%=basePath %>common/layuiadmin/layui/css/layui.css" type="text/css">
<link rel="stylesheet" href="<%=basePath %>common/jajxjs/css/jxlayui.css" type="text/css">
<script type="text/javascript" src="<%=basePath%>common/jquery-ui/js/jquery.min.js"></script>
<script src="<%=basePath %>common/layuiadmin/layui/layui.js"></script>
<script type="text/javascript" src="<%=basePath%>common/jajxjs/jxpubjs.js"></script>
<%
String secucode = request.getParameter("secucode");
secucode = secucode == null ? "" : secucode;
out.print("<script language='javascript'>var secucode='" + secucode
+ "';</script>");
%>
<style type="text/css">
.last{
border-right:none !important;
}
.search-title{
position: relative;
height:40px;
border-bottom: 1px solid #e6e6e6;
}
.search-title span{
position:absolute;
left:16px;
line-height:40px;
}
.search-title a{
color:#01AAED;
}
.search-title a:hover{
color:#5FB878;
}
.search-title ul{
position: absolute;
left:100px;
height:30px;
padding: 10px 0;
}
.search-title ul li{
font-size: 12px;
height: 18px;
line-height: 18px;
float: left;
margin-left: 10px;
border: 1px solid;
cursor: pointer;
border-radius: 10px;
padding-left: 6px;;
}
.search-title ul li i{
font-size: 12px;
}
#search-content{
border-top:0px;
padding-right:0;
}
#searchResult li:hover{
border: 1px solid #01AAED;
color: #01AAED;
}
#searchResult li b{
font-weight: normal;
padding-right: 2px;
}
#btn_fold{
font-size:14px;
position: absolute;
cursor:pointer;
right:30px;
line-height:40px;
}
.search-name{
float:left;
display: block;
width:90px;
line-height:40px;
}
#fundtype{
border-bottom: 1px solid #e6e6e6;
height: auto;
padding-bottom:10px;
}
#fundtype ul{
line-height: 50px;
padding-left:90px;
}
#fundtype ul li{
float: left;
width: 95px;
height: 40px;
text-align: center;
line-height: 40px;
cursor: pointer;
margin-right: 10px;
margin-top: 4px;
background-color: #eeeeee;
}
#fundtype ul li a{
cursor: pointer;
}
#fundcompany{
border-bottom: 1px solid #e6e6e6;
}
.fundcompany-content a{
padding: 0 20px;
cursor: pointer;
border-right: 1px solid #d4d4d4;
}
#fundyeji{
border-bottom: 1px solid #e6e6e6;
}
.fundyeji-content a{
padding: 0 30px;
cursor: pointer;
}
#fundstar{
border-bottom: 1px solid #e6e6e6;
height: auto;
padding: 10px 0;
}
#fundstar ul{
line-height: 50px;
padding-left:90px;
}
#fundstar ul li{
float: left;
width: 95px;
height: 40px;
text-align: center;
line-height: 40px;
cursor: pointer;
margin-right: 10px;
margin-top: 4px;
background-color: #eeeeee;
}
#fundstar ul li a{
cursor: pointer;
}
.layui-tab-title li{
min-width:10px;
padding: 0 10px;
}
.layui-tab-content{
border-left: 1px solid #e6e6e6;
border-right: 1px solid #e6e6e6;
border-bottom: 1px solid #e6e6e6;
}
.layui-input{
width:90px;
}
.layui-input-inline{
width:60px;
}
.layui-form-label{
padding: 9px 0;
width:60px;
text-align: center;
}
.active{
background-color: #01AAED !important;
color: #fff !important;
}
.choice{
background-color: #01AAED !important;
color: #fff !important;
}
.choicecom{
color: #5FB878;
text-decoration: underline;
}
.savedcond{
cursor:pointer;
line-height: 24px;
padding: 0 4px 0 8px;
margin: 5px 10px;
display: block;
background-color: #EEEEEE;
color: #A6AAB8;
border-radius: 12px;
max-width: 100%;
text-overflow: ellipsis;
overflow: hidden;
position: relative;
text-align: center;
}
.savedcond:hover{
background-color: #aaa;
color: #fff;
}
.savedcond i{
float: right;
}
.savedcond i:hover{
color: #FF5722;
}
.clearfloat{clear:both;height:0;font-size: 1px;line-height: 0px;}
</style>
<script type="text/javascript">
layui.config({
base: 'common/layuiadmin/',
}).extend({
excel: 'modules/excel',
xlsx: 'modules/xlsx',
FileSaver: 'modules/FileSaver',
suggestbind : 'lib/suggestbind',
index : 'lib/index'
});
</script>
</head>
<body>
<div class="layui-collapse" style="width:99%;height:100%; margin:0 auto; background-color: white">
<div class="layui-colla-item">
<div class="search-title">
<span>所有条件
<i class="layui-icon layui-icon-triangle-r"></i> </span>
<ul id="searchResult">
<li style="display:none"><b id="typetext"></b><i class="layui-icon layui-icon-close"></i></li>
<li style="display:none"><b id="companytext"></b><i class="layui-icon layui-icon-close"></i></li>
<li style="display:none"><b id="yeji_1z"></b><i class="layui-icon layui-icon-close"></i></li>
<li style="display:none"><b id="yeji_1y"></b><i class="layui-icon layui-icon-close"></i></li>
<li style="display:none"><b id="yeji_3y"></b><i class="layui-icon layui-icon-close"></i></li>
<li style="display:none"><b id="yeji_6y"></b><i class="layui-icon layui-icon-close"></i></li>
<li style="display:none"><b id="yeji_jin"></b><i class="layui-icon layui-icon-close"></i></li>
剩余10页未读,继续阅读
等到风景都看透⊙∀⊙?
- 粉丝: 173
- 资源: 931
上传资源 快速赚钱
- 我的内容管理 收起
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
会员权益专享
最新资源
- ExcelVBA中的Range和Cells用法说明.pdf
- 基于单片机的电梯控制模型设计.doc
- 主成分分析和因子分析.pptx
- 共享笔记服务系统论文.doc
- 基于数据治理体系的数据中台实践分享.pptx
- 变压器的铭牌和额定值.pptx
- 计算机网络课程设计报告--用winsock设计Ping应用程序.doc
- 高电压技术课件:第03章 液体和固体介质的电气特性.pdf
- Oracle商务智能精华介绍.pptx
- 基于单片机的输液滴速控制系统设计文档.doc
- dw考试题 5套.pdf
- 学生档案管理系统详细设计说明书.doc
- 操作系统PPT课件.pptx
- 智慧路边停车管理系统方案.pptx
- 【企业内控系列】企业内部控制之人力资源管理控制(17页).doc
- 温度传感器分类与特点.pptx
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论1