当前位置: 代码迷 >> Web前端 >> jquery tab 水准tab分页
  详细解决方案

jquery tab 水准tab分页

热度:433   发布时间:2012-08-30 09:55:54.0
jquery tab 水平tab分页
<script type="text/javascript" src="js/jquery.tab.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#tab").tab({
        //dft:0,  // 起始显示项,默认为第一项
        //auto:true,  // 自动切换,默认为关闭
        //act:"mouseover",  // 鼠标划过,默认为单击
        //effact:" scrollx",  // 横向滚动效果,纵向滚动为 scrolly
        //effact:"slow",  // "slow" 效果
        tabId: ".tags",  // 切换控制器
        tabTag: "li",  // 切换控制器标签
        conId: ".panes",  // 内容容器
        conTag: ".pane"  // 内容容器标签
    })
})
</script>

?

<div id="tab">
  <ul class="tags">
    <li>项目一</li>
    <li>项目二</li>
    <li>项目三</li>
  </ul>
  <div class="panes">
    <div class="pane"> 项目一内容 </div>
    <div class="pane"> 项目二内容 </div>
    <div class="pane"> 项目三内容 </div>
  </div>
</div>

?

<!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">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>jQuery Tab 插件DEMO</title>
		<style type="text/css">
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,table,td,th,form,fieldset,img,dl,dt,dd
	{
	margin: 0px;
	padding: 0px;
	font-family: Arial, Helvetica, sans-serif;
}

a {
	color: #35679a;
	text-decoration: none;
}

a:hover {
	color: #c00;
	text-decoration: underline;
}

img {
	border: none;
}

li {
	list-style: none;
}

body {
	text-align: left;
	background: #505050;
	font-size: 12px;
}

.cont {
	background: #080808;
	padding: 8px;
	width: 840px;
	margin: 0 auto;
}

.main {
	background: #eee;
	padding: 6px;
}

h2 {
	font-size: 16px;
	font-family: "黑体";
	color: #35679a;;
	padding: 4px 10px;
	margin: 10px 0 16px;
	font-weight: 100;
	border-bottom: 2px solid #ccc;
}

h3 {
	padding-left: 50px;
	font-size: 16px;
	color: #555;
}

.testtab {
	border: 4px solid #ccc;
	margin: 10px 50px;
}

.tabtag {
	line-height: 24px;
	height: 24px;
	border-bottom: 2px solid #ccc;
}

.tabtag li {
	float: left;
	width: 24%;
	text-align: center;
	background: #eee;
}

.tabtag li.cur {
	color: #900;
	background: #fff;
}

.tabcon {
	height: 100px;
	overflow: hidden;
}

.tabcon div {
	height: 80px;
	padding: 10px;
	color: #900;
	font-size: 14px;
}

.tabcon li {
	line-height: 22px;
}

pre {
	color: #444;
}

