`
xiaozhiwz
  • 浏览: 16188 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

jquery标签页的简单实现

阅读更多

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 标签页

    jQuery 提供了一些库和插件,可以帮助开发者轻松实现功能丰富的标签页组件。 在 jQuery 标签页中,我们可以使用基本的 HTML 结构来定义各个标签和对应的面板,然后通过 jQuery 代码来实现动态切换和管理。通常,一...

    基于jQuery实现多标签页切换的效果(web前端开发)

    尽管本文主要介绍了使用jQuery实现多标签页切换的方法,但原生JavaScript方案同样可行。原生JavaScript实现多标签页切换主要通过以下步骤: 1. **事件监听**:为标签元素添加点击事件监听。 2. **DOM操作**:通过`...

    JQuery_标签页效果

    接下来,我们将通过一个简单的实例来说明如何实现JQuery的标签页效果: 1. **HTML结构**:首先,我们需要构建HTML结构,包括标签页的标题和内容区域。通常,我们会使用`&lt;ul&gt;`和`&lt;li&gt;`来表示标题,`&lt;div&gt;`或`...

    css+jquery实现简单标签页效果html代码

    css+jquery实现最简单标签页效果html代码,效果很好

    jquery 实现的等待加载页面

    开发者通常会在`&lt;head&gt;`标签内引入jQuery库,并在`&lt;body&gt;`标签的`$(document).ready()`函数中编写加载动画的初始化代码,确保在页面内容加载之前显示加载提示。 `更多素材.url`是一个快捷方式或书签,指向更多的...

    jQuery打开多个标签页代码

    "jQuery打开多个标签页代码"是一个实用的功能,常用于构建多标签页的后台管理系统,提供用户友好的交互体验。这个功能允许用户在单个浏览器窗口内打开并切换多个页面,就像桌面操作系统中的多任务窗口一样。 首先,...

    jQuery多个标签页面打开代码.zip

    本资源“jQuery多个标签页面打开代码.zip”聚焦于利用jQuery实现一个功能丰富的多标签页面系统,允许用户在一个应用内同时打开多个页面,类似于浏览器中的标签页功能。这种设计可以提供更好的用户体验,尤其是在需要...

    jQuery打开多个标签页

    下面是一个简单的示例,展示如何使用jQuery打开一个新标签页: ```javascript $('a[target="_blank"]').click(function(event) { event.preventDefault(); // 阻止默认的链接行为 var url = $(this).attr('href')...

    jQuery实现输入框回车添加标签代码.zip

    在本文中,我们将深入探讨如何使用jQuery来实现一个功能丰富的输入框,用户可以在其中通过回车键添加标签,同时支持预设标签的选择、显示和删除,并能有效防止标签的重复添加。这个功能常用于博客系统、论坛或者社交...

    jQuery实现多个标签页面打开效果.zip

    在本项目中,"jQuery实现多个标签页面打开效果"是一个示例,展示了如何利用JavaScript库jQuery来创建一个类似浏览器多标签页的交互体验。这个压缩包包含了一个使用须知的文本文件(使用须知.txt)以及一个可能为HTML...

    jQuery打开多个标签页代码.zip

    "jQuery打开多个标签页代码"这个主题是关于如何利用jQuery实现一个功能,让用户能够在网页中一次性打开多个新标签页。在Web开发中,这种功能常见于链接分享、多页面跳转或者数据对比等场景。 首先,要实现这个功能...

    Jquery实现tab页选项卡

    本教程将详细介绍如何使用jQuery来创建一个简单的Tab页选项卡。 首先,我们需要在HTML结构中定义Tab页的基本布局。通常,这包括一个包含多个标签(`&lt;li&gt;`)的无序列表(`&lt;ul&gt;`),每个标签都有一个链接(`&lt;a&gt;`)...

    jquery写的简单的tab标签切换

    本文将详细解释如何使用jQuery实现一个简单的Tab切换效果,并提供学习和参考的价值。 首先,我们需要理解jQuery的基本语法和概念。jQuery对象通过$符号创建,它可以用于选择DOM元素、操作DOM、绑定事件和执行动画。...

    jQuery实现简单的tab标签页效果

    在本文中,我们将深入探讨如何使用jQuery来实现一个简单的tab标签页效果。这个效果涉及到jQuery的基本元素遍历、样式动态操作以及事件处理等技术。首先,我们来看一下HTML结构: ```html &lt;li class="current"&gt;...

    唯美表白动画代码jQuery跟Html5实现

    在"唯美表白动画"项目中,jQuery被用来实现页面元素的动态展示和交互效果。例如,通过`.fadeIn()`和`.fadeOut()`方法可以实现元素的淡入淡出效果,`.animate()`函数则可以自定义复杂的平滑动画,增加视觉吸引力。...

    简单实用的jQuery表单输入框浮动标签动画特效插件

    "简单实用的jQuery表单输入框浮动标签动画特效插件"就是这样一个致力于提升表单交互体验的工具。这个插件利用JavaScript库jQuery的力量,为表单输入框提供了创新的浮动标签效果,使得用户在填写信息时能更加清晰、...

    基于jQuery/JS的简易网页计算器

    【标题】"基于jQuery/JS的简易网页计算器"揭示了这个项目的核心——使用JavaScript和jQuery技术来实现一个基本的在线计算功能。JavaScript是一种在客户端浏览器上运行的脚本语言,常用于网页交互和动态效果的实现,...

    jQuery结合CSS实现简单Tabs选项卡效果

    本教程将详细讲解如何使用jQuery库和CSS来实现一个简单的Tabs选项卡效果。 首先,让我们理解jQuery的核心概念。jQuery是一个轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。...

    jQuery标签页Tab选项卡切换

    6. **插件化开发**:jQuery标签页插件通常是模块化的,开发者可以通过简单的配置项自定义样式、动画速度、默认活动标签等。这些插件可能包含初始化函数、公共方法和事件接口,便于与其他代码集成。 7. **响应式设计...

Global site tag (gtag.js) - Google Analytics