1，Framework7介绍

（1）Framework7 是一个开源免费的框架。可以用来开发混合移动应用（原生和 HTML 混合）或者开发 iOS & Android 风格的 WEB APP。也可以用来作为原型开发工具，可以迅速创建一个应用的原型。
（2）使用时只需要一个基本的 HTML 布局，并且把 Framework7 的 CSS 和 JS 文件引入即可！Framework7 不会强制你写任何自定义的标签，也不会通过 JS 来生成任何额外的内容。你不需要通过 JS 或者 JSON 来写页面，只需要普通的 HTML 就可以。
（3）Framework7 有大量可以直接使用的 UI 组件和工具，比如 modals,popup,action sheet, popover, list views, media lists, tabs, side panels, layout grid, preloader, form elements 等。大部分的组件你都完全不需要写任何 JS 代码。
2，样例效果图
下面通过一个简单的入门样例演示 Framework7 的使用，先上效果图。
（1）首页面如下，上下是位置固定的导航栏和工具栏，中间是内容区域（可滚动）

（2）点击导航栏右侧按钮，即可打开左面板。

（3）点击首页上的“跳转到关于页面”链接，即可跳转到新页面。新页面是使用 Ajax 加载，完毕后会有回调（我这里弹出个消息框）。同时支持滑动返回（这个是完全跟随手指移动的）
          
3，实现步骤
（1）首先上 Framework7 官网下载最新的代码，地址：http://framework7.io
（2）我们将 dist 文件夹下的 css、img、js 复制到我们项目中来。

（3）项目中新建一个首页面 index.html，内容如下。
这是一个单页应用，有一个 view、left panel 和动态穿透布局的 navbar 和 toolbar。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!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">
    <!-- app标题 -->
    <title>hangge</title>
    <!-- 使用iOS CSS主题样式-->
    <link rel="stylesheet" href="css/framework7.ios.min.css">
    <!-- iOS related颜色样式 -->
    <link rel="stylesheet" href="css/framework7.ios.colors.min.css">
    <!-- 自定义样式-->
    <link rel="stylesheet" href="css/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>
    <!-- 左侧面板，显示隐藏时带有效果（reveal effect）-->
    <div class="panel panel-left panel-reveal">
      <div class="content-block">
        <p>这里放置左测面板内容。</p>
      </div>
    </div>
    <!-- 所有的Views视图 -->
    <div class="views">
      <!-- 主视图（需要有"view-main"样式） -->
      <div class="view view-main">
        <!-- 顶部导航栏 -->
        <div class="navbar">
          <div class="navbar-inner">
            <!-- 标题元素（为了让页面切换时标题文字有滑动效果，添加sliding样式） -->
            <div class="center sliding">hangge.com</div>
            <div class="right">
              <!--
                导航栏右侧只有一个图标（"icon-only"样式）
                “open-panel”样式表示点击时打开左侧面板
              -->
              <a href="#" class="link icon-only open-panel"><i class="icon icon-bars"></i></a>
            </div>
          </div>
        </div>
        <!-- 页面容器（Pages container）由于我们使用了固定位置的navbar和toolbar，
              所以这里添加额外样式（navbar-through和toolbar-through）-->
        <div class="pages navbar-through toolbar-through">
          <!-- 首页, "data-page" 里设置页面名字 -->
          <div data-page="index" class="page">
            <!-- 支持滚动的页面内容 -->
            <div class="page-content">
              <p>这里是首页内容。</p>
              <!-- 导航到另一个页面 -->
              <a href="about.html">跳转到“关于”页面</a>
            </div>
          </div>
        </div>
        <!-- 底部工具栏 -->
        <div class="toolbar">
          <div class="toolbar-inner">
            <!-- 工具栏链接 -->
            <a href="#" class="link">链接1</a>
            <a href="#" class="link">链接2</a>
          </div>
        </div>
      </div>
    </div>
    <!-- Framework7框架的js-->
    <script type="text/javascript" src="js/framework7.min.js"></script>
    <!-- 你的应用的js -->
    <script type="text/javascript" src="js/my-app.js"></script>
  </body>
</html>

