`
faraway
  • 浏览: 2862 次
  • 来自: ...
最近访客 更多访客>>
社区版块
存档分类
最新评论

为jquery-ui的tab添加一个方法

阅读更多
需要为jquery-ui中的tab添加一个判断标签存在的方法exist,使用的是jquery&ui1.8版本。(听说1.9的ui要重新设计tabs组件,很期待啊)
<%@ page language="java" contentType="text/html; charset=utf-8"  pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Jsp Demo</title>
<script type="text/javascript" src="script/jquery.js"></script>
<script type="text/javascript" src="script/jquery-ui.js"></script>
<link rel="stylesheet" href="style/jquery.ui.core.css">
<link rel="stylesheet" href="style/jquery.ui.tabs.css">
<style type="text/css">
.tabs{
	width:100%;
	height:90%;
}
.tab-li{
	display:inline;
	margin:5px 5px 0 0;
}
.tab-close{
	width:3px;
	height:3px;
}

</style>
<script type="text/javascript">
<!--
$(function(){
	var $tabs =$("#div_tabs").tabs({
		tabTemplate:"<li label='\#{label}' class='tab-li'><a href='\#{href}'>\#{label}</a><span class='tab-close'>X</span></li>",
		remove:function(event,ui){
			alert(1);
		}
	});
	$.extend($.ui.tabs.prototype, {
		exist: function(tabname) {
			var isexist=-1;
			$("#div_tabs").find("ul:first-child").find("li").each(function(index,elm){
				if(this.label==tabname){
					isexist=index;
					return false;
				}
			});
			return isexist;
		}
	});
	$(".tab-li .tab-close").live("click",function(){
		var index = $( ".tab-li", $tabs ).index( $( this ).parent() );
		$tabs.tabs( "remove", index );
	});
	
	
	$("#addSelector").change(function(){
		addTab("content.jsp",this.value);
	});
});

function addTab(url,tabName){
	var ind=$("#div_tabs").tabs( "exist",tabName);
	if(ind==-1){
		$("#div_tabs").tabs( "add", url, tabName);
	}else{
		$("#div_tabs").tabs( "select", ind);
	}
}
-->
</script>
<style type="text/css">
#div_tabs ul{
	background-color:#f5f5f5;
}
</style>
</head>
<body>
<select id="addSelector">
<option>请选择</option>
<option value="tab1">tab 1</option>
<option value="tab2">tab 2</option>
</select>
	<div id="div_tabs" class="tabs">
	<ul style="padding:0 0 0 8px;">
	</ul>
	</div>
</body>
</html>

代码相对简单,只是作为一个测试demo。
分享到:
评论

相关推荐

    jquery-ui-1.10.3.custom.rar

    这个压缩包“jquery-ui-1.10.3.custom.rar”包含了jQuery UI的1.10.3版本,它是一个定制版,意味着开发者可以根据项目需求选择特定的组件和主题,从而减少不必要的代码加载,提升网页性能。 首先,让我们来了解一下...

    jquery-ui-1.10.3.custom3

    jQuery UI 是一个基于 jQuery JavaScript 库的交互式用户界面组件集合,它提供了丰富的视觉效果和易于使用的API,使得开发者能够轻松创建出功能强大且美观的网页应用。在"jquery-ui-1.10.3.custom3"这个压缩包中,...

    jquery-ui-1.8.16.custom.zip

    1.8.16版本是该框架的一个稳定版本,为开发者提供了稳定的API接口和良好的兼容性。 2. **CSS**:压缩包中的"css"文件夹包含了jQuery UI的样式表,用于定制和美化UI组件的外观。这些CSS文件使得开发者能够轻松地调整...

    jquery-ui-1.8.16.custom

    用户可以通过在线构建工具(如 http://jqueryui.com/download/)选择所需的组件、主题和语言,以减少最终文件的大小,提高页面加载速度。在压缩包中,"development-bundle" 文件夹内包含未压缩的源代码,便于开发者...

    jQuery-ui-tabs 分页相关

    在网页开发中,jQuery UI 是一个非常流行的 JavaScript 库,它扩展了 jQuery 的功能,提供了丰富的用户界面组件。其中,`jQuery-ui-tabs` 是一个用于创建美观、交互式的标签页组件。本文将深入探讨 `jQuery-ui-tabs`...

    jquery-ui.rar

    jQuery UI 是一个基于 jQuery JavaScript 库的开源项目,它提供了丰富的用户界面组件,旨在帮助开发者构建功能强大且具有优秀用户体验的网页应用。这个名为 "jquery-ui.rar" 的压缩包文件很可能包含了 jQuery UI 的...

    bootstrap-closable-tab tab可关闭组件

    `bootstrap-closable-tab` 是一个扩展功能,为Bootstrap的Tab添加了可关闭的特性。 这个`bootstrap-closable-tab`组件主要关注于提供一种方式,使得用户可以通过点击一个“X”按钮来关闭当前激活的Tab。这在需要...

    课题-jQuery-LigerUI-使用教程入门篇.doc

    总的来说,jQuery LigerUI 是一个轻量级且功能丰富的前端框架,对于需要快速构建Web前端界面的开发者来说,它提供了一套完整且易于使用的工具集。通过熟练掌握LigerUI,开发者能够轻松实现各种复杂的界面交互效果,...

    jquery ui demo

    jQuery UI 是一个基于 jQuery JavaScript 库的开源项目,它提供了丰富的用户界面组件和交互效果,为开发者构建功能完善的网页应用程序提供了极大的便利。这个“jquery ui demo”正是一个展示jQuery UI功能的实例集合...

    jqueryui tabs

    jQuery UI 是一个基于 jQuery 库的强大用户界面工具集,它提供了许多可自定义的组件,如对话框(Dialog)、滑块(Slider)、日期选择器(Datepicker)以及我们这里关注的选项卡(Tabs)。`jQuery UI Tabs` 是一个...

    jquery ui 1.8.18

    jQuery UI是基于JavaScript库jQuery的一个扩展,它提供了一系列丰富的用户界面组件和可定制的主题,为开发者构建交互式网页应用提供了强大的支持。本篇文章将深入探讨jQuery UI 1.8.18版本中的核心特性、组件以及...

    jquery we ui 完整包(带demo)

    总之,jQuery WeUI 提供了一个高效、一致的开发环境,尤其适合微信生态内的Web应用。通过这个完整包,开发者不仅可以得到WeUI的所有组件,还能通过示例代码快速上手,提高开发效率。在实际项目中,合理利用WeUI,将...

    jquery-tab-image-text.zip

    标题中的"jquery-tab-image-text.zip"表明这是一个使用jQuery库实现的图像和文本切换效果的压缩文件。这通常涉及到网页UI设计中的选项卡组件,它允许用户通过点击不同的标签来显示或隐藏相关的图像和文本内容。...

    课题-jQuery-LigerUI-使用教程入门篇.pdf

    总的来说,jQuery LigerUI是一个高效且易用的前端UI库,它简化了前端开发过程,使开发者能够快速构建出专业级别的Web界面。无论是新手还是经验丰富的开发者,都可以借助LigerUI提升开发效率,实现优雅的前端设计。

    jquery_ui_tabicons小图标

    在IT行业中,jQuery UI是一个广泛使用的前端开发框架,它提供了丰富的用户界面组件,极大地提高了Web应用的交互性和用户体验。这个框架基于JavaScript库jQuery,并且扩展了各种各样的UI元素,如对话框、滑块、进度条...

    jQuery tabs 纵向显示

    在网页设计中,jQuery UI 的 tabs 是一个非常实用的功能,它允许我们将多个内容区域组织成可切换的选项卡,提供了一种整洁的方式来展示大量信息。然而,标准的 jQuery tabs 默认是横向排列的,但有时为了适应页面...

    JQueryUI,EasyUI一些控件的使用

    JQueryUI的核心优势在于其一致性、可定制性和跨浏览器兼容性,使得开发者可以轻松地为网页添加高级交互功能。 表单是Web应用中不可或缺的一部分。在JQueryUI中,你可以使用Autocomplete组件为输入框提供自动完成...

    jquery写的tab标签

    在这个主题中,我们主要关注如何使用jQuery库来实现一个功能完备、易于理解的Tab标签组件。jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理以及动画效果,使得JavaScript编程更为简洁。 首先,让我们...

    jQuery-选项卡框架

    - 首先,可以通过`.not()`方法和`.addClass()`移除所有选项卡内容的隐藏样式,并给第一个选项卡添加激活样式。 - 使用`.on('click')`监听选项按钮的点击事件。 - 在事件处理函数中,获取当前点击的选项按钮,通过...

    jquery easy ui 框架

    例如,创建一个基本的Tab标签页,可以在HTML中定义一个div,并设置class为"easyui-tabs",再在其中添加各个面板,每个面板都是一个div,通过"data-title"属性指定标题。在JavaScript中,调用$.fn.tabs方法进行初始化...

Global site tag (gtag.js) - Google Analytics