Framework7 - 快速指南

Framework7 - 概述

Framework7 是一个免费的开源移动 HTML 框架。它用于开发适用于 iOS 和 Android 设备的混合移动应用程序或 Web 应用程序。

Framework7 于 2014 年推出。最新版本 1.4.2 于 2016 年 2 月发布，获得 MIT 许可。

为什么使用Framework7？

  • 开发 iOS 和 Android 应用程序更加容易。
  • Framework7 的学习曲线非常简单。
  • 它有许多预先设计的小部件/组件。
  • 它有内置的帮助程序库。

特征

  • Framework7 是一个开源且免费使用的框架。

  • Framework7 具有简单且熟悉的 jQuery 语法，可以立即上手。

  • 为了控制触摸 UI 的点击延迟，Framework7 内置了FastClick库。

  • Framework7 具有内置的网格系统布局，用于响应式地排列元素。

  • Framework7 通过灵活的路由器 api从模板动态加载页面。

优点

  • Framework7 不依赖于任何第三方库，甚至对于 DOM 操作也是如此。相反，它有自己的自定义 DOM7。

  • Framework7 还可以与Angular和React框架一起使用。

  • 了解 HTML、CSS 和一些基本的 JavaScript 后，您就可以开始创建应用程序。

  • 它支持通过Bower进行更快的开发。

  • 无需学习即可轻松开发 iOS 和 Android 应用程序。

缺点

  • Framework7仅支持iOS和Android等平台。

  • 与iOS和Andriod相比，Framework7框架的在线社区支持较少。

Framework7 - 环境

在本章中，我们将讨论如何安装和设置Framework7。

您可以通过两种方式下载 Framework7 -

从Framework7 Github 存储库下载

您可以使用 Bower 安装 Framework7，如下所示 -

bower install framework7

成功安装 Framework7 后，您需要按照以下给出的步骤在您的应用程序中使用 Framework7 -

步骤 1 - 您需要使用以下命令安装gulp-cli来构建 Framework7 的开发版本和发行版本。

npm install gulp-cli

cli代表 Gulp 命令行实用程序。

步骤 2 - 必须使用以下命令全局安装 Gulp。

npm install --global gulp

步骤 3 - 接下来，安装 NodeJS 包管理器，它会安装节点程序，以便更轻松地指定和链接依赖项。以下命令用于安装 npm。

npm install

步骤 4 - 可以使用以下命令构建 Framework7 的开发版本。

npm build

步骤 5 - 构建 Framework7 的开发版本后，使用以下命令开始从dist/文件夹构建应用程序。

npm dist

步骤 6 - 将您的应用程序文件夹保留在服务器中，并运行以下命令以在应用程序页面之间导航。

gulp server

从 CDN 下载 Framework7 库

CDN 或内容交付网络是旨在为用户提供文件服务的服务器网络。如果您在网页中使用 CDN 链接，则会将托管文件的责任从您自己的服务器转移到一系列外部服务器。这还有一个优点，即如果您网页的访问者已经从同一 CDN 下载了 Framework7 的副本，则无需重新下载。您可以将以下 CDN 文件包含到 HTML 文档中。

以下 CDN 用于iOS 应用程序布局-

<link rel = "stylesheet" 
   href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />

它用于将 Framework7 iOS CSS 库包含到您的应用程序中。

<link rel = "stylesheet" 
   href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />

它用于将 Framework7 iOS 相关的颜色样式包含到您的应用程序中。

以下 CDN 用于Android/Material 应用布局-

<script src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>

它用于将 Framework7 JS 库包含到您的应用程序中。

<script src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.min.css"></script>

它用于将 Framework7 Material 样式包含到您的应用程序中。

我们在本教程中使用该库的 CDN 版本。我们使用 AMPPS（AMPPS 是 Apache、MySQL、MongoDB、PHP、Perl 和 Python 的 WAMP、MAMP 和 LAMP 堆栈）服务器来执行我们所有的示例。

例子

以下示例演示了 Framework7 中简单应用程序的使用，当您单击导航栏时，该应用程序将显示带有自定义消息的警报框。

