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. Gitlab分支保护

    问题:使用Git时,会碰到需要对某个分支进行保护,避免其他人随意push. 这里以gitlab为例,具体操作如下: 1.进入项目 2.点击左侧列表中的Settings 3.点击Protected Br ...

  2. 算法习题---4.3救济金发放（UVa133）

    一:题目 (n< )个人站成一圈,逆时针编号为1~n.有两个官员,A从1开始逆时针数,B从n开始顺时针数.在每一轮中,官员A数k个就停下来,官员B数m个就停下来(注意有可能两个官员停在同一个人上 ...

  3. https://www.cnblogs.com/

    Linux如何查看端口 1.lsof -i:端口号 用于查看某一端口的占用情况,比如查看8000端口使用情况,lsof -i:8000 # lsof -i:8000 COMMAND PID USER ...

  4. QML渐变色

    Rectangle { id: tab_btn width: height: parent.height color: "black" gradient: Gradient { G ...

  5. SpringCloud学习成长之 十 高可用服务注册中心

    文章 第一篇: 服务的注册与发现(Eureka) 介绍了服务注册与发现,其中服务注册中心Eureka Server,是一个实例,当成千上万个服务向它注册的时候,它的负载是非常高的,这在生产环境上是不太 ...

  6. MySQL数据库表的设计和优化（上）

    一.单表设计与优化: (1)设计规范化表,消除数据冗余(以使用正确字段类型最明显):数据库范式是确保数据库结构合理,满足各种查询需要.避免数据库操作异常的数据库设计方式.满足范式要求的表,称为规范化表 ...

  7. Swift学习 （三）

    3.函数: 在Swift中函数的定义基本与OC一样. 主要区别为: 通过func关键词定义函数 返回值在->关键词后标注 各举一个类方法与实例方法例子. 1 2 + (UIColor*)blac ...

  8. php控制访问人数的方法

    php控制访问人数的方法 <pre>//添加访问人数 public function addfangwen() { header("Content-type:text/html; ...

  9. python线程事件Event（30）

    在python项目开发中,线程thread使用是比较常见的,在前面的文章中我们介绍了 python线程的创建 以及 线程互斥锁 ,今天还要额外介绍一个与线程相关的内容 – 事件Event. 一.pyt ...

  10. ROS下gazebo打开出现问题

    通常情况下,在装完ros后,打开gazebo, 会出现无法连接服务器获取模型的情况.这样,我们打开gazebo, 终端会提示timeout,gazebo界面没有网格. 这是因为服务器网站地址好像已经换 ...