基於css+div+jquery的可伸縮層和選項卡

一般來說，層的特效主要由css+js事件來實現

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="script/jquery-1.4.4.min.js"></script>
<title>無標題文檔</title>
<script type="text/javascript">
/**
 * 通過修改class屬性達到縮小對話框目地
 */
function old_doMinDialog(dialg, contextDialog){
	$("#"+dialg).attr("class", "div_common_min");
	$("#"+contextDialog).attr("class", "div_context_min");
}

/**
 * 通過修改class屬性達到放大對話框目地
 */
function old_doMaxDialog(dialg, contextDialog){
	$("#"+dialg).attr("class", "div_common_max");
	$("#"+contextDialog).attr("class", "div_context_max");
}

//主對話框
var dialog_max_height = "350px";
var dialog_min_height = "100px";

//內容區
var contextDialog_max_height = "330px";
var contextDialog_min_height = "80px";

/**
 * 
 */
function doMinDialog(dialg, contextDialog){
	$("#"+dialg).height(dialog_min_height);
	$("#"+contextDialog).height(contextDialog_min_height);
}

/**
 *
 */
function doMaxDialog(dialg, contextDialog){
	$("#"+dialg).height(dialog_max_height);
	$("#"+contextDialog).height(contextDialog_max_height);
}

/**
 * 放大或縮小當前對話框
 */
function doMaxOrMinDialog(dialg, contextDialog, lab){
	if($("#"+dialg).height()+"px" != dialog_max_height){
		$("#"+dialg).height(dialog_max_height);
		$("#"+contextDialog).height(contextDialog_max_height);
		$(lab).html(" - ");
		$(lab).attr("title", "縮小");
	}else{
		$("#"+dialg).height(dialog_min_height);
		$("#"+contextDialog).height(contextDialog_min_height);
		$(lab).html(" + ");
		$(lab).attr("title", "放大");
	}
}


//***選項卡***
var item_select_css = "item_select";
var item_noSelect_css = "item_noSelect";

var tab_context_show_css = "tab_context_show";
var tab_context_hidden_css = "tab_context_hidden";

/**
 * 切換選項卡
 */
function selectTab(n){
	for(var i=0; i<4; i++){
		if(i == n){
			$("#tab"+i).attr("class", item_select_css);
			$("#context"+i).attr("class", tab_context_show_css);
		}else{			
			$("#tab"+i).attr("class", item_noSelect_css);
			$("#context"+i).attr("class", tab_context_hidden_css);
		}
	}
}
</script>

<style type="text/css">
.div_frame{
	width:600px;	
}

.div_blank{
	width:100%;
}

.div_title{
	width:100%;
	height:20px;
	background-color:#E4E4E4;	
}

.div_title0{
	width:100%;
	height:20px;
	background-color:#E4E4E4;
	text-align:center;	
	margin: 0 auto;
}

.div_common_title{	
	font-size:12px;
	float:left;	
	height:100%;		
}

.div_common_title0{
	text-align:center;
	margin: 0 auto;	
	font-size:12px;
	float:left;	
	height:100%;
	width:200px;	
}

.div_common_oper{
	font-size:20px;
	color:#000000;
	width:30px;
	height:100%;
	float:right;
}

.div_common_oper0{
	font-size:20px;
	color:#000000;
	width:70px;
	height:100%;
	float:right;
}

.div_common_max{
	border: 1px solid #a5a4a4;
	width:100%;
	height:350px;
}

.div_common_min{
	border: 1px solid #a5a4a4;
	width:100%;
	height:100px;
}	

.div_context_max{
	font-size:14px;
	width:100%;
	height:330px;
	overflow:auto;
}

.div_context_min{
	font-size:14px;
	width:100%;
	height:80px;
	overflow:auto;
}

.div_area{
	width:100%;	
}

.list{
	width:100%;	
	border-collapse:collapse;
	margin:0 auto;
}

.list_title{
    border:#a5a4a4 solid;
	border-width:1px 1px 0 1px;
	height:27px;		
}

.list_title .img {
    background:url(images/table_title.jpg) no-repeat left top;
	padding:8px 0 0 50px;
}

.list_context{
	width:100%;
	border: 1px #e5e5e5 solid;
	border-width:1px;
	margin:0 auto;
}

