检索

检索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>