底部工具栏

底部工具栏

底部工具栏点击后，会自动切换对应的界面。底部工具栏每个按钮a的href="#tab1"中href指向的便是界面id，每个界面是一个.tab， 当前界面是.tab-active。每个tab对应一个url地址，当点击相关tab后会调转到相应的url地址上。

    <div class="tab-active" id="tab1" url="form.html"></div>
    <div class="tab" id="tab2" url="form.html"></div>
    <div class="tab" id="tab3" url="botton.html"></div>
    <div class="tab" id="tab4" url="list.html"></div>
    <div class="toolbar">
        <a class="tab-link tab-link-active col-25" href="#tab1">
            <i class="icon ion-home"></i>
            <span class="">首页</span>
        </a>
        <a class="tab-link col-25" href="#tab2">
            <i class="icon ion-home">
                <span class="badge bg_red">5</span>
            </i>
            <span class="">订单</span>
        </a>
        <a class="tab-link col-25" href="#tab3">
            <i class="icon ion-home"></i>
            <span class="">周边</span>
        </a>
        <a class="tab-link col-25" href="#tab4">
            <i class="icon ion-home"></i>
            <span class="">我的</span>
        </a>
    </div>
    <script>
        if(request.tab){
            t(".toolbar").tabClean().tabInit(request.tab); //清楚缓存后重新初始化tab
        }else{
            t(".toolbar").tabInit("tab1");
        }
    </script>

底部工具栏初始化：t(".toolbar").tabInit("tab1");。初始化参数，即设置当前tab页面。 底部工具栏删除缓存：t(".toolbar").tabClean();。

检索

检索

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

数据交互

数据交互

1.send({params})：向服务器发送ajax请求，需要服务器开启跨域权限。 参数params:

参数 类型 默认值 描述
url string 不可为空 请求地址
type string get 请求类型，取值范围：get/post/put/patch/delete
data json {} 请求数据
cache boolean false 是否缓存
encode boolean false 是否encode
success function 成功回调函数
error function 失败回调函数

示例：

t.send({
    url: serverurl + "/comments/" + id,
    type: "delete",
    data: {},
    success: function(data) {
        if(data.state == "success") {
            t(obj).parents("li").remove();
        } else {
            t.alert(data.message);
        }
    }
});

©2018 . Powered by Jekyll, theme by Scott Emmons under Creative Commons Attribution