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 App Layout −
<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>
//你可以控制状态栏的背景颜色
<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>
// 此处初始化应用程序
var myApp = new Framework7();
// 如果您使用自定义 DOM 库，则将其保存到 $$ 变量
var $$ = Dom7;
// 添加视图
var mainView = myApp.addView('.view-main', {
// 为该视图启用动态导航栏:
dynamicNavbar: true
});
// 对所有页面使用"pageInit"事件处理程序
$$(document).on('pageInit', function (e) {
//从事件数据中获取页面数据
var page = e.detail.page;
if (page.name === 'blog') {
// 当页面的数据页属性等于"blog"时，您将在警告框中看到以下消息
myApp.alert('Here its your About page');
}
})
</script>
</body>
</html>
接下来，再创建一个 HTML 页面，即 envirmnt_about.html，如下所示 −
envirmnt_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 为您的应用程序提供不同类型的布局。它支持三种类型的导航栏/工具栏布局 −
| S.No | 布局类型 &描述 |
|---|---|
| 1 | 静态布局
静态布局是最常用的布局类型，包括导航栏和工具栏，可以是可滚动的页面内容，每个页面包含自己的导航栏和工具栏。 |
| 2 | 固定布局
固定布局包括自己的导航栏和工具栏，可以在屏幕上看到，但不能在页面上滚动。 |
| 3 | 贯穿布局
在此布局中，导航栏和工具栏在单个视图中的所有页面中都固定显示。 |
| 4 | 混合布局
您可以在单个视图中混合不同类型的布局。 |
无导航栏/工具栏
如果您不想使用导航栏和工具栏，则不要将适当的类(navbar-fixed、navbar-through、toolbar-fixed、toolbar-through)包含到页面/pages/view 中。
Framework7 - 导航栏
描述
在本章中，让我们学习导航栏。它通常位于屏幕顶部，包含页面标题和导航元素。
导航栏由三部分组成，每部分都可以包含任何 HTML 内容，但建议您按照下面给出的方式使用这些部分 −
左 − 它用于放置返回 链接 图标或单个文本链接。
中心 − 它用于显示页面标题或选项卡链接。
右 − 此部分与 左 部分类似。
下表详细演示了 导航栏 的使用 −
| S.No | 导航栏类型和说明 |
|---|---|
| 1 | 基本导航栏
可以使用 navbar、navbar-inner、left、center 和 right 类创建基本导航栏。 |
| 2 | 带链接的导航栏
要在导航栏的 left 和 right 部分使用链接，只需添加带有类的 <a> 标签链接。 |
| 3 | 多个链接
要使用多个链接，只需在您选择的部分添加几个 <a class = "link">。 |
| 4 | 带有文本和图标的链接
可以通过添加图标类并使用 <span> 元素包装链接文本来为链接提供图标和文本。 |
| 5 | 仅带图标的链接
通过在链接中添加 icon-only 类，可以为导航栏链接提供仅带图标的功能。 |
| 6 | 相关应用和视图方法
在初始化 View 时，framework7 允许您使用可用于导航栏的方法。 |
| 7 | 自动隐藏导航栏
对于某些未显示导航栏的 Ajax 加载页面，可以自动隐藏/显示导航栏必需。 |
Framework7 - 工具栏
说明
工具栏通过使用屏幕底部的导航元素，可以轻松访问其他页面。
您可以按照表中指定的两种方式使用工具栏 −
工具栏的方法
工具栏可以使用以下可用方法 −
| S.No | 工具栏方法 &描述 |
|---|---|
| 1 | myApp.hideToolbar(toolbar) 隐藏指定的工具栏。 |
| 2 | myApp.showToolbar(toolbar) 显示指定的工具栏。 |
| 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>
// 此处初始化应用程序
var myApp = new Framework7();
// 如果您使用自定义 DOM 库，则将其保存到 $$ 变量
var $$ = Dom7;
// 添加视图
var mainView = myApp.addView('.view-main', {
// 为该视图启用动态导航栏
dynamicNavbar: true
});
</script>
</body>
</html>
现在，在自定义 JS 文件 toolbar.js 中初始化您的应用和视图。
输出
让我们执行以下步骤来查看上述代码的工作原理 −
将上述 HTML 代码保存为服务器根文件夹中的 toolbar.html 文件。
以 http://localhost/toolbar.html 的形式打开此 HTML 文件，输出显示如下。
Framework7 - 搜索栏
说明
Framework 7 允许使用searchbar 类。
搜索栏参数
| S.No | 参数 &描述 | 类型 | 默认 |
|---|---|---|---|
| 1 | searchList 搜索列表的 CSS 选择器或 HTML 元素。 |
字符串或 HTML 元素 | - |
| 2 | searchIn 您可以搜索 CSS 选择器的列表视图元素，也可以通过传递 .item-title、.item-text 类来搜索元素。 |
string | '.item-title' |
| 3 | found 它使用"found"元素搜索 CSS 选择器或 HTML 元素。此外，如果没有指定元素，它将使用 .searchbar-found 元素。 |
字符串或 HTML 元素 | - |
| 4 | notfound 它使用"not-found"元素搜索 CSS 选择器或 HTML 元素。此外，如果没有指定元素，它将使用 .searchbar-not-found 元素。 |
字符串或 HTML 元素 | - |
| 5 | overlay 它使用"searchbar overlay"元素搜索 CSS 选择器或 HTML 元素，如果没有指定元素，它将使用 .searchbar-overlay 元素。 |
字符串或 HTML 元素 | - |
| 6 | ignore 您可以使用搜索栏。 |
string | '.searchbar-ignore' |
| 7 | customSearch 启用后，搜索栏将不会搜索由 searchList 指定的任何列表块，并且您将被允许使用自定义搜索功能。 |
boolean | false |
| 8 | removeDiacritics 搜索元素时，通过启用此参数删除变音符号。 |
boolean | false |
| 9 | hideDividers 如果没有项目，此参数将隐藏项目分隔符和组标题。 |
boolean | true |
| 10 | hideGroups 如果在列表视图组中找不到项目，此参数将隐藏组。 |
boolean | true |
搜索栏回调
| S.No | 回调 &描述 | 类型 | 默认 |
|---|---|---|---|
| 1 | onSearch 此方法将在搜索时触发回调函数。 |
函数 (s) | - |
| 2 | onEnable 此方法将在搜索栏变为活动状态时触发回调函数。 |
函数 (s) | - |
| 3 | onDisable 当搜索栏处于非活动状态时，此方法将触发回调函数。 |
function (s) | - |
| 4 | onClear 当您点击"clear"元素时，此方法将触发回调函数。 |
function (s) | - |
搜索栏属性
| S.No | 属性 &描述 |
|---|---|
| 1 | mySearchbar.params 表示通过对象传递的初始化参数。 |
| 2 | mySearchbar.query 搜索当前查询。 |
| 3 | mySearchbar.searchList 定义搜索列表块。 |
| 4 | mySearchbar.container 使用 HTML 定义搜索栏容器元素。 |
| 5 | mySearchbar.input 使用 HTML 元素定义搜索栏输入。 |
| 6 | mySearchbar.active 定义搜索栏是启用还是禁用。 |
搜索栏方法
| S.No | 方法 &描述 |
|---|---|
| 1 | mySearchbar.search(query); 此方法搜索传递的查询。 |
| 2 | mySearchbar.enable(); 启用搜索栏。 |
| 3 | mySearchbar.disable(); 禁用搜索栏。 |
| 4 | mySearchbar.clear(); 您可以清除查询并搜索结果。 |
| 5 | mySearchbar.destroy(); 它会破坏搜索栏实例。 |
搜索栏 JavaScript 事件
| S.No | 事件 &描述 | 目标 |
|---|---|---|
| 1 | search 您可以在搜索元素时触发此事件。 |
<div class="list-block"> |
| 2 | clearSearch 当用户点击 clearSearch 元素时，将触发此事件。 |
<div class="list-block"> |
| 3 | enableSearch 当搜索栏变为启用时，将触发此事件。 |
<div class="list-block"> |
| 4 | disableSearch 当搜索栏被禁用，并且用户点击取消按钮或"搜索栏覆盖"元素时，将触发此事件。 |
<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>
// 此处初始化应用程序
var myApp = new Framework7();
// 如果您使用自定义 DOM 库，则将其保存到 $$ 变量
var $$ = Dom7;
// 添加视图
var mainView = myApp.addView('.view-main', {
// 为该视图启用动态导航栏:
dynamicNavbar: true
});
// 对所有页面使用 'pageInit' 事件处理程序
$$(document).on('pageInit', function (e) {
// 从事件数据中获取页面数据
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 支持的面板类型 −
| S.No | 类型 &描述 |
|---|---|
| 1 | 打开和关闭面板
添加面板和效果后，我们需要添加打开和关闭面板的功能。 |
| 2 | 面板事件
要检测用户如何与面板交互，您可以使用面板事件。 |
| 3 | 通过滑动打开面板
Framework7 为您提供以下功能:使用滑动手势打开面板。 |
| 4 | 面板是否打开?
我们可以通过使用with-panel[position]-[effect]规则来确定面板是否打开。 |
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 文件。
将此 HTML 文件作为 http://localhost/content_block.html 打开，输出显示如下。
代码为文本内容添加了额外的格式和所需的间距。
Framework7 - 布局网格
描述
Framework7 提供不同类型的网格类型来放置内容根据用户需求。
布局网格提供不同类型的列大小，如下表所示 −
| S.No | 类 | 表格类 | 宽度 |
|---|---|---|---|
| 1 | col-5 | tablet-5 | 5% |
| 2 | col-10 | tablet-10 | 10% |
| 3 | col-15 | tablet-15 | 15% |
| 4 | col-20 | tablet-20 | 20% |
| 5 | col-25 | tablet-25 | 25% |
| 6 | col-30 | tablet-30 | 30% |
| 7 | col-33 | tablet-33 | 33.3% |
| 8 | col-35 | tablet-35 | 35% |
| 9 | col-40 | tablet-40 | 40% |
| 10 | col-45 | tablet-45 | 45% |
| 11 | col-50 | tablet-50 | 50% |
| 12 | col-55 | tablet-55 | 55% |
| 13 | col-60 | tablet-60 | 60% |
| 14 | col-65 | tablet-65 | 65% |
| 15 | col-66 | tablet-66 | 66.6% |
| 16 | col-70 | tablet-70 | 70% |
| 17 | col-75 | tablet-75 | 75% |
| 18 | col-80 | tablet-80 | 80% |
| 19 | col-85 | tablet-85 | 85% |
| 20 | col-90 | tablet-90 | 90% |
| 21 | col-95 | tablet-95 | 95% |
| 21 | col-100 | tablet-100 | 100% |
| 22 | col-auto | tablet-auto | Equal width |
示例
以下示例提供了在 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>
</div>
</div>
</div>
<div class = "content-block-title">Columns With Different Equal Width</div>
<div class = "content-block">
<div class = "row">
<div class = "col-100 tablet-50">col 1</div>
<div class = "col-100 tablet-50">col 2</div>
</div>
<div class = "row">
<div class = "col-50 tablet-25">col 1</div>
<div class = "col-50 tablet-25">col 2</div>
<div class = "col-50 tablet-25">col 3</div>
<div class = "col-50 tablet-25">col 4</div>
</div>
<div class = "row">
<div class = "col-100 tablet-40">col 1</div>
<div class = "col-50 tablet-60">col 2</div>
<div class = "col-50 tablet-60">col 3</div>
<div class = "col-100 tablet-40">col 4</div>
</div>
</div>
<div class = "content-block-title">Columns With Equal Width</div>
<div class = "content-block">
<div class = "row">
<div class = "col-auto">col-1</div>
<div class = "col-auto">col-2</div>
<div class = "col-auto">col-3</div>
<div class = "col-auto">col-4</div>
</div>
<div class = "row no-gutter">
<div class = "col-auto">col-1</div>
<div class = "col-auto">col-2</div>
<div class = "col-auto">col-3</div>
<div class = "col-auto">col-4</div>
</div>
</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 代码保存为服务器根文件夹中的 layout_grid.html 文件。
以 http://localhost/layout_grid.html 的形式打开此 HTML 文件，输出显示如下。
此代码提供不同类型的网格类型，可根据用户需要放置内容。
Framework7 - 覆盖
说明
Framework7 提供不同类型的网格类型的叠加层，以便应用程序顺利运行。下表列出了一些 Framework7 叠加层 −
| S.No | 叠加层类型 &描述 |
|---|---|
| 1 | Modal
Modal 是一个小窗口，它显示来自不同来源的内容，而无需离开父窗口。 |
| 2 | Popup
Popup 是一个弹出框，当用户点击元素时会显示内容。 |
| 3 | Popover
要管理临时内容的呈现，可以使用 popover 组件。 |
| 4 | 操作表
操作表用于向用户展示一组如何处理给定任务的可能性。 |
| 5 | 登录屏幕
覆盖登录屏幕用于显示登录屏幕格式，可在页面或弹出窗口中使用，也可作为独立覆盖使用。 |
| 6 | 选择器模式
选择器模式用于选择一些类似于日历的自定义内容选择器。 |
Framework7 - 预加载器
说明
Framework7 中的预加载器由可缩放矢量图形 (SVG) 制作，并使用 CSS 进行动画处理，因此可以轻松调整大小。预加载器有两种颜色 −
- 默认为浅色背景
- 另一种为深色背景
您可以在 HTML 中使用 preloader 类，如下所示 −
示例
以下示例演示了如何在 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>Panel Events</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">Framework7 Preloader</div>
<div class = "right"> </div>
</div>
</div>
<div class = "page-content">
<div class = "content-block row">
<div class = "col-25"><span class = "preloader"></span><br>Default Preloader</div>
<div class = "col-25 col-dark"><span class = "preloader preloader-white"></span><br>White Preloader</div>
<div class = "col-25"><span style = "width:42px; height:42px" class = "preloader"></span><br>Big Preloader</div>
<div class = "col-25 col-dark"><span style = "width:42px; height:42px" class = "preloader preloader-white"></span><br>White Preloader</div>
</div>
</div>
</div>
</div>
</div>
</div>
<style>.col-25{padding:5px;text-align:center;}.col-dark{background:#222;}</style>
<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();
</script>
</body>
</html>
输出
让我们执行以下步骤来查看上述代码的工作原理 −
将上述 HTML 代码保存为服务器根文件夹中的 preloader.html 文件。
将此 HTML 文件作为 http://localhost/preloader.html 打开，输出显示如下。
此代码显示预加载器指示器，该指示器由 SVG 制作并使用 CSS 进行动画处理。
Framework7 - 进度条
描述
进度条可用于显示资产的加载或进度任务的进度。您可以使用 progressbar 类指定进度条。当用户不知道请求的加载过程将持续多长时间时，您可以使用 progressbar-infinite 类。
进度条 JavaScript API
进度条可以与 JavaScript API 一起使用，通过使用以下方法指定 show、hide 和 progress 属性 −
| S.No | 方法 | 描述 &参数 |
|---|---|---|
| 1 | myApp.setProgressbar (container , progress, speed) | 设置任务进度的进度条。
|
| 2 | myApp.hideProgressbar (container) | 隐藏进度条。
|
| 3 | myApp.showProgressbar (contai ner, progress, color) | 它显示进度条。
|
示例
以下示例显示动画确定和不确定的进度条以指示 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>Progress Bar</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" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.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 = "center">Progress Bar</div>
</div>
</div>
<div class = "page-content">
<div class = "content-block-title">Determinate Progress Bar</div>
<div class = "content-block">
<div class = "content-block-inner">
<p>Inline determinate progress bar:</p>
<div class = "progressbar-inline">
<p><span data-progress = "10" class = "progressbar"></span></p>
<p class = "buttons-row">
<a href = "#" data-progress = "25" class = "button button-raised">25%</a>
<a href = "#" data-progress = "50" class = "button button-raised">50%</a>
<a href = "#" data-progress = "75" class = "button button-raised">75%</a>
<a href = "#" data-progress = "100" class = "button button-raised">100%</a>
</p>
</div>
<p>Loads and hides the determinate progress bar:</p>
<div class = "progressbar-load-hide">
<p><a href = "#" class = "button button-raised">Start Loading</a></p>
</div>
<p>Displays the determinate progress bar on top:</p>
<p class = "progressbar-overlay"><a href = "#" class = "button button-raised">Start Loading</a></p>
</div>
</div>
<div class = "content-block-title">Infinite Progress Bar</div>
<div class = "content-block">
<div class = "content-block-inner">
<p>Inline infinite progress bar:</p>
<p><span class = "progressbar-infinite"></span></p>
<p>Displays the infinite progress bar in multiple colors:</p>
<p><span class = "progressbar-infinite color-multi"></span></p>
<p>Displays the infinite progress bar on top:</p>
<p class = "progressbar-infinite-overlay"><a href = "#" class = "button button-raised">Start Loading</a></p>
<p>Displays the infinite progress bar in multiple colors on top:</p>
<p class = "progressbar-infinite-multi-overlay"><a href = "#" class = "button button-raised">Start Loading</a></p>
</div>
</div>
<div class = "content-block-title">Different types of colored progress bars:</div>
<div class = "list-block">
<ul>
<li class = "item-content">
<div class = "item-inner">
<div data-progress = "5" class = "progressbar color-red"></div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div data-progress = "10" class = "progressbar color-pink"></div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div data-progress = "20" class = "progressbar color-deeppurple"></div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div data-progress = "30" class = "progressbar color-blue"></div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div data-progress = "40" class = "progressbar color-cyan"></div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div data-progress = "50" class = "progressbar color-green"></div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div data-progress = "60" class = "progressbar color-lime"></div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div data-progress = "70" class = "progressbar color-amber"></div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div data-progress = "80" class = "progressbar color-deeporange"></div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div data-progress = "90" class = "progressbar color-gray"></div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div data-progress = "100" class = "progressbar color-black"></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({
material: true
});
var $$ = Dom7;
$$('.progressbar-inline .button').on('click', function () {
var progress = $$(this).attr('data-progress');
var progressbar = $$('.progressbar-inline .progressbar');
myApp.setProgressbar(progressbar, progress);
});
$$('.progressbar-load-hide .button').on('click', function () {
var container = $$('.progressbar-load-hide p:first-child');
//it doesn't load if another progresbar is loading
if (container.children('.progressbar').length) return;
myApp.showProgressbar(container, 0);
var progress = 0;
function simulateLoading() {
setTimeout(function () {
var progressBefore = progress;
progress += Math.random() * 20;
myApp.setProgressbar(container, progress);
if (progressBefore < 100) {
simulateLoading();
}
else myApp.hideProgressbar(container);
}, Math.random() * 200 + 200);
}
simulateLoading();
});
$$('.progressbar-overlay .button').on('click', function () {
var container = $$('body');
if (container.children('.progressbar, .progressbar-infinite').length) return;
myApp.showProgressbar(container, 0, 'orange');
var progress = 0;
function simulateLoading() {
setTimeout(function () {
var progressBefore = progress;
progress += Math.random() * 20;
myApp.setProgressbar(container, progress);
if (progressBefore < 100) {
simulateLoading();
}
//hides the progressbar
else myApp.hideProgressbar(container);
}, Math.random() * 200 + 200);
}
simulateLoading();
});
$$('.progressbar-infinite-overlay .button').on('click', function () {
var container = $$('body');
if (container.children('.progressbar, .progressbar-infinite').length) return;
myApp.showProgressbar(container, 'yellow');
setTimeout(function () {
myApp.hideProgressbar();
}, 3000);
});
$$('.progressbar-infinite-multi-overlay .button').on('click', function () {
var container = $$('body');
if (container.children('.progressbar, .progressbar-infinite').length) return;
myApp.showProgressbar(container, 'multi');
setTimeout(function () {
myApp.hideProgressbar();
}, 3000);
});
</script>
</body>
</html>
输出
让我们执行以下步骤来查看上述代码的工作原理 −
将上述 HTML 代码保存为服务器根文件夹中的 progress_bar.html 文件。
将此 HTML 文件打开为 http://localhost/progress_bar.html，输出显示如下。
该示例显示进度条，指示操作完成过程需要多长时间，并显示不同类型的进度条以指示活动。
Framework7 - 列表视图
描述
列表视图是功能强大的 UI 组件，可在多行可滚动列表中显示数据。Framework7 提供不同类型的 列表视图 以与您的应用程序配合使用。下表列出了一些 Framework7 列表视图 −
| S.No | 类型 &描述 |
|---|---|
| 1 | 列表视图
列表视图是功能强大的用户界面组件，可在包含多行的可滚动列表中显示数据。 |
| 2 | 联系人列表
联系人列表是一种列表视图，可用于显示联系人列表。 |
| 3 | 媒体列表视图
媒体列表视图用于显示复杂的数据结构，如产品、服务、用户信息。 |
| 4 | 滑动
滑动允许您通过在列表元素上滑动来显示隐藏的菜单操作。 |
| 5 | 可排序列表
可排序列表是一种列表视图，可对列表视图元素进行排序。 |
| 6 | 虚拟列表
虚拟列表是一种列表视图，它包含大量数据元素的列表，而不会降低其性能。 |
Framework7 - 手风琴
描述
手风琴是一个图形控制元素，显示为项目的堆叠列表。每个手风琴都可以展开或拉伸以显示与该手风琴相关的内容。
可折叠布局
当您使用单个单独的可折叠元素时，您需要省略accordion-list包装器元素。
以下是可折叠布局的结构 −
<!-- Single collapsible element ------> <div class = "accordion-item"> <div class = "accordion-item-toggle"></div> <div class = "accordion-item-content"></div> </div> <!-- Separate collapsible element --> <div class = "accordion-item"> <div class = "accordion-item-toggle"></div> <div class = "accordion-item-content"></div> </div>
Framework7 中的手风琴使用了以下类 −
| S.No | 类 &描述 |
|---|---|
| 1 | accordion-list 可选类，包含一组可折叠项目列表。 |
| 2 | accordion-item 单个可折叠项目必须包含该类。 |
| 3 | accordion-item-toggle 用于展开可折叠项目内容必须包含该类。 |
| 4 | accordion-item-content 它是用于隐藏手风琴项目内容的必需类。 |
| 5 | accordion-item-expanded 它是一个单个展开的手风琴项目。 |
手风琴 JavaScript API
JavaScript API 方法用于以编程方式打开和关闭手风琴。
它包含以下 JavaScript API 方法 −
myApp.accordionOpen(item) −用于打开手风琴。
myApp.accordionClose(item) − 用于关闭手风琴。
myApp.accordionToggle(item) − 用于切换手风琴。
所有方法都包含名为 item 的参数，它是 accordion-item 的 HTML 或字符串元素。
手风琴事件
手风琴包含下表所列的四个事件 −
| S.No | 事件 | 目标 &描述 |
|---|---|---|
| 1 | open | 手风琴项目 当您打开动画时，将触发此事件。 |
| 2 | opened | 手风琴项目 当动画打开完成后，将触发此事件。 |
| 3 | close | 手风琴项目 当您关闭动画时，将触发此事件触发。 |
| 4 | closed | 手风琴项目 当动画关闭完成时，将触发此事件。 |
手风琴列表视图
在手风琴列表视图中，您可以使用 item-link 元素代替 accordion-toggle。
<div class = "list-block accordion-list">
<ul>
<li class = "accordion-item">
<a href = "" class = "item-link item-content">
<div class = "item-inner">
<div class = "item-title">1st Item</div>
</div>
</a>
<div class = "accordion-item-content">Content for 1st Item...</div>
</li>
<li class = "accordion-item">
<a href = "" class = "item-link item-content">
<div class = "item-inner">
<div class = "item-title">2nd Item</div>
</div>
</a>
<div class = "accordion-item-content">Content for 2nd Item...</div>
</li>
</ul>
</div>
示例
以下示例演示了在 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>Accordion</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">Accordion</div>
<div class="right"> </div>
</div>
</div>
<div class="page-content">
<div class="content-block-title">List of Programming Lagauges</div>
<div class="list-block accordion-list">
<ul>
<li class="accordion-item">
<a href="#" class="item-content item-link">
<div class="item-inner">
<div class="item-title">C</div>
</div>
</a>
<div class="accordion-item-content">
<div class="content-block">
<p>C is a general-purpose, procedural, imperative computer programming language developed in 1972 by Dennis M. Ritchie at the Bell Telephone Laboratories to develop the UNIX operating system. C is the most widely used computer language. It keeps fluctuating at number one scale of popularity along with Java programming language, which is also equally popular and most widely used among modern software programmers.</p>
</div>
</div>
</li>
<li class="accordion-item">
<a href="#" class="item-content item-link">
<div class="item-inner">
<div class="item-title">C++</div>
</div>
</a>
<div class="accordion-item-content">
<div class="content-block">
<p>C++ is a middle-level programming language developed by Bjarne Stroustrup starting in 1979 at Bell Labs. C++ runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX.
This reference will take you through simple and practical approach while learning C++ Programming language.
</p>
</div>
</div>
</li>
<li class="accordion-item">
<a href="#" class="item-content item-link">
<div class="item-inner">
<div class="item-title">Java</div>
</div>
</a>
<div class="accordion-item-content">
<div class="content-block">
<p>Java is a high-level programming language originally developed by Sun Microsystems and released in 1995. Java runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX. This tutorial gives a complete understanding of Java.
This reference will take you through simple and practical approach while learning Java Programming language.
</p>
</div>
</div>
</li>
</ul>
</div>
<div class="content-block-title">Separate Collapsibles</div>
<div class="list-block">
<ul>
<li class="accordion-item">
<a href="#" class="item-content item-link">
<div class="item-inner">
<div class="item-title">C</div>
</div>
</a>
<div class="accordion-item-content">
<div class="content-block">
<p >C is a general-purpose, procedural, imperative computer programming language developed in 1972 by Dennis M. Ritchie at the Bell Telephone Laboratories to develop the UNIX operating system. C is the most widely used computer language. It keeps fluctuating at number one scale of popularity along with Java programming language, which is also equally popular and most widely used among modern software programmers.</p>
</div>
</div>
</li>
<li class="accordion-item">
<a href="#" class="item-content item-link">
<div class="item-inner">
<div class="item-title">C++</div>
</div>
</a>
<div class="accordion-item-content">
<div class="content-block">
<p>C++ is a middle-level programming language developed by Bjarne Stroustrup starting in 1979 at Bell Labs. C++ runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX.
This reference will take you through simple and practical approach while learning C++ Programming language.
</p>
</div>
</div>
</li>
<li class="accordion-item">
<a href="#" class="item-content item-link">
<div class="item-inner">
<div class="item-title">Java</div>
</div>
</a>
<div class="accordion-item-content">
<div class="content-block">
<p>Java is a high-level programming language originally developed by Sun Microsystems and released in 1995. Java runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX. This tutorial gives a complete understanding of Java.
This reference will take you through simple and practical approach while learning Java Programming language.
</p>
</div>
</div>
</li>
</ul>
</div>
<div class="content-block-title">Custom Accordion</div>
<div class="content-block accordion-list custom-accordion">
<div class="accordion-item">
<div class="accordion-item-toggle"><i class="icon icon-plus">+</i><i class="icon icon-minus">-</i><span>C</span></div>
<div class="accordion-item-content">
<p>C is a general-purpose, procedural, imperative computer programming language developed in 1972 by Dennis M. Ritchie at the Bell Telephone Laboratories to develop the UNIX operating system. C is the most widely used computer language. It keeps fluctuating at number one scale of popularity along with Java programming language, which is also equally popular and most widely used among modern software programmers.</p>
</div>
</div>
<div class="accordion-item">
<div class="accordion-item-toggle"><i class="icon icon-plus">+</i><i class="icon icon-minus">-</i><span>C++</span></div>
<div class="accordion-item-content">
<p>C++ is a middle-level programming language developed by Bjarne Stroustrup starting in 1979 at Bell Labs. C++ runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX.
This reference will take you through simple and practical approach while learning C++ Programming language.
</p>
</div>
</div>
<div class="accordion-item">
<div class="accordion-item-toggle"><i class="icon icon-plus">+</i><i class="icon icon-minus">-</i><span>Java</span></div>
<div class="accordion-item-content">
<p>Java is a high-level programming language originally developed by Sun Microsystems and released in 1995. Java runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX. This tutorial gives a complete understanding of Java.
This reference will take you through simple and practical approach while learning Java Programming language.
</p>
</div>
</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>
<style>.custom-accordion{padding-left:0;padding-right:0;}.custom-accordion .accordion-item-toggle{padding:0px 15px;height:44px;line-height:44px;font-size:17px;color:#000;border-bottom:1px solid rgba(0,0,0,0.15);cursor:pointer;}.custom-accordion .accordion-item-toggle:active{background:rgba(0,0,0,0.15);}.custom-accordion .accordion-item-toggle span{display:inline-block;margin-left:15px;}.custom-accordion .accordion-item:last-child .accordion-item-toggle{border-bottom:none;}.custom-accordion .icon-plus,.custom-accordion .icon-minus{display:inline-block;width:22px;height:22px;border:1px solid #000;border-radius:100%;line-height:20px;text-align:center;}.custom-accordion .icon-minus{display:none;}.custom-accordion .accordion-item-expanded .icon-minus{display:inline-block;}.custom-accordion .accordion-item-expanded .icon-plus{display:none;}.custom-accordion .accordion-item-content{padding:0px 15px;}</style>
<script>
// 此处初始化应用程序
var myApp = new Framework7();
// 如果您使用自定义 DOM 库，则将其保存到 $$ 变量
var $$ = Dom7;
// 添加视图
var mainView = myApp.addView('.view-main', {
// 为该视图启用动态导航栏:
dynamicNavbar: true
});
</script>
</body>
</html>
输出
让我们执行以下步骤来查看上述代码的工作原理 −
将上述 HTML 代码保存为服务器根文件夹中的 accordion.html 文件。
以 http://localhost/accordion.html 的形式打开此 HTML 文件，输出显示如下。
该示例提供了可折叠布局，可以展开以显示与手风琴相关的内容。
Framework7 -卡片
描述
卡片包含与单个主题(如照片、链接和文本)相关的有组织的信息。下表显示了 Framework7 卡片类型 −
| S.No | 类型 &描述 |
|---|---|
| 1 | 卡片 HTML 布局
基本卡片 HTML 布局使用卡片类来排列其项目。 |
| 2 | 带卡片的列表视图
您可以通过将 cards-list 类添加到 <div class="list-block">，将 cards 用作列表视图元素。 |
Framework7 - chips
描述
chips是一小块实体，可以包含照片、一小串标题和简短信息。
chips HTML 布局
以下代码显示了 Framework7 中使用的基本chips HTML 布局 −
<div class = "chip">
<div class = "chip-media">
<img src = "http://lorempixel.com/100/100/people/9/">
</div>
<div class = "chip-label">Jane Doe</div>
<a href = "#" class = "chip-delete"></a>
</div>
上述 HTML 布局包含许多类，如下所示 −
chips − 这是chips容器。
chip-media − 这是chips媒体元素，可以包含图像、头像或图标。它是可选的。
card-label − 这是chips文本标签。
card-delete − 这是chips的可选删除图标链接。
示例
以下示例表示相册、卡片元素等实体以及照片和简要信息 −
<!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>Chips HTML 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" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.colors.min.css" />
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "pages">
<div class = "page navbar-fixed">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "center">Chips HTML Layout</div>
</div>
</div>
<div class = "page-content">
<div class = "content-block-title">Chips With Text</div>
<div class = "content-block">
<div class = "chip">
<div class = "chip-label">Chip one</div>
</div>
<div class = "chip">
<div class = "chip-label">Chip two</div>
</div>
</div>
<div class = "content-block-title">Chips with icons</div>
<div class = "content-block">
<div class = "chip">
<div class = "chip-media bg-blue"><i class = "icon icon-form-calendar"></i></div>
<div class = "chip-label">Set Date</div>
</div>
<div class = "chip">
<div class = "chip-media bg-purple"><i class = "icon icon-form-email"></i></div>
<div class = "chip-label">Sent Mail</div>
</div>
</div>
<div class = "content-block-title">Contact Chips</div>
<div class = "content-block">
<div class = "chip">
<div class = "chip-media"><img src = "/framework7/images/pic.jpg"></div>
<div class = "chip-label">James Willsmith</div>
</div>
<div class = "chip">
<div class = "chip-media"><img src = "/framework7/images/pic2.jpg"></div>
<div class = "chip-label">Sunil Narayan</div>
</div>
<div class = "chip">
<div class = "chip-media bg-pink">R</div>
<div class = "chip-label">Raghav</div>
</div>
<div class = "chip">
<div class = "chip-media bg-teal">S</div>
<div class = "chip-label">Sharma</div>
</div>
<div class = "chip">
<div class = "chip-media bg-red">Z</div>
<div class = "chip-label">Zien</div>
</div>
</div>
<div class = "content-block-title">Deletable Chips</div>
<div class = "content-block">
<div class = "chip">
<div class = "chip-label">Chip one</div>
<a href = "#" class = "chip-delete"></a>
</div>
<div class = "chip">
<div class = "chip-media bg-teal">S</div>
<div class = "chip-label">Sharma</div>
<a href = "#" class = "chip-delete"></a>
</div>
<div class = "chip">
<div class = "chip-media bg-purple"><i class = "icon icon-form-email"></i></div>
<div class = "chip-label">Sent</div>
<a href = "#" class = "chip-delete"></a>
</div>
<div class = "chip">
<div class = "chip-media"><img src = "/framework7/images/pic.jpg"></div>
<div class = "chip-label">James Willsmith</div>
<a href = "#" class = "chip-delete"></a>
</div>
<div class = "chip">
<div class = "chip-label">Chip two</div>
<a href = "#" class = "chip-delete"></a>
</div>
<div class = "chip">
<div class = "chip-media bg-green">R</div>
<div class = "chip-label">Raghav</div>
<a href = "#" class = "chip-delete"></a>
</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>
<style>
</style>
<script>
var myApp = new Framework7 ({
material: true
});
var $$ = Dom7;
$$('.chip-delete').on('click', function (e) {
e.preventDefault();
var chip = $$(this).parents('.chip');
myApp.confirm('Do you want to delete this Chip?', function () {
chip.remove();
});
});
</script>
</body>
</html>
输出
让我们执行以下步骤来查看上述代码的工作原理 −
将上述 HTML 代码保存为服务器根文件夹中的 cards_html_layout.html 文件。
以 http://localhost/cards_html_layout.html 形式打开此 HTML 文件，输出显示如下。
该示例以小块表示复杂实体，例如相册、卡片元素、发布的图像，其中包含照片、标题字符串和简要信息。
Framework7 -按钮
描述
Framework7 提供了一组可立即使用的按钮，只需向链接或输入按钮添加适当的类即可。
| S.No | 类型和描述 |
|---|---|
| 1 | iOS 主题按钮
Framework7 提供了许多 iOS 主题按钮，可以通过应用适当的类来使用。 |
| 2 | Material 主题按钮
Material 主题提供了许多按钮，可以通过使用适当的类在您的应用程序中使用。 |
Framework7 - 操作按钮
描述
Framework7 为推广操作提供了 浮动操作按钮。它们在 UI 上显示为浮动圆圈图标。它具有包含变形、启动和转移锚点的运动行为。
浮动操作按钮仅在 Material 主题中受支持。
下表列出了 Framework7 中使用的操作按钮类型 −
| S.No | 类型和说明 |
|---|---|
| 1 | 浮动操作按钮布局
非常简单；您只需要将其作为 page 或 view 的子项即可。 |
| 2 | Morph To Popover
如果您想在单击浮动操作按钮时打开弹出窗口，则可以使用 floating-button-to-popover 类。 |
| 3 | 快速拨号
您可以使用 speed dial 在单击浮动操作按钮时调用相关操作。 |
Framework7 -表单
描述
表单用于与用户交互，并使用文本字段、复选框、单选按钮等从网络用户那里收集数据。
Framework7 提供不同类型的表单元素，以便与应用程序顺利协作，如下表所示 −
| S.No | 覆盖类型 &描述 |
|---|---|
| 1 | 表单元素
表单元素用于制作美观的表单布局。 |
| 2 | 复选框和单选按钮
列表视图扩展允许您在 Framework7 中创建复选框和单选按钮输入。 |
| 3 | 智能选择
智能选择是一种通过使用复选框和单选按钮组将表单选择更改为动态页面的简单方法输入。 |
| 4 | 禁用元素
可以通过将 disabled 类应用于元素或为表单元素添加 disabled 属性来禁用元素。 |
| 5 | 表单数据
Framework7 几乎没有有用的方法，这使得使用表单变得容易。 |
| 6 | 表单存储
使用表单存储很容易存储并在 Ajax 加载的页面上自动解析表单数据。 |
| 7 | Ajax 表单提交
Framework7 允许您使用 Ajax 自动发送数据。 |
Framework7 - 选项卡
描述
选项卡是按逻辑分组的内容集，使我们能够像手风琴一样在它们之间快速切换并节省空间。
选项卡布局
以下代码定义选项卡的布局 −
<!-- Tabs wrapper, shoud have "tabs" class.It is a required element -->
<div class = "tabs">
<!-- The tab, should have "tab" class and unique id attribute -->
<!-- The tab is active by default - "active" class -->
<div class = "tab active" id = "tab1">
... The content for Tab 1 goes here ...
</div>
<!-- The second tab, should have "tab" class and unique id attribute -->
<div class = "tab" id = "tab2">
... The content for Tab 2 goes here ...
</div>
</div>
其中 −
<div class = "tabs"> − 这是所有选项卡的必需包装器。如果我们错过这一点，选项卡将根本无法工作。
-
<div class = "tab"> − 它是一个单独的选项卡，应该具有 unique id 属性。
-
<div class = "tab active"> −它是一个单独的活动选项卡，使用额外的 active 类使选项卡可见(活动)。
在选项卡之间切换
您可以在选项卡布局中使用一些控制器，以便用户可以在它们之间切换。
为此，您需要创建链接(<a> 标签)，其 tab-link 类和 href 属性等于目标选项卡的 id 属性 −
<!-- Here the link is used to activates 1st tab, has the same href attribute (#tab1) as the id attribute of 1st tab (tab1) --> <a href = "#tab1" class = "tab-link active">Tab 1</a> <!-- Here the link is used to activates 2st tab, has the same href attribute (#tab2) as the id attribute of 2st tab (tab2) --> <a href = "#tab2" class = "tab-link">Tab 2</a> <a href = "#tab3" class = "tab-link">Tab 3</a>
切换多个选项卡
如果您使用单个选项卡链接在多个选项卡之间切换，则可以使用类，而不是使用 ID 和 data-tab 属性。
<!-- For Top Tabs --> <div class = "tabs tabs-top"> <div class = "tab tab1 active">...</div> <div class = "tab tab2">...</div> <div class = "tab tab3">...</div> </div> <!-- For Bottom Tabs --> <div class = "tabs tabs-bottom"> <div class = "tab tab1 active">...</div> <div class = "tab tab2">...</div> <div class = "tab tab3">...</div> </div> <!-- For Tabs links --> <div class = "tab-links"> <!-- Links are switch top and bottom tabs to .tab1 --> <a href = "#" class = "tab-link" data-tab = ".tab1">Tab 1</a> <!-- Links are switch top and bottom tabs to .tab2 --> <a href = "#" class = "tab-link" data-tab = ".tab2">Tab 2</a> <!-- Links are switch top and bottom tabs to .tab3 --> <a href = "#" class = "tab-link" data-tab = ".tab3">Tab 3</a> </div>
tab-link 的 data-tab 属性包含目标选项卡的 CSS 选择器。
我们可以使用不同的选项卡方式，这些方式在下表中指定 −
| S.No | 选项卡类型 &描述 |
|---|---|
| 1 | 内联选项卡
内联选项卡是内联分组的集合，可让您快速在它们之间切换。 |
| 2 | 从导航栏切换选项卡
我们可以在导航栏中放置选项卡，让您可以在它们之间切换。 |
| 3 | 从选项卡栏切换视图
单个选项卡可用于在具有其自己的导航和布局的视图之间切换。 |
| 4 | 动画选项卡
您可以使用简单的过渡(动画)来切换选项卡。 |
| 5 | 可滑动选项卡
您可以使用选项卡的 tabs-swipeable-wrap 类创建具有简单过渡的可滑动选项卡。 |
| 6 | 标签 JavaScript 事件
当您使用标签的 JavaScript 代码时，可以使用 JavaScript 事件。 |
| 7 | 使用 JavaScript 显示选项卡
您可以使用 JavaScript 方法切换或显示选项卡。 |
Framework7 - 滑动滑块
说明
滑动滑块是最强大、最现代的触摸滑块，并带有许多功能，可集成到 Framework7 中。
以下 HTML 布局显示了滑动滑块 −
<!-- Container class for slider -->
<div class = "swiper-container">
<!-- Wrapper class for slider -->
<div class = "swiper-wrapper">
<!-- Slides -->
<div class = "swiper-slide">Slide 1</div>
<div class = "swiper-slide">Slide 2</div>
<div class = "swiper-slide">Slide 3</div>
... other slides ...
</div>
<!-- Define pagination, if it is required -->
<div class = "swiper-pagination"></div>
</div>
以下类用于 swiper 滑块 −
swiper-container − 它是主滑块容器的必需元素，用于幻灯片和分页。
Swiper-wrapper − 它是附加包装幻灯片的必需元素。
swiper-slide − 它是一个单个幻灯片元素，它可以包含任何 HTML。
swiper-pagination −对于分页项目符号而言，它是可选的，并且是自动创建的。
您可以使用 JavaScript 的相关方法初始化 swiper −
myApp.swiper(swiperContainer,parameters)
或
new Swiper(swiperContainer,parameters)
这两种方法都用于使用选项初始化滑块。
上面给出的方法包含以下参数 −
swiperContainer − 它是 swiper 容器的 HTMLElement 或字符串，并且是必需的。
parameters −这些是包含带有滑动参数的对象可选元素。
例如 −
var mySwiper = app.swiper('.swiper-container', {
speed: 400,
spaceBetween: 100
});
可以访问 swiper 的实例，并且滑块容器的 swiper 属性具有以下 HTML 元素 −
var mySwiper = $$('.swiper-container')[0].swiper;
// 在这里您可以使用所有滑块方法，例如:
mySwiper.slideNext();
您可以在下表中看到 swiper 的不同方式和类型 −
| S.No | Swiper 类型 &描述 |
|---|---|
| 1 | 带分页的默认滑动条
这是一个现代触摸滑块，默认情况下，滑动条水平滑动。 |
| 2 | 垂直滑动条
这个也可以用作默认滑动条，但它垂直滑动。 |
| 3 | 幻灯片之间有空格
这个swiper 用于在两个幻灯片之间留出空间。 |
| 4 | 多个 Swipers
此 swiper 在单个页面上使用多个 swipers。 |
| 5 | 嵌套 Swipers
它是垂直和水平幻灯片的组合。 |
| 6 | 自定义控件
它用于自定义控件来选择或滑动任何幻灯片。 |
| 7 | 延迟加载
它可用于需要时间加载的多媒体文件。 |
Framework7 - 照片浏览器
描述
照片浏览器类似于 iOS 照片浏览器组件，用于显示一组图像，可以缩放和平移。要在图像之间滑动，照片浏览器使用Swiper Slider。
下表显示了 framework7 中使用的照片浏览器类型 −
| S.No | 照片浏览器类型和说明 |
|---|---|
| 1 | 创建照片浏览器实例
照片浏览器只能使用 JavaScript 创建和初始化。 |
| 2 | 照片浏览器参数
Framework7 提供了与照片浏览器一起使用的参数列表。 |
| 3 | 照片浏览器方法和属性
初始化照片浏览器后，您将获得一个已初始化的实例变量，以使用照片浏览器方法和属性。 |
| 4 | 照片数组
在初始化照片浏览器时，您需要在 photos 参数中传递包含照片/视频的数组。 |
| 5 | 照片浏览器模板
Framework7 为您提供了许多照片浏览器模板，您可以在照片浏览器初始化时传递这些模板。 |
Framework7 -自动完成
描述
自动完成是 Framework7 的移动友好且触摸优化的组件，可以作为下拉列表或独立方式。您可以使用 JavaScript 方法 − 创建和初始化自动完成实例
myApp.autocomplete(parameters)
其中 parameters 是用于初始化自动完成实例的必需对象。
自动完成参数
下表列出了 Framework7 中可用的自动完成参数 −
| S.No | 参数和说明 | 类型 | 默认 |
|---|---|---|---|
| 1 | openIn 它定义如何打开可用作下拉菜单、弹出窗口或页面的自动完成功能。 |
string | 页面 |
| 2 | 源 它使用自动完成实例、搜索查询和渲染函数通过数组传递匹配的项目。 |
函数 (自动完成、查询、渲染) | - |
| 3 | valueProperty 指定匹配项对象的键的项值。 |
string | id |
| 4 | limit 每个查询在自动完成中显示的项目数量限制。 |
number | - |
| 5 | preloader Preloader 可用于通过以下方式指定自动完成布局将其设置为 true。 |
boolean | false |
| 6 | preloaderColor 它指定预加载器颜色。默认情况下，颜色为"黑色"。 |
string | - |
| 7 | value 定义具有默认选定值的数组。 |
array | - |
| 8 | textProperty 指定匹配的 item 对象的 key 的 item 值，可用作显示选项的标题。 |
string | text |
独立自动完成参数
下表列出了 Framework7 中可用的独立自动完成参数 −
| S.No | 参数 &描述 | 类型 | 默认 |
|---|---|---|---|
| 1 | opener 它是字符串或 HTML 元素参数，将打开独立的自动完成页面。 |
字符串或 HTMLElement | - |
| 2 | popupCloseText 用于关闭自动完成弹出窗口。 |
string | 'Close' |
| 3 | backText 当自动完成作为页面打开时，它提供返回链接。 |
string | 'Back' |
| 4 | pageTitle 它指定自动完成页面标题。 |
string | - |
| 5 | searchbarPlaceholderText 它指定搜索栏占位符文本。 |
string | '搜索' |
| 6 | searchbarCancelText 定义搜索栏取消按钮文本。 |
string | '取消' |
| 7 | notFoundText 未找到匹配元素时显示文本。 |
string | '未找到任何内容' |
| 8 | multiple 设置为 true 允许选择多项。 |
boolean | false |
| 9 | navbarTheme 指定导航栏的颜色主题。 |
string | - |
| 10 | backOnSelect 当用户选择值时，设置为 true 即可关闭自动完成功能。 |
boolean | false |
| 11 | formTheme 指定表单的颜色主题。 |
string | - |
下拉自动完成参数
下表列出了 Framework7 中可用的下拉自动完成参数 −
| S.No | 参数 &描述 | 类型 | 默认 |
|---|---|---|---|
| 1 | input 用于文本输入的字符串或 HTML 元素。 |
字符串或 HTMLElement | - |
| 2 | dropdownPlaceholderText 指定下拉占位符文本。 |
string | - |
| 3 | updateInputValueOnSelect 您可以通过将其设置为 true 来更新选择时的输入值。 |
boolean | true |
| 4 | expandInput 您可以通过将 item-input 设置为 true 来扩展列表视图中的文本输入，以便在下拉时全屏显示。 |
boolean | false |
自动完成回调函数
下表列出了 Framework7 中可用的下拉自动完成参数−
| S.No | 参数 &描述 | 类型 | 默认 |
|---|---|---|---|
| 1 | onChange 每当自动完成值发生变化时，都会执行此回调函数。 |
function (autocomplete, value) | - |
| 2 | onOpen 每当打开自动完成时，都会执行此回调函数。 |
function (autocomplete) | - |
| 3 | onClose 每当自动完成关闭时，都会执行此回调函数。 |
function (autocomplete) | - |
自动完成模板
下表列出了 Framework7 中可用的下拉自动完成参数 −
| S.No | 参数 &描述 | 类型 | 默认 |
|---|---|---|---|
| 1 | navbarTemplate 它是独立的自动完成导航栏模板。 |
string | - |
| 2 | itemTemplate 它是独立的模板7表单项。 |
string | - |
| 3 | dropdownTemplate 这是template7下拉模板。 |
string | - |
| 4 | dropdownItemTemplate 这是template7下拉列表项。 |
string | - |
| 5 | dropdownPlaceholderTemplate 这是template7下拉占位符项。 |
string | - |
默认模板
以下是上述定义的模板参数的默认模板代码片段 −
navbarTemplate
<div class = "navbar {{#if navbarTheme}}theme-{{navbarTheme}}{{/if}}">
<div class = "navbar-inner">
<div class = "left sliding">
{{#if material}}
<a href = "#" class = "link {{#if inPopup}}close-popup{{else}}back{{/if}} icon-only">
<i class = "icon icon-back"></i>
</a>
{{else}}
<a href = "#" class = "link {{#if inPopup}}close-popup{{else}}back{{/if}}">
<i class = "icon icon-back"></i>
{{#if inPopup}}
<span>{{popupCloseText}}</span>
{{else}}
<span>{{backText}}</span>
{{/if}}
</a>
{{/if}}
</div>
<div class = "center sliding">{{pageTitle}}</div>
{{#if preloader}}
<div class = "right">
<div class = "autocomplete-preloader preloader
{{#if preloaderColor}}
preloader-{{preloaderColor}}
{{/if}}">
</div>
</div>
{{/if}}
</div>
</div>
itemTemplate
<li>
<label class = "label-{{inputType}} item-content">
<input type = "{{inputType}}" name = "{{inputName}}" value = "{{value}}" {{#if selected}}checked{{/if}}>
{{#if material}}
<div class = "item-media">
<i class = "icon icon-form-{{inputType}}"></i>
</div>
<div class = "item-inner">
<div class = "item-title">{{text}}</div>
</div>
{{else}}
{{#if checkbox}}
<div class = "item-media">
<i class = "icon icon-form-checkbox"></i>
</div>
{{/if}}
<div class = "item-inner">
<div class = "item-title">{{text}}</div>
</div>
{{/if}}
</label>
</li>
dropdownTemplate
<div class = "autocomplete-dropdown">
<div class = "autocomplete-dropdown-inner">
<div class = "list-block">
<ul></ul>
</div>
</div>
{{#if preloader}}
<div class = "autocomplete-preloader preloader
{{#if preloaderColor}}
preloader-{{preloaderColor}}
{{/if}}">
{{#if material}}
{{materialPreloaderHtml}}
{{/if}}
</div>
{{/if}}
</div>
dropdownItemTemplate
<li>
<label class = "{{#unless placeholder}}label-radio{{/unless}} item-content" data-value = "{{value}}">
<div class = "item-inner">
<div class = "item-title">{{text}}</div>
</div>
</label>
</li>
dropdownPlaceholderTemplate
<li class = "autocomplete-dropdown-placeholder">
<div class = "item-content">
<div class = "item-inner">
<div class = "item-title">{{text}}</div>
</div>
</label>
</li>
自动完成方法
下表指定了 Framework7 中可用的自动完成方法 −
| S.No | 方法 &描述 | 1 | myAutocomplete.params 定义与对象一起传递的初始化参数。 |
|---|---|
| 2 | myAutocomplete.value 它定义具有选定值的数组。 |
| 3 | myAutocomplete.opened 如果设置为 true，则打开自动完成功能。 |
| 4 | myAutocomplete.dropdown 它指定自动完成的一个实例下拉菜单。 |
| 5 | myAutocomplete.popup 它指定自动完成弹出窗口的一个实例。 |
| 6 | myAutocomplete.page 它指定自动完成页面的一个实例。 |
| 7 | myAutocomplete.pageData 它定义自动完成页面数据。 |
| 8 | myAutocomplete.searchbar 它定义自动完成搜索栏实例。 |
自动完成属性
下表指定了 Framework7 中可用的自动完成方法 −
| S.No | 属性 &描述 |
|---|---|
| 1 | myAutocomplete.open() 打开自动完成功能，可用作下拉菜单、弹出窗口或页面。 |
| 2 | myAutocomplete.close() 关闭自动完成功能。 |
| 3 | myAutocomplete.showPreloader() 显示自动完成预加载器。 |
| 4 | myAutocomplete.hidePreloader() 隐藏自动完成预加载器。 |
| 5 | myAutocomplete.destroy() 它会破坏自动完成预加载器实例并删除所有事件。 |
示例
以下示例演示了在 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>Autocomplete</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">Autcomplete</div>
<div class = "right"> </div>
</div>
</div>
<div class = "page-content">
<div class = "content-block-title">Simple Dropdown Autocomplete</div>
<div class = "list-block">
<ul>
<li class = "item-content">
<div class = "item-title label">Country</div>
<div class = "item-input">
<input type = "text" placeholder = "Country" id = "autocomplete-dropdown">
</div>
</li>
</ul>
</div>
<div class = "content-block-title">Dropdown With Input Expand</div>
<div class = "list-block">
<ul>
<li class = "item-content">
<div class = "item-title label">Country</div>
<div class = "item-input">
<input type = "text" placeholder = "Country" id = "autocomplete-dropdown-expand">
</div>
</li>
</ul>
</div>
<div class = "content-block-title">Dropdown With All Values</div>
<div class = "list-block">
<ul>
<li class = "item-content">
<div class = "item-title label">Country</div>
<div class = "item-input">
<input type = "text" placeholder = "Country" id = "autocomplete-dropdown-all">
</div>
</li>
</ul>
</div>
<div class = "content-block-title">Dropdown With Placeholder</div>
<div class = "list-block">
<ul>
<li class = "item-content">
<div class = "item-title label">Country</div>
<div class = "item-input">
<input type = "text" placeholder = "Country" id = "autocomplete-dropdown-placeholder">
</div>
</li>
</ul>
</div>
<div class = "content-block-title">Simple Standalone Autocomplete</div>
<div class = "list-block">
<ul>
<li>
<a href = "#" id = "autocomplete-standalone" class = "item-link item-content autocomplete-opener">
<input type = "hidden">
<div class = "item-inner">
<div class = "item-title">Favorite Country</div>
<div class = "item-after"></div>
</div>
</a>
</li>
</ul>
</div>
<div class = "content-block-title">Popup Standalone Autocomplete</div>
<div class = "list-block">
<ul>
<li>
<a href = "#" id = "autocomplete-standalone-popup" class = "item-link item-content autocomplete-opener">
<input type = "hidden">
<div class = "item-inner">
<div class = "item-title">Favorite Country</div>
<div class = "item-after"></div>
</div>
</a>
</li>
</ul>
</div>
<div class = "content-block-title">Multiple Values Standalone Autocomplete</div>
<div class = "list-block">
<ul>
<li>
<a href = "#" id = "autocomplete-standalone-multiple" class = "item-link item-content autocomplete-opener">
<input type = "hidden">
<div class = "item-inner">
<div class = "item-title">Favorite Countries</div>
<div class = "item-after"></div>
</div>
</a>
</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 $$ = Dom7;
var mainView = myApp.addView('.view-main');
// Countries data array
var countries = ('India Africa Australia NewZealand England WestIndies Scotland Zimbabwe Srilanka Bangladesh').split(' ');
// Simple Dropdown
var autocompleteDropdownSimple = myApp.autocomplete ({
input: '#autocomplete-dropdown',
openIn: 'dropdown',
source: function (autocomplete, query, render) {
var results = [];
if (query.length === 0) {
render(results);
return;
}
// 可以找到匹配的项目
for (var i = 0; i < countries.length; i++) {
if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0)
results.push(countries[i]);
}
// 通过传递带有结果项的数组来显示项目
render(results);
}
});
// Dropdown with input expand
var autocompleteDropdownExpand = myApp.autocomplete ({
input: '#autocomplete-dropdown-expand',
openIn: 'dropdown',
expandInput: true, // expandInput 用作列表视图中的项目输入，将扩展到全屏宽度
//during dropdown
source: function (autocomplete, query, render) {
var results = [];
if (query.length === 0) {
render(results);
return;
}
// Find matched items
for (var i = 0; i < countries.length; i++) {
if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(countries[i]);
}
// 通过传递带有结果项的数组来显示项目
render(results);
}
});
// Dropdown with all values
var autocompleteDropdownAll = myApp.autocomplete ({
input: '#autocomplete-dropdown-all',
openIn: 'dropdown',
source: function (autocomplete, query, render) {
var results = [];
// 可以找到匹配的项目
for (var i = 0; i < countries.length; i++) {
if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0)
results.push(countries[i]);
}
// 通过传递带有结果项的数组来显示项目
render(results);
}
});
// Dropdown with placeholder
var autocompleteDropdownPlaceholder = myApp.autocomplete ({
input: '#autocomplete-dropdown-placeholder',
openIn: 'dropdown',
dropdownPlaceholderText: 'Type as "India"',
source: function (autocomplete, query, render) {
var results = [];
if (query.length === 0) {
render(results);
return;
}
// 可以找到匹配的项目
for (var i = 0; i < countries.length; i++) {
if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0)
results.push(countries[i]);
}
// 通过传递带有结果项的数组来显示项目
render(results);
}
});
// Simple Standalone
var autocompleteStandaloneSimple = myApp.autocomplete ({
openIn: 'page', //open in page
opener: $$('#autocomplete-standalone'), //打开自动完成的链接
backOnSelect: true, //go back after we select something
source: function (autocomplete, query, render) {
var results = [];
if (query.length === 0) {
render(results);
return;
}
// 可以找到匹配的项目
for (var i = 0; i < countries.length; i++) {
if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0)
results.push(countries[i]);
}
// 通过传递带有结果项的数组来显示项目
render(results);
},
onChange: function (autocomplete, value) {
// 此处将项目文本值添加到 item-after
$$('#autocomplete-standalone').find('.item-after').text(value[0]);
// 您可以将项目值添加到输入值中
$$('#autocomplete-standalone').find('input').val(value[0]);
}
});
// Standalone Popup
var autocompleteStandalonePopup = myApp.autocomplete ({
openIn: 'popup', // Opens the Autocomplete in page
opener: $$('#autocomplete-standalone-popup'), // 它将打开独立的自动完成弹出窗口
backOnSelect: true, //选择项目后，返回页面
source: function (autocomplete, query, render) {
var results = [];
if (query.length === 0) {
render(results);
return;
}
// 可以找到匹配的项目
for (var i = 0; i < countries.length; i++) {
if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(countries[i]);
}
// 通过传递带有结果项的数组来显示项目
render(results);
},
onChange: function (autocomplete, value) {
// 此处将项目文本值添加到 item-after
$$('#autocomplete-standalone-popup').find('.item-after').text(value[0]);
// 您可以将项目值添加到输入值中
$$('#autocomplete-standalone-popup').find('input').val(value[0]);
}
});
// Multiple Standalone
var autocompleteStandaloneMultiple = myApp.autocomplete ({
openIn: 'page', //Opens the Autocomplete in page
opener: $$('#autocomplete-standalone-multiple'), //打开自动完成的链接
multiple: true, //Allow multiple values
source: function (autocomplete, query, render) {
var results = [];
if (query.length === 0) {
render(results);
return;
}
// 可以找到匹配的项目
for (var i = 0; i < countries.length; i++) {
if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(countries[i]);
}
// 通过传递带有结果项的数组来显示项目
render(results);
},
onChange: function (autocomplete, value) {
// 此处将项目文本值添加到 item-after
$$('#autocomplete-standalone-multiple').find('.item-after').text(value.join(', '));
// 您可以将项目值添加到输入值中
$$('#autocomplete-standalone-multiple').find('input').val(value.join(', '));
}
});
</script>
</body>
</html>
输出
让我们执行以下步骤来查看上述代码的工作原理 −
将上述 HTML 代码保存为服务器根文件夹中的 autocomplete.html 文件。
将此 HTML 文件作为 http://localhost/autocomplete.html 打开，输出显示如下。
该示例提供了简单下拉列表、包含所有值的下拉列表、包含占位符的下拉列表、独立自动完成等中的值自动完成。
Framework7 - 选择器
描述
选择器看起来像 iOS 原生选择器，它是一个功能强大的组件，允许您从列表中选择任何值，也可用于创建自定义覆盖选择器。您可以将 Picker 用作内联组件或覆盖。覆盖选择器将自动转换为平板电脑 (iPad) 上的 Popover。
使用以下应用程序的方法，您可以创建和初始化 JavaScript 方法 −
myApp.picker(parameters)
其中 parameters 是必需对象，用于初始化选择器实例，它是一个必需方法。
Picker 参数
下表指定了选择器中的可用参数 −
| S.No | 参数和说明 | 类型 | 默认 |
|---|---|---|---|
| 1 | container 带有 CSS 选择器或 HTMLElement 的字符串，用于为内联选择器生成 Picker HTML。 |
字符串或 HTMLElement | - |
| 2 | input 与带有 CSS 选择器或 HTMLElement 的字符串一起放置的相关输入元素。 |
字符串或 HTMLElement | - |
| 3 | scrollToInput 用于在打开选择器时滚动输入的视口(页面内容)。 |
boolean | true |
| 4 | inputReadOnly 用于设置指定输入的"readonly"属性。 |
boolean | true |
| 5 | convertToPopover 用于在 iPad 等大屏幕上将选择器模式转换为 Popover。 |
boolean | true |
| 6 | onlyOnPopover 您可以通过启用它来在 Popover 中打开选择器。 |
boolean | true |
| 7 | cssClass 对于选择器模式，您可以使用额外的 CSS 类名称。 |
string | - |
| 8 | closeByOutsideClick 您可以通过启用该方法，单击选择器或输入元素外部来关闭选择器。 |
boolean | false |
| 9 | toolbar 用于启用选择器模式工具栏。 |
boolean | true |
| 10 | toolbarCloseText 用于完成/关闭工具栏按钮。 |
string | '完成' |
| 11 | toolbarTemplate 它是工具栏 HTML 模板，默认情况下它是具有以下模板的 HTML 字符串 −
<div class = "toolbar">
<div class = "toolbar-inner">
<div class = "left"></div>
<div class = "right">
<a href = "#" class = "link close-picker">
{{closeText}}
</a>
</div>
</div>
</div>
|
string | - |
特定选择器参数
下表列出了可用的特定选择器参数 −
| S.No | 参数 &描述 | 类型 | 默认 |
|---|---|---|---|
| 1 | rotateEffect 在拾取器中启用 3D 旋转效果。 |
boolean | false |
| 2 | momentumRatio 快速触摸和移动后释放拾取器时，它会产生更多动量。 |
number | 7 |
| 3 | updateValuesOnMomentum 用于在动量期间更新选择器和输入值。 |
boolean | false |
| 4 | updateValuesOnTouchmove 用于在触摸移动期间更新选择器和输入值。 |
boolean | true | 5 | 值 数组有其初始值，并且每个数组项代表相关列。 |
array | - |
| 6 | formatValue 该函数用于格式化输入值，它应返回新的/格式化的字符串值。 values 和 displayValues 是相关列的数组。 |
function (p, values, displayValues) | - |
| 7 | cols 每个数组项都代表一个带有列参数的对象。 |
array | - |
选择器参数回调
下表显示了选择器中可用的回调函数列表 −
| S.No | 回调 &描述 | 类型 | 默认 |
|---|---|---|---|
| 1 | onChange 每当选择器值发生更改时，将执行回调函数，并且 values 和 displayValues 是相关列的数组。 |
function (p, values, displayValues) | - |
| 2 | onOpen 每当选择器打开时，将执行回调函数。 |
function (p) | - |
| 3 | onClose 每当选择器关闭时，回调函数都会被执行。 |
function (p) | - |
列参数
在配置Picker时，我们需要传递cols参数。它表示为数组，其中每个项目都是带有列参数的对象−
| S.No | 参数 &描述 | 类型 | 默认 |
|---|---|---|---|
| 1 | 值 您可以使用数组指定字符串列值。 |
array | - |
| 2 | displayValues 它具有包含字符串列值的数组，当未指定时，它将显示来自 values 参数的值。 |
array | - |
| 3 | cssClass 用于在列 HTML 容器上设置的 CSS 类 名称。 |
string | - |
| 4 | textAlign 用于设置列值的文本对齐方式，可以是 "left"、"center"或"right"。 |
string | - | 5 | width 默认情况下，宽度是自动计算的。如果您需要在选择器中修复列宽，而依赖列应以 px 为单位。 |
number | - |
| 6 | divider 它用于应为可视分隔符的列，它没有任何值。 |
boolean | false |
| 7 | content 它用于指定分隔符列 (divider:true) 以及列的内容。 |
string | - |
列回调参数
| S.No | 回调和说明 | 类型 | 默认 |
|---|---|---|---|
| 1 | onChange 每当列值发生变化时，回调函数就会执行。value 和 displayValue 代表当前列 value 和 displayValue。 |
function (p, value, displayValue) | - |
Picker 属性
Picker 变量具有许多属性，这些属性在下表中给出 −
| S.No | 属性 &描述 |
|---|---|
| 1 | myPicker.params 您可以使用对象初始化传递的参数。 |
| 2 | myPicker.value 每列的选定值由 item 数组表示。 |
| 3 | myPicker.displayValue 每列的选定显示值由 item 数组表示。 |
| 4 | myPicker.opened 当选择器打开时，它设置为 true 值。 |
| 5 | myPicker.inline 当选择器为内联时，它设置为 true 值。 |
| 6 | myPicker.cols Picker 列有自己的方法和属性。 |
| 7 | myPicker.container Dom7 实例用于 HTML 容器。 |
Picker 方法
picker 变量具有有用的方法，如下表所示 −
| S.No | 方法和说明 |
|---|---|
| 1 | myPicker.setValue(values, duration) 用于设置新的 picker 值。值位于数组中，其中每个项目代表每列的 value。 duration - 以毫秒为单位的过渡持续时间。 |
| 2 | myPicker.open() 用于打开 Picker。 |
| 3 | myPicker.close() 用于关闭 Picker。 |
| 4 | myPicker.destroy() 用于销毁 Picker 实例并删除所有事件。 |
列属性
myPicker.cols 数组中的每一列也有自己的有用属性，如下表所示 −
//获取第一列 var col = myPicker.cols[0];
| S.No | 属性 &描述 |
|---|---|
| 1 | col.container 您可以创建一个带有列 HTML 容器的实例。 |
| 2 | col.items 您可以创建一个带有列项 HTML 元素的实例。 |
| 3 | col.value 用于选择当前列值。 |
| 4 | col.displayValue 用于选择当前列值显示。 |
| 5 | col.activeIndex 给出当前索引号，即选定/活动项。 |
列方法
下表给出了有用的列方法 −
| S.No | 方法和说明 |
|---|---|
| 1 | col.setValue(value, duration) 用于为当前列设置新值。 value 必须是新值，duration 是以毫秒为单位的过渡持续时间。 |
| 2 | col.replaceValues(values, displayValues) 用于将列值和 displayValues 替换为新值。 |
每当您将 Picker 初始化为内联 Picker 时，它用于从其 HTML 容器访问 Picker 的实例。
var myPicker = $$('.picker-inline')[0].f7Picker;
下表列出了不同类型的选择器 −
| S.No | 标签类型 &描述 |
|---|---|
| 1 | 单值选择器
这是一个功能强大的组件，可让您从列表中选择任何值。 |
| 2 | 两个值和 3D 旋转效果
在选择器中，您可以使用 3D 旋转效果。 |
| 3 | 依赖值
值彼此依赖，以实现指定的元素。 |
| 4 | 自定义工具栏
您可以在单个页面上使用一个或多个选择器进行自定义。 |
| 5 | 内联选择器/日期时间
您可以在内联选择器中选择多个值。例如日期有日期、月份、年份，时间有小时、分钟、秒。 |
Framework7 - 日历
描述
日历组件允许您轻松处理日期，并且可以用作内联或覆盖组件。覆盖日历将自动转换为平板电脑上的弹出窗口。
只能使用 JavaScript 创建和初始化日历。您需要使用相关应用程序的方法，如下所示 −
myApp.calendar(parameters) − 此方法返回已初始化的日历实例。它接受一个 对象 作为参数。
下表显示了 Framework7 中的日历使用情况 −
| S.No | 日历使用情况 &描述 |
|---|---|
| 1 | 日历参数
Framework7 提供了与日历一起使用的参数列表。 |
| 2 | 日历方法和属性
初始化日历后，您将获得一个已初始化的实例变量，以使用日历方法和属性。 |
| 3 | 访问日历的实例
将日历初始化为内联时，可以从其 HTML 容器访问日历实例。 |
Framework7 - 刷新
说明
它是一个特殊的组件，用于通过拉动来刷新(重新加载)页面内容。
以下代码显示如何刷新页面内容 −
<div class = "page">
<!-- Page content should have additional "pull-to-refresh-content" class -->
<div class = "page-content pull-to-refresh-content" data-ptr-distance = "55">
<!-- Default pull to refresh layer-->
<div class = "pull-to-refresh-layer">
<div class = "preloader"></div>
<div class = "pull-to-refresh-arrow"></div>
</div>
<!-- usual content below -->
<div class = "list-block">
...
</div>
</div>
以下类用于刷新 −
page-content − 它有一个额外的 pull-to-refresh-content 类，它是启用下拉刷新所必需的。
pull-to-refresh-layer − 它是一个隐藏层，用于下拉刷新视觉元素，它只是一个预加载器和一个箭头。
data-ptr-distance = "55" −这是附加属性，允许您设置自定义"下拉刷新"触发距离，其默认值为 44px。
下拉刷新事件
在"下拉刷新"中有一些 JavaScript 事件，下表给出了这些事件 −
| S.No | 事件 &描述 | 目标 |
|---|---|---|
| 1 | pullstart 每当您开始拉动以刷新内容时，它都会被触发。 |
拉动以刷新内容。 <div class = "pull-to-refresh-content"> |
| 2 | pullmove 当您拉动刷新内容时会触发该事件。 |
拉动刷新内容。 <div class="pull-to-refresh-content"> |
| 3 | pullend 每当您释放下拉刷新内容时，它都会被触发。 |
下拉刷新内容。 <div class="pull-to-refresh-content"> |
| 4 | refresh 下拉刷新进入"正在刷新"状态时，会触发该事件。 |
下拉刷新内容。 <div class="pull-to-refresh-content"> |
| 5 | refreshdone 刷新完成后，回到初始状态，会触发该事件。这将在调用 pullToRefreshDone 方法后完成。 |
下拉刷新内容。 <div class="pull-to-refresh-content"> |
有一些应用的方法可以与下拉刷新一起使用。
| S.No | 应用的方法 &描述 |
|---|---|
| 1 | myApp.pullToRefreshDone(ptrContent) 用于重置下拉刷新内容。 |
| 2 | myApp.pullToRefreshTrigger(ptrContent) 用于在指定的下拉刷新内容上触发刷新。 |
| 3 | myApp.destroyPullToRefresh(ptrContent) 用于在指定的上拉刷新时销毁/禁用下拉刷新下拉刷新内容。 |
| 4 | myApp.initPullToRefresh(ptrContent) 用于初始化/启用下拉刷新内容。 |
其中ptrContent用于HTMLElement或string来重置/触发或禁用/启用下拉刷新内容。
示例
以下示例演示了如何使用刷新组件来启动页面内容的刷新 −
<!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>Pull To Refresh</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>
<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">Pull To Refresh</div>
<div class="right"> </div>
</div>
</div>
<div class="page-content pull-to-refresh-content">
<div class="pull-to-refresh-layer">
<div class="preloader"></div>
<div class="pull-to-refresh-arrow"></div>
</div>
<div class="list-block media-list">
<ul>
<li class="item-content">
<div class="item-media"><img src="/framework7/images/apple.png" width="44"></div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">apple</div>
</div>
</div>
</li>
<li class="item-content">
<div class="item-media"><img src="/framework7/images/froots_img.jpg" width="44"></div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">strawberry</div>
</div>
</div>
</li>
<li class="item-content">
<div class="item-media"><img src="/framework7/images/mango.jpg" width="44"></div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">Mango</div>
</div>
</div>
</li>
</ul>
<div class="list-block-label">
<p>Just pull page down to let the magic happen.</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 $$ = Dom7;
// Dummy Content
var fruits = ['mango', 'orange', 'watermelon', 'banana'];
// Pull to refresh content
var ptrContent = $$('.pull-to-refresh-content');
// Add 'refresh' listener on it
ptrContent.on('refresh', function (e) {
// Emulate 2s loading
setTimeout(function () {
var picURL = 'images/Fruit.jpg' + Math.round(Math.random() * 100);
var fruit = fruits[Math.floor(Math.random() * fruits.length)];
var itemHTML = '<li class="item-content">' +
'<div class="item-media"><img src="/framework7/images/Fruit.jpg" width="44"/></div>' +
'<div class="item-inner">' +
'<div class="item-title-row">' +
'<div class="item-title">' + fruit + '</div>' +
'</div>' + '</div>' + '</li>';
// Prepend new list element
ptrContent.find('ul').prepend(itemHTML);
// When loading done, we need to reset it
myApp.pullToRefreshDone();
}, 2000);
});
</script>
</html>
输出
让我们执行以下步骤来查看上述代码的工作原理 −
将上述 HTML 代码保存为服务器根文件夹中的 pull_to_refresh.html 文件。
以 http://localhost/pull_to_refresh.html 的形式打开此 HTML 文件，输出显示如下。
当用户下拉时，页面将刷新内容。
Framework7 - Infinite滚动
说明
无限滚动允许您加载其他内容并在页面接近底部时执行所需的操作。
以下 HTML 布局显示了无限滚动 −
<div class = "page">
<div class = "page-content infinite-scroll" data-distance = "100">
...
</div>
</div>
上述布局包含以下类 −
page-content infinite-scroll − 用于无限滚动容器。
data-distance − 此属性允许您配置距离页面底部的距离(以 px 为单位)以触发无限滚动事件，其默认值为 50px。
如果您想在页面顶部使用无限滚动，您需要向 "page-content" 添加额外的 "infinite-scroll-top" 类 −
<div class = "page">
<div class = "page-content infinite-scroll infinite-scroll-top">
...
</div>
</div>
无限滚动事件
infinite − 用于在页面滚动到底部指定距离时触发。它将成为 div class = "page-content infinite-scroll" 的目标。
有两种 App 方法可以与无限滚动容器一起使用 −
要将无限滚动事件侦听器添加到指定的 HTML 容器，请使用以下方法 −
myApp.attachInfiniteScroll(container)
您可以使用以下方法从指定的 HTML 容器中删除无限滚动事件侦听器 −
myApp.detachInfiniteScroll(container)
其中 parameters 是用作无限滚动容器的 HTMLElement 或 string 的必需选项。
示例
以下示例演示了无限滚动在加载附加内容时加载附加内容页面滚动到接近底部 −
<!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>infinite_scroll</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 = "left"> </div>
<div class = "center sliding">Infinite Scroll</div>
<div class = "right"> </div>
</div>
</div>
<div class = "pages navbar-through">
<div data-page = "home" class = "page">
<div class = "page-content infinite-scroll">
<div class = "list-block">
<ul>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 1</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 2</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 3</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 4</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 5</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 6</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 7</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 8</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 9</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 10</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 11</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 12</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 13</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 14</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 15</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 16</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 17</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 18</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 19</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 20</div>
</div>
</li>
</ul>
</div>
<div class = "infinite-scroll-preloader">
<div class = "preloader"></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>
<style>
.infinite-scroll-preloader {
margin-top:-20px;
margin-bottom:10px;
text-align:center;
}
.infinite-scroll-preloader .preloader {
width:34px;
height:34px;
}
</style>
<script>
var myApp = new Framework7();
var $$ = Dom7;
// 加载标志
var loading = false;
// 最后加载的索引
var lastIndex = $$('.list-block li').length;
// 加载的最大项目数
var maxItems = 60;
// 每次加载时附加项目
var itemsPerLoad = 20;
// 附加"infinite"事件处理程序
$$('.infinite-scroll').on('infinite', function () {
// 如果正在加载，则退出
if (loading) return;
// 设置加载标志
loading = true;
// 模拟 1 秒加载
setTimeout(function () {
// 重置加载标志
loading = false;
if (lastIndex >= maxItems) {
// 没有更多需要加载的内容，分离无限滚动事件以防止不必要的加载
myApp.detachInfiniteScroll($$('.infinite-scroll'));
// 移除预加载器
$$('.infinite-scroll-preloader').remove();
return;
}
// 生成新项目 HTML
var html = '';
for (var i = lastIndex + 1; i <= lastIndex + itemsPerLoad; i++) {
html += '<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">
Item ' + i + '
</div>
</div>
</li>';
}
// 附加新项目
$$('.list-block ul').append(html);
// 更新最后加载的索引
lastIndex = $$('.list-block li').length;
}, 1000);
});
</script>
</body>
</html>
输出
让我们执行以下步骤来查看上述代码的工作原理 −
将上述 HTML 代码保存为服务器根文件夹中的 infinite_scroll.html 文件。
将此 HTML 文件作为 http://localhost/infinite_scroll.html 打开，输出显示如下。
此示例允许在页面滚动到底部指定距离时加载其他内容。
Framework7 - 消息
说明
消息是Framework7 的组件，它使应用程序中的评论和消息系统可视化。
消息布局
framework7 具有以下消息布局结构 −
<div class = "page">
<div class = "page-content messages-content">
<div class = "messages">
<!-- Defines the date stamp -->
<div class = "messages-date">Monday, Apr 26 <span>10:30</span></div>
<!-- Displays the sent message and by default, it will be in green color on right side -->
<div class = "message message-sent">
<!-- Define the text with bubble type -->
<div class = "message-text">Hello</div>
</div>
<!-- Displays the another sent message -->
<div class = "message message-sent">
<!-- Define the text with bubble type -->
<div class = "message-text">How are you?</div>
</div>
<!-- Displays the received message and by default, it will be in grey color on left side -->
<div class = "message message-with-avatar message-received">
<!-- Provides sender name -->
<div class = "message-name">Smith</div>
<!-- Define the text with bubble type -->
<div class = "message-text">I am fine, thanks</div>
<!-- Defines the another date stamp -->
<div class = "messages-date">Tuesday, April 28 <span>11:16</span></div>
</div>
</div>
</div>
布局在不同区域包含以下类 −
消息页面布局
下表显示了消息页面布局的类及其说明。
| S.No | 类 &描述 |
|---|---|
| 1 | messages-content 它是添加到"page-content"并用于消息包装器的必需附加类。 |
| 2 | messages 它是消息气泡的必需元素。 |
| 3 | messages-date 它使用日期戳容器来显示发送或接收消息的日期和时间。 |
| 4 | message 这是一条要显示的单条消息。 |
单条消息内部部分
下表显示了简单消息内部部分的类及其说明。
| S.No | 类和描述 |
|---|---|
| 1 | message-name 提供发件人名称。 |
| 2 | message-text 使用气泡类型定义文本。 |
| 3 | message-avatar 指定发件人头像。 |
| 4 | message-label 指定消息下方的文本标签气泡。 |
单消息容器的附加类
下表显示了单消息容器描述的附加类。
| S.No | 课程 &描述 |
|---|---|
| 1 | message-sent 指定消息由用户发送，右侧显示绿色背景色。 |
| 2 | message-received 用于显示单条消息，表示消息已被用户接收，左侧显示灰色背景色。 |
| 3 | message-pic 用于显示带有单条消息的图片的附加类。 |
| 4 | message-with-avatar 这是一个附加类，用于显示带有头像的单条消息(已接收或已发送)。 |
| 5 | message-with-tail 您可以为单条消息(已接收或已发送)添加气泡尾部。 |
单条消息的其他可用类
下表显示了单条消息的可用类及其说明。
| S.No | 类&描述 |
|---|---|
| 1 | message-hide-name 这是一个用于隐藏单个消息(已接收或已发送)的消息名称的附加类。 |
| 2 | message-hide-avatar 这是一个用于隐藏单个消息(已接收或已发送)的消息头像的附加类。 |
| 3 | message-hide-label 这是一个用于隐藏单个消息(已接收或已发送)的消息标签的附加类。 |
| 4 | message-last 您可以使用此类来指示当前对话中某个发送者对单个消息(已接收或已发送)接收或发送的最后一条消息。 |
| 5 | message-first 您可以使用此类来指示当前对话中某个发送者对单个消息(已接收或已发送)接收或发送的第一条消息。 |
使用 JavaScript 初始化消息
您可以使用以下方法 − 使用 JavaScript 初始化消息
myApp.messages(messagesContainer, parameters)
该方法有两个选项−
messagesContainer − 它是一个必需的 HTML 元素或字符串，包含消息容器 HTML 元素。
parameters − 它指定一个带有消息参数的对象。
消息参数
下表显示了消息的参数及其说明。
| S.No | 参数和说明 | 类型 | 默认 |
|---|---|---|---|
| 1 | autoLayout 启用后，会向每条消息添加其他必需的类。 |
boolean | true |
| 2 | newMessagesFirst 启用后，您可以在顶部显示消息，而不是在底部显示消息。 |
boolean | false |
| 3 | messages 显示消息数组，其中每条消息应表示为带有消息参数的对象。 |
array | - |
| 4 | messageTemplate 显示单个消息模板。 |
string | - |
消息属性
下表显示了消息的属性及其说明。
| S.No | 属性 &描述 |
|---|---|
| 1 | myMessages.params 您可以使用对象初始化传递的参数。 |
| 2 | myMessages.container 定义带有消息栏 HTML 容器的 DOM7 元素。 |
消息方法
下表显示了带有描述的消息的方法。
| S.No | 方法和说明 |
|---|---|
| 1 | myMessages.addMessage(messageParameters, method, animate); 可以使用方法参数将消息添加到开头或结尾。 它具有以下参数 −
|
| 2 | myMessages.appendMessage(messageParameters, animate); 它将一条消息添加到消息容器的末尾。 |
| 3 | myMessages.prependMessage(messageParameters, animate); 它将一条消息添加到消息容器的开头。 |
| 4 | myMessages.addMessages(messages, method, animate); 您可以一次添加多条消息时间。 它具有以下参数 −
|
| 5 | myMessages.removeMessage(message); 它用于删除消息。 它具有以下参数 −
|
| 6 | myMessages.removeMessages(messages); 您可以删除多条消息。 它具有以下参数 −
|
| 7 | myMessages.scrollMessages(); 您可以根据新消息的第一个参数从上到下滚动消息，反之亦然。 |
| 8 | myMessages.layout(); 可以对消息应用自动布局。 |
| 9 | myMessages.clean(); 用于清除消息。 |
| 10 | myMessages.destroy(); 用于销毁消息。 |
单条消息参数
下表显示了单条消息的参数及其说明。
| S.No | 参数和说明 | 类型 | 默认 |
|---|---|---|---|
| 1 | text 定义消息文本，可以是 HTML 字符串。 |
string | - |
| 2 | name 指定发件人姓名。 |
string | - |
| 3 | avatar 它指定发送者头像 URL 字符串。 |
string | - |
| 4 | time 它指定消息的时间字符串，如 '9:45 AM'、'18:35'。 |
string | - |
| 5 | type 它提供消息的类型，无论是发送还是接收消息。 |
string | 已发送 |
| 6 | 标签 它定义消息的标签。 |
string | - |
| 7 | 天 它提供消息的日期字符串，如"星期日"、"星期一"、"昨天"等。 |
string | - |
使用 HTML 初始化消息
您可以通过使用 messages 的附加 messages-init 类，使用 HTML 初始化消息(无需 JavaScript)，并使用 data- 属性传递所需的参数，如下面的代码片段所示 −
...
<div class = "page-content messages-content">
<!-- Initialize the messages using additional "messages-init" class-->
<div class = "messages messages-init" data-auto-layout = "true" data-new-messages-first = "false">
...
</div>
</div>
...
示例
以下示例演示了 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>Messages</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 toolbar-fixed">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left"> </div>
<div class = "center">Messages</div>
<div class = "right"> </div>
</div>
</div>
<div class = "toolbar messagebar">
<div class = "toolbar-inner">
<textarea placeholder = "Message"></textarea><a href = "#" class = "link">Send</a>
</div>
</div>
<div class = "page-content messages-content">
<div class = "messages">
<div class = "messages-date">Friday, Apr 26 <span>10:30</span></div>
<div class = "message message-sent">
<div class = "message-text">Hello</div>
</div>
<div class = "message message-sent">
<div class = "message-text">Happy Birthday</div>
</div>
<div class = "message message-received">
<div class = "message-name">Smith</div>
<div class = "message-text">Thank you</div>
<div style = "background-image:url(/framework7/images/person.png)" class = "message-avatar"></div>
</div>
<div class = "messages-date">Saturday, Apr 27 <span>9:30</span></div>
<div class = "message message-sent">
<div class = "message-text">Good Morning...</div>
</div>
<div class = "message message-sent">
<div class = "message-text"><img src = "/framework7/images/gm.jpg"></div>
<div class = "message-label">Delivered</div>
</div>
<div class = "message message-received">
<div class = "message-name">Smith</div>
<div class = "message-text">Very Good Morning...</div>
<div style = "background-image:url(/framework7/images/person.png)" class = "message-avatar"></div>
</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 $$ = Dom7;
// 表示对话标志
var dialogueStarted = false;
// 此处初始化消息
var myMessages = myApp.messages('.messages', {
autoLayout:true
});
// 初始化消息栏
var myMessagebar = myApp.messagebar('.messagebar');
// 点击按钮后显示文本
$$('.messagebar .link').on('click', function () {
// 指定消息文本
var messageText = myMessagebar.value().trim();
// 如果没有消息，则退出
if (messageText.length === 0) return;
// 指定空消息栏
myMessagebar.clear()
// 定义随机消息类型
var messageType = (['sent', 'received'])[Math.round(Math.random())];
// 为收到的消息提供头像和名称
var avatar, name;
if(messageType === 'received') {
name = 'Smith';
}
// 添加消息
myMessages.addMessage ({
// 提供消息文本
text: messageText,
// 显示随机消息类型
type: messageType,
// 指定发件人的头像和姓名
avatar: avatar,
name: name,
// 显示消息的日期、日期和时间
day: !conversationStarted ? 'Today' : false,
time: !conversationStarted ? (new Date()).getHours() + ':' + (new Date()).getMinutes() : false
})
// 您可以在这里更新对话标志
conversationStarted = true;
});
</script>
</body>
</html>
输出
让我们执行以下步骤来查看上述代码的工作原理 −
将上述 HTML 代码保存为服务器根文件夹中的 messages.html 文件。
将此 HTML 文件作为 http://localhost/messages.html 打开，输出显示如下。
当您在消息框中键入消息并单击"发送"按钮时，它会指定您的消息已发送并在右侧以绿色背景颜色显示。
您收到的消息与发件人姓名一起显示在左侧，背景为灰色。
Framework7 - 消息栏
说明
Framework7 提供特殊的可调整大小的工具栏，以便与应用程序中的消息系统配合使用。
以下代码显示消息栏布局−
<div clas = "toolbar messagebar">
<div clas = "toolbar-inner">
<textarea placeholder = "Message"></textarea>
<a href = "#" clas = "link">Send</a>
</div>
</div>
在消息栏中，"page"里面很重要，在"messages-content"的右边 −
<div class = "page toolbar-fixed">
<!-- messagebar -->
<div class = "toolbar messagebar">
<div class = "toolbar-inner">
<textarea placeholder = "Message"></textarea>
<a href = "#" class = "link">Send</a>
</div>
</div>
<!-- messages-content -->
<div class = "page-content messages-content">
<div class = "messages">
... messages
</div>
</div>
</div>
您可以使用以下方法用 JavaScript 初始化消息栏 −
myApp.messagesbar(messagesbarContainer, parameters)
该方法有两个选项 −
messagesbarContainer − 它是一个必需的 HTML 元素或字符串，其中包含 messagebar 容器 HTML 元素。
parameters − 它指定一个带有 messagebar 参数的对象。
例如 −
var myMessagebar = app.messagebar('.messagebar', {
maxHeight: 200
});
消息栏参数
maxHeight − 用于设置文本区域的最大高度，将根据文本量调整大小。参数类型为number，默认值为null。
消息栏属性
下表显示了消息栏属性 −
| S.No | 属性 &描述 |
|---|---|
| 1 | myMessagebar.params 您可以使用传递的初始化参数指定对象。 |
| 2 | myMessagebar.container 您可以使用 messagebar 容器 HTML 元素指定 dom7 元素。 |
| 3 | myMessagebar.textarea 您可以使用 messagebar textarea HTML 元素指定 dom7 元素。 |
Messagebar 方法
下表显示了 messagebar 方法 −
| S.No | 方法和描述 |
|---|---|
| 1 | myMessagebar.value(newValue); 如果未指定 newValue，则设置消息栏文本区域值/文本并返回消息栏文本区域值。 |
| 2 | myMessagebar.clear(); 清除文本区域并更新/重置大小。 |
| 3 | myMessagebar.destroy(); 销毁消息栏实例。 |
使用初始化消息栏HTML
您可以通过将 messagebar-init 类添加到 .messagebar 来使用 HTML 初始化消息栏，而无需 JavaScript 方法和属性，并且可以使用 data- 属性传递所需的参数。
以下代码指定使用 HTML 初始化消息栏 −
<div class = "toolbar messagebar messagebar-init" data-max-height = "200">
<div class = "toolbar-inner">
<textarea placeholder = "Message"></textarea>
<a href = "#" class = "link">Send</a>
</div>
</div>
访问消息栏实例
如果使用 HTML 初始化消息栏实例，则可以访问该实例；这是通过使用其容器元素的 f7 消息栏 属性实现的。
var myMessagebar = $$('.messagebar')[0].f7Messagebar;
// 现在您可以使用它了
myMessagebar.value('Hello world');
您可以查看 Messagebar 的示例，该示例在此 链接中进行了解释
Framework7 - 通知
说明
通知用于显示所需的消息，这些消息看起来像推送(或本地)iOS 通知。
下表详细演示了通知的使用 −
| S.No | 通知使用和说明 |
|---|---|
| 1 | 通知 JavaScript API
还可以使用 JavaScript 的相关应用方法添加或关闭通知。 |
| 2 | 通知布局
Framework7 通知将使用 JavaScript 添加。 |
| 3 | 示例 iOS
Framework7 允许您在 iOS 布局中使用不同类型的通知。 |
| 4 | 示例 Material
Framework7 通知还可以可用于材料布局。 |
Framework7 - 延迟加载
说明
延迟加载会延迟给定页面上的图像加载过程。延迟加载可提高滚动性能，加快页面加载速度并节省流量。
延迟加载元素和图像必须位于可滚动的 <div class ="page-content"> 内才能正常工作。
下表演示了延迟加载的使用 −
| S.No | 延迟加载用法和说明 |
|---|---|
| 1 | 用法
延迟加载可应用于图像、背景图像并具有淡入效果。 |
| 2 | 手动初始化延迟加载
初始化页面后，如果手动添加延迟加载图像，则延迟加载将不起作用，您需要使用方法来初始化它。 |
可以通过在延迟图像/元素上使用 lazy 事件手动触发图像加载，如下所示−
$$('img.lazy').trigger('lazy');
$$('div.lazy').trigger('lazy');
示例
以下示例演示了 Framework7 中延迟加载的使用 −
<!DOCTYPE html>
<html class = "with-statusbar-overlay">
<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>Lazy Load</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">Lazy Load</div>
<div class = "right"> </div>
</div>
</div>
<div class = "page-content">
<div class = "content-block">
<div class = "content-block-inner">
<p> <img data-src = "/framework7/images/pic4.jpg"
width = "100%" class = "lazy lazy-fadeIn"></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur.</p>
<p> <img data-src = "/framework7/images/pic5.jpg"
width = "100%" class = "lazy lazy-fadeIn"></p>
<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. Nemo enim ipsam voluptatem quia
voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur
magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
<p> <img data-src = "/framework7/images/background.jpg"
width = "100%" class = "lazy lazy-fadeIn"></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur.</p>
<p> <img data-src = "/framework7/images/pic6.jpg"
width = "100%" class = "lazy lazy-fadeIn"></p>
<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. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut
odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt.</p>
<p> <img data-src = "/framework7/images/pic7.jpg"
width = "100%" class = "lazy lazy-fadeIn"></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur.</p>
<p> <img data-src = "/framework7/images/pic8.jpg"
width = "100%" class = "lazy lazy-fadeIn"></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Praesent laoreet nisl eget neque blandit lobortis. Sed sagittis risus
id vestibulum finibus. Cras vestibulum sem et massa hendrerit maximus.
Vestibulum suscipit tristique iaculis. Nam vitae risus non eros auctor
tincidunt quis vel nulla. Sed volutpat, libero ac blandit vehicula, est
sem gravida lectus, sed imperdiet sapien risus ut neque.</p>
<p><b>Using as background image:</b></p>
<div data-background = "/framework7/images/pic7.jpg"
style = "background: #aaa; height:60vw; background-size-cover"
class = "lazy lazy-fadeIn">
</div>
<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.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
sed quia consequuntur magni dolores eos qui ratione voluptatem sequi
nesciunt.</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();</script>
</body>
</html>
输出
让我们执行以下步骤来查看上述代码的工作原理 −
将上述 HTML 代码保存为服务器根文件夹中的 framework7_lazy_load.html 文件。
将此 HTML 文件作为 http://localhost/framework7_lazy_load.html 打开，输出显示如下。
该示例指定了图像的延迟加载，图像将在页面向下滚动时加载。
Framework7 - 颜色主题
描述
Framework7 为您的应用程序提供不同的颜色主题。
颜色主题提供不同类型的主题颜色，用于与应用程序顺利协作，如下表所示 −
| S.No | 主题类型 &描述 |
|---|---|
| 1 | iOS 主题颜色
您可以为应用程序使用 10 种不同的默认 iOS 颜色主题。 |
| 2 | Material 主题颜色
Framework7 为应用程序提供了 22 种不同的默认 Material 颜色主题。 |
应用颜色主题
Framework7 允许您使用theme-[color] 类添加到父元素。
Example
... </body> <div class = "page theme-gray"> ... </div> <div class = "list-block theme-blue"> ... </div> <div class = "navbar theme-green"> ... </div> <div class = "buttons-row theme-red"> ... </div>
布局主题
您可以使用两个主题白色和深色为您的应用程序使用默认布局主题。可以使用layout-[theme]类将主题应用于父元素。
示例
... </body> <div class = "navbar layout-white"> ... </div> <div class = "buttons-row layout-dark"> ... </div>
辅助类
Framework7 提供了其他辅助类，可在主题之外或不使用主题的情况下使用，如下所示 −
color-[color] − 可用于更改块的文本颜色或按钮、链接、图标等的颜色。
bg-[color] − 它在块或元素上设置预定义的背景颜色。
border-[color] − 它在块或元素上设置预定义的边框颜色。
Framework7 - Hairlines
说明
Hairline 是一个使用 border 类在图像周围添加 1px 边框的类。随着 1.x 的发布，hairlines 修改了使用 :after 和 :before 伪元素的工作方式，而不是使用 CSS 边框。
Hairlines 包含以下规则 −
:after − 此伪元素用于 bottom 和 right 发际线。
:before − 此伪元素用于 top 和 left 发际线。
以下代码片段显示了 :after 元素的使用。
.navbar:after {
background-color: red;
}
以下代码片段删除了底部细线工具栏 −
.navbar:after {
display:none;
}
.toolbar:before {
display:none;
}
"no-border" 类
使用 no-border 类可以移除细线，Navbar、toolbar、card 及其元素均支持该类。
以下代码用于移除导航栏的细线 −
<div class = "navbar no-border"> ... </div>
Framework7 - 模板概述
描述
Template7 是一个轻量级、移动优先的 JavaScript 引擎，它将 Ajax 和动态页面表示为具有指定上下文的 Template7 模板，不需要任何额外的脚本。 Template7 与 Framework7 关联，作为默认的轻量级模板引擎，可使应用程序运行速度更快。
性能
将字符串编译为 JS 函数的过程是 template7 中最慢的部分。因此，您不需要多次编译模板，一次就足够了。
//此处初始化应用程序
var myApp = new Framework7();
// 初始化后在应用程序上编译模板
var searchTemplate = $('script#search-template').html();
varcompiledSearchTemplate = Template7.compile(searchTemplate);
var listTemplate = $('script#list-template').html();
varcompiledListTemplate = Template7.compile(listTemplate);
// 使用 onPageInit() 方法执行编译后的模板并附带所需上下文
myApp.onPageInit('search', function (page) {
// 执行编译后的模板并附带所需内容
var html = compilationSearchTemplate({/*...some data...*/});
// 使用 html 执行操作
});
Template7 是一个轻量级模板引擎，用作独立库，无需 Framework7。Template7 文件可以通过两种方式安装 −
您可以从 Template7 github 存储库下载。
您可以通过 Bower 使用以下命令安装它 −
或者
bower install template7
Framework7 - 自动编译
描述
在 Template7 中，您可以通过在 <script> 标记中指定特殊属性来自动编译模板。
以下代码显示自动编译布局 −
<script type = "text/template7" id = "myTemplate">
<p>Hello, my name is {{name}} and i am {{age}} years old</p>
</script>
您可以使用以下属性初始化自动编译 −
type = "text/template7" −它用于告诉 Template7 自动编译，并且是必需的脚本类型。
id = "myTemplate" − 模板可通过 id 访问，并且是必需的模板 id。
要进行自动编译，您需要通过传递以下参数 − 来启用应用初始化
var myApp = new Framework7 ({
//它用于在 Framework7 中在应用初始化时编译模板
precompileTemplates: true,
});
Template7.templates / myApp.templates
初始化应用后，可以将自动编译的模板作为 Template7.templates 的属性进行访问。它也被称为 myApp.templates，其中 myApp 是应用程序的初始化实例。
您可以在我们的 index.html 文件中使用以下模板 −
<script type = "text/template7" id = "personTemplate">
<p>Hello, my name is {{name}} and i am {{age}} years old</p>
<p>I work as {{position}} at {{company}}</p>
</script>
<script type = "text/template7" id = "carTemplate">
<p>I have a great car, it is {{vendor}} {{model}}, made in {{year}} year.</p>
<p>It has {{power}} hp engine with {{speed}} km/h maximum speed.</p>
</script>
您还可以在应用程序初始化后在 JavaScript 中访问模板 −
var myApp = new Framework7 ({
//告诉 Framework7 在应用程序初始化时编译模板
precompileTemplates: true
});
// 将 person 模板渲染为 HTML，其模板已编译并可作为
//Template7.templates.personTemplate 访问
var personHTML = Template7.templates.personTemplate ({
name: 'King Amit',
age: 27,
position: 'Developer',
company: 'AngularJs'
});
// 将 car 模板编译为 HTML，其模板已编译并可作为
//Template7.templates.carTemplate 访问
var carHTML = Template7.templates.carTemplate({
vendor: 'Honda',
model: 'city',
power: 1200hp,
speed: 300
});
Framework7 - Template7 页面
描述
Template7 是一个移动优先的 JavaScript 模板引擎，具有 handlebars.js 类似的语法。它是 Framework7 中超轻量级且速度超快的默认模板引擎。
首先，我们需要在应用程序初始化时传递以下参数，将所有 Ajax 和动态页面呈现为 Template7 模板 −
var myApp = new Framework7 ({
template7Pages: true // 为 Ajax 和动态页面启用 Template7 渲染
});
| S.No | Template7 页面使用 &描述 |
|---|---|
| 1 | 模板/页面数据
您可以通过在初始化应用程序时发送的 template7Data 参数中指定所有页面数据来传递特定页面所需的数据/上下文。 |
| 2 | 传递自定义上下文
Framework7 允许您将自定义上下文传递给任何动态页面或任何已加载的 Ajax。 |
| 3 | 直接加载模板
您可以动态渲染和加载模板作为动态页面。 |
| 4 | URL 查询
如果您使用 Template7 渲染 Ajax 页面，其上下文将始终使用特殊属性 url_query 进行扩展。 |
示例
以下示例提供了链接，当您点击这些链接时，会显示用户信息，例如用户详细信息、用户喜欢等。
index.html
<!DOCTYPE html>
<html>
<head>
<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" />
<title>Framework7</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">Template7 Pages</div>
</div>
</div>
<div class = "pages navbar-through toolbar-through">
<div data-page = "index" class = "page">
<div class = "page-content">
<div class = "list-block">
<ul>
<li>
//plain data objects allow to pass custom context to loaded page using 'data-context-name' attribute
<a href = "#" data-template = "about" data-context-name = "about" class = "item-link item-content">
<div class = "item-inner">
//provides link as 'About'
<div class = "item-title">About</div>
</div>
</a>
</li>
<li>
//a context name for this link we pass context path from template7Data root
<a href = "/framework7/src/likes.html" class = "item-link item-content">
<div class = "item-inner">
//provides link as 'Likes'
<div class = "item-title">Likes</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script type = "text/template7" id = "about">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left sliding">
<a href = "#" class = "back link"> <i class = "icon icon-back"></i><span>Back</span></a>
</div>
<div class = "center sliding">About Me</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">
<div class = "content-block-inner">
//displays the details of the user by using the 'my-app.js' file
<p>Hello, i am <b>{{firstname}} {{lastname}}</b>,
<b>{{age}}</b> years old and working as
<b>{{position}}</b> at <b>{{company}}</b>.</p>
</div>
</div>
</div>
</div>
</div>
</script>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script type = "text/javascript"
src = "/framework7/src/js/my-app.js">
</script>
</body>
</html>
my-app.js
// 初始化您的应用
var myApp = new Framework7 ({
animateNavBackIcon: true,
// 启用模板自动预编译
precompileTemplates: true,
// 使用 Template7 启用渲染页面
template7Pages: true,
// 为页面指定 Template7 数据
template7Data: {
// 为 data-page = "likes" 的不同页面提供 url
'url:likes.html': {
likes: [
{
title: 'Nelson Mandela',
description: 'Champion of Freedom'
},
{
title: 'Srinivasa Ramanujan',
description: 'The Man Who Knew Infinity'
},
{
title: 'James Cameron',
description: 'Famous Filmmaker'
}
]
},
about: {
firstname: 'William ',
lastname: 'Root',
age: 27,
position: 'Developer',
company: 'TechShell',
}
}
});
// 添加主视图
var mainView = myApp.addView('.view-main', {
// Enable dynamic Navbar
dynamicNavbar: true
});
likes.html
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left sliding">
<a href = "#" class = "back link"> <i class = "icon icon-back"></i><span>Back</span></a>
</div>
<div class = "center sliding">Likes</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 = "likes" class = "page">
<div class = "page-content">
<div class = "content-block-title">My Likes</div>
<div class = "list-block media-list">
//iterate through likes
<ul>
{{#each likes}}
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title-row">
//displays the title and description by using the 'my-app.js' file
<div class = "item-title">{{title}}</div>
</div>
<div class = "item-subtitle">{{description}}</div>
</div>
</li>
{{/each}}
</ul>
</div>
</div>
</div>
</div>
输出
让我们执行以下步骤来查看上述代码的工作原理 −
将上述 HTML 代码保存为服务器根文件夹中的 index.html 文件。
将此 HTML 文件作为 http://localhost/index.html 打开，输出显示如下。
示例提供了链接，当您单击这些链接时，会显示用户信息，例如用户详细信息、用户喜欢。
Framework7 - 活动状态
描述
当您点击链接和按钮时，它们突出显示。这是通过 Framework7 中的 active state 实现的。
- 它的行为类似于本机应用程序，而不是 Web 应用程序。
- 它有一个内置的 Fast clicks 库，应该启用它。
- active-state 类与 CSS :active 选择器相同。
- 通过将 watch-active-state 类添加到 <html> 元素来启用活动状态。
以下代码用于 CSS 样式中的活动状态 −
/* Usual state */
.my-button {
color: red;
}
/* Active/tapped state */
.my-button.active-state {
color: blue;
}
以下代码显示了禁用活动状态或快速点击时的回退兼容性 −
/* Usual state */
.my-button {
color: red;
}
/* Active/tapped state */
.my-button.active-state {
color: blue;
}
/* Fallback, when active state is disabled */
html:not(.watch-active-state) .my-button:active {
color: blue;
}
Framework7 - 点击保持事件
描述
点击保持事件用于在持续并完成触摸事件后触发(启用)，因此它被称为点击保持事件。Tab Hold是一个内置的快速点击库。
以下参数用于禁用或启用并默认配置 −
| S.No | 参数 &描述 | 类型 | 默认 |
|---|---|---|---|
| 1 | tapHold 设置为 true 时启用点击保持事件。 |
boolean | false |
| 2 | tapHoldDelay 指定在目标元素上触发 taphold 事件之前保持点击的持续时间。 |
number | 750 |
| 3 | tapHoldPreventClicks 点击事件后不会触发点击保持事件。 |
boolean | true |
以下代码用于启用点击保持事件 −
var myApp = new Framework7 ({
tapHold: true //启用点击保持事件
});
var $$ = Dom7;
$$('.some-link').on('taphold', function () {
myApp.alert('Tap hold fired!');
});
Framework7 - 触摸涟漪
描述
触摸涟漪是仅在 Framework7 Material 主题中支持的效果。默认情况下，它在 Material 主题中启用，您可以使用 materialRipple:false 参数禁用它。
涟漪元素
您可以启用涟漪元素以匹配某些 CSS 选择器，例如 −
- ripple
- a.link
- a.item-link
- .button
- .tab-link
- .label-radio
- .label-checkbox 等。
这些在 materialRippleElements 参数中指定。您需要启用 touch 涟漪，将元素的选择器添加到 materialRippleElements 参数以使用涟漪效果，或者仅使用 ripple 类。
涟漪波纹颜色
可以通过向元素添加 ripple-[color] 类来更改元素上的涟漪颜色。
例如 −
<a href = "#" class = "button ripple-orange">涟漪按钮</a>
或者您可以使用 CSS 定义涟漪波纹颜色，如下所示 −
.button .ripple-wave {
background-color: #FFFF00;
}
禁用涟漪元素
您可以通过向某些指定元素添加 no-ripple 类来禁用这些元素的涟漪。例如 −
<a href = "#" class = "button no-ripple">Ripple Button</a>
