一般来说,层的特效主要由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>