- 1. TAB底部动态加载
- 2. 导航平分宽度
- 3. 导航滚动
- 4. 顶部导航
- 5. TAB自动高度
-
1. TAB动态加载
示例:
html:
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:
js:
var tab = bui.slide({
id:"#uiSlideTab",
menu:".bui-nav",
children:".bui-tab-main > ul",
scroll: true
})
-
3. 导航横向滚动示例--结构解耦
示例:
html:
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:
js:
var tab = bui.slide({
id:"#uiSlideTab",
menu:"#tabNav",
children:".bui-tab-main > ul",
scroll: true
})
-
5. TAB自动高度
示例:
html:
js:
var tab = bui.slide({
id:"#uiSlideTab",
menu:".bui-nav",
children:".bui-tab-main > ul",
scroll: false
})