关于tab页实现浏览器标签页的设计

我们使用的是Bootstrap的插件实现tab页  链接：http://www.runoob.com/try/try.php?filename=bootstrap3-plugin-tab

效果如下图：

实现效果图后的：

设计思想：给浏览器最外层div 定长 等于浏览器的长度，div内部的div以

$('#categoryShow').css('left',leftt+parseFloat($('#categoryShow').css('left')));

	//添加tab页并显示最新添加的
function addTab(){
var tab_All=($(".wrap").width())*0.9;
var tab_One=tab_All/10;
//判断长度是否大于显示长度
if((tab_One * ($('#categoryShow').children().length)+parseFloat($('#categoryShow').css('left'))-tab_All)>0){
//获取盒子右边剩余的长度
var leftt=-(tab_One * ($('#categoryShow').children().length)+parseFloat($('#categoryShow').css('left'))-tab_All);
//将盒子添加到最左边
$('#categoryShow').css('left',leftt+parseFloat($('#categoryShow').css('left')));
}
}
/*
* tab页移动
*/
this.toLeft = function(){
var tab_All=($(".wrap").width())*0.9;
var tab_One=tab_All/10;
if(tabFlag){
//如果右边有盒子
if((tab_One * ($('#categoryShow').children().length)+parseFloat($('#categoryShow').css('left'))) > tab_All){
tabFlag=false;
//超出盒子右边的长度为rest
var rest=(tab_One * ($('#categoryShow').children().length)+parseFloat($('#categoryShow').css('left'))-tab_All);
//如果右边盒子的长度大于显示长度
if(rest - tab_All>0){
//移动一个盒子的长度
$('#categoryShow').animate(
{left:parseFloat($('#categoryShow').css('left'))-(tab_All)}
//不论左移还是右移，定位都以parseInt($('.cont').css('left'))+多少或减多少
,function () {
tabFlag=true;
})
}else {
//移动剩余的长度
$('#categoryShow').animate(
{left: parseFloat($('#categoryShow').css('left'))-rest}
//不论左移还是右移，定位都以parseInt($('.cont').css('left'))+多少或减多少
,function () {
tabFlag=true;
})
}
}
}
}
this.toRight = function(){
var tab_All=($(".wrap").width())*0.9;
var tab_One=tab_All/10;
if(tabFlag){
//判断左侧长度大小是否小于一个盒子长度
if(parseFloat($('#categoryShow').css('left'))<0){
tabFlag=false;
if(parseFloat($('#categoryShow').css('left')) < (-tab_All)){
$('#categoryShow').animate({left:parseFloat($('#categoryShow').css('left'))+(tab_All)}
//不论左移还是右移，定位都以parseInt($('.cont').css('left'))+多少或减多少
,function () {
tabFlag=true;
})
}else {
//不论左移还是右移，定位都以parseInt($('.cont').css('left'))+多少或减多少
$('#categoryShow').animate({left:parseFloat($('#categoryShow').css('left'))-parseFloat($('#categoryShow').css('left'))}
,function () {
tabFlag=true;
})
}
}
}
}

最后

以上就是复杂乌龟为你收集整理的关于tab页实现浏览器标签页的设计的全部内容，希望文章能够帮你解决关于tab页实现浏览器标签页的设计所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。