jQuery Function for Split Lists_问答_开发者_运维开发者技术经验分享

I'm trying to build some jQuery functionality into my site and I've caught a snag. I need to split a jQuery block style menu into 2 & possibly 3 columns vs having them all in one column on top of each other. I'll post as much as I can in here. I'm sure I'm missing something blatantly obvious. I'll start with the website I'm going off of:

http://upsidestudio.com/web/splitcol/2/

Now the CSS I've got:

.tabs {
width: 700px;
font-weight: ;
margin: 0;
padding: 0px;
float: left;
}

the <head> of my html: (I think my errors would be in here: I'm new to jQuery/Javascript)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 <head>
  <title>My Site</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <meta name="author" content="" />

  <!-- !Stylesheets -->
  <link rel="stylesheet" type="text/css" href="css/screen.css" media="all" />
  <!--[if IE 7]><link rel="stylesheet" href="css/ie7.css" type="text/css" media="screen" /><![endif]-->
  <!--[if lte IE 8]><link rel="stylesheet" href="css/ie8.css" type="text/css" media="screen" /><![endif]-->

  <!-- !jQuery -->
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script src="http://cdn.jquerytools.org/1.2.5/all/jquery.tools.min.js"></script>  
  <script>
   // execute your scripts when the DOM is ready. this is mostly a good habit
   $(function() {

   // initialize scrollable
   $("#browsable").scrollable({circular: true}).navigator().autoscroll({
   interval: 10000  
   }); 

   // initialize scrollable together with the autoscroll plugin
   var root = $("#scroller").scrollable({circular: true}).autoscroll({ autoplay: false });

   // perform JavaScript after the document is scriptable.
   $(function() {
   // setup ul.tabs to work as tabs for each div directly under div.panes
   $("ul.tabs").tabs("div.panes > div")
   });

   });

  <!-- !jQuery Split Navigation -->

   $(document).ready(function() {
        $('.tabs').each(function() {
              if($(this).is("ol")) { var ordered = true; }
              var colsize = Math.round($(this).find("li").size() / 2);
              $(this).find("li").each(function(i) {
                 if (i>=colsize) {
                        $(this).addClass('right_col');
                   }
              });
              if(ordered) {
                   $(this).find('.right_col').insertAfter(this).wrapAll("<ol class='tabs' start='" + (colsize+1) + "'></ol>").removeClass("right_col");
              } else {
                   $(this).find('.right_col').insertAfter(this).wrapAll("<ul class='tabs'></ul>").removeClass("right_col");
              }
         });
   });

  </script>
 </head>

And Lastly...My Html section.

<!--THE TABS-->

   <hr width="575" size="4" noshade align="left">

     <ul class="tabs">
     <li><a href="#">开发者_运维百科;What We Do</a></li>
     <li><a href="#">How It Works</a></li>
     <li><a href="#">FAQ</a></li>
     <li><a href="#">The Ajungo Team</a></li>
     <li><a href="#">Advertise</a></li>
     </ul>

   <hr width="575" size="4" noshade align="left"><br/><br/>

 <!--TAB PANES COME IN BELOW THIS-->

Well, the biggest problem I can see there is that you've got a HTML comment stuck in the middle of the script block:

<!-- !jQuery Split Navigation -->

Remove that, then adding

.tabs {
    margin-bottom: 20px;
}

And you can see that the ul.tabs list has been split in two. However, there a few inefficiencies in the script. It can be rewritten much, much more cleanly like this:

$('.tabs').each(function() {
    var t = $(this),               // Store a copy of both $(this) and t.children(), 
        children = t.children(),   // to avoid calling the jQuery function too much
        // Create a clone of the original list, then empty it and insert it after the original
        secondList = t.clone(false).empty().insertAfter(this), 
        // Calculate the number of elements to move to the second list
        // ie. half the number of elements in the list, divided by two and rounded up
        length = Math.ceil(children.length / 2);

    // Move half the children of the original list to the new one
    children.slice(length).appendTo(secondList);

    // If the list is an ordered list, let the list start at the correct position 
    if(this.nodeName === 'OL'){
        secondList.attr('start', length + 1);
    }
});

See: http://www.jsfiddle.net/yijiang/Tf4HT/1/