<!DOCTYPE html>
<html>
   
   <head>
      <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" />
      <title>My App</title>
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
   </head>
   
   <body>
      //you can control the background color of the Status bar
      <div class = "statusbar-overlay"></div>
      <div class = "panel-overlay"></div>
      
      <div class = "panel panel-right panel-reveal">
         <div class = "content-block">
            <p>Contents goes here...</p>
         </div>
      </div>
      
      <div class = "views">
         <div class = "view view-main">
            <div class = "navbar">
               <div class = "navbar-inner">
                  <div class = "center sliding">My App</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 navbar-through toolbar-through">
               <div data-page = "index" class = "page">
                  <div class = "page-content">
                     <p>This is simple application...</p>
                     <div class = "list-block">
                        <ul>
                           <li>
                              <a href = "envirmnt_about.html" class = "">
                                 <div class = "item-content">
                                    <div class = "item-inner">
                                       <div class = "item-title">Blog</div>
                                    </div>
                                 </div>
                              </a>
                           </li>
                        </ul>
                     </div>
                  </div>
               </div>
            </div>
            
            <div class = "toolbar">
               <div class = "toolbar-inner">
                  <a href = "#" class = "link">First Link</a>
                  <a href = "#" class = "link">Second Link</a>
               </div>
            </div>
         </div>
      </div>
      
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
      
      <script>
         // here initialize the app
         var myApp = new Framework7();

         // If your using custom DOM library, then save it to $$ variable
         var $$ = Dom7;

         // Add the view
         var mainView = myApp.addView('.view-main', {
            
            // enable the dynamic navbar for this view:
            dynamicNavbar: true
         });

         //use the 'pageInit' event handler for all pages
         $$(document).on('pageInit', function (e) {
         
            //get page data from event data
            var page = e.detail.page;

            if (page.name === 'blog') {
            
               // you will get below message in alert box when page with data-page attribute is equal to "about"
               myApp.alert('Here its your About page');
            }
         })
      </script>
   </body>

</html>

接下来，再创建一个 HTML 页面，即envirmnt_about.html，如下所示 -

环境_about.html

<div class = "navbar">
   <div class = "navbar-inner">
      <div class = "left">
         <a href = "#" class = "back link">
            <i class = "icon icon-back"></i>
            <span>Back</span>
         </a>
      </div>
      
      <div class = "center sliding">My Blog</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 = "blog" class = "page">
      <div class = "page-content">
         <div class = "content-block">
            <h2>My Blog</h2>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
         </div>
      </div>
   </div>
</div>

输出

让我们执行以下步骤来看看上面给出的代码是如何工作的 -

  • 将上述 HTML 代码保存为服务器根文件夹中的Framework7_environment.html文件。

  • 打开此 HTML 文件 http://localhost/framework7_environment.html 并显示输出，如下所示。

  • 当您单击导航栏时，它将显示带有自定义消息的警报框。

Framework7 - 布局

描述

Framework7 为您的应用程序提供了不同类型的布局。它支持三种类型的导航栏/工具栏布局 -

序列号 布局类型和描述
1 静态布局

静态布局是最常用的布局类型，包括导航栏和工具栏，可以是可滚动的页面内容，每个页面都包含自己的导航栏和工具栏。
2 固定布局

固定布局包括自己的导航栏和工具栏，它们可以在屏幕上可见，但不能在页面上滚动。
3 通过布局

在此布局中，导航栏和工具栏对于单个视图中的所有页面来说都是固定的。
4 混合布局

您可以在单个视图中混合不同类型的布局。

没有导航栏/工具栏

如果您不想使用导航栏和工具栏，则不要在页面/页面/视图中包含适当的类（navbar-fixed、navbar-through、toolbar-fixed、toolbar-through）。

Framework7 - 导航栏

描述

在本章中，我们来研究一下导航栏。它通常放置在包含页面标题和导航元素的屏幕顶部。

导航栏由三个部分组成，每个部分都可以包含任何 HTML 内容，但建议您按照下面给出的方式使用它们 -

  • 左- 它旨在放置后退链接图标或单个文本链接。

  • 中心- 用于显示页面或选项卡链接的标题。

  • 右- 这部分与左部分类似。

