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

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


其中点击左侧的 “第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部分






LG



  • 1
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

LUNG108

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值