检索
检索html结构为:整体.search
,搜索框.search-action
,搜索框内切换内容.search-body
。
检索js初始化:t.searchTab(fn);
,参数fn
为筛选条件被点击时触发,参数结构:elm当前点击节点,val当前值,t.searchVals当前选中值。
<script>
t(function() {
t.searchTab(function(o) {
// console.log(o.elm);
// console.log(o.val);
// t.get(url, t.searchVals, function(){});
// 多选
console.log(o);
console.log(t(o.elm).text());
t.searchClose();
});
});
</script>
<div class="search">
<div class="search-action">
<a class="search-btn" href="#search-tab1">单选 <i class="icon ion-arrow-down-b"></i></a>
<a class="search-btn" href="#search-tab2">单选 <i class="icon ion-arrow-down-b"></i></a>
<a class="search-btn" href="#search-tab3">多选 <i class="icon ion-arrow-down-b"></i></a>
<a class="search-btn" href="#search-tab2">单选 <i class="icon ion-arrow-down-b"></i></a>
</div>
<div class="search-body">
<div class="search-content" id="search-tab1">
<ul>
<li class="link_item radio">
<div class="item">
<div class="item_center">
<div class="item-input col-90">
单选样式1
</div>
<div class="middle col-10">
<input type="radio" value="1" id="radio1" name="radio1" class="rd">
<label for="radio1">
<i class="icon ion-android-done"></i>
</label>
</div>
</div>
</div>
</li>
<li class="link_item radio">
<div class="item">
<div class="item_center">
<div class="item-input col-90">
单选样式2
</div>
<div class="middle col-10">
<input type="radio" value="2" id="radio2" name="radio1" class="rd">
<label for="radio1">
<i class="icon ion-android-done"></i>
</label>
</div>
</div>
</div>
</li>
<li class="link_item radio">
<div class="item">
<div class="item_center">
<div class="item-input col-90">
单选样式3
</div>
<div class="middle col-10">
<input type="radio" value="3" id="radio3" name="radio1" class="rd">
<label for="radio1">
<i class="icon ion-android-done"></i>
</label>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="search-content" id="search-tab2">
<ul>
<li class="link_item radio">
<div class="item">
<div class="item_center">
<div class="item-input col-90">
单选样式4
</div>
<div class="middle col-10">
<input type="radio" value="1" id="radio4" name="radio2" class="rd" checked="checked">
<label for="radio4">
<i class="icon ion-android-done"></i>
</label>
</div>
</div>
</div>
</li>
<li class="link_item radio">
<div class="item">
<div class="item_center">
<div class="item-input col-90">
单选样式5
</div>
<div class="middle col-10">
<input type="radio" value="2" id="radio5" name="radio2" class="rd">
<label for="radio1">
<i class="icon ion-android-done"></i>
</label>
</div>
</div>
</div>
</li>
<li class="link_item radio">
<div class="item">
<div class="item_center">
<div class="item-input col-90">
单选样式6
</div>
<div class="middle col-10">
<input type="radio" value="3" id="radio6" name="radio2" class="rd">
<label for="radio6">
<i class="icon ion-android-done"></i>
</label>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="search-content" id="search-tab3">
<ul>
<li class="link_item2 checkbox">
<div class="item col-50">
<div class="item_left">
<input id="checkbox31" name="duoxuan3" type="checkbox" class="ck" value="1">
<label for="checkbox31" class="lb-ck"></label>
</div>
<div class="item_center">
<div class="item-input">
多选样式1
</div>
<!--<div class="item_after"></div>-->
</div>
</div>
<div class="item col-50">
<div class="item_left">
<input id="checkbox32" name="duoxuan3" type="checkbox" class="ck" value="2">
<label for="checkbox32" class="lb-ck"></label>
</div>
<div class="item_center">
<div class="item-input">
多选样式2
</div>
<!--<div class="item_after"></div>-->
</div>
</div>
</li>
<li class="link_item2 checkbox">
<div class="item col-50">
<div class="item_left">
<input id="checkbox33" name="duoxuan3" type="checkbox" class="ck" value="3">
<label for="checkbox33" class="lb-ck"></label>
</div>
<div class="item_center">
<div class="item-input">
多选样式3
</div>
<!--<div class="item_after"></div>-->
</div>
</div>
<div class="item col-50">
<div class="item_left">
<input id="checkbox34" name="duoxuan3" type="checkbox" class="ck" value="4">
<label for="checkbox34" class="lb-ck"></label>
</div>
<div class="item_center">
<div class="item-input">
多选样式4
</div>
<!--<div class="item_after"></div>-->
</div>
</div>
</li>
</ul>
<div class="page-content">
<div class="row" style="padding-bottom: 0px;">
<div class="col-50">
<a href="" class="btn_x bg_white btn_x_bd_t_8d black">按钮</a>
</div>
<div class="col-50">
<a href="" class="btn_x bd_8d bg_red">按钮</a>
</div>
</div>
</div>
</div>
</div>
</div>