下表详细演示了导航栏的使用-

序列号 导航栏类型和描述
1 基本导航栏

可以使用navbar、navbar-inner、left、center和right类创建基本导航栏。
2 带有链接的导航栏

要在导航栏的左右部分使用链接，只需添加带有link类的<a>标签。
3 多个链接

要使用多个链接，只需在您选择的部分添加几个<a class = "link">即可。
4 带有文本和图标的链接

通过添加图标类并使用<span>元素包装链接文本，可以为链接提供图标和文本。
5 仅包含图标的链接

通过向链接添加仅图标类，可以仅向导航栏链接提供图标。
6 相关app及查看方法

在初始化View时，framework7 允许您使用可用于导航栏的方法。
7 自动隐藏导航栏

对于某些不需要导航栏的 Ajax 加载页面，导航栏可以自动隐藏/显示。

Framework7 - 工具栏

描述

通过使用屏幕底部的导航元素，工具栏可以轻松访问其他页面。

您可以通过表中指定的两种方式使用工具栏 -

序列号 工具栏类型和说明
1 隐藏工具栏

通过使用加载页面的no-toolbar类，您可以在加载页面时自动隐藏工具栏。
2 底部工具栏

使用工具栏底部类将工具栏放置在页面底部。

工具栏方法

以下可用方法可与工具栏一起使用 -

序列号 工具栏方法及说明
1

myApp.hideToolbar(工具栏)

它隐藏指定的工具栏。
2

myApp.showToolbar(工具栏)

它显示指定的工具栏。
3

view.hideToolbar()

它隐藏视图中指定的工具栏。
4

view.showToolbar()

它在视图中显示指定的工具栏。

例子

下面的例子演示了Framework7中工具栏布局的使用。

首先，我们将创建一个名为toolbar.html的 HTML 页面，如下所示 -

<!DOCTYPE html>
<html>

   <head>
      <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" />
      <title>Toolbar Layout</title>
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
   </head>

   <body>
      <div class = "views">
         <div class = "view view-main">
         
            <div class = "navbar">
               <div class = "navbar-inner">
                  <div class = "center sliding">Toolbar Layout</div>
               </div>
            </div>
            
            <div class = "pages navbar-through">
               <div data-page = "index" class = "page with-subnavbar">
                  <div class = "page-content">
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                     Suspendisse at nibh felis. Nunc consequat diam et tellus tempor gravida. 
                     Donec hendrerit aliquet risus, ut tempor purus dictum sit amet. Aenean 
                     sagittis interdum leo in molestie. Aliquam sodales in diam eu consectetur. 
                     Sed posuere a orci id imperdiet.</p>
                     
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                     Suspendisse at nibh felis. Nunc consequat diam et tellus tempor gravida. 
                     Donec hendrerit aliquet risus, ut tempor purus dictum sit amet. Aenean 
                     sagittis interdum leo in molestie. Aliquam sodales in diam eu consectetur. 
                     Sed posuere a orci id imperdiet.</p>
                  </div>
               </div>
            </div>
            
            <div class = "toolbar">
               <div class = "toolbar-inner">
                  <a href = "#" class = "link">Link 1</a>
                  <a href = "#" class = "link">Link 2</a>
                  <a href = "#" class = "link">Link 3</a>
               </div>
            </div>
            
         </div>
      </div>
      
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
         
      <script>
         // here initialize the app
         var myApp = new Framework7();

         // If your using custom DOM library, then save it to $$ variable
         var $$ = Dom7;

         // Add the view
         var mainView = myApp.addView('.view-main', {
         
            // enable the dynamic navbar for this view
            dynamicNavbar: true
         });
      </script>
   </body>

</html>

现在，在自定义 JS 文件toolbar.js中初始化您的应用程序和视图。

输出

让我们执行以下步骤来看看上面给出的代码是如何工作的 -

  • 将上面给定的 HTML 代码保存为服务器根文件夹中的toolbar.html文件。

  • 以 http://localhost/toolbar.html 打开此 HTML 文件，输出如下所示。

Framework7 - 搜索栏

描述

Framework 7 允许使用searchbar类搜索元素。

搜索栏参数

序列号 参数及说明 类型 默认
1