.list_context th{
	height:27px;
	font-weight:both;
	text-align:center;
	background-image:url(images/tab_th.jpg);
	color:#000;
	vertical-align:inherit;
	border: 1px #d5d5d5 solid;
	border-width: 0 1px 0 0;
	border-bottom:1px #a5a4a4 solid;
}

.list_context td{
	height:24px;
	border: 1px #e5e5e5 solid;
	border-width: 0 1px 1px 0;
	text-align:center;
}

.tr0{
	border:1px solid #CCCCCC;
}

.td0{
	border:1px solid #CCCCCC;
	width:25%;
}

.item_noSelect{
	font-size:12px;	
	width:100%;
	height:18px;
	cursor:pointer;
	text-align:center;
	color:#666666;
	background-color:#FFFFFF;
}

.item_select{
	font-size:12px;
	width:100%;
	height:18px;
	text-align:center;
	color:#FFFFFF;
	background-color:#666666;
}

.tab_context_hidden{
	display:none;
}

.tab_context_show{
	width:100%;
	height:300px;
	overflow:auto;
	display:block;
}
-->
</style>
</head>

<body>
<div class="div_frame">
<div class="div_blank">
 
</div>

<div id="dialog0" class="div_common_min">
	<div class="div_title">
		<div class="div_common_title">
		標題0
		</div>
	
		<div class="div_common_oper">
			<label οnclick="doMaxOrMinDialog('dialog0', 'contextDialog0', this)" title="放大"> + </label>
			<!--
			<label οnclick="doMinDialog('groupDialog', 'groupContextDialog')" title="縮小"> - </label>
			<label οnclick="doMaxDialog('groupDialog', 'groupContextDialog')" title="放大"> + </label>
			-->
		</div>
	</div>
	
	<div id="contextDialog0" class="div_context_min">
		<center>
		<h2>
		內容區
		</h2>
		</center>
	</div>
</div>

<div class="div_blank">
 
</div>

<div id="dialog1" class="div_common_min">
	<div class="div_title">
		<div class="div_common_title">
		標題1
		</div>
	
		<div class="div_common_oper0">
			<label οnclick="doMinDialog('dialog1', 'contextDialog1')" title="縮小"> - </label>
			<label οnclick="doMaxDialog('dialog1', 'contextDialog1')" title="放大"> + </label>
		</div>
	</div>
	
	<div id="contextDialog1" class="div_context_min">
		<center>
		<h2>
		內容區
		</h2>
		</center>
	</div>
</div>

<div class="div_blank">
 
</div>
<div class="div_blank">
 
</div>

<div class="div_blank">
<center>
選項卡
</center>
</div>
<div class="">
<table class="list">
	<tr class="tr0">
		<td class="td0"> <div id="tab0" class="item_select" οnclick="selectTab(0)">卡0</div> </td>
		<td class="td0"> <div id="tab1" class="item_noSelect" οnclick="selectTab(1)">卡1</div> </td>
		<td class="td0"> <div id="tab2" class="item_noSelect" οnclick="selectTab(2)">卡2</div> </td>
	</tr>
	
	<tr class="tr0">
		<td colspan="3">
			<div id="context0" class="tab_context_show">
			<center>
			<h2>
			卡0內容區
			</h2>
			</center>
			</div>
			
			<div id="context1" class="tab_context_hidden">
			<center>
			<h2>
			卡1內容區 <br/>
			卡1內容區
			</h2>
			</center>			
			</div>
			
			<div id="context2" class="tab_context_hidden">
			<center>
			<h2>
			卡2內容區 <br/>
			卡2內容區 <br/>
			卡2內容區
			</h2>
			</center>
			</div>
		</td>
	</tr>
<table>		
</div>


</div>
</body>
</html>

AFer198215

發佈了65 篇原創文章 · 獲贊 18 · 訪問量 28萬+

私信關注

基於css+div+jquery的可伸縮層和選項卡

開源高性能結構化日誌模塊NanoLog

【簡寫Mybatis-02】註冊機的實現以及SqlSession處理

手繪二維碼

.NET藉助虛擬網卡實現一個簡單異地組網工具

TDS for Sybase協議分析

密碼和Java中的加解密之MD5加點鹽

zTree異步加載簡單demo

幹掉釣魚網站不解釋

JSONArrayBuilder:用於生成格式簡單的json array字符串

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

基於css+div+jquery的 可伸縮層和選項卡

基於css+div+jquery的可伸縮層和選項卡