tab选项卡的使用

最新推荐文章于 2021-09-05 21:14:36 发布

hsh_1987

最新推荐文章于 2021-09-05 21:14:36 发布

阅读量238

点赞数

分类专栏： JS 文章标签： jquery html css javascript tab ViewUI

本文链接：https://blog.csdn.net/hsh_1987/article/details/84265331

版权

JS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

主页面：


<#setting url_escaping_charset='utf-8'>
<html >
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="${base}/css/main.css"/>
<script type="text/javascript" src="${base}/jslib/jquery-1.4.2.js"></script>
<link rel="stylesheet" type="text/css" href="${base}/jslib/tabView/tabView.css?#{(randomInt)?default(0)}"/>
<script type="text/javascript" src="${base}/jslib/tabView/tabView.js"></script>
<script type="text/javascript" src="${base}/js/project/ds/billfollow/dictionary/DsbfStorecodeuserMain.js?#{(randomInt)?default(0)}"></script>
</head>
	<body margin="0" id="bodyid">
		<input type="hidden" id="pageContex"  value="${base}"/>
		<div id="tab_menu"></div>
		<div id="dsbfStorecodeuserMainPage" style="height:1000px;"></div>
		<input type="hidden" id="hiddentitles" name="hiddentitles" value=""/>
	</body>
</html>

主页面JS：


var pageContex = "";
var tabView = null;
$(document).ready(function(){
	pageContex=$("#pageContex").attr("value");
	ListenEvents();
});

function ListenEvents(){
	$(function() {
		tabView = new TabView( {
			containerId :'tab_menu',
			hiddenTabsId:'hiddentitles',
			pageid :'dsbfStorecodeuserMainPage',
			cid :'tab_main',
			position :'top'
		});
		var urlLink = pageContex+"/billfollow/dictionary/storecodeuserListPage";
		tabView.add( {
			id :'storecodeuserListPage',
			title :"库位仓管员信息",
			url :urlLink,
			isClosed :false
		});			
	}); 	

}

//----------------------------------------tabView function
//增加Tab的函数
//参数:tabtitle----标题名称
//参数:taburl------url的名称
//参数:tabid-------tab的id号
//参数:showClose---是可关闭---boolean类型的参数
function addTab(tabtitle,taburl,tabId,showClose){
	tabView.add( {
		title :tabtitle,
		url :taburl,
		id :tabId,
		isClosed :showClose
	});	
}
//关闭tab
function closeTab(tabId){
	tabView.close(tabId);
}
//-------------------------------------------end tabView function