搜索列表

它搜索列表的 CSS 选择器或 HTML 元素。

 字符串或 HTML 元素 -
2

搜索

您可以搜索 CSS 选择器的列表视图元素，也可以通过传递.item-title、.item-text类来搜索元素。

 细绳 '.项目标题'
3

成立

它使用“found”元素搜索 CSS 选择器或 HTML 元素。此外，如果没有指定元素，它会使用.searchbar-found元素。

 字符串或 HTML 元素 -
4

未找到

它使用“not-found”元素搜索 CSS 选择器或 HTML 元素。此外，如果没有指定元素，它会使用.searchbar-not-found元素。

 字符串或 HTML 元素 -
5

覆盖

它使用“searchbar overlay”元素搜索 CSS 选择器或 HTML 元素，如果没有指定元素，则使用.searchbar-overlay元素。

 字符串或 HTML 元素 -
6

忽略

您可以使用搜索栏忽略项目的 CSS 选择器。

 细绳 '.searchbar-忽略'
7

自定义搜索

启用后，搜索栏将不会搜索由searchList指定的任何列表块，并且您将被允许使用自定义搜索功能。

 布尔值 错误的
8

删除变音符号

搜索元素时，通过启用此参数删除变音符号。

 布尔值 错误的
9

隐藏分隔线

如果没有项目，此参数将隐藏项目分隔符和组标题。

 布尔值 真的
10

隐藏组

如果列表视图组中没有找到任何项目，此参数将隐藏组。

 布尔值 真的

搜索栏回调

序列号 回调和描述 类型 默认
1

搜索上

该方法将在搜索时触发回调函数。

 功能） -
2

启用

当搜索栏激活时，此方法将触发回调函数。

 功能） -
3

禁用

当搜索栏变为非活动状态时，此方法将触发回调函数。

 功能） -
4

清除

当您单击“清除”元素时，此方法将触发回调函数。

 功能） -

搜索栏属性

序列号 属性及说明
1

mySearchbar.params

表示随对象传递的初始化参数。
2

mySearchbar.query

搜索当前查询。
3

mySearchbar.searchList

定义搜索列表块。
4

mySearchbar.container

使用 HTML 元素定义搜索栏容器。
5

mySearchbar.input

使用 HTML 元素定义搜索栏输入。
6

mySearchbar.active

它定义搜索栏是启用还是禁用。

搜索栏方法

序列号 方法与说明
1

mySearchbar.search(查询);

此方法搜索传递的查询。
2

mySearchbar.enable();

它启用搜索栏。
3

mySearchbar.disable();

它禁用搜索栏。
4

mySearchbar.clear();

您可以清除查询和搜索结果。
5

mySearchbar.destroy();

它会破坏搜索栏实例。

搜索栏 JavaScript 事件

序列号 活动及描述 目标
1

搜索

您可以在搜索元素时触发此事件。

 <div class="list-block">
2

清除搜索

当用户单击clearSearch 元素时，将触发此事件。

 <div class="list-block">
3

启用搜索

当搜索栏启用时，该事件将被触发。

 <div class="list-block">
4

禁用搜索

当搜索栏被禁用并且用户单击取消按钮或“搜索栏覆盖”元素时，将触发此事件。

 <div class="list-block">

例子

以下示例演示了 Framework7 中滚动搜索栏的使用 -

