轮播图

轮播图

轮播图有两种,一种是自动轮播,一种是滑动轮播。

    <div style="height: 200px;" class="slider">
        <div class="slide-paginations"></div>
        <div class="slide-items">
            <div class="slide-item">fds1</div>
            <div class="slide-item">fds2</div>
            <div class="slide-item">fds3</div>
            <div class="slide-item">fds4</div>
        </div>
    </div>
    <script>
        t("#slider1").slide(true, 3000);
    </script>

轮播图方法:t("#slider1").slide(isloop, time)
参数1:isloop是否自动轮播。true为自动轮播,false为滑动轮播。
参数2:自动轮播的间隔时间,单位毫秒。

滑动轮播:

    <script>
        t("#slider1").slide(false);
    </script>

多级联动

多级联动

多级联动,理论可以无限级联动,首先定义级联需要的下拉选,下拉必须带有id:<select name="" id="province"></select>,需要几级创建几个。

    <ul>
        <li>
            <a href="javascript:;" class="link_item">
                <div class="item">
                    <div class="item_center">
                        <div class="item-title label">With switch</div>
                        <div class="item-input">
                            <select name="" id="province">
                                <option value=""></option>
                            </select>
                        </div>
                    </div>
                </div>
            </a>
        </li>
        <li>
            <a href="javascript:;" class="link_item">
                <div class="item">
                    <div class="item_center">
                        <div class="item-title label">With switch</div>
                        <div class="item-input">
                            <select name="" id="city">
                                <option value=""></option>
                            </select>
                        </div>
                    </div>
                </div>
            </a>
        </li>
        <li>
            <a href="javascript:;" class="link_item">
                <div class="item">
                    <div class="item_center">
                        <div class="item-title label">With switch</div>
                        <div class="item-input">
                            <select name="" id="region">
                                <option value=""></option>
                            </select>
                        </div>
                    </div>
                </div>
            </a>
        </li>
    </ul>
    <script>
        var data = [
            {select_id: "#province", value: 2, options: [{id: 1, pid: 0, name: "SS1"}, {id: 2, pid: 0, name: "AA1"}]},
            {select_id: "#city", value: 2, options: [{id: 1, pid: 1, name: "SS2"}, {id: 2, pid: 2, name: "AA2"}]},
            {select_id: "#region", value: 2, options: [{id: 1, pid: 1, name: "SS3"}, {id: 2, pid: 2, name: "AA3"}]}
        ]
        t.moreSelect(data);
    </script>

创建完select节点后,定义数据,数据结构为json数据,每个json为一组下拉数据,级联上下级按数组顺序排列。
select_id为对应的select的id。
value为默认选项值。
options为数据json数组。其中:id为option的value(后台数据id,数字字典值);pid为父id,即级联的上级id,当上级id发生变化,下级自动随着变化;name为选项名。

数据绑定方法:t.moreSelect(data);,参数是具体数据。

顶部工具栏

顶部工具栏

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

    <div class="nav bg_blue white">
        <div class="left">
            <a href="index.html" class="back link nav-btn">
                <i class="icon ion-chevron-left"></i>
            </a>
        </div>
        <div class="center" style="left:-10px">订单</div>
        <div class="right">
        </div>
    </div>
    <div class="toolbarup">
        <a class="tab-link-up tab-link-active col-50" href="#tab21">
            <span>未完成</span>
        </a>
        <span class="y-line">|</span>
        <a class="tab-link-up col-50" href="#tab22">
            <span>已完成订单</span>
        </a>
    </div>
    <div class="content">
        <div class="head-pull"></div>
        <div class="head-pull"></div>
        <div class="split-range"></div>
        <div class="toolbarup-content">
            <div class="tab-active2" id="tab21" url="_order_ing.html"></div>
            <div class="tab" id="tab22" url="_order_ed.html" ></div>
        </div>
    </div>

    <script>
        if(request.tabup){
            t(".toolbarup").tabUpClean().tabInitUp(request.tabup); //清楚缓存后重新初始化tab
        }else{
            t(".toolbarup").tabInitUp("tab21");
        }
    </script>

顶部工具栏初始化:t(".toolbarup").tabInitUp("tab21");。初始化参数,即设置当前tab页面。 顶部工具栏删除缓存:t(".toolbar").tabClean();