说到frameset,一些老的前端工程师肯定不陌生,是一种用于实现框架式布局的标签,但是在Html5中将这个标签废弃掉了。那么,在如今Html5大行天下的时代,我们又如何去实现框架式布局呢?
本片文章,我们将介绍一下如何在H5中实现框架式布局,这边我们需要借助AngularJs框架(多这个框架不熟悉的,建议先去学习一下基础再来看这篇文章),在AngularJs中实现了一个叫ng-router的路由框架,它式用于实现H5页面跳转的,但是他的跳转与我们想要的框架式布局不同,它实现的式整个页面的跳转,而不是页面内局部内容的跳转。
这边我们要引入本片文章的核心AngularUI提供的ui-router,AngularUI是国外牛人基于AngularJs的拓展,他提供了很多的module可以方面我们使用,这边我们使用ui-router这个Module可以实现我们需要的框架式布局。
下面,我们来看一下源码:
1.创建index.html,他是web app的入口页面
...
<script src="frameworks/angular.js"></script>
<script src="frameworks/angular-ui-router.js"></script>
<script src="js/app.js"></script>
...
<body ng-app="app">
<nav style="background-color: grey">
<a href="#" ui-sref="page1">Page1</a>
<a href="#" ui-sref="page2">Page2</a>
<a href="#" ui-sref="page3">Page3</a>
</nav>
<div ui-view=""></div>
</body>
1.首先需要导入angularJs与ui-router两个库,请自行下载,app.js在后面讲解。
2.body 带有ng-app,告诉angularJs,body包起来的代码是angular需要维护的代码块(angular基础知识)
3.ui-sref为告诉ui-router根据当前状态加载页面。
4.ui-view,ui-router实现框架式布局的占位符,可以定义名字
2.创建page1~2
<!-- Page1 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body >
<div>
<div style="width: 20%; float: left">
<ul>
<li><a href="#" ui-sref=".tab1">Tab1</a></li>
<li><a href="#" ui-sref=".tab2">Tab2</a></li>
</ul>
</div>
<div style="float: left; width: 80%" ui-view=""></div>
</div>
</body>
</html>
<!-- Page2 -->
<!--<h1 style="background-color: green">This is page2</h1>-->
<div style="background-color: green">
<div ui-view="content1"></div>
<div ui-view="content2"></div>
</div>
3.创建page1对应的两个tab
<!-- page1_tab1.html -->
<div style="height: 400px;background-color: cadetblue">This is Tab1 in Page1</div>
<!-- page1_tab2.html -->
<div style="height: 400px;background-color: darkolivegreen">This is Tab1 in Page2</div>
4.关键的app.js
var app = angular.module("app", ['ui.router']);
app.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/page1");
$stateProvider
.state("page1",{
url:"/page1",
templateUrl:"tmpls/page1.html"
})
.state("page2", {
url:"/page2",
// templateUrl:"tmpls/page2.html"
views:{
'':{
templateUrl:"tmpls/page2.html"
},
'content1@page2':{
template:'我是content1'
},
'content2@page2':{
template:'我是content2'
}
}
})
.state("page3",{
url:"/page3",
template:"This is page3"
})
.state("page1.tab1", {
url:"/page1_tab1",
templateUrl:"tmpls/page1_tab1.html"
})
.state("page1.tab2", {
url:"/page1_tab2",
templateUrl:"tmpls/page1_tab2.html"
});;
});
1.$urlRouterProvider有两个方法
when():两个参数,第一个是希望匹配的路径,第二个是没有匹配到时希望重定向的路径。
otherwise():这个方法时没有匹配到时重定向的路径,类似于switch-case中的default
2.$stateProvider.state,记录的时各种状态跳转信息,类似与switch-case
3.views主要用于布局中有多个ui-view的情况,可以对不同的ui-view使用特定的templateUrl等,绝对view使用‘@’符号来区别,比如content2@page2表明content2的ui-view使用了page2状态的模板。
4.当模板是html时,使用templateUrl;当模板就是一段文本时,使用template
至此,功能就已经实现了,当然还可以使用动画来改变页面切换的效果,大家可以尝试一下。