<!DOCTYPE html>
<html>

   <head>
      <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" />
      <title>Search Bar Layout</title>
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
   </head>

   <body>
      <div class = "views">
         <div class = "view view-main">
            <div class = "pages navbar-fixed">
               <div data-page = "home" class = "page">
               
                  <div class = "navbar">
                     <div class = "navbar-inner">
                        <div class = "center sliding">Search Bar Layout</div>
                     </div>
                  </div>
                  
                  <form data-search-list = ".list-block-search" data-search-in = ".item-title" 
                     class = "searchbar searchbar-init">
                     <div class = "searchbar-input">
                        <input type = "search" placeholder = "Search"><a href = "#" 
                           class = "searchbar-clear"></a>
                     </div>
                     <a href = "#" class = "searchbar-cancel">Cancel</a>
                  </form>
                  
                  <div class = "searchbar-overlay"></div>
                  
                  <div class = "page-content">
                     <div class = "content-block searchbar-not-found">
                        <div class = "content-block-inner">No element found...</div>
                     </div>
                     
                     <div class = "list-block list-block-search searchbar-found">
                        <ul>
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">India</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Argentina</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Belgium</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Brazil</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Canada</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Colombia</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Denmark</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Ecuador</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">France</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Germany</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Greece</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Haiti</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Hong Kong</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Iceland</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Ireland</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Jamaica</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Japan</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Kenya</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Kuwait</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Libya</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Liberia</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Malaysia</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Mauritius</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Mexico</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Namibia</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">New Zealand</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Oman</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Paraguay</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Philippines</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Russia</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Singapore</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">South Africa</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Thailand</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">United Kingdom</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Vatican City</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Zimbabwe</div>
                              </div>
                           </li>
                        </ul>
                     </div>
                     
                  </div>
               </div>
            </div>
         </div>
      </div>
      
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
      
      <script>
         var myApp = new Framework7();
         var mainView = myApp.addView('.view-main');
      </script>
   </body>

</html>

输出

让我们执行以下步骤来看看上面给出的代码是如何工作的 -

  • 将上面给出的 HTML 代码search_bar.html文件保存在服务器根文件夹中。

  • 以 http://localhost/search_bar.html 打开此 HTML 文件，输出如下所示。

  • 如果在搜索栏中输入列表中包含的元素，则会显示列表中的该特定元素。

  • 如果输入了列表中包含的元素以外的元素，则显示未找到元素。

Framework7 - 状态栏

描述

iOS 7+ 允许您构建全屏应用程序，当状态栏与应用程序重叠时可能会产生问题。Framework7 通过检测您的应用程序是否处于全屏模式来解决这个问题。如果您的应用程序处于全屏模式，Framework7 会自动将with-statusbar-overlay类添加到<html>（如果应用程序不处于全屏模式，则删除），并且您需要在<body>中添加statusbar-overlay类如下面的代码所示 -

<html class = "with-statusbar-overlay">
...
   <body>
      <div class = "statusbar-overlay"></div>
      ...

默认情况下，<div>将始终隐藏并固定在屏幕顶部。仅当应用程序处于全屏模式并且with-statusbar-overlay类添加到<html>时，它才可见。

例子

以下示例演示了 Framework7 中状态栏的使用 -

<!DOCTYPE html>
<html>

   <head>
      <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" />
      <title>My App</title>
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
   </head>

   <body>
      <div class = "statusbar-overlay"></div>
      <div class = "panel-overlay"></div>
      
      <div class = "panel panel-right panel-reveal">
         <div class = "content-block">
            <p>Contents goes here...</p>
         </div>
      </div>
      
      <div class = "views">
         <div class = "view view-main">
            <div class = "navbar">
               <div class = "navbar-inner">
                  <div class = "center sliding">My App</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 navbar-through toolbar-through">
               <div data-page = "index" class = "page">
                  <div class = "page-content">
                     <p>This is simple application...</p>
                     <p>page contents goes here!!!</p>
                  </div>
               </div>
            </div>
            
            <div class = "toolbar">
               <div class = "toolbar-inner">
                  <a href = "#" class = "link">First Link</a>
                  <a href = "#" class = "link">Second Link</a>
               </div>
            </div>
            
         </div>
      </div>
      
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
      
      <script>
         // here initialize the app
         var myApp = new Framework7();

         // If your using custom DOM library, then save it to $$ variable
         var $$ = Dom7;

         // Add the view
         var mainView = myApp.addView('.view-main', {
            // enable the dynamic navbar for this view:
            dynamicNavbar: true
         });

         //use the 'pageInit' event handler for all pages
         $$(document).on('pageInit', function (e) {
            //get page data from event data
            var page = e.detail.page;
         })
      </script>
   </body>

</html>

输出

让我们执行以下步骤来看看上面给出的代码是如何工作的 -

  • 将上面给出的 html 代码保存为服务器根文件夹中的status_bar.html文件。

  • 以 http://localhost/status_bar.html 打开此 HTML 文件，输出如下所示。

