利用JS在asp.net中实现左导航页的隐藏

                         利用JS在asp.net中实现左导航页的隐藏
                                                                      作者:DotSharp      2004.12.15

    我们在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 οnclick='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 οnclick='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 οnclick="changeWin();" style="cursor:hand;" id="menuSwitch" align="center">
   <img id="Image1" src="images/ArrowClose.gif" border="0" />
  </td>
 </tr>
</table>

以上功能并不完善,只能起到抛砖引玉的作用,欢迎网友与我交流.

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: ASP.NET Bootstrap 是一种结合了 ASP.NET 和 Bootstrap 框架的开发工具,它可以帮助开发人员快速构建响应式的网站和 Web 应用程序。ASP.NET Bootstrap 提供了一套预定义的样式和组件,使开发人员可以轻松地创建具有现代化外观和良好用户体验的界面。 ASP.NET Bootstrap 是基于响应式设计的,这意味着它可以根据不同的设备和屏幕尺寸自动调整布局和样式。这使得网站可以在桌面、平板和手机等不同的设备上都能够良好地显示和使用。开发人员可以使用不同的 CSS 类和属性来控制元素在不同屏幕大小下的显示效果,从而提供更好的用户体验。 ASP.NET Bootstrap 还提供了许多常用的组件,如导航栏、下拉菜单、按钮、表单和模态框等。这些组件不仅提供了良好的可视化效果,还可以增加网站的交互性和功能性。开发人员可以通过简单地引入相关的 CSS 和 JavaScript 文件,并使用相应的 HTML 标签和 CSS 类来使用这些组件。 此外,ASP.NET Bootstrap 还提供了许多有用的样式和工具类,如网格系统、字体图标、辅助类和响应式实用工具等。这些功能使开发人员能够更加高效地布局和设计网站,并且可以轻松地实现各种需求。 总之,ASP.NET Bootstrap 是一个强大的开发工具,它结合了 ASP.NET 和 Bootstrap 框架的优势,可以帮助开发人员快速构建具有响应式设计和现代化外观的网站和 Web 应用程序。通过使用 ASP.NET Bootstrap,开发人员可以提高开发效率,并且为用户提供更好的用户体验。 ### 回答2: ASP.NET是一种用于开发Web应用程序的框架,它使用了一种称为.NET的技术栈。Bootstrap是一个开源的前端框架,用于构建响应式的网页设计。ASP.NET Bootstrap是将这两个技术结合起来的一种方法,它提供了一种简单快速的方式来创建漂亮的、响应式的Web应用程序。 使用ASP.NET Bootstrap,我们可以利用Bootstrap的CSS样式和JavaScript插件来构建我们的ASP.NET应用程序。这使我们能够快速创建现代化的用户界面,而无需自己编写大量的CSS和JavaScript代码。同时,ASP.NET Bootstrap也提供了一些自定义控件和模板,以方便我们使用Bootstrap的功能。 ASP.NET Bootstrap还有一些其他的特性和优势。首先,它具有良好的可扩展性,可以轻松地添加自定义样式和功能。其次,它具有很好的兼容性,可以在各种不同的浏览器和设备上运行。此外,它还具有响应式设计,可以根据不同的屏幕尺寸自动调整布局和功能。 总之,ASP.NET Bootstrap是一种非常有用的工具,可以帮助我们快速建立现代化、响应式的Web应用程序。它结合了ASP.NET和Bootstrap的优势,使我们可以更轻松地创建出色的用户界面,并提供丰富的功能和样式选择。无论是初学者还是有经验的开发人员,都可以受益于使用ASP.NET Bootstrap来开发高质量的Web应用程序。 ### 回答3: ASP.NET Bootstrap是一个开源的前端框架,可以帮助开发人员快速构建响应式的Web应用程序。 ASP.NET Bootstrap是由Twitter公司开发的Bootstrap框架与微软的ASP.NET技术相结合而成。Bootstrap是一种流行的前端框架,提供了一系列的CSS样式、网格系统和JavaScript插件,用于快速构建现代化的网页界面。 使用ASP.NET Bootstrap可以使开发人员轻松构建具有良好用户体验的Web应用程序。它提供了响应式的设计,使得网页在不同的设备上都能自动适应屏幕大小。无论是在电脑、平板还是手机上,网页都能保持良好的可读性和使用性。 ASP.NET Bootstrap还提供了大量的组件,如导航栏、标签页、模态框等,使得开发人员可以通过简单的标记语言就能实现复杂的功能。这些组件都经过优化,具有良好的性能和可靠性。 此外,ASP.NET Bootstrap还与ASP.NET技术紧密集成,可以无缝地与后端代码进行交互。开发人员可以使用ASP.NET的特性,例如ASP.NET Web Forms或MVC,来处理用户的请求和生成动态内容。 总之,ASP.NET Bootstrap是一个强大而灵活的前端框架,可以大大简化Web应用程序的开发过程。无论是初学者还是专业开发人员,都可以通过使用ASP.NET Bootstrap来创建现代化、响应式的Web应用程序。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值