IOS应用的基本页面布局
<!DOCTYPE html>
<html>
<head>
<!-- 所需的Meta标签-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- 应用标题 -->
<title>My App</title>
<!-- IOS主题样式 -->
<link rel="stylesheet" href="path/to/framework7.ios.min.css">
<!-- IOS皮肤颜色样式 -->
<link rel="stylesheet" href="path/to/framework7.ios.colors.min.css">
<!-- 自定义应用样式-->
<link rel="stylesheet" href="path/to/my-app.css">
</head>
<body>
<!-- 全屏幕模式的状态栏(PhoneGap) -->
<div class="statusbar-overlay"></div>
<!-- 视图-->
<div class="views">
<!-- 主视图,必须有 "view-main" 类名 -->
<div class="view view-main">
<!-- 顶部导航栏-->
<div class="navbar">
<div class="navbar-inner">
<!-- 标题内元素如果需要移入移出的动画效果,添加"sliding"类,通常情况下,返回箭头无需添加动画,标题可以选择性添加,如不添加效果为淡入淡出。-->
<div class="center sliding">标题</div>
</div>
</div>
<!-- 页面的容器,因为我们使用固定的导航栏和工具栏,需要添加"navbar-through"、"toolbar-through"类-->
<div class="pages navbar-through toolbar-through">
<!-- 页面, "data-page"包含了页面名,属性值里不能带横线"-"。-->
<div data-page="index" class="page">
<!-- 滚动页面内容 -->
<div class="page-content">
<p>Page content goes here</p>
<!-- 链接到其他页,这里需要注意的是,framework7里面的a标签经过了特殊处理,如果是链接到外部页面,下载文件,或触发JS函数等,需要添加“external”类,已脱离框架默认设置-->
<a href="about.html">About app</a>
</div>
</div>
</div>
<!-- 底部工具栏-->
<div class="toolbar">
<div class="toolbar-inner">
<!-- 工具栏链接 -->
<a href="#" class="link">Link 1</a>
<a href="#" class="link">Link 2</a>
</div>
</div>
</div>
</div>
<!-- Path to Framework7 Library JS-->
<script type="text/javascript" src="path/to/framework7.min.js"></script>
<!-- Path to your app js-->
<script type="text/javascript" src="path/to/my-app.js"></script>
</body>
</html>
要点提示:
View
<div class="view">
- 在应用中是一个独立的部分,她有自己的设置、页面切换和历史。每一个视图都可以有不同的导航栏、工具栏布局和不同的样式。所以View就像是嵌在应用中的另一个应用。这种功能可以让你来分别操作一个应用中的不同部分。Views
<div class="views">
- 是所有可见View的容器(不包括Modal和Panel)。Views 是你的应用主容器。一个应用中只能有一个 ViewsView 可以放在应用中的任何位置,但是有一个重要的规则 - 所有的可见 View 都应该放在 Views
<div class="views">
中。因为我们会用来做页面切换的动画。主视图会有一个 view-main 的class,因为我们会默认把所有的链接加载的页面放进主视图中。 并且,你使用 pushState hash navigation 的时候也是只在主视图中工作。
每一个 Page 都应该放在 Pages 容器中
<div class="pages">
,而 Pages 必须是 View 的子元素<div class="view">
。所有的可见的内容,比如列表和表单等,都应该放在
<div class="page-content">
中,她是<div class="page">
的子元素。这样才能保证正确的样式,布局和滚动。- sliding 和 external 的使用。