ITOO-侧边栏的显隐

来源：互联网发布：淘宝资质授权书编辑：程序博客网时间：2024/05/07 06:26

由于在高校中一直做前台的页面，发现这么一个问题。当点击左侧栏后，右边显示的页面由于很大就会显示不全，如何解决这个问题，当时的想法是让左侧栏可以伸缩。然后就做了下面一个DEMO.

HTML

<style>html,body {margin:0; padding:0;height:100%;width:100%;border:none; }.main {width:100%;height:100%;text-align:left;}.main_left {width:180px;background:green;}.main_right {height:100%;background-color: #CCC;}.picBox { width:9px; background:#337ABB url(images/right.gif) no-repeat center center;}.main_left,.picBox {float:left;height:100%; _margin-right:-3px; }</style><script src="admin.js" type="text/javascript"></script><body><div class="main">  <div class="main_left" id="frmTitle" name="fmTitle" > 左边</div>  <div class="picBox" onclick="switchSysBar()" id="switchPoint" ></div>  <div class="main_right">Test右侧栏  </div></div></div></body></html>

var status = 1;function switchSysBar(){var switchPoint=document.getElementById("switchPoint");var frmTitle=document.getElementById("frmTitle");     if (1 == window.status){  window.status = 0;  //alert(switchPoint);          switchPoint.style.backgroundImage = 'url(images/left.gif)';          frmTitle.style.display="none"     }     else{  window.status = 1;          switchPoint.style.backgroundImage = 'url(images/right.gif)';           frmTitle.style.display=""     }}

简单实现的效果就是这样。后来也加入到了高校中，不过集成后又有了新的BUG，当侧边栏收缩后，右侧的页面会放大，一旦侧边栏展开，右侧栏还是放大效果，如何控制iframe标签内的html页面随父标签的改变而改变，一直没有解决，因此就放弃了侧边栏的效果，而让大家都采用全屏铺满的方式解决。

IToo中对于前台的布局等，让我对BS中的前台学习更深入了一层，有得必有失，对于后台和各种工具的使用和别人相比差了很多，只能说一句：慢慢来吧，吐槽再多也是无用功。

0 0