frame搭建后台管理系统（点击左侧，右侧内容以选项卡方式出现）

本文链接：https://blog.csdn.net/LUNG108/article/details/74640322

在网上找了会后台管理系统的模板，发现要么要钱，要么太复杂。想想算了，自己搭一个吧（我不是前端设计的，所以只是实现了功能，而且样式不太好看），如下图：

其中点击左侧的 “第X句” ，在右侧出现相应的选项卡组件和内容；在右侧点击选项卡组件，对应的内容也会出现。

页面的目录 如图：（只是红框里面的，其他的是我之前弄其他的内容时创建的）

好了，说一下用到的框架：

首先，整体页面布局是基于frame搭建的，也就是test_iframe.html页面，代码如下：（需要注意，不要把frameset放在body中，否则不显示）



	
		
   
   
		管理页面搭建

其中嵌入了 left.html 和 right.html 页面，分别如下：



	
		
   
   
		frame左边
		<script src="js/jquery-2.2.1.js"></script>
		<script>
			$(function(){
				/*定义函数：load页面，并且显示出来*/
				var showTab = function(num){
					//load页面
					var eles = $(window.parent.frames["right"].document)
					
					var main = eles.find("#myTabContent")
					var url = "tabs/tab"+num+".html "+"div"
					main.load(url)
					
					//去除所有li的class----防止下一步添加的class冲突
					var lis = eles.find("li")
					lis.removeClass()
					//显示内容
					
					var tab = eles.find("#"+num)
					tab.addClass("active")
					tab.show()
				}
				
				//点击事件调用函数
				$("li").each(function(){
					$(this).click(function(){
						showTab($(this).attr("id"))
					})
				})
			})
		</script> 
	
	
		
   
   
				第一句
			


			
    
    

				第二句
			


			
    
    

				第三句
			


			
    
    

				第四句





   
   
选项卡
   	<script src="http://cdn.static.runoob.com/libs/jquery/2.0.0/jquery.js"></script>
	 href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  	
	<script type="text/javascript">
		$(function(){
			//加载时隐藏内容
			$("li").hide()
			/*定义load函数，用于填充页面*/
			var getCont = function(num){
				var url = "tabs/tab"+num+".html "+"div"
				$("#myTabContent").load(url)
			}
			
			//点击事件调用函数
			$("li").each(function(){
				$(this).click(function(){
					getCont($(this).attr("id"))
				})
			})
		})
	</script>


	
   
   
			第一句
		

			第二句
		

			第三句
		

			第四句

然后，说一下设计思想：test_iframe.html页面不说了，就是该标签的功能。

先说一下right.html 页面

该页面是我之前有个功能需要使用选项卡效果搭建的，所以这次正好也适用。

head中引入了jQuery和bootstrap，选项卡效果用的bootstrap提供的，我把其中内容部分分离出来，也就是tabs目录中的四个html，页面中就只有一个div，不同的只是其中的内容和id。

因为后台系统左侧点击后需要展示出不同的管理页面，页面分开会可读些

<div id="11" class="tab-pane fade in active">
	选项卡第一页：千山鸟飞绝
	<br><br><br><br><br><br><br>
</div>

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

说回right.html页面，jQuery逻辑其实很简单：

页面加载时让所有的 li 标签隐藏（没用css是因为还需要编写控制样式变化的js代码）；定义了一个函数，接着选中标题时，触发点击事件调用该函数，实现嵌入不同页面的效果。

再说left.html页面，逻辑和right页面差不多：

只是不用隐藏标签；函数同样是load tabs目录中的页面，同时多了class控制的方法---用来让右边选项卡组件随着左侧点击出现相应效果和 show方法---用来显示right页面的对应组件部分，然后定义点击事件来调用该函数。

注意的是：

由于是在两个不同的frame中，直接通过jQuery选取不了，需要通过如下方法才能选到相应的对象来操作：

（其中的right指的是右边的frame，只是命名恰好和我的right.html一样）

$(window.parent.frames["right"].document).find("#myTabContent")

至此，后台管理系统的功能差不多了，需要什么页面只要在left和right页面的 ul 标签中添加相应的代码，在tabs目录下添加相应的页面就可以（注意id的命名要一致）

总结：

1.使用frame时，不要放在body中，否则显示不了。

2.要在bootstrap之前，先导入jQuery

3.跨frame选取元素，需要使用 window.parent.frames[xx].document，再find相应的对象

4.函数中load方法中的url，比如值是"tabs/tab11.html div"，注意有空格，代表只加载对应html中的div部分