Dynamic jQuery tabbing (sorting out tab overflow)
I've managed to develop a dynamic jQuery tabbing system but I'm having trouble sorting out tab overflow. Currently I can have only six tabs on display and the seventh goes missing.
How do you set up a "tab scroll" method to allow for the user to click back and forth to show the tabs that are "off-screen"? I've included a开发者_开发技巧 picture below to show this, as you can see Document 1 to Document 6 tabs are selected but you cannot see Document 7!:
My code here may explain my situation a lot better.
CSS
<style type="text/css">
body {
font-family:Lucida Sans, Lucida Sans Unicode, Arial, Sans-Serif;
font-size:13px;
margin:0px auto;
}
#tabs {
margin:0;
padding:0;
list-style:none;
overflow:hidden;
height: 24px;
}
#tabs li {
float:left;
display:block;
background-color:#bbb;
margin-right:5px;
height: 24px;
}
#tabs li a {
color:#fff;
text-decoration: none;
}
#tabs li.current {
background-color:#e1e1e1;
text-decoration: none;
}
#tabs li.current a {
color:#000;
text-decoration:none;
}
#tabs li a.remove {
color:#f00;
margin-left:10px;
text-decoration: none;
}
#content {
background-color:#e1e1e1;
}
#content p {
margin: 0;
padding:20px 20px 100px 20px;
}
#main {
width:900px;
margin:0px auto;
overflow:hidden;
background-color:#F6F6F6;
margin-top:20px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
padding:30px;
}
#wrapper, #doclist {
float:left;
margin:0 20px 0 0;
}
#doclist {
width:150px;
border-right:solid 1px #dcdcdc;
}
#doclist ul {
margin:0;
list-style:none;
}
#doclist li {
margin:10px 0;
padding:0;
}
#wrapper {
width:700px;
margin-top:20px;
}
#header {
background-color:#F6F6F6;
width:900px;
margin:0px auto;
margin-top:20px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
padding:30px;
position:relative;
}
#header h2 {
font-size:16px;
font-weight:normal;
margin:0px;
padding:0px;
}
#jsddm {
margin: 0;
padding: 0
}
#jsddm li {
float: left;
list-style: none;
font: 12px Tahoma, Arial;
}
#jsddm li a {
display: block;
background: #20548E;
padding: 5px 12px;
text-decoration: none;
border-right: 1px solid white;
width: 70px;
color: #EAFFED;
white-space: nowrap;
}
#jsddm li a:hover {
background: #1A4473;
text-decoration: none;
}
#jsddm li ul {
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
text-decoration: none;
}
#jsddm li ul li {
float: none;
display: inline;
text-decoration: none;
}
#jsddm li ul li a {
width: auto;
display: block;
padding: 5px 12px;
text-decoration: none;
width: 70px;
color: #EAFFED;
white-space: nowrap
}
#jsddm li ul li a:hover {
background: #7F1616;
text-decoration: none;
}
</style>
JavaScript
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
function jsddm_open()
{ jsddm_canceltimer();
jsddm_close();
ddmenuitem = $(this).find('ul').css('visibility', 'visible');}
function jsddm_close()
{ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}
function jsddm_timer()
{ closetimer = window.setTimeout(jsddm_close, timeout);}
function jsddm_canceltimer()
{ if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;}}
$(document).ready(function()
{ $('#jsddm > li').bind('mouseover', jsddm_open)
$('#jsddm > li').bind('mouseout', jsddm_timer)});
document.onclick = jsddm_close;
$(document).ready(function() {
$("#documents a").click(function() {
addTab($(this));
});
$('#tabs a.tab').live('click', function() {
// Get the tab name
var contentname = $(this).attr("id") + "_content";
// hide all other tabs
$("#content p").hide();
$("#tabs li").removeClass("current");
// show current tab
$("#" + contentname).show();
$(this).parent().addClass("current");
});
$('#tabs a.remove').live('click', function() {
// Get the tab name
var tabid = $(this).parent().find(".tab").attr("id");
// remove tab and related content
var contentname = tabid + "_content";
$("#" + contentname).remove();
$(this).parent().remove();
// if there is no current tab and if there are still tabs left, show the first one
if ($("#tabs li.current").length == 0 && $("#tabs li").length > 0) {
// find the first tab
var firsttab = $("#tabs li:first-child");
firsttab.addClass("current");
// get its link name and show related content
var firsttabid = $(firsttab).find("a.tab").attr("id");
$("#" + firsttabid + "_content").show();
}
});
});
function addTab(link) {
// If tab already exist in the list, return
if ($("#" + $(link).attr("rel")).length != 0)
return;
// hide other tabs
$("#tabs li").removeClass("current");
$("#content p").hide();
// add new tab and related content
$("#tabs").append("<li class='current'><a class='tab' id='" +
$(link).attr("rel") + "' href='#'>" + $(link).html() +
"</a><a href='#' class='remove'>x</a></li>");
$("#content").append("<p id='" + $(link).attr("rel") + "_content'>" +
$(link).attr("title") + "</p>");
// set the newly added tab as current
$("#" + $(link).attr("rel") + "_content").show();
}
</script>
html
<body>
<div id="main">
<div id="wrapper">
<ul id="tabs">
<!-- Tabs go here -->
<div style="float: right">
<ul id="jsddm">
<li><a href="#">select</a>
<ul id="documents">
<li><a href="#" rel="Document1" title="This is the content of Document1">Document1</a></li>
<li><a href="#" rel="Document2" title="This is the content of Document2">Document2</a></li>
<li><a href="#" rel="Document3" title="This is the content of Document3">Document3</a></li>
<li><a href="#" rel="Document4" title="This is the content of Document4">Document4</a></li>
<li><a href="#" rel="Document5" title="This is the content of Document5">Document5</a></li>
<li><a href="#" rel="Document6" title="This is the content of Document6">Document6</a></li>
<li><a href="#" rel="Document7" title="This is the content of Document7">Document7</a></li>
</ul>
</li>
</ul>
</div>
</ul>
<div id="content">
<div></div>
</div>
</div>
</div>
</body>
The last tab opened is actually hidden behind the 6th one. Try increasing you wrapper width:
#wrapper {
margin-top: 20px;
width: 800px;
}
You can see it working here: http://jsfiddle.net/u73Hg/
精彩评论