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. struct ifreq 获取IP 和mac和修改mac

    2012-09-11 14:26 struct ifreq 获取IP 和mac和修改mac 配置ip地址和mask地址: ifconfig eth0 192.168.50.22  netmask 25 ...

  2. Windows下安装ActiveMQ

    到官网(http://activemq.apache.org/download-archives.html)下载最新发布的压缩包(我下的是5.15.9)到本地后解压(我解压到D盘Dev目录下)即可.进 ...

  3. JavaScript——closures(待续)

    问答原文:How do JavaScript closures work?

  4. web端安全测试工具

    https://www.cnblogs.com/ios9/p/7692373.html 十大web安全扫描工具 扫描程序可以在帮助造我们造就安全的Web 站点上助一臂之力,也就是说在黑客“黑”你之前, ...

  5. LVS搭建负载均衡集群（一）——NAT模式

    (1).集群技术的分类 集群技术主要分为三大类:负载均衡(Load Balance)集群,简称LB集群:高可用(High Availability)集群,简称 HA 集群:高性能计算(High Per ...

  6. Java RSA分段加密

    我们通过Java进行RSA加密的时候,可能会出现如下问题: /** * 私钥加密 * * @param data 待加密数据 * @param key 密钥 * @return byte[] 加密数据 ...

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

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

  8. 红绿灯 promise和原始方式实现

    Promise 方式 async+await function sleep(duration){ return new Promise(function(resolve){ setTimeout(re ...

  9. 如何实现批量截取整个网页完整长截图,批量将网页保存成图片web2pic/webshot/screencapture/html2picture

    如何实现批量截取整个网页完整长截图,批量将网页保存成图片web2pic/webshot/screencapture [困扰?疑问?]: 您是否正受到:如何将网页保存为图片的困扰?网页很高很长截图截不全 ...

  10. Egret入门学习日记 --- 第十三篇（书中 5.2~5.3节 内容）

    第十三篇(书中 5.2~5.3节 内容) 写日记已经十天多了,我发现越到后面,我书写的方式越来越程序化. 感觉渐渐失去了人类所谓的感情似的. 不过,没想到的是,书中的内容,很少出现了错误,我一路过来到 ...