写一个简单的导航栏收起，出现效果

最新推荐文章于 2024-04-03 11:11:46 发布

chun042613

最新推荐文章于 2024-04-03 11:11:46 发布

阅读量915

点赞数

文章标签： javascript 前端 matlab ViewUI

原文链接：https://my.oschina.net/u/3860506/blog/1816951

版权

因为长期开发后台代码，对一些前端的东西知之甚少，最近在特地想做了一个web项目来练练手，正好找到一个，长期没有接触了，感觉到还是蛮有趣的。

效果图如下：

点击图中小箭头后，可以收起导航栏，再次点击可以再弹出来。

1.原理

其实，代码并不难，只要理解其中的设计思想其实是很简单的，其实就是对<frameset>标签的cols属性的控制，通过点击途中的小箭头来动态的改变页面的框架布局。

2.实现

首先，我们需要画一个页面，因为要动态改变<frameset>内的布局嘛，所以我们需要在框架集中至少还要放三个小框架，并且为三个设置好大小和位置，代码如下：

<!-- 主框架 -->
	<frameset src="mainframe" id="mainframe" rows="*" cols="200,10,*"
		framespacing="0" frameborder="no" border="0" bordercolor="#404040">
		<!-- 导航栏 -->
		<frame src="left.jsp" name="left" scrolling="no" noresize="noresize">
		<!-- 小箭头 -->
		<frame src="toogle.jsp" scrolling="no" noresize="noresize" name="toogle"
			marginheight="0" marginwidth="0">
		<frame src="right.jsp" scrolling="yes" name="main">
	</frameset>

其中主框架为导航栏设置了200的宽度，小箭头所在的框架为10，剩下的给其他框架。

然后，因为事件的触发是在点击小箭头时，所以我们需要在小箭头所在的页面编写触发方法。其设计思路是这样的，在页面刚刚载入的时候，将主页面中的各个小框架的宽度保存下来，然后当点击小箭头时，动态的将导航栏的宽度设置为0，这样，导航栏就“消失不见”了，然后当再次点击导航栏时，将先前加载时保存的导航栏宽度再设置回去，这样，导航栏又“出现”了，代码如下：

	var iniCols, noCols, o_mf, o_ms, s;
	function ini() {
		//获取主框架对象 
		o_mf = parent.document.getElementById("mainframe");
		o_ms = document.getElementById("menuSwitch");
		//将主框架的cols属性保存下来
		noCols = iniCols = o_mf.cols;
		//再将导航栏宽度设置为 0 ，这样就隐藏起导航栏了 
		if ((pos = noCols.indexOf(",")) != -1) {
			noCols = "0" + noCols.substring(pos);
		}
		s = false;
	}
	// 小箭头点击触发事件 
	function changeLeft() {
		s = !s;
		o_mf.cols = s ? noCols : iniCols;
		o_ms.innerHTML = s ? "<img src='image/on.gif' border='0'>"
				: "<img src='image/ou.gif' border='0'>";
	}

jsp页面如下：

<!-- 加载页面时调用初始化函数 -->
<body onload="ini()">
	<table width="100%" height="100%" border="0" cellpadding="0"
		cellspacing="0">
		<tr>
			<td><a href="javascript:changeLeft();" id="menuSwitch"><img
					src='image/ou.gif' border='0'></td>
		</tr>

	</table>

</body>

如果有更好的想法，可以一起和我讨论耶

转载于:https://my.oschina.net/u/3860506/blog/1816951

chun042613

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
写一个简单的导航栏收起，出现效果

因为长期开发后台代码，对一些前端的东西知之甚少，最近在特地想做了一个web项目来练练手，正好找到一个，长期没有接触了，感觉到还是蛮有趣的。效果图如下：点击图中小箭头后，可以收起导航栏，再次点击可以再弹出来。 1.原理其实，代码并不难，只要理解其中的设计...
复制链接

扫一扫