（4）“关于”页面（about.html），通过点击首页上的链接跳转过来。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!-- 这个页面由于会通过Ajax加载，所以我们不需要实现完整的布局，只需添加.navbar和.page即可-->
<!-- 顶部导航栏 -->
<div class="navbar">
  <div class="navbar-inner">
    <div class="left">
      <a href="#" class="back link">
        <i class="icon icon-back"></i>
        <span>返回</span>
       </a>
    </div>
    <div class="center sliding">关于</div>
    <div class="right">
      <a href="#" class="link icon-only open-panel"><i class="icon icon-bars"></i></a>
    </div>
  </div>
</div>
<div class="pages">
  <div data-page="about" class="page">
    <div class="page-content">
      <div class="content-block">
        <p>欢迎访问 www.hangge.com</p>
        <p>航歌-做最好的开发者知识平台。分享各种移动应用，桌面应用，web应用等编程开发经验。
          随时更新最新的技术文章，值得您每天都来看看。</p>
      </div>
    </div>
  </div>
</div>
 

（5）my-app.js

这里面进行 APP 和 View 的初始化。同时因为 about.html 页面是通过 JS 加载的，我们不能通过在 about.html 中添加 <script> 标签的方式来添加 JS 代码，因为 script 标签会直接被忽略。这里我们使用 Framework7 提供的回调函数。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
// 初始化 app
var myApp = new Framework7();
 
// 为便于使用，自定义DOM库名字为$$
var $$ = Dom7;
 
// 添加视图
var mainView = myApp.addView('.view-main', {
  // 让这个视图支持动态导航栏
  dynamicNavbar: true
});
 
// 下面代码是给“关于”页面使用的（关于页面加载完毕后触发）
 
// 方式1：通过页面回调 (推荐):
myApp.onPageInit('about', function (page) {
  myApp.alert('"关于"页面加载完毕1!');
})
 
// 方式2：通过pageInit事件处理所有页面
$$(document).on('pageInit', function (e) {
  // 获取页面数据
  var page = e.detail.page;
 
  //判断是否是“关于”页面
  if (page.name === 'about') {
    myApp.alert('"关于"页面加载完毕2!');
  }
})
 
// 方式2：通过pageInit事件处理所有页面(过滤出 data-page 属性为about的页面)
$$(document).on('pageInit', '.page[data-page="about"]', function (e) {
  myApp.alert('"关于"页面加载完毕3!');
})

4，运行测试

因为 Framework7 是通过 Ajax 在不同页面间跳转的，所以你需要启动一个 http 服务器才可以（不要直接打开本地文件)。
或者使用 Cordova 等第三方工具将页面打包成 App，安装到手机上测试。

原文出自：www.hangge.com  转载请保留原文链接：http://www.hangge.com/blog/cache/detail_1304.html

