tab选项卡的使用 -

huangshanghua

浏览: 57012 次
性别:
来自: 广州

最近访客更多访客>>

sinat_28238111

tqsq2005

u012551686

sz_hhcucumber

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

tab选项卡的使用

博客分类：

jquery html css javascript tab

主页面：

<#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

如果是这个主页面产生的tab，那么子页面可以通过parent.addTab方法增加其它tab。