网页的中的导航,主要是nav标签,里面的tab项就用div就好了,然后设置一下样式
<nav id="nav">
<div class="menu selected" tapmode onclick="setTab(0)"><体育/div>
<div class="menu" tapmode onclick="setTab(1)">新闻</div>
<div class="menu" tapmode onclick="setTab(2)">财经</div>
<div class="menu" tapmode onclick="setTab(3)">军事</div>
</nav>
样式
nav {
position: relative;
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: horizontal;
-webkit-flex-flow: row;
flex-flow: row;
width: 100%;
height: 40px;
padding-left: 36px;
padding-right: 36px;
text-align: center;
background-color: #f0f0f0;
}
nav .menu {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
box-sizing: border-box;
height: 40px;
line-height: 40px;
font-size: 14px;
text-align: center;
color: #CACACA;
border-bottom: 2px solid #f0f0f0;
background-repeat: no-repeat;
background-size: auto 14px;
background-position: 8px 13px;
margin-left: 10px;
margin-right: 10px;
}
nav .selected {
color: #2BBC5B;
border-bottom: 2px solid #2BBC5B;
}
border-bottom主要来设置指示线的颜色,分选中和未选中的颜色,未选中时的背景色就跟nav背景色一致即可。
逻辑 :
<script type="text/javascript">
var menus;
apiready = function(){
var header = $api.byId('header');
var nav = $api.byId('nav');
$api.fixStatusBar(header);
var headerH = $api.offset(header).h;
var navH = $api.offset(nav).h;
menus = $api.domAll(nav, '.menu');
// 打开FrameGroup,就像Fragment
var frames = [{
name: 'deal_doing_frame',
url: './deal_doing_frame.html'
}, {
name: 'deal_buy_frame',
url: './deal_buy_frame.html'
}, {
name: 'deal_sell_frame',
url: './deal_sell_frame.html'
}, {
name: 'deal_done_frame',
url: './deal_done_frame.html'
}];
api.openFrameGroup({
name: 'dealFrameGroup',
scrollEnabled: false,//禁止滑动
rect: {
x: 0,
y: headerH + navH,
w: 'auto',
h: 'auto'
},
index: 0,
frames: frames
}, function(ret, err) {
if (ret) {
changeTabClass(ret.index);
}
});
}
var a = 0;
function setTab(position) {
//防止已选中Tab重复点击重复加载数据
if (a == position) {
return;
}
a = position;
changeTabClass(position);
api.setFrameGroupIndex({
name: 'dealFrameGroup',
index: position,
scroll: true,
reload: true//是否重新刷新页面
});
}
function changeTabClass(position) {
for (var i = 0; i < menus.length; i++) {
if (position == i) {
$api.addCls(menus[i], 'selected');
} else {
$api.removeCls(menus[i], 'selected');
}
}
}
</script>
上面的这种利用border-bottom来实现,大部分情况都实用,但是总有一种比较刁钻的指示器样式,如下图:
下面的指示器很短,而上面的Tab内容却很长,这时候用border-bottom来实现就比较难受了!所以说干脆换一种布局方式,指示器单独用div写 - - ! 如下:
<nav id="nav">
<div class="menu selected" tapmode onclick="setTab(0)">
<div>体育体育</div>
<div id="indicator0" class="indicator"></div>
</div>
<div class="menu" tapmode onclick="setTab(1)">
<div>新闻体育</div>
<div id="indicator1"></div>
</div>
<div class="menu" tapmode onclick="setTab(2)">
<div>财经体育</div>
<div id="indicator2"></div>
</div>
<div class="menu" tapmode onclick="setTab(3)">
<div>军事体育</div>
<div id="indicator3"></div>
</div>
</nav>
然后在setTab点击事件的for循环中根据position单独去控制每个Tab的指示器,动态添加和移除,跟改变文字颜色一样
switch (position) {
case 0:
$api.addCls($api.byId('indicator0'), 'indicator');
$api.removeCls($api.byId('indicator1'), 'indicator');
$api.removeCls($api.byId('indicator2'), 'indicator');
$api.removeCls($api.byId('indicator3'), 'indicator');
break;
case 1:
$api.addCls($api.byId('indicator1'), 'indicator');
$api.removeCls($api.byId('indicator0'), 'indicator');
$api.removeCls($api.byId('indicator2'), 'indicator');
$api.removeCls($api.byId('indicator3'), 'indicator');
break;
case 2:
$api.addCls($api.byId('indicator2'), 'indicator');
$api.removeCls($api.byId('indicator0'), 'indicator');
$api.removeCls($api.byId('indicator1'), 'indicator');
$api.removeCls($api.byId('indicator3'), 'indicator');
break;
case 3:
$api.addCls($api.byId('indicator3'), 'indicator');
$api.removeCls($api.byId('indicator0'), 'indicator');
$api.removeCls($api.byId('indicator1'), 'indicator');
$api.removeCls($api.byId('indicator2'), 'indicator');
break;
}
————————————————————————————————————————————————————————————
上面这中是Tab标签底部带下划线指示器的那种,还有一种类似这样的:
这种用UI框架能实现,但是我刚学习了flex布局之后,觉得这样式可以用flex布局实现。于是就写了一下。
样式
.container {
display: -webkit-flex;
display: -webkit-box;
display: flex;
height: 300px;
background: #ccc;
justify-content: center;
align-items: center;
}
.base_tab {
width: 70px;
height: 30px;
line-height: 30px;
text-align: center;
background: #fff;
color: #ccc;
}
.tab1 {
border-right: 1px solid #f00;
box-sizing: border-box;
border-radius: 4px 0 0 4px
}
.tab3 {
border-left: 1px solid #f00;
box-sizing: border-box;
border-radius: 0 4px 4px 0
}
.select {
background: #f00;
color: white
}
布局:
<body>
<div class="container">
<div class="base_tab tab1 select" onclick="setTab(0)" tapmode>Item1</div>
<div class="base_tab" onclick="setTab(1)" tapmode>Item2</div>
<div class="base_tab tab3" onclick="setTab(2)" tapmode>Item3</div>
</div>
</body>
核心代码:
<script type="text/javascript">
var tabs;
apiready = function() {
tabs = $api.domAll($api.dom('.container'), '.base_tab');
};
function setTab(position) {
for (var i = 0; i < tabs.length; i++) {
if (position == i) {
$api.addCls(tabs[i], 'select');
} else {
$api.removeCls(tabs[i], 'select');
}
}
}
</script>