pre strong {
	font-weight: 900;
}
</style>
		<script type="text/javascript"
			src="../js/jquery-1.3.2.min.js"></script>
		<script type="text/javascript">
	/*           */
	$(document).ready(
			function() {

				function cur(ele, currentClass, tag) {
					ele = $(ele) ? $(ele) : ele;
					if (!tag) {
						ele.addClass(currentClass).siblings().removeClass(
								currentClass);
					} else {
						ele.addClass(currentClass).siblings(tag).removeClass(
								currentClass);
					}
				}
				$.fn.tab = function(options) {
					var org = {
						tabId : "",
						tabTag : "",
						conId : "",
						conTag : "",
						curClass : "cur",
						act : "click",
						dft : 0,
						effact : null,
						auto : false,
						autotime : 3000,
						aniSpeed : 500
					}

					$.extend(org, options);

					var t = false;
					var k = 0;
					var _this = $(this);
					var tagwrp = $(org.tabId);
					var conwrp = $(org.conId);
					var tag = tagwrp.find(org.tabTag);
					var con = conwrp.find(org.conTag);
					var len = tag.length;
					var taght = parseInt(tagwrp.css("height"));
					var conwh = conwrp.get(0).offsetWidth;
					var conht = conwrp.get(0).offsetHeight;
					var curtag = tag.eq(org.dft);
					//prepare
					cur(curtag, org.curClass);
					con.eq(org.dft).show().siblings(org.conTag).hide();

					if (org.effact == "scrollx") {
						var padding = parseInt(con.css("padding-left"))
								+ parseInt(con.css("padding-right"));
						_this.css({
							"position" : "relative",
							"height" : taght + conht + "px",
							"overflow" : "hidden"
						});

						conwrp.css({
							"width" : len * conwh + "px",
							"height" : conht + "px",
							"position" : "absolute",
							"top" : taght + "px"
						});

						con.css({
							"float" : "left",
							"width" : conwh - padding + "px",
							"display" : "block"
						});
					}

					if (org.effact == "scrolly") {
						var padding = parseInt(con.css("padding-top"))
								+ parseInt(con.css("padding-bottom"));
						_this.css({
							"position" : "relative",
							"height" : taght + conht + "px",
							"overflow" : "hidden"
						});
						tagwrp.css({
							"z-index" : 100
						})
						conwrp.css({
							"width" : "100%",
							"height" : len * conht + "px",
							"position" : "absolute",
							"z-index" : 99
						})
						con.css({
							"height" : conht - padding + "px",
							"float" : "none",
							"display" : "block"
						});
					}

					tag.css({
						"cursor" : "pointer"
					}).each(
							function(i) {
								tag.eq(i).bind(
										org.act,
										function() {
											cur(this, org.curClass);
											k = i;
											switch (org.effact) {
											case "slow":
												con.eq(i).show("slow")
														.siblings(org.conTag)
														.hide("slow");
												break;
											case "fast":
												con.eq(i).show("fast")
														.siblings(org.conTag)
														.hide("fast");
												break;
											case "scrollx":
												conwrp.animate({
													left : -i * conwh + "px"
												}, org.aniSpeed);
												break;
											case "scrolly":
												conwrp.animate({
													top : -i * conht + taght
															+ "px"
												}, org.aniSpeed);
												break;
											default:
												con.eq(i).show().siblings(
														org.conTag).hide();
												break;
											//End of switch
											}
										})
							})

					if (org.auto) {
						var drive = function() {
							if (org.act == "mouseover") {
								tag.eq(k).mouseover();
							} else if (org.act == "click") {
								tag.eq(k).click();
							}
							k++;
							if (k == len)
								k = 0;
						}
						t = setInterval(drive, org.autotime);
					}
					//End of $.fn.tab	
				}
				//Drive
				$("#testtab").tab({
					tabId : "#tabtag",
					tabTag : "li",
					conId : "#tabcon",
					conTag : "div",
					act : "click",
					effact : "scrolly",
					dft : 0
				})

				$("#testtab2").tab({
					tabId : "#tabtag2",
					tabTag : "li",
					conId : "#tabcon2",
					conTag : "div",
					act : "click",
					effact : "scrollx",
					dft : 2
				})

				$("#testtab3").tab({
					tabId : "#tabtag3",
					tabTag : "li",
					conId : "#tabcon3",
					conTag : "div",
					auto : true,
					act : "mouseover"
				})

				$("#testtab4").tab({
					tabId : "#tabtag4",
					tabTag : "li",
					conId : "#tabcon4",
					conTag : "div",
					effact : "slow",
					act : "mouseover"
				})

			})
	/*     */
