`
czpae86
  • 浏览: 720518 次
  • 性别: 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
分享到：
| 为什么要在linux命令前加上 ./
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    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层折叠(或收缩)与展开特效

    "CSS层折叠(或收缩)与展开特效"是一个结合了这两种技术，实现网页元素动态显示与隐藏的交互效果。这种效果常见于导航菜单、侧边栏、内容区块等，它允许用户点击后展开或折叠内容，提高用户体验，尤其在内容丰富的...

    CSS特效 js实例

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

    jquery+css3网页左侧多维级别导航菜单(侧导航)

    对于展开/收缩效果，可以使用CSS3的`display`属性切换或使用`transform`和`transition`组合来实现平滑过渡。 9. **响应式设计**： 在移动设备上，侧导航可能需要进行调整以适应较小的屏幕。这可能涉及到菜单项的堆...

Magicbox
Global site tag (gtag.js) - Google Analytics