ulthon/layui-ul
1
0
Fork 0
mirror of https://gitee.com/ulthon/layui-ul.git synced 2026-07-01 18:42:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

完成检索链接和搜索框

Browse Source
This commit is contained in:
augushong
2021-03-29 14:49:08 +08:00
parent 50518ff011
commit 273920bb2f
3 changed files with 125 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
demo/search.html Normal file
View File

@@ -0,0 +1,89 @@
<fieldset class="layui-elem-field layui-field-title">
<legend>复杂检索筛选</legend>
<div class="layui-field-box">
<div class="ul-search-container">
<div class="ul-search-item ul-padding-md layui-bg-gray">
<form action="" class="layui-form">
<div class="layui-form-item">
<div class="layui-inline">
<div class="layui-input-inline" style="width: 180px;">
<select name="city" lay-verify="" lay-search="">
<option value="">请选择一个城市</option>
<option value="010">北京</option>
<option value="021">上海</option>
<option value="0571">杭州</option>
</select>
</div>
</div>
<div class="layui-inline">
<div class="layui-input-inline" style="width: 180px;">
<select name="city" lay-verify="" lay-search="">
<option value="">请选择一个价位</option>
<option value="010">100万</option>
<option value="021">10万</option>
<option value="0571">3元</option>
</select>
</div>
</div>
<div class="layui-inline">
<button class="layui-btn">搜索</button>
</div>
</div>
</form>
<div class="search-item">
<div class="ul-link-select">
<div class="ul-link-title">
风格:
</div>
<div class="ul-link-list">
<div class="ul-link-item current">
全部
</div>
<div class="ul-link-item">
国产
</div>
<div class="ul-link-item">
欧美
</div>
<div class="ul-link-item">
日韩
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
<legend>链接筛选组件</legend>
<div class="layui-field-box">
<div class="ul-link-select">
<div class="ul-link-title">
风格:
</div>
<div class="ul-link-list">
<div class="ul-link-item current">
全部
</div>
<div class="ul-link-item">
国产
</div>
<div class="ul-link-item">
欧美
</div>
<div class="ul-link-item">
日韩
</div>
</div>
</div>
</div>
</fieldset>

36
public/cdn/layui-ul.css
View File

@@ -43,6 +43,7 @@
margin-bottom: 15px;
}
.ul-icon-exit {
display : inline-block;
width : 16px;
@@ -200,4 +201,37 @@
color : #fff;
}
/* 导航结束 */
/* 导航结束 */
/* 链接导航开始 */
.ul-link-select{
display: flex;
align-items: flex-start;
justify-content: flex-start
}
.ul-link-title{
}
.ul-link-list{
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-wrap: wrap;
margin-left: 15px;
}
.ul-link-item{
padding: 0px 10px;
cursor: pointer;
margin-right: 10px;
}
.ul-link-item.current{
border-radius: 15px;
border: 1px solid #6cf;
color: #6cf;
}
/* 链接导航结束 */

2
view/index/index/index.html
View File

@@ -74,7 +74,7 @@
</div>
</div>
<script>
layui.use(['element'])
layui.use(['element','form'])
</script>
</body>