Add or remove tab in tabs widget of JQuery

luozhangwen

于 2014-04-03 21:36:14 发布

阅读量1.6k

点赞数

分类专栏： javaScript

本文链接：https://blog.csdn.net/luozhangwen/article/details/22896825

版权

javaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Tabs - Simple manipulation</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.10.2.js"></script>
	<script src="../../ui/jquery.ui.position.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.button.js"></script>
	<script src="../../ui/jquery.ui.tabs.js"></script>
	<script src="../../ui/jquery.ui.dialog.js"></script>*
	<link rel="stylesheet" href="../demos.css">
	<style>
	#tabs { margin-top: 1em; }
	#tabs li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; }
	#add_tab { cursor: pointer; }
	</style>
	<script>
	$(function() {
		var tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>";
		var tabCounter = 1;

		var tabs = $( "#tabs" ).tabs();

		// actual addTab function: adds new tab using the input from the form above
		function addTab() {
			var label = tabCounter;
			var id = "tabs-" + tabCounter;
			var li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) );
			tabs.find( ".ui-tabs-nav" ).append( li );
			tabs.append( "<div id='" + id + "'></div>" );
			$("#"+id).load('test.html');
			tabs.tabs( "refresh" );
			tabCounter++;
		}

		// addTab button: just opens the dialog
		$( "#add_tab" ).click(function() {
			addTab();
		});

		// close icon: removing the tab on click
		tabs.delegate( "span.ui-icon-close", "click", function() {
			var panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" );
			$( "#" + panelId ).remove();
			tabs.tabs( "refresh" );
		});
	});
	</script>
</head>
<body>

<button id="add_tab">Add Tab</button>

<div id="tabs">
	<ul>
	</ul>
</div>

</body>
</html>

luozhangwen

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Add or remove tab in tabs widget of JQuery

jQuery UI Tabs - Simple manipulation * #tabs { margin-top: 1em; } #tabs li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; } #add_tab { cursor: pointer; }
复制链接

扫一扫

专栏目录