在网上找了会后台管理系统的模板,发现要么要钱,要么太复杂。想想算了,自己搭一个吧(我不是前端设计的,所以只是实现了功能,而且样式不太好看),如下图:
其中点击左侧的 “第X句” ,在右侧出现相应的选项卡 组件和内容 ;在右侧点击选项卡组件,对应的内容也会出现。
页面的目录 如图:(只是红框里面的,其他的是我之前弄其他的内容时创建的)
好了,说一下用到的框架:
首先,整体页面布局是基于frame搭建的,也就是test_iframe.html页面,代码如下:(需要注意,不要把frameset放在body中,否则不显示)
管理页面搭建
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>
<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