</script>
	</head>

	<body>
		<div class="cont">
			<div class="main">
				<h2>
					切换
				</h2>
				<h3>
					垂直滚动 点击触发
				</h3>
				<div class="testtab" id="testtab">
					<div id="tabtag" class="tabtag" style="position: relative;">
						<ul>
							<li class="cur">
								项目一
							</li>
							<li>
								项目二
							</li>
							<li>
								项目三
							</li>
							<li>
								项目四
							</li>
						</ul>
					</div>
					<div id="tabcon" class="tabcon">
						<div>
							<ul>
								<li>
									<a href="#nogo">日之泉杯:寿战两球张晓彬世界波 金德4:2逆转胜绿城</a>
								</li>
								<li>
									<a href="#nogo">投入超过国字号总和:09足协青少年足球预算500万</a>
								</li>
								<li>
									<a href="#nogo">09中超期待十大焦点战:鲁沪巅峰PK江浙德比劲爆</a>
								</li>
								<li>
									<a href="#nogo">泰达上下不惧魔鬼赛程 队员:早晚要打不如一锅端</a>
								</li>
							</ul>
						</div>
						<div>
							<ul>
								<li>
									<a href="#nogo">日之泉杯:寿战两球张晓彬世界波 金德4:2逆转胜绿城</a><span>03/06</span>
								</li>
								<li>
									<a href="#nogo">投入超过国字号总和:09足协青少年足球预算500万</a><span>03/06</span>
								</li>
								<li>
									<a href="#nogo">09中超期待十大焦点战:鲁沪巅峰PK江浙德比劲爆</a><span>03/06</span>
								</li>
								<li>
									<a href="#nogo">泰达上下不惧魔鬼赛程 队员:早晚要打不如一锅端</a><span>03/06</span>>
								</li>
							</ul>
						</div>
						<div>
							<ul>
								<li>
									<a href="#nogo">日本影星集合可爱清纯于一身</a>
								</li>
								<li>
									<a href="#nogo">中超联赛世界排名不敌新加坡</a>
								</li>
								<li>
									<a href="#nogo">中超联赛世界排名不敌新加坡</a>
								</li>
								<li>
									<a href="#nogo">中超联赛世界排名不敌新加坡</a>
								</li>
							</ul>

						</div>
						<div>
							<ul>
								<li>
									<a href="#nogo">日之泉杯:寿战两球张晓彬世界波 金德4:2逆转胜绿城</a><span>03/06</span>
								</li>
								<li>
									<a href="#nogo">投入超过国字号总和:09足协青少年足球预算500万</a><span>03/06</span>
								</li>
								<li>
									<a href="#nogo">09中超期待十大焦点战:鲁沪巅峰PK江浙德比劲爆</a><span>03/06</span>
								</li>
								<li>
									<a href="#nogo">泰达上下不惧魔鬼赛程 队员:早晚要打不如一锅端</a><span>03/06</span>>
								</li>
							</ul>
						</div>
					</div>
				</div>
				<pre>
    $("#testtab").tab({
	tabId:"#tabtag", //切换控制器的ID
	tabTag:"li",  //切换控制器标签
	conId:"#tabcon", //内容容器ID
	conTag:"div",  //容器标签
	act:"click", //点击触发 也可以不设置 默认就为click 设置为 mouseover则为划过
	effact: "scrolly" //效果为纵向滚动
	})
    </pre>
				<h3>
					水平滚动 点击触发 设置起始显示序列
				</h3>
				<div class="testtab" id="testtab2">
					<div id="tabtag2" class="tabtag" style="position: relative;">
						<ul>
							<li class="cur">
								项目一
							</li>
							<li>
								项目二
							</li>
							<li>
								项目三
							</li>
							<li>
								项目四
							</li>
						</ul>
					</div>
					<div id="tabcon2" class="tabcon">
						<div>
							<ul>
								<li>
									<a href="#nogo">日之泉杯:寿战两球张晓彬世界波 金德4:2逆转胜绿城</a>
								</li>
								<li>
									<a href="#nogo">投入超过国字号总和:09足协青少年足球预算500万</a>
								</li>
								<li>
									<a href="#nogo">09中超期待十大焦点战:鲁沪巅峰PK江浙德比劲爆</a>
								</li>
								<li>
									<a href="#nogo">泰达上下不惧魔鬼赛程 队员:早晚要打不如一锅端</a>
								</li>
							</ul>
						</div>
						<div>
							<ul>
								<li>
									<a href="#nogo">日之泉杯:寿战两球张晓彬世界波 金德4:2逆转胜绿城</a><span>03/06</span>
								</li>
								<li>
									<a href="#nogo">投入超过国字号总和:09足协青少年足球预算500万</a><span>03/06</span>
								</li>
								<li>
									<a href="#nogo">09中超期待十大焦点战:鲁沪巅峰PK江浙德比劲爆</a><span>03/06</span>
								</li>
								<li>
									<a href="#nogo">泰达上下不惧魔鬼赛程 队员:早晚要打不如一锅端</a><span>03/06</span>>
								</li>
							</ul>
						</div>
						<div>
							<ul>
								<li>
									<a href="#nogo">日本影星集合可爱清纯于一身</a>
								</li>
								<li>
									<a href="#nogo">中超联赛世界排名不敌新加坡</a>
								</li>
								<li>
									<a href="#nogo">中超联赛世界排名不敌新加坡</a>
								</li>
								<li>
									<a href="#nogo">中超联赛世界排名不敌新加坡</a>
								</li>
							</ul>

						</div>
						<div>
							<ul>
								<li>
									<a href="#nogo">日之泉杯:寿战两球张晓彬世界波 金德4:2逆转胜绿城</a><span>03/06</span>
								</li>
								<li>
									<a href="#nogo">投入超过国字号总和:09足协青少年足球预算500万</a><span>03/06</span>
								</li>
								<li>
									<a href="#nogo">09中超期待十大焦点战:鲁沪巅峰PK江浙德比劲爆</a><span>03/06</span>
								</li>
								<li>
									<a href="#nogo">泰达上下不惧魔鬼赛程 队员:早晚要打不如一锅端</a><span>03/06</span>>
								</li>
							</ul>
						</div>
					</div>
				</div>
				<pre>
    $("#testtab2").tab({
	tabId:"#tabtag2", //切换控制器的ID
	tabTag:"li", //切换控制器标签
	conId:"#tabcon2", //内容容器ID
	conTag:"div", //容器标签
	act:"click", //点击触发 也可以不设置 默认就为click 设置为 mouseover则为划过
	effact: "scrollx", //横向滚动效果
	<strong>dft:2</strong> //设置起始显示序列
	})
    </pre>
				<h3>
					无效果 自动切换
				</h3>
				<div class="testtab" id="testtab3">
					<div id="tabtag3" class="tabtag" style="position: relative;">
						<ul>
							<li class="cur">
								项目一
							</li>
							<li>
								项目二
							</li>
							<li>
								项目三
							</li>
							<li>
								项目四
							</li>
						</ul>
					</div>
					<div id="tabcon3" class="tabcon">
						<div>
							<ul>
								<li>
									<a href="#nogo">日之泉杯:寿战两球张晓彬世界波 金德4:2逆转胜绿城</a>
								</li>
								<li>
									<a href="#nogo">投入超过国字号总和:09足协青少年足球预算500万</a>
								</li>
								<li>
									<a href="#nogo">09中超期待十大焦点战:鲁沪巅峰PK江浙德比劲爆</a>
								</li>
								<li>
									<a href="#nogo">泰达上下不惧魔鬼赛程 队员:早晚要打不如一锅端</a>
								</li>
							</ul>
						</div>
						<div>
							<ul>
								<li>
									<a href="#nogo">日之泉杯:寿战两球张晓彬世界波 金德4:2逆转胜绿城</a><span>03/06</span>
								</li>
								<li>
									<a href="#nogo">投入超过国字号总和:09足协青少年足球预算500万</a><span>03/06</span>
								</li>
								<li>
									<a href="#nogo">09中超期待十大焦点战:鲁沪巅峰PK江浙德比劲爆</a><span>03/06</span>
								</li>
								<li>
									<a href="#nogo">泰达上下不惧魔鬼赛程 队员:早晚要打不如一锅端</a><span>03/06</span>>
								</li>
							</ul>
						</div>
						<div>
							<ul>
								<li>
									<a href="#nogo">日本影星集合可爱清纯于一身</a>
								</li>
								<li>
									<a href="#nogo">中超联赛世界排名不敌新加坡</a>
								</li>
								<li>
									<a href="#nogo">中超联赛世界排名不敌新加坡</a>
								</li>
								<li>
									<a href="#nogo">中超联赛世界排名不敌新加坡</a>
								</li>
							</ul>

						</div>
						<div>
							<ul>
								<li>
									<a href="#nogo">日之泉杯:寿战两球张晓彬世界波 金德4:2逆转胜绿城</a><span>03/06</span>
								</li>
								<li>
									<a href="#nogo">投入超过国字号总和:09足协青少年足球预算500万</a><span>03/06</span>
								</li>
								<li>
									<a href="#nogo">09中超期待十大焦点战:鲁沪巅峰PK江浙德比劲爆</a><span>03/06</span>
								</li>
								<li>
									<a href="#nogo">泰达上下不惧魔鬼赛程 队员:早晚要打不如一锅端</a><span>03/06</span>>
								</li>
							</ul>
						</div>
					</div>
				</div>
				<pre>
    $("#testtab3").tab({
	tabId:"#tabtag3",
	tabTag:"li",
	conId:"#tabcon3",
	conTag:"div",
	<strong>auto:true,</strong>
	act:"mouseover"
	})	
    </pre>
				<h3>
					&quot;slow&quot;效果
				</h3>
				<div class="testtab" id="testtab4">
					<div id="tabtag4" class="tabtag" style="position: relative;">
						<ul>
							<li class="cur">
								项目一
							</li>
							<li>
								项目二
							</li>
							<li>
								项目三
							</li>
							<li>
								项目四
							</li>
						</ul>
					</div>
					<div id="tabcon4" class="tabcon">
						<div>
							<ul>
								<li>
									<a href="#nogo">日之泉杯:寿战两球张晓彬世界波 金德4:2逆转胜绿城</a>
								</li>
								<li>
									<a href="#nogo">投入超过国字号总和:09足协青少年足球预算500万</a>
								</li>
								<li>
									<a href="#nogo">09中超期待十大焦点战:鲁沪巅峰PK江浙德比劲爆</a>
								</li>
								<li>
									<a href="#nogo">泰达上下不惧魔鬼赛程 队员:早晚要打不如一锅端</a>
								</li>
							</ul>
						</div>
						<div>
							<ul>
								<li>
									<a href="#nogo">日之泉杯:寿战两球张晓彬世界波 金德4:2逆转胜绿城</a><span>03/06</span>
								</li>
								<li>
									<a href="#nogo">投入超过国字号总和:09足协青少年足球预算500万</a><span>03/06</span>
								</li>
								<li>
									<a href="#nogo">09中超期待十大焦点战:鲁沪巅峰PK江浙德比劲爆</a><span>03/06</span>
								</li>
								<li>
									<a href="#nogo">泰达上下不惧魔鬼赛程 队员:早晚要打不如一锅端</a><span>03/06</span>>
								</li>
							</ul>
						</div>
						<div>
							<ul>
								<li>
									<a href="#nogo">日本影星集合可爱清纯于一身</a>
								</li>
								<li>
									<a href="#nogo">中超联赛世界排名不敌新加坡</a>
								</li>
								<li>
									<a href="#nogo">中超联赛世界排名不敌新加坡</a>
								</li>
								<li>
									<a href="#nogo">中超联赛世界排名不敌新加坡</a>
								</li>
							</ul>

						</div>
						<div>
							<ul>
								<li>
									<a href="#nogo">日之泉杯:寿战两球张晓彬世界波 金德4:2逆转胜绿城</a><span>03/06</span>
								</li>
								<li>
									<a href="#nogo">投入超过国字号总和:09足协青少年足球预算500万</a><span>03/06</span>
								</li>
								<li>
									<a href="#nogo">09中超期待十大焦点战:鲁沪巅峰PK江浙德比劲爆</a><span>03/06</span>
								</li>
								<li>
									<a href="#nogo">泰达上下不惧魔鬼赛程 队员:早晚要打不如一锅端</a><span>03/06</span>>
								</li>
							</ul>
						</div>
					</div>
				</div>
				<pre>
    $("#testtab4").tab({
	tabId:"#tabtag4",
	tabTag:"li",
	conId:"#tabcon4",
	conTag:"div",
	<strong>effact: "slow"</strong>
	})	
    </pre>
			</div>
		</div>

	</body>
</html>

?

  相关解决方案