TAB选项卡
  • 1. TAB动态加载
    示例:

    html:

    <main> <div id="tabDynamic" class="bui-tab"> <div class="bui-tab-main"> <ul> <li> </li> <li> </li> </ul> </div> </div> </main> <footer> <ul id="tabDynamicNav" class="bui-nav"> <li class="bui-btn bui-box-vertical active" href="pages/ui_controls/bui.slide_tab_dynamic_page1.html"><i class="icon-home"><span class="bui-badges">15</span></i><div class="span1">首页</div></li> <li class="bui-btn bui-box-vertical" href="pages/ui_controls/bui.slide_tab_dynamic_page1.html"><i class="icon-share"></i><div class="span1">新闻</div></li> </ul> </footer>

    js:

    //按钮在tab外层,需要传id var tab = bui.slide({ id:"#tabDynamic", menu:"#tabDynamicNav", children:".bui-tab-main > ul", scroll: true, // 1: 声明是动态加载的tab autoload: true, }) // 2: 监听加载后的事件, load 只加载一次 tab.on("load",function (res) { console.log($(this).index()) })
  • 小提示: 该例子可以在手机中拖动
    2. 导航按钮平分宽度
    示例:

    html:

    <div id="uiSlideTab" class="bui-tab"> <div class="bui-tab-head"> <ul class="bui-nav"> <li class="bui-btn active">首页</li> <li class="bui-btn">新闻</li> </ul> </div> <div class="bui-tab-main"> <ul> <li> 滑动的内容 </li> <li> 滑动的内容 </li> </ul> </div> </div>

    js:

    var tab = bui.slide({ id:"#uiSlideTab", menu:".bui-nav", children:".bui-tab-main > ul", scroll: true })
  • 3. 导航横向滚动示例--结构解耦
    示例:

    html:

    <div id="uiSlideNavbar" class="bui-navbar"> <ul id="nav" class="bui-nav"> <li class="bui-btn active">首页</li><li class="bui-btn">新闻</li><li class="bui-btn">首页</li><li class="bui-btn">新闻</li><li class="bui-btn">首页</li><li class="bui-btn">新闻</li><li class="bui-btn">首页</li><li class="bui-btn">新闻</li> </ul> </div> <div id="uiSlideTab" class="bui-tab"> <div class="bui-tab-main"> <ul> <li> 滑动的内容 </li> <li> 滑动的内容 </li> </ul> </div> </div>

    js:

    var tab = bui.slide({ id:"#uiSlideTab", menu:"#nav", children:".bui-tab-main > ul", scroll: true }) // 让顶部导航滚动到可视位置 uiSlideTab.on("to",function (index) { var left = $("#nav li")[index].offsetLeft; document.getElementById("uiSlideNavbar").scrollLeft = left; })
  • 4. 导航按钮在顶部--结构解耦
    示例:

    html:

    <header class="bui-bar"> <div class="bui-bar-left"></div> <div class="bui-bar-main"> <ul id="tabNav" class="bui-nav"> <li class="bui-btn active">首页</li> <li class="bui-btn">新闻</li> </ul> </div> <div class="bui-bar-right"></div> </header> <main> <div id="uiSlideTab" class="bui-tab"> <div class="bui-tab-main"> <ul> <li> 滑动的内容 </li> <li> 滑动的内容 </li> </ul> </div> </div> </main>

    js:

    var tab = bui.slide({ id:"#uiSlideTab", menu:"#tabNav", children:".bui-tab-main > ul", scroll: true })
  • 5. TAB自动高度
    示例:

    html:

    <div id="uiSlideTab" class="bui-tab bui-tab-autoheight"> <div class="bui-tab-head"> <ul class="bui-nav"> <li class="bui-btn active">首页</li> <li class="bui-btn">新闻</li> </ul> </div> <div class="bui-tab-main"> <ul> <li> 滑动的内容 </li> <li> 滑动的内容 </li> </ul> </div> </div>

    js:

    var tab = bui.slide({ id:"#uiSlideTab", menu:".bui-nav", children:".bui-tab-main > ul", scroll: false })