js javascript 几个收缩/展开/折叠的js代码

1.
<!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=gbk" />
<title>StripingTable</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){$("#helloDiv").hide(); });

function changeDisplay(){
var helloDivObj = $("#helloDiv");
var buttonObj = $("#btnDisplay");
var val = buttonObj.attr("value");
if(val=="隐藏"){
helloDivObj.hide();
buttonObj.attr("value","显示");
}else{
helloDivObj.show();
buttonObj.attr("value","隐藏");
}
}
-->
</script>
</head>
<body>

<input id="btnDisplay" type="button" value="隐藏" onclick="changeDisplay()" />
<div id="helloDiv">
Hello,everyone<p></p>
Hello,everytwo<p></p>
Hello,everythree<p></p>
</div>
</bdoy>
</html>


2.
<style> 
#content {
font-size: 14px;
width: 100%;
height: 50px;
background: #eee;
padding: 10px;
border: 4px #ccc double;
overflow: hidden;
}
#key {
color: red;
float: right;
margin-top: -20px;
}
span{cursor:pointer;}
</style>
<script>
var s=5;
var minheight=50;
var maxheight=450;
function shoppingcat(){
var content=document.getElementById("content");
var key = document.getElementById("key");
var t=content.style;
if(t.height==""||t.height==0)
t.height=minheight;
var h=parseInt(t.height);
if(key.innerHTML=="展开"){
h+=s;
t.height=h+"px";
if(h<maxheight){
setTimeout("shoppingcat();",1);
}else{
key.innerHTML="关闭";
}
}else{
h-=s;
t.height=h+"px";
if(h>minheight){
setTimeout("shoppingcat();",1);
}else{
key.innerHTML="展开";
}
}
}
</script>

<div id="content"><br/>
<span id="key" onclick="shoppingcat();">展开</span><br/>
藤床纸帐朝眠起,

说不尽、无佳思。

沈香烟断玉炉寒,

伴我情怀如水。

笛声三弄,

梅心惊破,

多少春情意。


小风疏雨萧萧地,

又催下、千行泪。

吹箫人去玉楼空,

肠断与谁同倚?
一枝折得,

人间天上,

没个人堪寄。

欢迎再次光临

牛图库特效。
</div>


3.

<html xmlns="http://www.w3.org/1999/xhtml">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>www.webjx.com</title>
<script language="javascript">
function tablecollapse()
{
/* Variables */
var collapseClass='footcollapse';
var collapsePic='http://webdesign.chinaitlab.com/UploadFiles_8014/200706/20070620173213376.gif';
var expandPic='http://webdesign.chinaitlab.com/UploadFiles_8014/200706/20070620173213394.gif';
var initialCollapse=true;
// loop through all tables
var t=document.getElementsByTagName('table');
var checktest= new RegExp("(^|\\s)" + collapseClass + "(\\s|$)");
for (var i=0;i<t.length;i++)
{
// if the table has not the right class, skip it
if(!checktest.test(t[i].className)){continue;}
// make the footer clickable
t[i].getElementsByTagName('tfoot')[0].onclick=function()
{
// loop through all bodies of this table and show or hide
// them
var tb=this.parentNode.getElementsByTagName('tbody');
for(var i=0;i<tb.length;i++)
{
tb[i].style.display=tb[i].style.display=='none'?'':'none';
}
// change the image accordingly
var li=this.getElementsByTagName('img')[0];
li.src=li.src.indexOf(collapsePic)==-1?collapsePic:expandPic;
}
// if the bodies should be collapsed initially, do so
if(initialCollapse)
{
var tb=t[i].getElementsByTagName('tbody');
for(var j=0;j<tb.length;j++)
{
tb[j].style.display='none';
}
}
// add the image surrounded by a dummy link to allow keyboard
// access to the last cell in the footer
var newa=document.createElement('a');
newa.href='#';
newa.onclick=function(){return false;}
var newimg=document.createElement('img');
newimg.src=initialCollapse?expandPic:collapsePic;
var tf=t[i].getElementsByTagName('tfoot')[0];
var lt=tf.getElementsByTagName('td')[tf.getElementsByTagName('td').length-1];
newa.appendChild(newimg);
lt.insertBefore(newa,lt.firstChild);
}
}
// run tablecollapse when the page loads
window.onload=tablecollapse;
</script>
<style type="text/css">
body{
font-family:Arial,Sans-Serif;
font-size:90%;
background:#cc9;
}
#boundary{
background:#f8f8f8;
padding:2em;
width:40em;
}
h1{
font-family:"Trebuchet MS",Sans-serif;
text-transform:uppercase;
color:#696;
font-size:120%;
}
table.footcollapse{
width:30em;/* 调整表格宽度*/
}
table.footcollapse caption{
font-size:120%;
text-transform:uppercase;
text-align:left;
padding:.5em 30em;
}
table.footcollapse th{
text-align:left;
}
table.footcollapse,table.footcollapse th,table.footcollapse th
{
border:none;
border-collapse:collapse;
}
table.footcollapse thead th
{
width:10em;
border-style:solid;
border-width:1px;
border-color:#cff #69c #69c #cff;
background:#9cf;
padding:2px 10px;
}
table.footcollapse tfoot th,
table.footcollapse tfoot td
{
border-style:solid;
border-width:1px;
border-color:#9cf #369 #369 #9cf;
background:#69c;
padding:2px 10px;
}
table.footcollapse tbody{
background:#ddd;
}
table.footcollapse tbody td{
padding:5px 10px;
border:1px solid #999;
}
table.footcollapse tbody th{
padding:2px 10px;
border:1px solid #999;
border-left:none;
}
table.footcollapse tbody tr.odd{
background:#ccc;
}
table.footcollapse tfoot td img{
border:none;
vertical-align:bottom;
padding-left:10px;
float:right;
}