该示例展示了statusbar-overlay的使用，它允许您在状态栏与应用程序重叠时构建全屏应用程序。

Framework7 - 侧面板

描述

侧面板移动到屏幕的左侧或右侧以显示内容。Framework7 允许您在应用程序中包含最多 2 个面板（右侧面板和左侧面板）。您需要在<body>的开头添加面板，然后通过应用以下列出的类来选择打开效果 -

  • panel-reveal - 这将使整个应用程序的内容移出。

  • panel-cover - 这将使面板覆盖在应用程序的内容上。

例如，以下代码显示了如何使用上述类 -

<body>
   <!-- First add Panel's overlay which will overlays app while panel is opened -->
   <div class = "panel-overlay"></div>
 
   <!-- Left panel -->
   <div class = "panel panel-left panel-cover">
      panel's content
   </div>
 
   <!-- Right panel -->
   <div class = "panel panel-right panel-reveal">
      panel's content
   </div>
 
</body>

下表显示了 Framework77 支持的面板类型 -

序列号 类型和描述
1 打开和关闭面板

添加面板和效果后，我们需要添加打开和关闭面板的功能。
2 小组活动

要检测用户如何与面板交互，您可以使用面板事件。
3 通过滑动打开面板

Framework7为您提供了通过滑动手势打开面板的功能。
4 面板已打开？

我们可以通过with-panel[position]-[effect]规则来判断panel是否打开。

Framework7 - 内容块

描述

内容块可用于添加不同格式的额外内容。

例子

以下示例演示了 Framework7 中内容块的使用 -

<!DOCTYPE html>
<html>

   <head>
      <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" />
      <title>Content Block</title>
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
   </head>

   <body>
      <div class = "views">
         <div class = "view view-main">
            <div class = "pages">
               <div data-page = "home" class = "page navbar-fixed">
                  
                  <div class = "navbar">
                     <div class = "navbar-inner">
                        <div class = "left"> </div>
                        <div class = "center">Content Block</div>
                        <div class = "right"> </div>
                     </div>
                  </div>
                  
                  <div class = "page-content">
                     <p>This is out side of content block!!!</p>
                     
                     <div class = "content-block">
                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium 
                        doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis 
                        et quasi architecto beatae vitae dicta sunt explicabo.</p>
                     </div>
                     
                     <div class = "content-block">
                        <div class = "content-block-inner">This is another text block wrapped with "content-block-inner"</div>
                     </div>
                     
                     <div class = "content-block-title">Content Block Title</div>
                     
                     <div class = "content-block">
                        <p>Praesent nec imperdiet diam. Maecenas vel lectus porttitor, consectetur 
                        magna nec, viverra sem. Aliquam sed risus dolor. Morbi tincidunt ut libero id sodales. 
                        Integer blandit varius nisi quis consectetur.</p>
                     </div>
                     
                     <div class = "content-block-title">This is another long content block title</div>
                     
                     <div class = "content-block">
                        <div class = "content-block-inner">
                           <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
                           accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo 
                           inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
                        </div>
                     </div>
                     
                     <div class = "content-block-title">Content Block Inset</div>
                     
                     <div class = "content-block inset">
                        <div class = "content-block-inner">
                           <p>Donec et nulla auctor massa pharetra adipiscing ut sit amet sem. 
                           Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis, 
                           vulputate turpis vel, sagittis felis. </p>
                        </div>
                     </div>
                     
                     <div class = "content-block-title">Content Block Tablet Inset</div>
                     
                     <div class = "content-block tablet-inset">
                        <div class = "content-block-inner">
                           <p>Donec et nulla auctor massa pharetra adipiscing ut sit amet sem.
                           Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis, 
                           vulputate turpis vel, sagittis felis. </p>
                        </div>
                     </div>
                     
                  </div>
               </div>
            </div>
         </div>
      </div>
      
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
         
      <script>
         var myApp = new Framework7();
         var mainView = myApp.addView('.view-main');
      </script>
   </body>

</html>

输出

