您的位置：首页 > 其它

新型的移动网页开发框架——Framework7（简介）

2014-07-27 00:38 281 查看

Framwork 7是一个移动网页前端开发框架，支持WebKit内核的浏览器，目前主流的ios和安卓系统浏览器内核都是WebKit。因此可以覆盖绝大部分的手机浏览器。

特色

该框架的最大特色就是可以再手机网页上实现原生应用的效果。尤其是可以网页切换时滑动的动画。大大提升手机网页的效果和体验。此外，提供了非常漂亮的组件模板，包括隐藏的控制板。如下图所示。还有一点就是非常容易上手。（貌似现在的前端框架都是这样）

但是需要注意的是，css中很多特效都只在ios上有效。安卓上很有可能出现样式无法识别的问题。自己稍微修改一下即可。

案例
http://www.idangero.us/framework7/apps/#.U9PfifmSx44
这里是官网给的几个Demo。我当时在做一个移动前端的项目，已经差不多快完工了。看到这几个Demo之后我决定重新来过。T_T

开始

这里附上官网地址：http://www.idangero.us/framework7/ 。里面有非常详细的介绍。

首先需要注意的是，前端的Html须按照一定的格式来写，这样框架才会起作用。官网里给了这样一个例子。

<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags-->
<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">
<!-- Your app title -->
<title>My App</title>
<!-- Path to Framework7 Library CSS-->
<link rel="stylesheet" href="path/to/framework7.min.css">
<!-- Path to your custom app styles-->
<link rel="stylesheet" href="path/to/my-app.css">
</head>
<body>
<!-- Status bar overlay for full screen mode (PhoneGap) -->
<div class="statusbar-overlay"></div>
<!-- Panels overlay-->
<div class="panel-overlay"></div>
<!-- Left panel with reveal effect-->
<div class="panel panel-left panel-reveal">
<div class="content-block">
<p>Left panel content goes here</p>
</div>
</div>
<!-- Views -->
<div class="views">
<!-- Your main view, should have "view-main" class -->
<div class="view view-main">
<!-- Top Navbar-->
<div class="navbar">
<div class="navbar-inner">
<!-- We need cool sliding animation on title element, so we have additional "sliding" class -->
<div class="center sliding">Awesome App</div>
<div class="right">
<!--
Right link contains only icon - additional "icon-only" class
Additional "open-panel" class tells app to open panel when we click on this link
-->
<a href="#" class="link icon-only open-panel"><i class="icon icon-bars-blue"></i></a>
</div>
</div>
</div>
<!-- Pages container, because we use fixed-through navbar and toolbar, it has additional appropriate classes-->
<div class="pages navbar-through toolbar-through">
<!-- Page, "data-page" contains page name -->
<div data-page="index" class="page">
<!-- Scrollable page content -->
<div class="page-content">
<p>Page content goes here</p>
<!-- Link to another page -->
<a href="about.html">About app</a>
</div>
</div>
</div>
<!-- Bottom Toolbar-->
<div class="toolbar">
<div class="toolbar-inner">
<!-- Toolbar links -->
<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和Page。个人的理解是这样的：View是整个视图，Page是视图的内容，但有可能不包括导航和工具栏。

下面这一点很重要：Framework7框架下，页面之间的链接默认是通过Ajax完成的！也就是说，在一个URL下，超链接到另外一个URL。但是实际上呢，是一个Ajax请求，得到另外的URL的组件后，自动覆盖在原先的组件上，但是实际上的网址还是之前的！如果你刷新了一下，就会发现回到最初的网页上。

这就导致了另外一个值得注意的问题。Framwork7框架下，所有的Html必须按照一定的格式写。首页必须包括完整的Views View-main Pages Page 结构。其他需要被链接的网页必须包括两个部分，navbar 和page，格式如下：

<div class="navbar">
....
</div>
<div class="page">
....
</div>

为什么需要这么做，其实也很好理解。首页通过这样的严格的结构，才会触发js中的函数。需要链接的页面通过这样的格式，告诉首页导航和内容分别是什么，这样就可以分别进行覆盖了。

这样有什么好处呢？通过异步的方式，原来的页面得到新的页面，这样就可以做出动画效果了，实现页面之间的动态切换。

请参考：http://www.idangero.us/framework7/docs/linking-pages.html 这里说明的比较详细。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航