模板
教程
环境
性能
功能
管理
利用JS在asp.net中实现左导航页的隐藏
作者:DotSharp
我们在CSDN论坛上的左上角能够看到导航栏的功能,下面就模拟该功能,利用JS在asp.net中作一个简单的无刷新的左导航栏隐藏功能.
首先,作一个框架页,我们取名 main.aspx
<!-- main.aspx 主要代码 -->
<script>
document.write("<frameset rows=@#54,28,*,19@# frameborder=@#NO@# border=@#0@# framespacing=@#0@#>");
document.write("<frame src=@#title.aspx@# name=@#topFrame@# scrolling=@#NO@# noresize>");
document.write("<frame src=@#bar.aspx@# name=@#MainNaviFrame@# scrolling=@#NO@#>");
<!-- left.aspx是导航页 ,menuswitch.aspx是交互的按钮页 -->
document.write("<frameset name=@#forum@# cols=@#150,8,*@# frameborder=@#NO@# border=@#0@# framespacing=@#0@#>");
document.write("<frame src=@#left.aspx@# name=@#LeftFrame@# scrolling=@#auto@#>");
document.write("<frame src=@#menuswitch.aspx@# name=@#SwichFrame@# scrolling=@#No@#>");
document.write("<frameset rows=@#100%,*@# frameborder=@#NO@# border=@#0@# framespacing=@#0@#>");
document.write("<frame src=@#@# name=@#MainFrame@# scrolling=@#no@#>");
document.write("</frameset></frameset>");
document.write("<frame src=@#bottom.aspx@# name=@#BottomFrame@# scrolling=@#No@#></frameset>");
</script>
<!-- menuswitch.js 主要代码-->
var leftwin = true;
function changeWin()
{
if(leftwin == true)
{
parent.forum.cols = "0,8,*";
parent.SwichFrame.menuSwitch.innerHTML = "<a onclick=@#changeWin();@# style=@#cursor:hand;@#><img src=@#images/ArrowOpen.gif@# border=@#0@#></a>";
leftwin = false;
}
else
{
parent.forum.cols = "150,8,*";
parent.SwichFrame.menuSwitch.innerHTML = "<a onclick=@#changeWin();@# style=@#cursor:hand;@#><img src=@#images/ArrowClose.gif@# border=@#0@#></a>";
leftwin = true;
}
}
<!-- menuswitch.aspx 主要代码 -->
<table height="100%" cellSpacing="0" cellPadding="0" width="8" background="images/MiddleBg1.gif"
border="0">
<tr>
<td onclick="changeWin();" style="cursor:hand;" id="menuSwitch" align="center">
<img id="Image1" src="images/ArrowClose.gif" border="0" />
</td>
</tr>
</table>
以上功能并不完善,只能起到抛砖引玉的作用,欢迎网友与我交流.