</style>
</head>
<body>
<table summary="CDs I listened to recently" class="footcollapse">
<caption>这个</caption>
<thead>
<tr>
<th>列1</th>
<th>列2</th>
<th>列3</th>
</tr>
</thead>
<tfoot>
<tr>
<th>结尾1</th>
<td colspan="2">结尾2</td>
</tr>
</tfoot>
<tbody>
<tr>
<th>值1</th>
<td>值2</td>
<td>值3</td>
</tr>
<tr class="odd">
<th>值4</th>
<td>值5</td>
<td>值6</td>
</tr>
<tr>
<th>值7</th>
<td>值8</td>
<td>值9</td>
</tr>
<tr class="odd">
<th>值10</th>
<td>值11</td>
<td>值12</td>
</tr>
<tr>
<th>值13</th>
<td>值14</td>
<td>值15</td>
</tr>
</tbody>
</table>

</body>
</html>


黑色头发:http://heisetoufa.iteye.com/
'******vs实现js格式化和代码折叠****** '* 版权所有(C) sksmks 2009 '* 文件名称 : JsFormat '* 当前版本 : 1.0.0.1 '* 作 者 : 黄会攀 (@@:272302281) '* 设计日期 : 2009年10月31日 '* 内容摘要 : VS2008 JsFormat Macro '*******************************************************************************/ 一. 目的 在程序的开发中,javascript脚本的扩大,代码折叠,格式化是必不可少的一部分。对于大多数注释,代码折叠,格式化,都有着相似的样子,另外,在团队开发的过程,脚本太大,太长。为了提高在开发过程中,代码的可读性和开发效率,可以利用VS提供的Macro扩展功能,实现一套Macro模板。在使用的过程中,只需要使用相应的快捷键,便可格式化脚本和查看代码结构。 二. 实现 (打开宏资源管理器:视图 -> 其他窗口 -> 宏资源管理器 或者按 Alt+F8) 1. 新建Macro工程 打开 菜单 --> 工具 --> 宏(Macro) --> 新建宏(New Macro Project...),或者(宏资源管理器Alt+F8 )根据向导提示建立工程。 2. 编辑Macro工程 打开 菜单 --> 工具 --> 宏(Macro) --> 宏资源管理器(Macro Explorer) ,在Explorer中选择新建的工程,修改Module名(右键),在Module名上双击,在打开的Macro IDE中进行编辑。 3. 在Module下,添加要实现的MacroForJs,并实现(内容为向Active Document中添加注释)。 4. 保存 5.在VS2008中,双击添加的Macro,将执行对应的Macro代码(使用VBScript在Macro IDE中实现的)。 6. 建立快捷键 打开 菜单 --> 工具 --> 选项 --> 键盘 ,在列表框中选择刚才添加的MacroForJsPro里的OutlineFun (作用:注释),然后在 Press shortcuts keys中输入快捷键,点击Assign 。 打开 菜单 --> 工具 --> 选项 --> 键盘 ,在列表框中选择刚才添加的MacroForJsPro里的FormatForJsChar (作用:格式化),然后在 Press shortcuts keys中输入快捷键,点击Assign 。 7. 这时候,就可以直接使用快捷键来执行MacroForJs 。 三. 使用附件 1. 加载 打开 菜单 --> 工具(Tools) --> 宏(Macro) --> 加载宏项目(Load Macro Project... ),选择附件里的工程。 2. 配置快捷键 3. 完成 具体的实现代码见附件工程。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值