Framework7 - 入门教程（安装、配置、创建一个H5应用）的更多相关文章

  1. Duilib 入门教程： 怎么创建一个自定义的窗口

    一直想找一个好用UI 界面库,看过Direct UI,也想过 金山的界面库,后来找到了这个Duilib 现在的软件界面很多都是利用XML 来布局和定位. 像迅雷7,QQ,金山卫士等 [html] vi ...

  2. WPF入门教程系列(一) 创建你的第一个WPF项目

    WPF入门教程系列(一) 创建你的第一个WPF项目 WPF基础知识 快速学习绝不是从零学起的,良好的基础是快速入手的关键,下面先为大家摞列以下自己总结的学习WPF的几点基础知识: 1) C#基础语法知 ...

  3. Node.js npm基础安装配置&创建第一个VUE项目

    使用之前,我们先来明白这几个东西是用来干什么的. node.js: 一种javascript的运行环境,能够使得javascript脱离浏览器运行.Node.js的出现,使得前后端使用同一种语言,统一 ...

  4. Spring Cloud 入门教程 - 搭建配置中心服务

    简介 Spring Cloud 提供了一个部署微服务的平台,包括了微服务中常见的组件:配置中心服务, API网关,断路器,服务注册与发现,分布式追溯,OAuth2,消费者驱动合约等.我们不必先知道每个 ...

  5. opencv ，亮度调整【【OpenCV入门教程之六】 创建Trackbar & 图像对比度、亮度值调整

    http://blog.csdn.net/poem_qianmo/article/details/21479533 [OpenCV入门教程之六] 创建Trackbar & 图像对比度.亮度值调 ...

  6. 【菜鸟入门】安装配置eclipse 并编写运行第一个Java程序

    不得不吐槽一下,安装配置这eclipse真是太费劲了...下面总结一下,以便下次再安装 本人 win10系统,64位机 一.在官网下载eclipse安装包 文件名:eclipse-inst-win64 ...

  7. CTF必备技能丨Linux Pwn入门教程——环境配置

    说在前面 这是一套Linux Pwn入门教程系列,作者依据Atum师傅在i春秋上的Pwn入门课程中的技术分类,并结合近几年赛事中出现的一些题目和文章整理出一份相对完整的Linux Pwn教程. 问:为 ...

  8. EntityFramework_MVC4中EF5 新手入门教程之一 ---1.创建实体框架数据模型

    Contoso University  Web 应用程序 你会在这些教程中构建的应用程序是一个简单的大学网站. 用户可以查看和更新学生. 课程和教师信息.这里有几个屏幕,您将创建. 这个网站的用户界面 ...

  9. intellij安装 配置 创建项目

    使用intellij创建项目的整个过程如下: 首先,点击intllij的.exe文件,如果是第一次安装,选择第二个选项即可 Intellij需要license key,可以使用注册机生成相应的name ...

随机推荐

  1. spring boot入门学习---热部署

    1.maven文件 2.application.properties文件配置

  2. SpringMVC+Ajax实现文件批量上传和下载功能实例代码

    需求: 文件批量上传,支持断点续传. 文件批量下载,支持断点续传. 使用JS能够实现批量下载,能够提供接口从指定url中下载文件并保存在本地指定路径中. 服务器不需要打包. 支持大文件断点下载.比如下 ...

  3. python中计算上个月和下个月的第一天的方法

    闹腾,一个简单的东西复杂化了,记录下吧: import datetime,time def get_1st_of_last_month(): """ 获取上个月第一天的日 ...

  4. djando模板----第一django模板应用

    Django模板 我们已经知道,模板函数的函数的返回值就是返回给客户端的数据,但如果返回数据很复杂,如果一个非常大的html页面,直接将页面代码固化在python脚本文件中是不合适的,当然 也可以将h ...

  5. html的css背景图的repeat

    HTML里background-image中,可以设置background-repeat实现平铺,前面博文中关于css样式换行的(相关博文:超文本css样式换行),其中有个三个div组合的,中间的di ...

  6. 《Fluid Engine Development》 学习笔记1-求解线性方程组

    我个人对基于物理的动画很感兴趣,最近在尝试阅读<Fluid Engine Development>,由于内容涉及太多的数学问题,而单纯学习数学又过于枯燥,难以坚持学习(我中途放弃好多次了) ...

  7. Java程序的编写与执行、Java新手常见问题及解决方法|乐字节Java学习

    今天,我们来写一段Java程序.然后看看Java程序是如何执行的,以及Java新手小白遇到的问题和解决办法.   一.HelloWorld的编写 ① 新建一个XXX.java (文件的扩展名显示出来) ...

  8. Feign【首次请求失败】

    当feign和ribbon整合hystrix之后,可能会出现首次调用失败的问题,出现原因分析如下: hystrix默认的超时时间是1秒,如果接口请求响应超过这个时间,将会执行fallback,spri ...

  9. pythn print格式化输出:%s与%d

    pythn print格式化输出. %r 用来做 debug 比较好,因为它会显示变量的原始数据(raw data),而其它的符号则是用来向用户显示输出的. 1. 打印字符串 print (" ...

  10. 怎样解决Chrome浏览器因为禁止音频自动播放所造成的视频无法自动播放且报错: Uncaught (in promise) DOMException的问题

    这个问题是谷歌基于用户体验方面的考虑, 对页面加载时自动播放的音频作了限制, 试想一下, 如果你打开某个页面就立刻自动播放某种不可描述的声音, 那体验想必是十分酸爽. 尽管这个设定是针对音频的, 但实 ...