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. 阶段5 3.微服务项目【学成在线】_day07 课程管理实战_05-课程修改实战分析

    3 课程信息修改 3.1 需求分析 课程添加成功进入课程管理页面,通过课程管理页面修改课程的基本信息.编辑课程图片.编辑课程营销信息等. 本小节实现修改课程. 3.2 课程管理页面说明 3.2.1 页 ...

  2. 阶段5 3.微服务项目【学成在线】_day07 课程管理实战_02-我的课程-前端页面与Api说明

    我的课程列表使用element 的card组件,如下: 前端页面代码 点击新增到了一个新增课程的页面 新增课程的界面 下面的card是循环遍历的代码 写死的card的静态数据 请求服务端的接口拿到数据 ...

  3. C/C++程序所占用内存区域

    C/C++编译的程序所占用内存区域一般分为以下5个部分: 栈区(stack):由编译器自动分配和释放,用来存放函数的参数.局部变量等.其操作方式类似于数据结构中的栈. 堆区(heap):一般由程序员分 ...

  4. npm教程、脚手架

    使用之前,我们先来掌握3个东西是用来干什么的. npm: Nodejs下的包管理器. webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的 ...

  5. CentOS7下JSP连接Mysql

    实验环境如下: youxi1 CentOS7.5 Tomcat8.5.35 192.168.5.101 youxi2 CentOS7.5 Mysql5.7.20 192.168.5.102 (1).下 ...

  6. PAT 甲级 1055 The World's Richest (25 分)（简单题，要用printf和scanf，否则超时，string 的输入输出要注意）

    1055 The World's Richest (25 分)   Forbes magazine publishes every year its list of billionaires base ...

  7. ClientDataSet中修改，删除，添加数据和Delta属性

    ClientDataSet中使用Post提交变更的数据时,实际上并没有更新到后端数据库中,而是提交到了由DataSnap管理的数据缓冲区中.当使用了ClientDataSet.ApplyUpDates ...

  8. java springmvc 前端 跨域问题

    有个朋友在写扇贝插件的时候遇到了跨域问题.于是我对解决跨域问题的方式进行了一番探讨. 问题 API:查询单词URL: https://api.shanbay.com/bdc/search/?word= ...

  9. .net视频截图功能，没测试

    /// <summary> /// @从视频文件截图,生成在视频文件所在文件夹 /// 在Web.Config 中需要两个前置配置项: /// 1.ffmpeg.exe文件的路径 ///  ...

  10. 上下文管理器之__enter__和__exit__

    目录 前言 with as是如何工作的 自定制open方法 更多的示例 返回主目录 前言 回到顶部 有个学生在第四轮面试中被CTO问到:如何自定义实现with open的功能.然后就一脸懵逼的回来找我 ...