让我们执行以下步骤来看看上面给出的代码是如何工作的 -

  • 将上面给定的 HTML 代码保存为服务器根文件夹中的content_block.html文件。

  • 以 http://localhost/content_block.html 打开此 HTML 文件，输出如下所示。

  • 该代码为文本内容添加了额外的格式和所需的间距。

Framework7 - 布局网格

描述

Framework7 提供了不同类型的网格类型来根据用户需要放置内容。

布局网格提供不同类型的列大小，如下表所述 -

序列号 班级 表类 宽度
1 第 5 栏 平板电脑 5 5%
2 第 10 栏 平板电脑 10 10%
3 15 号栏 平板电脑 15 15%
4 20号栏 平板电脑-20 20%
5 第 25 栏 平板电脑-25 25%
6 30 号栏 平板电脑-30 30%
7 第 33 栏 平板电脑 33 33.3%
8 35 号栏 平板电脑 35 35%
9 40号栏 平板电脑-40 40%
10 45号栏 平板电脑-45 45%
11 50号栏 平板电脑-50 50%
12 55 号栏 平板电脑-55 55%
13 60 号栏 平板电脑-60 60%
14 65 号栏 平板电脑 65 65%
15 66 号栏 平板电脑 66 66.6%
16 70 号栏 平板电脑-70 70%
17 号 75 号栏 平板电脑-75 75%
18 80 号 平板电脑-80 80%
19 85号栏 平板电脑-85 85%
20 90号 平板电脑-90 90%
21 95号栏 平板电脑 95 95%
21 100 号口 平板电脑-100 100%
22 自动列 平板电脑汽车 等宽

例子

以下示例提供了网格布局，用于根据需要在 Framework7 中放置内容 -

<!DOCTYPE html>
<html>

   <head>
      <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" />
      <title>Layout Grid</title>
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
         
      <style>
         div[class* = "col-"] {
            background: #fff;
            text-align: center;
            color: #000;
            border: 1px solid #D8D8D8;
         }
         .row {
            margin-bottom: 10px;
         }
      </style>
   </head>

   <body>
      <div class = "views">
         <div class = "view view-main">
         
            <div class = "navbar">
               <div class = "navbar-inner">
                  <div class = "center sliding">Layout Grid</div>
               </div>
            </div>
            
            <div class = "pages">
               <div data-page = "index" class = "page navbar-fixed">
                  <div class = "page-content">
                     <div class = "content-block-title">Columns with gutter</div>
                     
                     <div class = "content-block">
                        <div class = "row">
                           <div class = "col-50">col 1</div>
                           <div class = "col-50">col 2</div>
                        </div>
                        
                        <div class = "row">
                           <div class = "col-25">col 1</div>
                           <div class = "col-25">col 2</div>
                           <div class = "col-25">col 3</div>
                           <div class = "col-25">col 4</div>
                        </div>
                        
                        <div class = "row">
                           <div class = "col-33">col 1</div>
                           <div class = "col-33">col 2</div>
                           <div class = "col-33">col 3</div>
                        </div>
                        
                        <div class = "content-block-title">Columns without gutter</div>
                        
                        <div class = "content-block">
                           <div class = "row no-gutter">
                              <div class = "col-50">col 1</div>
                              <div class = "col-50">col 2</div>
                           </div>
                           
                           <div class = "row no-gutter">
                              <div class = "col-25">col 1</div>
                              <div class = "col-25">col 2</div>
                              <div class = "col-25">col 3</div>
                              <div class = "col-25">col 4</div>
                           </div>
                           
                           <div class = "row no-gutter">
                              <div class = "col-33">col 1</div>
                              <div class = "col-33">col 2</div>
                              <div class = "col-33">col 3</div>
                           </div>
                        </div>
                     
                        <div class = "content-block-title">Nested Columns</div>
                        <div class = "content-block">
                           <div class = "row">
                              
                              <div class = "col-50">
                                 col 1
                                 <div class = "row">
                                    <div class = "col-40">col 2</div>
                                    <div class = "col-60">col 3</div>
                                 </div>
                              </div>
                                 
                              <div class = "col-50">
                                 col 1
                                 <div class = "row">
                                    <div class = "col-75">col 2</div>
                                    <div class = "col-25">col 3</div>
                                 </div>
                              &