jquery标签页的简单实现

HotStrong

2014-07-07

1.jquery标签页：index.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#tabs { margin-top: 1em; }
#tabs li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; }
</style>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Tab示例</title>
		<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
		<script	src="http://code.jquery.com/jquery-1.10.2.js"></script>
		<script	src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
        <script type="text/javascript" src="index.js"></script>
        
</head>
    <body>
        <div id="wrapper">
            <div id="tabs">
            	<ul>
            		<li><a href="#orderList">标签页列表</a></li>
            	</ul>
            	<div id="orderList">
            		<ul class="list">
                        <li><a href="#tab-1">Tab1</a></li>
                        <li><a href="#tab-2">Tab2</a></li>
                        <li><a href="#tab-3">Tab3</a></li>
                        <li><a href="#tab-4">Tab4</a></li>
                    </ul>
            	</div>
            </div>
        </div>
    </body>
</html>

2.jquery index.js文件

$(function() {
//定义li元素的模板
var tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>";
//标签的总数
var tabCounter = 1;
$( document ).ready( function() {
    var tabs = $( "#tabs" ).tabs();
    
    // 动态绑定关闭tab的事件
    tabs.delegate( "span.ui-icon-close", "click", function(e) {
	var panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" );
	$( "#" + panelId ).remove();
	tabs.tabs( "refresh" );
	//关闭标签页总数减一
	tabCounter--;
    });
    
    // 点击添加tab页
    $( ".list a" ).click( function( e ) {
        e.preventDefault();
        var href = $( this ).attr( "href" );
        var orderid = href.substring( href.indexOf( "-" ) + 1 );
        var tabid = "tab-" + orderid;
        var url = "tab" + orderid + ".html";
        var label = "标签页-" + orderid;
        addTab( tabid, url, label );
    });
    
});

// 添加tab的接口
function addTab( id, url, label ) {
    var mainTab = $( "#tabs" );
    var added = false;
	var active_id = 0;
	var li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) );
    $( "iframe", mainTab ).each( function( i ) {
        var src = this.src.substring( this.src.lastIndexOf( "/" ) + 1 );
        if ( src == url ) {
            added = $( this );
			//将已打开的标签页设为活跃状态
			mainTab.tabs( { active:i+1});
        }
    });
    //如已存在的标签页时返回
    if ( added ) {
        return;
    }
	tabCounter++;
    mainTab.find( ".ui-tabs-nav" ).append( li );
    var panel = $( "<div/>" ).attr({
        "id": id
    }).appendTo( mainTab );
	//为标签页添加页面内容
    $( "<iframe/>" ).attr({
        "frameBorder": "0",
        "scrolling": "no",
        "allowTransparency": "true",
        "src": url
    }).css({
        "width": "100%",
        "height": "500px"
    }).load( function() {
        var iframe = $( this );
        iframe.height( iframe.contents().find( "body" ).height(200));
    }).appendTo( panel );
	mainTab.tabs( "refresh" );
	//将新添加的标签页设为活跃状态
	mainTab.tabs( { active:tabCounter-1});
}

});

3.以上即为jquery标签页的简单实现，注释已经写得很清楚，如有不懂可下载测试效果。

注：引用jquery的js是用jquery CDN，所以必须在联网情况写测试。或者可自行下载jquery的相关js，修改引用。

jquery margin tabs