ITOO-侧边栏的显隐

最新推荐文章于 2020-12-08 23:55:16 发布

辰一更

最新推荐文章于 2020-12-08 23:55:16 发布

阅读量1.1k

点赞数

分类专栏：【JavaScript】

本文链接：https://blog.csdn.net/a137151062/article/details/43153403

版权

【JavaScript】专栏收录该内容

9 篇文章 0 订阅

订阅专栏

由于在高校中一直做前台的页面，发现这么一个问题。当点击左侧栏后，右边显示的页面由于很大就会显示不全，如何解决这个问题，当时的想法是让左侧栏可以伸缩。然后就做了下面一个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" οnclick="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中的前台学习更深入了一层，有得必有失，对于后台和各种工具的使用和别人相比差了很多，只能说一句：慢慢来吧，吐槽再多也是无用功。