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/
加载中,请稍侯......
精彩评论