`
czpae86
  • 浏览: 721691 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

折叠收缩 javascript+css+html

 
阅读更多

效果:


使用的图标:


 

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    
    <title>CPM案件池待办</title>
    <link rel="icon" href="<%=request.getContextPath()%>/favicon.ico" type="image/x-icon" />
	<link rel="shortcut icon" href="<%=request.getContextPath()%>/favicon.ico" type="image/x-icon" />
   	<link rel="bookmark" href="<%=request.getContextPath()%>/favicon.ico" type="image/x-icon" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta id="author" content="skywin" />
	<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/view/pacTask/resource/common.css" />
	<script type="text/javascript" src="<%=request.getContextPath()%>/view/pacTask/pactaskcommon.js"></script>
	<script type="text/javascript" src="<%=request.getContextPath()%>/view/pacTask/todoPage.js"></script>
	<style type="text/css">
		body{
			font-size : 12px;	
			background: #F6FAFF;	
			height : 100%;
		}
		
		.labeltd{
			text-align : right;
			width : 115px;
		}
		
		fieldset{
			padding:5px;
		}
		
		fieldset legend{
			font-weight : bold;
			cursor : hand;
			cursor : pointer;
		}
		
		.panel-t{
			width: 100%;
		}
		
		.panel-t input,textarea{
			width : 100%;
			border : 1px solid #CCCC99;
		}		
		
		.t-tool {
		    background: url("resource/images/tool-sprites.gif") no-repeat scroll 0 0 transparent;
		    cursor: pointer;
		    float: left;
		    height: 15px;
		    margin-left: 2px;
		    overflow: hidden;
		    width: 15px;
		}
		
		.t-tool-toggle {
		    background-position: 0 -75px;
		}
		
		.t-tool-toggle2 {
		    background-position: 0 -60px;
		}
	</style>
  </head>
  
  <body>
  	<div id="loading-mask" style="width:100%;height:100%;background:#f1f1f1;position:absolute;z-index:20000;left:0;top:0;">&#160;</div> 
     <div id="loading">
       <div class="loading-indicator">
	       <div>欢迎使用</div>
	       <img src="<%=request.getContextPath()%>/lib/ext/resources/images/default/grid/wait.gif" width="18" height="18" style="margin-right:5px;" align="absmiddle"/>
	       <span id="load-status" style="font-weight : normal;">正在加载数据,请稍候...</span>
       </div>
     </div>
	
    <div style="margin:70px;">
    	<!-- 基本信息 -->
    	<fieldset>
    		<legend><em class="t-tool t-tool-toggle">&nbsp;</em>基本信息</legend>
    		<table cellPadding="1" cellSpacing="1" border="0" class="panel-t">
    			<tr>
    				<td class="labeltd">纠纷案件名称:</td>
    				<td  colSpan="5" ><input type="text" id="caseName" /></td>
    			</tr>
    			<tr>
    				<td class="labeltd">案件号:</td>
    				<td colSpan="5" ><input type="text" id="caseNumber" /></td>
    			</tr>
    			
    			<tr>
    				<td class="labeltd">法律风险控制点:</td>
    				<td colSpan="5" ><textarea id="lawRiskName" rows="5" ></textarea><td>
    			</tr>
    			
    			<tr>
    				<td class="labeltd">其他法律风险点:</td>
    				<td colSpan="5" ><input type="text" id="otherLawRisk" /></td>
    			</tr>
    			
    			<tr>
    				<td class="labeltd">案件处理公司:</td>
    				<td colSpan="3"><input type="text" id="caseCompany" /></td>
    				<td class="labeltd">案件性质:</td>
    				<td><input type="text" id="caseKind"/></td>
    			</tr>
    			
    			<tr>
    				<td class="labeltd">案件关键字:</td>
    				<td colSpan="5" ><textarea rows="5" id="caseKeyWord"></textarea></td>
    			</tr>
    			
    			<tr>
    				<td class="labeltd">是否公开:</td>
    				<td><input type="text" id="isOpen"/></td>
    				<td class="labeltd">公司是否原告:</td>
    				<td><input type="text" id="isPlaintiff"/></td>
    				<td class="labeltd">是否反黑联盟案件:</td>
    				<td><input type="text" id="union"/></td>
    			</tr>
    			
    			<tr>
    				<td class="labeltd">案件状态:</td>
    				<td><input type="text" id="caseStatus"/></td>
    				<td class="labeltd">号码归属地:</td>
    				<td><input type="text" id="numCity"/></td>
    				<td class="labeltd">主审法官:</td>
    				<td><input type="text" id="judeg"/></td>
    			</tr>
    			<tr>
    				<td class="labeltd">标的金额:</td>
    				<td><input type="text" id="amount"/></td>
    				<td class="labeltd">处理人员:</td>
    				<td><input type="text" id="caseOwner"/></td>
    			</tr>
    		</table>
    	</fieldset>
    	
    	<!-- 案件资料 -->
    	<fieldset>
    		<legend><em class="t-tool t-tool-toggle">&nbsp;</em>案件资料</legend>
    		<table border=1 cellPadding=0 cellSpacing=0 style="margin:5px;width:840px;">
    			<tr><th width="40px" style="text-align:center;">序号</th><th width="480px" style="text-align:center;">名称</th><th width="90px"  style="text-align:center;">分类</th><th width="160px"  style="text-align:center;">上传时间</th><th width="70px"  style="text-align:center;">&#160;</th></tr>
    			<tbody id="case_files">
    			</tbody>    			
    		</table>
    	</fieldset>
    	
    	<!-- 一审信息 -->
    	<fieldset>
    		<legend><em class="t-tool t-tool-toggle">&nbsp;</em>一审信息</legend>
    		<table cellPadding="1" cellSpacing="1" border="0"  class="panel-t">
    			<tr>
    				<td class="labeltd">原告(申请人):</td>
    				<td><input type="text" id="plaintiff"/></td>
    				<td class="labeltd">被告(被申请人):</td>
    				<td><input type="text" id="defendant"/></td>
    				<td class="labeltd">第三人:</td>
    				<td><input type="text" id="third"/></td>
    			</tr>
    			
    			<tr>
    				<td class="labeltd">发生时间:</td>
    				<td><input type="text" id="beginDate"/></td>
    				<td class="labeltd">终止时间:</td>
    				<td><input type="text" id="endDate"/></td>
    			</tr>
    			
    			<tr>
    				<td class="labeltd">业务领域:</td>
    				<td><input type="text" id="businessField"/></td>
    				<td class="labeltd">案由:</td>
    				<td><input type="text" id="coa" /></td>
    			</tr>
    			
    			<tr>
    				<td class="labeltd">案情简介:</td>
    				<td colSpan="5" ><textarea rows="5" id="caseDesc" ></textarea></td>
    			</tr>
    			
    			<tr>
    				<td class="labeltd">诉讼请求:</td>
    				<td colSpan="5" ><textarea rows="5" id="claims" ></textarea></td>
    			</tr>
    			
    			<tr>
    				<td class="labeltd">应诉方案:</td>
    				<td colSpan="5" ><textarea rows="5" id="respond" ></textarea></td>
    			</tr>
    			
    			<tr>
    				<td class="labeltd">处理方式:</td>
    				<td><input type="text" id="actionType"/></td>
    				<td class="labeltd">一审处理机构/机关:</td>
    				<td><input type="text" id="court"/></td>
    				<td class="labeltd">处理结果:</td>
    				<td><input type="text" id="handleResult" /></td>
    			</tr>
    			
    			<tr>
    				<td class="labeltd">生效法律文书目录:</td>
    				<td colSpan="5" ><textarea rows="5" id="lawDir"></textarea></td>
    			</tr>
    		</table>
    	</fieldset>
    	
    	<!-- 二审信息 -->
    	<fieldset>
    		<legend><em class="t-tool t-tool-toggle">&nbsp;</em>二审信息</legend>
    		<table cellPadding="1" cellSpacing="1" border="0"  class="panel-t">
    			<tr>
    				<td class="labeltd">是否进行二审:</td>
    				<td><input type="text" id="retrial"/></td>
    			</tr>
    			
    			<tr>
    				<td class="labeltd">二审诉求:</td>
    				<td colSpan="5" ><textarea rows="5" id="claims2"></textarea></td>
    			</tr>
    			
    			<tr>
    				<td class="labeltd">二审处理机构/机关:</td>
    				<td colSpan="5" ><input type="text" id="court2"/></td>
    			</tr>
    			
    			<tr>
    				<td class="labeltd">二审主审法官:</td>
    				<td><input type="text" id="judeg2"/></td>
    				<td class="labeltd">二审发生时间:</td>
    				<td><input type="text" id="beginDate2"/></td>
    				<td class="labeltd">二审终止时间:</td>
    				<td><input type="text" id="endDate2"/></td>
    			</tr>
    			
    			<tr>
    				<td class="labeltd">处理人员:</td>
    				<td><input type="text" id="caseOwner2"/></td>
    				<td class="labeltd">处理结果:</td>
    				<td><input type="text" id="handleResult2"/></td>
    			</tr>
    			
    			<tr>
    				<td class="labeltd">二审生效法律文书目录:</td>
    				<td colSpan="5" ><textarea rows="5" id="lawDir2"></textarea></td>
    			</tr>
    			
    			<tr>
    				<td class="labeltd">案件分析及相关法律建议:</td>
    				<td colSpan="5" ><textarea rows="5" id="suggest"></textarea></td>
    			</tr>
    			
    			<tr>
    				<td class="labeltd">备注:</td>
    				<td colSpan="5" ><textarea rows="5" id="memo"></textarea></td>
    			</tr>
    		</table>
    	</fieldset>
    	
    	<!-- 再审或重审 -->
    	<fieldset>
    		<legend><em class="t-tool t-tool-toggle">&nbsp;</em>再审或重审</legend>
    		<table cellPadding="1" cellSpacing="1" border="0"  class="panel-t">
    			<tr>
    				<td class="labeltd">是否进行再审重审:<br /></td>
    				<td><input type="text" id="retrial3"/><br /></td>
    			</tr>
    			
    			<tr>
    				<td class="labeltd">诉求:<br /></td>
    				<td colSpan="5" ><textarea rows="5" id="claims3"></textarea><br /></td>
    			</tr>
    			
    			<tr>
    				<td class="labeltd">处理机构/机关:<br /></td>
    				<td colSpan="5" ><input type="text" id="court3" /><br /></td>
    			</tr>
    			
    			<tr>
    				<td class="labeltd">主审法官:<br /></td>
    				<td><input type="text" id="judeg3"/><br /></td>
    				<td class="labeltd">发生时间:<br /></td>
    				<td><input type="text" id="beginDate3"/><br /></td>
    				<td class="labeltd">终止时间:<br /></td>
    				<td><input type="text" id="endDate3"/><br /></td>
    			</tr>
    			
    			<tr>
    				<td class="labeltd">处理人员:<br /></td>
    				<td><input type="text" id="caseOwner3"/><br /></td>
    				<td class="labeltd">处理结果:<br /></td>
    				<td><input type="text" id="handleResult3"/><br /></td>
    			</tr>
    			
    			<tr>
    				<td class="labeltd">生效法律文书目录:<br /></td>
    				<td colSpan="5" ><textarea rows="5" id="lawDir3"></textarea><br /></td>
    			</tr>
    			
    			<tr>
    				<td class="labeltd">案件分析及相关法律建议:<br /></td>
    				<td colSpan="5" ><textarea rows="5" id="suggest3"></textarea><br /></td>
    			</tr>
    			
    			<tr>
    				<td class="labeltd">备注:<br /></td>
    				<td colSpan="5" ><textarea rows="5" id="memo3"></textarea><br /></td>
    			</tr>
    		</table>
    	</fieldset>
    	<!-- 流程进度 -->
    	<fieldset>
    		<legend><em class="t-tool t-tool-toggle">&nbsp;</em>流程进度</legend>
    		<table>
    			<tr></tr>
    		</table>
    	</fieldset>
    </div>
  </body>
</html>

 

代码片段:

/**
 * 折叠
 */
function initToggle(){
	var legends = document.getElementsByTagName('legend');
	for(var i=0,len=legends.length;i<len;i++){
		legends[i].onclick = function(){
			for(var j=0,ln=this.parentElement.childNodes.length;j<ln;j++){
				var nodeName = this.parentElement.childNodes[j].nodeName;
				if(nodeName&&nodeName.toUpperCase() === 'TABLE'){//兼容浏览器,有的浏览器childNodes的个数不同
					var tbl = this.parentElement.childNodes[j];
					if(tbl.style.display === 'none'){
						tbl.style.display = 'block';
						this.childNodes[0].className= 't-tool t-tool-toggle';
					}else {
						tbl.style.display = 'none';
						this.childNodes[0].className= 't-tool t-tool-toggle2';
					}
				}
			}
		}
	}
	
	/**
	 * 初始化折叠起
	 * @type Number
	 */
	for(var i=2,len=legends.length-1;i<len;i++){//init
		for(var j=0,ln=legends[i].parentElement.childNodes.length;j<ln;j++){
			var nodeName = legends[i].parentElement.childNodes[j].nodeName;
			if(nodeName&&nodeName.toUpperCase() === 'TABLE'){//兼容浏览器,有的浏览器childNodes的个数不同
				var tbl = legends[i].parentElement.childNodes[j];
				tbl.style.display = 'none';
				legends[i].childNodes[0].className= 't-tool t-tool-toggle2';
			}
		}
	}			
}

 

  • 大小: 4.1 KB
  • 大小: 23.6 KB
分享到:
评论

相关推荐

    js+css3网页右侧边收缩展开导航菜单代码.zip

    今天我们将深入探讨如何利用JavaScript(简称JS)和CSS3技术实现一个可收缩展开的右侧边导航菜单。这份代码资源——"js+css3网页右侧边收缩展开导航菜单代码.zip",提供了完整的实现方案,包括HTML结构、CSS样式和...

    jQuery+CSS3风琴折叠图片效果.zip

    标题中的“jQuery+CSS3风琴折叠图片效果”是指一种网页交互设计,它结合了JavaScript库jQuery和CSS3的技术,创造出一种类似手风琴展开和折叠的动态视觉效果。这种效果通常用于展示多张图片,当用户点击某一张图片时...

    9种html5+css3隐藏侧边栏导航菜单动画效果

    HTML5和CSS3是现代网页开发的两大核心技术,它们提供了丰富的功能和强大的表现力,使得网页设计更加生动、交互性更强。在这个主题中,“9种html5+css3隐藏侧边栏导航菜单动画效果”主要关注的是如何利用这两门技术来...

    基于jquery+bootstrap的侧边栏收缩菜单

    在网页设计和开发中,创建一个可伸展和...在项目文件"scrollerbar"中,可能包含了HTML结构、CSS样式和JavaScript脚本,它们共同协作以实现这个功能。对于初学者和经验丰富的开发者来说,这是一个很好的学习和实践案例。

    jQuery+CSS3炫酷手风琴特效.zip

    例如,在手风琴特效中,jQuery的滑动(slide)函数可以用于创建元素的展开和收缩效果,使得内容以平滑的方式显示或隐藏。 接着是CSS3,它是CSS的最新版本,引入了许多新的样式属性和功能,如选择器、过渡...

    div+css导航菜单集合

    "div+css"是创建这种导航菜单的常见方法,而JavaScript(JS)则常用于添加交互性,如下拉菜单和树状结构,使得菜单可以展开和收缩,提升用户体验。以下是对这些技术的详细讲解: 1. **Div与CSS**: - **Div**:在...

    jquery+css3右侧弹出伸缩导航菜单

    为了实现“右侧折叠”效果,我们可能需要一个初始隐藏的导航菜单,通过CSS的`display`或`opacity`属性来控制。在jQuery事件处理程序中,点击触发器可以改变这些属性,使得菜单逐渐可见并滑动到屏幕左侧。同时,为...

    CSS+JS实现一个DIV层的展开折叠效果

    CSS+JS 实现 DIV 层的展开折叠效果 本文将详细介绍如何使用 CSS 和 JS 实现一个 DIV 层的展开折叠效果。这个效果可以在网页上实现一个折叠的样式,用户可以点击按钮来展开或折叠内容。 HTML 结构 首先,我们需要...

    本人收集的近50种伸缩滑动折叠菜单(js、css、div实现)

    本资源集合了近50种不同的伸缩滑动折叠菜单,这些菜单利用JavaScript、CSS以及HTML的div元素来实现,对于前端开发者来说具有极高的学习和参考价值。下面我们将详细探讨这些技术及其在菜单设计中的应用。 1. ...

    JavaScript+Ajax实现树形目录

    在网页中,树形目录通过HTML元素如`&lt;ul&gt;`和`&lt;li&gt;`来构建,利用CSS进行样式控制,而JavaScript则负责处理用户的交互,如点击节点时的展开和收缩效果。 **JavaScript** 是一种运行在浏览器端的脚本语言,用于增加网页...

    jQuery+CSS3手风琴展开导航菜单代码.zip

    "jQuery+CSS3手风琴展开导航菜单代码"是一个实用的解决方案,它结合了jQuery的动态效果和CSS3的样式功能,以创建交互性强、用户体验良好的折叠式导航菜单。下面我们将详细探讨这个代码实现的知识点。 首先,`jQuery...

    仿京东商城分类效果(纯js+css)

    【标题】"仿京东商城分类效果(纯js+css)" 涉及的主要知识点是前端开发中的JavaScript和CSS技术,用于实现动态交互的商城分类菜单。这种效果通常包括了菜单的折叠、展开、鼠标悬停响应等交互功能,旨在提供用户友好...

    CSS特效收藏和js实例

    CSS层折叠(或收缩)与展开特效; CSS高度自适应代码(用了都说好); JavaScript密码强度检测代码; JavaScript判断输入框中是否包含中文; JavaScript判断远程图片是否存在; Js+Css图片切换,带缩略图响应鼠标滑过; JS...

    Javascript,Html,Css,Frame框架整合的菜单样式

    在网页设计中,JavaScript、HTML、CSS以及Frame和Frameset框架的整合是构建交互式、动态网站的关键技术。本文将详细解析这些技术如何协同工作,创建出一个具有可收缩左侧菜单和并排子菜单的框架结构。 首先,HTML...

    基于CSS+JavaScript实现的很漂亮的CSS逼真仿XP系统折叠菜单

    "基于CSS+JavaScript实现的很漂亮的CSS逼真仿XP系统折叠菜单"是一个出色的技术实践,它允许开发者模仿Windows XP操作系统中的经典菜单样式,为网页增添一种熟悉且舒适的用户体验。这个项目将CSS(层叠样式表)与...

    js+css3实现的蓝色手风琴图标菜单特效源码.zip

    在IT领域,JavaScript(简称JS)和CSS3是前端开发中的关键工具,它们共同负责创建交互性和视觉吸引力的网页元素。本项目“js+css3实现的蓝色手风琴图标菜单特效源码”是一个利用这两种技术实现的动态菜单效果,特别...

    jQuery+CSS3实现移动手机菜单特效源码.zip

    在本例中,CSS3被用来实现平滑的过渡效果,当用户触摸屏幕时,菜单项会优雅地展开或收缩,同时保持流畅的动画性能,确保在各种移动设备上都能有良好的表现。 资源中包含的文件“132686896148388609”很可能是实现这...

    CSS特效 js实例

    CSS层折叠(或收缩)与展开特效; CSS高度自适应代码(用了都说好); JavaScript密码强度检测代码; JavaScript判断输入框中是否包含中文; JavaScript判断远程图片是否存在; Js+Css图片切换,带缩略图响应鼠标滑过; JS...

    CSS层折叠(或收缩)与展开特效

    在网页设计中,CSS(Cascading Style Sheets)和JavaScript(JS)经常被用来实现丰富的交互效果,其中层的折叠和展开特效就是一种常见的应用场景。这些特效主要用于优化用户体验,通过控制内容的可见性,使用户可以...

Global site tag (gtag.js) - Google Analytics