开发者

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!:

Dynamic jQuery tabbing (sorting out tab overflow)

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/

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