Framework7(05: Page,路由,页面刷新) - 简书
Framework7(05: Page,路由,页面刷新)
1.路由器 JS API
Framework7 中的路由器使用非常灵活，他可以有多种方式来处理Page:
Ajax Pages,从一个指定的URL 加载页面，通常是另外一个页面的文件地址（默认行为）。
通过JS API 创建和加载 动态页面
如果你的页面已经写在DOM中了，那么你可以直接使用 内联页面 ，而不用再去加载。
可以加载使用 Template7 编写的模板
可以在你的应用中混合使用所有上面的这些方法。
视图是应用中的一个独立部分，她有自己的设置、页面切换和浏览历史。路由器也是初始化之后的视图(View)中的一部分，所以你使用路由器之前必须要记得先初始化视图（使用myApp.addView()方法）
2.视图中页面切换相关方法：
在视图中主要有两个路由器方法:
mainView.router.load(options) - 把一个页面加载到当前视图
mainView.router.back(options) - 这个方法会触发一个反向的动画并回到上一个页面，也就是浏览历史上的回退
上面这些方法都接受一个options对象作为参数，这个参数有很多属性。url， content， context 等等。
3.视图中页面切换的快捷方式
加载新页面的方法:mainView.router.loadPage(url)- 加载指定的页面到视图中。其实和你在页面中点击一个链接是一样的效果。url - 需要加载的页面的URLmainView.router.loadContent(content)- 把动态生成的内容当做一个页面加载.content - string or HTMLElement or [jQuery/Zepto/DOM7 collection] or [array of HTMLElement] - 需要加载的内容
4.重新加载当前页面的方法:
mainView.router.reloadPage(url) - 重新加载指定的页面到视图的当前页面。同时也会修改视图的浏览历史，把最后一条记录替换成指定的URL。url - 需要加载页面的URL
mainView.router.reloadContent(content)- 重新加载指定的内容到视图的当前页面。同时也会修改视图的浏览历史，把最后一条记录替换成指定的URL。content - string or HTMLElement or [jQuery/Zepto/DOM7 collection] or [array of HTMLElement]- 需要加载的内容
5.重新加载上一个页面的方法（如果视图的DOM中有两个页面）：
mainView.router.reloadPreviousPage(url)- r重新加载指定的页面到视图的上一个页面。同时也会修改视图的浏览历史，把最后一条记录替换成指定的URL。
mainView.router.reloadPreviousContent(content) - 重新加载指定的内容到视图的上一个页面。同时也会修改视图的浏览历史，把最后一条记录替换成指定的URL。
6.刷新页面的方法:
mainView.router.refreshPage() - 刷新视图的当前页面。和你调用.reloadPage方法并且传入当前页面的URL是一样的效果
mainView.router.refreshPreviousPage() - 刷新视图的上一个页面。和你调用.reloadPreviousPage方法并且传入上一个页面的URL是一样的效果
7.Ajax页面默认情况下 Framework7 会使用 Ajax 加载所有的页面，除了带有 external class的链接（&a href="somepage.html" class="external"&）和没有正确 href 值的链接（比如是空的或者是 #）。
在 初始化 时候传递不同的 ajaxLinks 参数可以改变这个行为。
所以我们如果需要创建一个链接指向 about.html，我们只需要按照平时一样写 &a&标签就可以：&a href="about.html"&Go to About page&/a&
当我们点击这个链接的时候，Framework7会通过Ajax获取 about.html，解析它的内容，然后把它插入到DOM中，并且做一个动画切换到这个新页面。
Page 内部的结构
因为Framework7有一个非常聪明的解析器，所以在内部页面中我们不需要完整的HTML结构（head,body,views,pages等)。比如 about.html的内容：
&!-- That is all we have in about.html file --&
&div class="page" data-page="about"&
... About page content goes here
重点是，Framework7解析器会尝试在ajax加载的页面中寻找 &div class="page"&，所以我们不需要完整的HTML结构。当然这不是强制的，你可以写出完整的页面结构。
9.多个Page的结构
两个view应该和主页中的view有相同的class。这样Framework7就知道应该哪一个page应该放在哪一个view中。
10.动态导航栏的文件结构
&div class="page" data-page="about"&
&!-- Just add additional "back" class to link --&
&a href="index.html" class="back"&
Go back to home page
关于后退链接几个需要注意的地方：
如果在浏览历史中有页面，Framework7会忽略掉 href 属性中的值。
如果在浏览历史中没有页面（比如你在首页点了后退），Framework7会加载href属性指定的url。你无法改变上述行为。
对后退链接来说， href 属性不是必须得，但是为了向下兼容，最好还是写上。
11.滑动后退(iOS only)
如果你启用了 "swipeBackPage" 应用参数，那么你可以通过从左向右滑动来后退到上一个页面。但是有时候你会想在某些页面中禁用这个行为，这种情况下你只需要加一个 no-swipeback class 即可。
&div class="page no-swipeback"&
12.取消/增加页面切换动画
有时候你在加载页面或者后退的时候需要立刻执行，不想要一个切换的动画效果，可以通过增加一个 "no-animation" class 在链接上即可。
div class="page" data-page="about"&
&!-- Add additional "no-anmation" class to link to disable animated page transition --&
&a href="about.html" class="no-animation"&
Load About page immediately
&!-- The same rule for back link --&
&a href="index.html" class="back no-animation"&
Go back immediately
如果我们已经全局禁用了动画，但是在某些链接上希望启用这些动画，那么我们可以给链接加上 "with-animation" class。
13.通过 data 标签配置更多选项
有时候我们希望在某些链接上有更多的配置，我们可以使用作为data-属性来配置所有在 视图链接方法中的参数。&a href="about.html" data-reload="true" data-ignore-cache="true"&Refresh page&/a&
14.用javascript加载page，和回退page略
Framework7 中，页面之间的链接和路由都是很简单的，你只需要记住：
你需要使用普通的 &a&标签，她有一个href属性指向你需要加载的页面。
通过ajax加载的页面不需要有完整的HTML结构。只需要有 &div class="page"& (和 &div class="navbar"& 如果你需要动态的滚动条)
如果你在同一个文件中有多个Page，把他们用 &div class="view"& 包裹起来，并且给每一个View设置好正确的class。
只需给一个链接加上 back class (&a href="index.html" class="back"&)，她就会自动变成一个后退链接。
.有时间的时候也玩玩儿摄影等等。前端开发（19）
使用requireJS重构framework7项目实践
本文记录了使用requireJS重构framework7项目实践.分为以下部分
项目背景现状
项目背景现状
m站基于framework7框架.框架只在首次今入时加载head和foot,只在首次进入时加载css和js.f7框架的头部和尾部仅在首次加载时能起作用.一般是在首页时加载这一次.head和foot的作用是,在浏览器窗口直接输入类似
这样的直接跳转链接时,能正确地首次加载js.
在无法直接输入地址的页面,不要header和footer也可.
head和foot通过php include引入.
file="&{$model}&/mobile/include/page_header.html"}&
file="&{$model}&/mobile/include/page_footer.html"}&
这样会在底部产生丑陋的
type="text/javascript" src="/js/app/link.ios.js"&&
type="text/javascript" src="/js/mobile/framework7.min.js"&&
type="text/javascript" src="/js/mobile/jquery.min.js"&&
type="text/javascript" src="/js/mobile/jquery.cookie.js"&&
type="text/javascript" src="/js/mobile/jquery.touchSlider.js"&&
type="text/javascript" src="/js/mobile/calendar-mobile.1.0.js"&&
type="text/javascript" src="/js/mobile/price-slider-app.1.0.js"&&
type="text/javascript" src="/js/mobile/chat.js"&&
type="text/javascript" src="/js/mobile/fn.js"&&
type="text/javascript" src="/js/mobile/mobile.js?12"&&
language="javascript" src="/js/emoji.js"&&
无法理清楚依赖关系,有大量的全局函数和和全局变量.
framework7初始化和全部的逻辑在mobile.js中,mobile.js长达1w多行.有大量的全局函数\全局变量\工具函数.
function calculateRelativeSize(){
var width = $('body').width();
width = width&750?750:
var fontSize = 62.5*width/375;
$('body,html').css('font-size',fontSize+'%');
calculateRelativeSize();
function isLeapYear(year){
if(year % 4 == 0 && ((year % 100 != 0) || (year % 400 == 0)))
return true;
return false;
function GetDateDiff(startDate,endDate)
var startTime = new Date(Date.parse(startDate.replace(/-/g,
"/"))).getTime();
var endTime = new Date(Date.parse(endDate.replace(/-/g,
"/"))).getTime();
var dates = Math.abs((startTime - endTime))/(1000*60*60*24);
index.html,或者说foot只包含一个js或者少数几个js
require.js
index.html
define(function(){
function fun1(){
console.log("foooo works");
function fun2(){
console.log("fun2 in foooo.js works");
require.config({
foooo: '/js/foo'
require(["foooo"], function () {
console.log("main.js works");
index.html
data-main="/js/main" src="/js/require.js"&&
备注:js的路径这样写是因为nginx伪静态了js文件.
更新jquery版本.
整理清晰各个js文件加载的先后顺序和依赖关系.
chat.js插件中,使用到了main.js中定义的全局变量.main.js中也用到了此变量.暂时性的解决办法,将此全局变量的定义放到chat.js中,chat.js插件独立与main.js,先于main.js加载.
require.js
index.html
require.config({
foooo: '/js/foooo',
link: '/js/app/link.ios',
f7: '/js/mobile/framework7.min',
jquery: '/js/mobile/jquery.min',
cookie: '/js/mobile/jquery.cookie',
touchSlider: '/js/mobile/jquery.touchSlider',
calendar: '/js/mobile/calendar-mobile.1.0',
price: '/js/mobile/price-slider-app.1.0',
chat: '/js/mobile/chat',
fn: '/js/mobile/fn',
emoji: '/js/emoji',
swiper:'/js/mobile/swiper.jquery.min',
touchSlider: ['jquery'],
price:['jquery'],
swiper:['jquery'],
calendar:['jquery'],
chat:['jquery'],
require(["foooo","link","f7","jquery","cookie","touchSlider","calendar","price","chat","fn","emoji",'swiper'], function (a,b,c,jquery) {
console.log("main.js works");
foooo: 'foooo',
link: 'app/link.ios',
f7: 'mobile/framework7.min',
jquery: 'mobile/jquery.min',
cookie: 'mobile/jquery.cookie',
touchSlider: 'mobile/jquery.touchSlider',
calendar: 'mobile/calendar-mobile.1.0',
price: 'mobile/price-slider-app.1.0',
chat: 'mobile/chat',
fn: 'mobile/fn',
emoji: 'emoji',
swiper:'mobile/swiper.jquery.min'
name: "main",
out: "main-build.js"
$ npm install -g requirejs
$ r.js -o build.js
使用requirejs后,合并压缩前
使用requirejs后,合并压缩后
将mobile.js中的公共方法独立出来
不同页面的js独立出来,用require 写到main.js中,不再增加mobile.js的行数
继续改造优化文件目录,在build.js中设置各种新的参数
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：31514次
排名：千里之外
原创：26篇
转载：14篇
(6)(1)(1)(1)(1)(4)(3)(1)(2)(11)(8)(1)
(window.slotbydup = window.slotbydup || []).push({
id: '4740887',
container: s,
size: '250,250',
display: 'inlay-fix'& 2015 全栈科技,Inc. all rights reserved.Framework7中文教程-APP 基本HTML结构 - CSDN博客
Framework7中文教程-APP 基本HTML结构
IOS应用的基本页面布局
&!DOCTYPE html&
charset="utf-8"&
name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui"&
name="apple-mobile-web-app-capable" content="yes"&
name="apple-mobile-web-app-status-bar-style" content="black"&
rel="stylesheet" href="path/to/framework7.ios.min.css"&
rel="stylesheet" href="path/to/framework7.ios.colors.min.css"&
rel="stylesheet" href="path/to/my-app.css"&
class="statusbar-overlay"&&
class="views"&
class="view view-main"&
class="navbar"&
class="navbar-inner"&
class="center sliding"&标题&
class="pages navbar-through toolbar-through"&
data-page="index" class="page"&
class="page-content"&
&Page content goes here&
href="about.html"&About app&
class="toolbar"&
class="toolbar-inner"&
href="#" class="link"&Link 1&
href="#" class="link"&Link 2&
type="text/javascript" src="path/to/framework7.min.js"&&
type="text/javascript" src="path/to/my-app.js"&&
要点提示：
View &div class="view"& - 在应用中是一个独立的部分，她有自己的设置、页面切换和历史。每一个视图都可以有不同的导航栏、工具栏布局和不同的样式。所以View就像是嵌在应用中的另一个应用。这种功能可以让你来分别操作一个应用中的不同部分。
Views &div class="views"& - 是所有可见View的容器（不包括Modal和Panel）。Views 是你的应用主容器。一个应用中只能有一个 Views
View 可以放在应用中的任何位置，但是有一个重要的规则 - 所有的可见 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"&的子元素。这样才能保证正确的样式，布局和滚动。
和 external 的使用。
本文已收录于以下专栏：
相关文章推荐
访问：/nolimits4web/Framework7-Icons，并下载css和fonts文件夹步骤二
将css和fonts文件夹的内容拷贝到本地Fr...
Framework7中文演示DEMO，Accordion/折叠面板，Calendar /Datepicker
日历 /日期选择器，Cards 卡片，Contacts List 联系人列表，Forms...
在阅读本文之前请确认你的电脑已经安装好nodejs、Android SDK 、phoneGap。
1.获取Framework7源码
http://www.idangero.us/framework...
Framework7自有DOM库集成了大量常用的DOM操作，语法和JQuery大同小异，并且集成了模版引擎Template7。
MUI封装了部分事件，较F7拥有更丰富的UI组件,部分组件有H5版和原声...
framework7确实做的很赞，但是一直各种原因没有做什么app，
这个感觉就像大厨遇到百年难见的好材料，不炒个菜憋的慌，
机缘巧合周一周二两个晚上做了一个简单app，先看下效果：
...
1、Framework7中文教程-APP 基本HTML结构
这是刚做完的app项目的一点小总结，不是很专业，很多说法也不一定准确，是自己理解的，希望给和我一样的小菜鸟一点帮助！
3.1项目结构
项目基于 grunt 构建，我们写的JS代码主要在...
什么是 Framework7
Framework7 是一款免费开源的移动web开发框架(类似的知名框架有Jquery Mobile,sencha),用以开发IOS7风格、体验的混合移动应用和web应...
上下边栏：绝对定位或者fixed.相对独立，所以可以放到一个相对独立过程中去。
然后就是内容区：标题，内容，操作条 。
引用normailze.css，zepto.min.js，jquery.ba...
他的最新文章
讲师：宋宝华
讲师：何宇健
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)Getting Started With Framework7
Framework7 交流QQ群：
开始使用Framework7
使用Framework7可以很方便创建你的web应用，有两种快速上手的办法：
你可以从或者中选择一个应用并做修改成为自己的应用。也可以从头开始创建应用。
让我们看看如何从头开始创建一个应用:
下载安装Framework7
首先，我们需要下载Framework7需要的所有文件：
上下载代码。
或者通过bower来安装:
$ bower install framework7
在下载/安装好的目录下，我们需要的文件都在 dist 目录下
在这个基本APP中我们使用iOS主题。Android/Material 应用布局请参考
我们首选需要创建一个 index.html 文件。 这是一个 iOS 单页应用，有一个 view, left panel 和 动态穿透布局的navbar 和 toolbar:
&!DOCTYPE html&
&!-- 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 iOS CSS theme styles--&
&link rel="stylesheet" href="path/to/framework7.ios.min.css"&
&!-- Path to Framework7 iOS related color styles --&
&link rel="stylesheet" href="path/to/framework7.ios.colors.min.css"&
&!-- Path to your custom app styles--&
&link rel="stylesheet" href="path/to/my-app.css"&
&!-- 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&
&!-- 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&
&!-- 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&
&!-- 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&
&!-- 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&
我们写好布局，引用了 Framework7 的JS和CSS之后，我们需要初始化 APP 和 View. 在我们的 my-app.js 文件中这样写：
// Initialize app
var myApp = new Framework7();
// If we need to use custom DOM library, let's save it to $$ variable:
var $$ = Framework7.$;
// Add view
var mainView = myApp.addView('.view-main', {
// Because we want to use dynamic navbar, we need to enable it for this view:
dynamicNavbar: true
再添加一个Page
我们添加一个 "about app"页面，放在 about.html 文件中
&!-- We don't need full layout in this file because this page will be parsed with Ajax. It is just enough to put here .navbar and .page--&
&!-- Top Navbar--&
&div class="navbar"&
&div class="navbar-inner"&
&div class="left"&
&a href="#" class="back link"&
&i class="icon icon-back-blue"&&/i&
&span&Back&/span&
&div class="center sliding"&About&/div&
&div class="right"&
&a href="#" class="link icon-only open-panel"&&i class="icon icon-bars-blue"&&/i&&/a&
&div class="pages"&
&div data-page="about" class="page"&
&div class="page-content"&
&div class="content-block"&
&p&Here is About page!&/p&
&p&Fusce eros lectus, accumsan eget mi vel, iaculis tincidunt felis. Nulla tincidunt pharetra sagittis. Fusce in felis eros. Nulla sit amet aliquam lorem, et gravida ipsum. Mauris consectetur nisl non sollicitudin tristique. Praesent vitae metus ac quam rhoncus mattis vel et nisi. Aenean aliquet, felis quis dignissim iaculis, lectus quam tincidunt ligula, et venenatis turpis risus sed lorem. Morbi eu metus elit. Ut vel diam dolor.&/p&
给about页面添加JS代码
假设我们需要在 about 页面中执行JS代码。因为 about.html 页面是通过JS加载的，我们不能通过在 about.html 中添加 &script& 标签的方式来添加JS代码，因为script标签会直接被忽略。所说，Framework7 提供了简单的回调函数，我们可以在 my-app.js中使用：
// Initialize app and store it to myApp variable for futher access to its methods
var myApp = new Framework7();
// We need to use custom DOM library, let's save it to $$ variable:
var $$ = Framework7.$;
// Add view
var mainView = myApp.addView('.view-main', {
// Because we want to use dynamic navbar, we need to enable it for this view:
dynamicNavbar: true
// Now we need to run the code that will be executed only for About page.
// For this case we need to add event listener for "pageInit" event
// Option 1. Using one 'pageInit' event handler for all pages (recommended way):
$$(document).on('pageInit', function (e) {
// Get page data from event data
var page = e.detail.
if (page.name === 'about') {
// Following code will be executed for page with data-page attribute equal to "about"
myApp.alert('Here comes About page');
// Option 2. Using live 'pageInit' event handlers for each page
$$(document).on('pageInit', '.page[data-page="about"]', function (e) {
// Following code will be executed for page with data-page attribute equal to "about"
myApp.alert('Here comes About page');
我们只需要在浏览器中输入 index.html 的地址即可。 因为Framework7是通过Ajax在不同页面间跳转的，所以你需要启动一个 http 服务器才可以（不要直接打开本地文件)
查看 ，这里有非常关于Framework7所有组件、布局、API等的详细文档。
查看 . 有些教程会很有用.
，可能会对你开始写自己的应用有很大的帮助.
如果你发现任何bug，可以在
给我们提issue。
Framework7 交流QQ群：
2015 (C) Framework7 by iDangero.us
翻译 by SDC-ALIBABA