急！如何实现可收缩的侧边栏

wenroudelang 2006-07-12 09:36:18

我用vs.net2005来开发asp.net，现在想做一个可收缩的侧边栏，由于刚接触，不知道怎么写，请各位帮个忙，侧边栏的效果类似于这个网站的：http://nanning.citylr.com/mapindex/main.aspx
请各位抽点空帮看看，好急！谢谢大家！

...全文

1075 17 打赏收藏转发到动态举报

写回复

用AI写文章

17 条回复

切换为时间正序

请发表友善的回复…

发表回复

kele2005 2006-08-02

打赏
举报

我把整个页面内容发上吧，我这里在IE下测试完全没问题
<html>

<head>
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>3 屏幕切换</title>
<script language="javascript">
function switchSysBar(){
if (switchPoint.innerText==3){
switchPoint.innerText=4
document.all("frmTitle").style.display="none"
}else{
switchPoint.innerText=3
document.all("frmTitle").style.display=""
}
}
</script>
</head>

<body>

<table border="0" cellPadding="0" cellSpacing="0" height="100%" width="100%">
<tr>
<td align="middle" noWrap vAlign="center" id="frmTitle">
<iframe frameBorder="0" id="carnoc" name="carnoc" scrolling="no" src="left.htm" style="HEIGHT: 100%; VISIBILITY: inherit; WIDTH: 170px; Z-INDEX: 2">
</iframe>
</td>
<td style="WIDTH: 9pt" class=a2>
<table border="0" cellPadding="0" cellSpacing="0" height="100%">
<tr>
<td style="HEIGHT: 100%" onclick="switchSysBar()">
<font style="FONT-SIZE: 9pt; CURSOR: default; COLOR: #ffffff">
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<span class="navPoint" id="switchPoint" title="关闭/打开左栏">3</span><br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
屏幕切换 </font></td>
</tr>
</table>
</td>
<td style="WIDTH: 100%">
<iframe frameBorder="0" id="main" name="main" scrolling="yes" src="default.htm" style="HEIGHT: 100%; VISIBILITY: inherit; WIDTH: 100%; Z-INDEX: 1">
</iframe>

</td>
</tr>
</table>

</body>

</html>

zzz22333 2006-08-01

打赏
举报

呵呵,谢谢楼主帮助!

wenroudelang 2006-08-01

打赏
举报

zzz22333() :
新建一母版页MasterPage.master,做好你的布局后,在新建一aspx页test.aspx,在test.aspx中的代码如下:
<%@ Page Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="test.aspx.vb" Inherits="test" title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="cphHead" Runat="Server">

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="cphLeft" Runat="Server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="chpMain" Runat="Server">
</asp:Content>

zzz22333 2006-07-31

打赏
举报

楼上的朋友，代码无法显示

kele2005 2006-07-31

打赏
举报

zzz22333 2006-07-31

打赏
举报

呵呵，我也是新手，刚开始用VS.2005，楼主想问的也是我想问的，我也希望能解决这个问题，借楼主的地盘恳求高人指点，以上前三个代码在记事本中编译都能通过，而到2005里只有第二个可以显示出，但我想嵌入到自己的程序里就是不能通过，还有，我刚来这里不会发帖子也不知道积分有什么用，顺便再问个问题，2005中怎么把masterPage模版嵌入到.aspx页面里，使运行的时候显示masterPage页内容，希望楼主也指点下，我新手，感恩不尽！！

wenroudelang 2006-07-31

打赏
举报

是阿,我试了,也不得,是哪里出了问题呢?请帮忙看看,谢谢

kele2005 2006-07-18

打赏
举报

我刚刚做好一个，需要的话，给我留言，我把文件发给你，zhengemail@126.com

wenroudelang 2006-07-18

打赏
举报

发错，哈哈

wenroudelang 2006-07-18

打赏
举报

你好：
非常感谢你回复我的帖子，我想需要一份，请发给我好吗？
我的邮箱是：satan_dongdong@163.com
谢谢。

我帖子的地址：
http://community.csdn.net/Expert/topic/4874/4874735.xml?temp=.2125513

longyangyxm 2006-07-15

打赏
举报

顶起

johnzen 2006-07-13

打赏
举报

写了一个简单的，应该比较适合你。
<script>
function s()
{
if(h.style.display!="none")
{
h.style.display="none";
info.innerHTML="6";
h.style.left=200;

}
else
{
h.style.display="";
info.innerHTML="9";
}
}

</script>
<table width="100%">
<tr>
<td bgcolor="red">
<a href="javascript:s()">点这里</a>
<div onClick="s()" id="info" style="CURSOR:hand;position:absolute">ffff</div>
</td>
<td width="220" bgcolor="#000000" id="h"></td>
</tr>
</table>

slayerbb 2006-07-12

打赏
举报

这个也是一样的啊。。。
你提示什么样的错误？

wenroudelang 2006-07-12

打赏
举报

因为vs.net2005中使用的是XHTML 1.0，所以上面那段html有挺多的错误，不知道为什么总是改不对，帮看看，好吗？谢谢

slayerbb 2006-07-12

打赏
举报

wideroad 2006-07-12

打赏
举报

我以前写的一个，你可以改改

<!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>
<title>无标题页</title>
<script type="text/javascript">
function $(elementId)
{
return document.getElementById(elementId);
}
</script>
</head>
<body>
<table>
<tr>
<td id="leftTd" style="width: 300px; height: 21px; background-color: #ff0000;">
</td>
<td style="width: 30px; height: 21px">
<input id="Button1" type="button" value="向左走，向右走" onclick="buttonClick()" /></td>
<td id="rightTd" style="width: 300px; height: 21px; background-color: #0000ff;">
</td>
</tr>
</table>

</body>
</html>
<script type="text/javascript">
var leftTd = $("leftTd");
var rightTd = $("rightTd");
var Button2 = $("Button2");
var plusTd = rightTd;
var subTd = leftTd;
var leftOrRight = true; // true is left, flase is right
var timer = false;
var offset = 1;

// 按钮的单击处理事件
function buttonClick()
{
// 根据不同的状态值来设定加和减对象
if(leftOrRight)
{
plusTd = rightTd;
subTd = leftTd;
}
else
{
plusTd = leftTd;
subTd = rightTd;
}

offset = 0.1;

// 启动定时期，开始移动
timer = window.setTimeout(move,10);
}

// 移动
function move()
{
// 取得减少一方现在的宽度
var width = parseInt(subTd.style.width);

// 判断是否继续移动
if(width > 0)
{
// 继续移动

// 取得要位移的差值
offset = offset + offset/5;
if(offset > width) offset = width;

var offsetNow = Math.ceil(offset);

// 位移
subTd.style.width = parseInt(subTd.style.width) - offsetNow;
plusTd.style.width = parseInt(plusTd.style.width) + offsetNow;

// 继续移动
timer = window.setTimeout(move,10);
}
else
{
leftOrRight = !leftOrRight;
}
}

//
</script>

wenroudelang 2006-07-12