- Framework7 教程
- Framework7 - 首页
- Framework7 - 概述
- Framework7 - 环境
- Framework7 组件
- Framework7 - 布局
- Framework7 - 导航栏
- Framework7 - 工具栏
- Framework7 - 搜索栏
- Framework7 - 状态栏
- Framework7 - 侧边面板
- Framework7 - 内容块
- Framework7 - 网格布局
- Framework7 - 覆盖层
- Framework7 - 预加载器
- Framework7 - 进度条
- Framework7 - 列表视图
- Framework7 - 手风琴
- Framework7 - 卡片
- Framework7 - 芯片
- Framework7 - 按钮
- Framework7 - 操作按钮
- Framework7 - 表单
- Framework7 - 标签页
- Framework7 - Swiper 滑块
- Framework7 - 照片浏览器
- Framework7 - 自动完成
- Framework7 - 选择器
- Framework7 - 日历
- Framework7 - 刷新
- Framework7 - 无限滚动
- Framework7 - 消息
- Framework7 - 消息栏
- Framework7 - 通知
- Framework7 - 延迟加载
- Framework7 样式
- Framework7 - 颜色主题
- Framework7 - 分割线
- Framework7 模板
- Framework7 - 模板概述
- Framework7 - 自动编译
- Framework7 - Template7 页面
- Framework7 快速点击
- Framework7 - 活动状态
- Framework7 - 长按事件
- Framework7 - 触摸涟漪
- Framework7 有用资源
- Framework7 快速指南
- Framework7 - 有用资源
- Framework7 - 讨论
Framework7 快速指南
Framework7 - 概述
Framework7 是一个免费且开源的移动 HTML 框架。它用于开发混合移动应用或适用于 iOS 和 Android 设备的 Web 应用。
Framework7 于 2014 年推出。最新版本 1.4.2 于 2016 年 2 月发布，采用 MIT 许可证。
为什么要使用 Framework7？
- 开发 iOS 和 Android 应用更容易。
- Framework7 的学习曲线非常平缓。
- 它有很多预先设置好的 widget/组件。
- 它内置了辅助库。
特性
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 和 Android 相比，Framework7 框架的在线社区支持较少。
Framework7 - 环境
在本章中，我们将讨论如何安装和设置 Framework7。
您可以通过两种方式下载 Framework7：
从 Framework7 Github 仓库 下载
您可以使用 Bower 安装 Framework7，如下所示：
bower install framework7
成功安装 Framework7 后，您需要按照以下步骤在您的应用中使用 Framework7：
步骤 1 - 您需要安装 gulp-cli，以便使用以下命令构建 Framework7 的开发和 dist 版本。
npm install gulp-cli
cli 代表 Gulp 的命令行工具。
步骤 2 - 必须使用以下命令全局安装 Gulp。
npm install --global gulp
步骤 3 - 接下来，安装 NodeJS 包管理器，它安装 node 程序，使指定和链接依赖项更容易。以下命令用于安装 npm。
npm install
步骤 4 - 可以使用以下命令构建 Framework7 的开发版本。
npm build
步骤 5 - 构建 Framework7 的开发版本后，使用以下命令从 dist/ 文件夹开始构建应用。
npm dist
步骤 6 - 将您的应用文件夹保存在服务器上，并运行以下命令以在应用的页面之间导航。
gulp server
从 CDN 下载 Framework7 库
CDN 或内容分发网络是旨在向用户提供文件的服务器网络。如果在网页中使用 CDN 链接，则将托管文件的工作从自己的服务器转移到一系列外部服务器。这也提供了一个优势，即如果您的网页访问者已经从同一个 CDN 下载了 Framework7 的副本，则无需重新下载。您可以将以下 CDN 文件包含到 HTML 文档中。
以下 CDN 用于 iOS 应用布局：
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
它用于将 Framework7 iOS CSS 库包含到您的应用中。
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
它用于将 Framework7 iOS 相关的颜色样式包含到您的应用中。
以下 CDN 用于 Android/Material 应用布局：
<script src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
它用于将 Framework7 JS 库包含到您的应用中。
<script src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.min.css"></script>
它用于将 Framework7 Material 样式包含到您的应用中。
在本教程中，我们使用库的 CDN 版本。我们使用 AMPPS（AMPPS 是一个 WAMP、MAMP 和 LAMP 堆栈，包含 Apache、MySQL、MongoDB、PHP、Perl 和 Python）服务器来执行所有示例。
示例
以下示例演示了在 Framework7 中使用简单应用，当您点击导航栏时，它将显示带有自定义消息的警告框。
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>My App</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
</head>
<body>
//you can control the background color of the Status bar
<div class = "statusbar-overlay"></div>
<div class = "panel-overlay"></div>
<div class = "panel panel-right panel-reveal">
<div class = "content-block">
<p>Contents goes here...</p>
</div>
</div>
<div class = "views">
<div class = "view view-main">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "center sliding">My App</div>
<div class = "right">
<a href = "#" class = "link icon-only open-panel">
<i class = "icon icon-bars"></i>
</a>
</div>
</div>
</div>
<div class = "pages navbar-through toolbar-through">
<div data-page = "index" class = "page">
<div class = "page-content">
<p>This is simple application...</p>
<div class = "list-block">
<ul>
<li>
<a href = "envirmnt_about.html" class = "">
<div class = "item-content">
<div class = "item-inner">
<div class = "item-title">Blog</div>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class = "toolbar">
<div class = "toolbar-inner">
<a href = "#" class = "link">First Link</a>
<a href = "#" class = "link">Second Link</a>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
// here initialize the app
var myApp = new Framework7();
// If your using custom DOM library, then save it to $$ variable
var $$ = Dom7;
// Add the view
var mainView = myApp.addView('.view-main', {
// enable the dynamic navbar for this view:
dynamicNavbar: true
});
//use the 'pageInit' event handler for all pages
$$(document).on('pageInit', function (e) {
//get page data from event data
var page = e.detail.page;
if (page.name === 'blog') {
// you will get below message in alert box when page with data-page attribute is equal to "about"
myApp.alert('Here its your About page');
}
})
</script>
</body>
</html>
接下来，再创建一个 HTML 页面，即 envirmnt_about.html，如下所示：
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 文件，放在服务器根目录下。
以 https://127.0.0.1/framework7_environment.html 的方式打开此 HTML 文件，输出结果如下所示。
当您点击导航栏时，它将显示带有自定义消息的警告框。
Framework7 - 布局
描述
Framework7 为您的应用提供了不同类型的布局。它支持三种类型的导航栏/工具栏布局：
| 序号 | 布局类型和描述 |
|---|---|
| 1 | 静态布局
静态布局是最常使用的布局类型，包括导航栏和工具栏，可以是可滚动的页面内容，每个页面都包含自己的导航栏和工具栏。 |
| 2 | 固定布局
固定布局包含其自己的导航栏和工具栏，它们始终可见，无法在页面上滚动。 |
| 3 | 贯穿布局
在此布局中，导航栏和工具栏在单个视图中的所有页面上都保持固定。 |
| 4 | 混合布局
您可以在单个视图中混合不同类型的布局。 |
无导航栏/工具栏
如果您不想使用导航栏和工具栏，则不要在页面/页面/视图中包含相应的类（navbar-fixed、navbar-through、toolbar-fixed、toolbar-through）。
Framework7 - 导航栏
描述
在本章中，让我们学习一下 导航栏。它通常位于屏幕顶部，包含页面的标题和导航元素。
导航栏由三个部分组成，每个部分都可以包含任何 HTML 内容，但建议您按照以下方式使用它们：
左侧 - 用于放置返回 链接 图标或单个文本链接。
中间 - 用于显示页面的标题或标签链接。
右侧 - 此部分类似于 左侧 部分。
下表详细演示了 导航栏 的用法：
| 序号 | 导航栏类型和描述 |
|---|---|
| 1 | 基本导航栏
可以使用 navbar、navbar-inner、left、center 和 right 类创建基本导航栏。 |
| 2 | 带有链接的导航栏
要在导航栏的 左侧 和 右侧 部分使用链接，只需添加带有 link 类的 <a> 标签即可。 |
| 3 | 多个链接
要使用多个链接，只需在您选择的部分添加几个 <a class = "link"> 即可。 |
| 4 | 带有文本和图标的链接
可以通过添加图标的类并用 <span> 元素包装链接文本，为链接提供图标和文本。 |
| 5 | 仅带有图标的链接
可以通过向链接添加 icon-only 类，为导航栏链接仅提供图标。 |
| 6 | 相关的应用和视图方法
在初始化 视图 时，framework7 允许您使用导航栏可用的方法。 |
| 7 | 自动隐藏导航栏
对于某些不需要导航栏的 Ajax 加载的页面，可以自动隐藏/显示导航栏。 |
Framework7 - 工具栏
描述
工具栏通过使用屏幕底部的导航元素轻松访问其他页面。
您可以通过两种方式使用工具栏，如表中所述：
工具栏方法
以下可用方法可用于工具栏：
| 序号 | 工具栏方法和描述 |
|---|---|
| 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>
// here initialize the app
var myApp = new Framework7();
// If your using custom DOM library, then save it to $$ variable
var $$ = Dom7;
// Add the view
var mainView = myApp.addView('.view-main', {
// enable the dynamic navbar for this view
dynamicNavbar: true
});
</script>
</body>
</html>
现在，在自定义 JS 文件 toolbar.js 中初始化您的应用和视图。
输出
让我们执行以下步骤来了解上面给出的代码是如何工作的：
将上面给出的 HTML 代码保存为 toolbar.html 文件，放在服务器根目录下。
以 https://127.0.0.1/toolbar.html 的方式打开此 HTML 文件，输出结果如下所示。
Framework7 - 搜索栏
描述
Framework 7 允许使用 searchbar 类搜索元素。
搜索栏参数
| 序号 | 参数和描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 | searchList 它搜索列表的 CSS 选择器或 HTML 元素。 |
字符串或 HTML 元素 | - |
| 2 | searchIn 您可以搜索 CSS 选择器的列表视图元素，还可以通过传递 .item-title、.item-text 类来搜索元素。 |
字符串 | '.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 您可以使用搜索栏忽略项目的 CSS 选择器。 |
字符串 | '.searchbar-ignore' |
| 7 | customSearch 启用此参数后，搜索栏将不会搜索由 searchList 指定的任何列表块，并且您可以使用自定义搜索功能。 |
布尔值 | false |
| 8 | removeDiacritics 搜索元素时，通过启用此参数删除变音符号。 |
布尔值 | false |
| 9 | hideDividers 如果列表中没有项目，此参数将隐藏项目分隔符和组标题。 |
布尔值 | true |
| 10 | hideGroups 如果在列表视图组中没有找到项目，则此参数将隐藏这些组。 |
布尔值 | true |
搜索栏回调函数
| 序号 | 回调函数及描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 | onSearch 执行搜索时，此方法将触发回调函数。 |
function (s) | - |
| 2 | onEnable 搜索栏变为活动状态时，此方法将触发回调函数。 |
function (s) | - |
| 3 | onDisable 搜索栏变为非活动状态时，此方法将触发回调函数。 |
function (s) | - |
| 4 | onClear 单击“清除”元素时，此方法将触发回调函数。 |
function (s) | - |
搜索栏属性
| 序号 | 属性及描述 |
|---|---|
| 1 | mySearchbar.params 表示使用对象传递的初始化参数。 |
| 2 | mySearchbar.query 搜索当前查询。 |
| 3 | mySearchbar.searchList 定义搜索列表块。 |
| 4 | mySearchbar.container 使用 HTML 元素定义搜索栏容器。 |
| 5 | mySearchbar.input 使用 HTML 元素定义搜索栏输入框。 |
| 6 | mySearchbar.active 定义搜索栏是启用还是禁用。 |
搜索栏方法
| 序号 | 方法及描述 |
|---|---|
| 1 | mySearchbar.search(query); 此方法搜索传递的查询。 |
| 2 | mySearchbar.enable(); 启用搜索栏。 |
| 3 | mySearchbar.disable(); 禁用搜索栏。 |
| 4 | mySearchbar.clear(); 您可以清除查询和搜索结果。 |
| 5 | mySearchbar.destroy(); 销毁搜索栏实例。 |
搜索栏 JavaScript 事件
| 序号 | 事件及描述 | 目标 |
|---|---|---|
| 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 文件中。
以 https://127.0.0.1/search_bar.html 的形式打开此 HTML 文件，输出结果如下所示。
如果在搜索栏中输入列表中包含的元素，则会显示列表中的该特定元素。
如果输入的元素不是列表中包含的元素，则会显示“未找到元素”。
Framework7 - 状态栏
描述
iOS 7+ 允许您构建全屏应用程序，这在状态栏与您的应用程序重叠时可能会造成问题。Framework7 通过检测您的应用程序是否处于全屏模式来解决此问题。如果您的应用程序处于全屏模式，则 Framework7 会自动将 with-statusbar-overlay 类添加到 <html>（或在应用程序不处于全屏模式时将其移除），并且您需要在 <body> 中添加 statusbar-overlay 类，如下面的代码所示：
<html class = "with-statusbar-overlay">
...
<body>
<div class = "statusbar-overlay"></div>
...
默认情况下，<div> 将始终隐藏并在屏幕顶部固定。仅当应用程序处于全屏模式且 with-statusbar-overlay 类已添加到 <html> 时，它才会可见。
示例
以下示例演示了在 Framework7 中使用状态栏的方法：
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>My App</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
</head>
<body>
<div class = "statusbar-overlay"></div>
<div class = "panel-overlay"></div>
<div class = "panel panel-right panel-reveal">
<div class = "content-block">
<p>Contents goes here...</p>
</div>
</div>
<div class = "views">
<div class = "view view-main">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "center sliding">My App</div>
<div class = "right">
<a href = "#" class = "link icon-only open-panel"><i class = "icon icon-bars"></i></a>
</div>
</div>
</div>
<div class = "pages navbar-through toolbar-through">
<div data-page = "index" class = "page">
<div class = "page-content">
<p>This is simple application...</p>
<p>page contents goes here!!!</p>
</div>
</div>
</div>
<div class = "toolbar">
<div class = "toolbar-inner">
<a href = "#" class = "link">First Link</a>
<a href = "#" class = "link">Second Link</a>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
// here initialize the app
var myApp = new Framework7();
// If your using custom DOM library, then save it to $$ variable
var $$ = Dom7;
// Add the view
var mainView = myApp.addView('.view-main', {
// enable the dynamic navbar for this view:
dynamicNavbar: true
});
//use the 'pageInit' event handler for all pages
$$(document).on('pageInit', function (e) {
//get page data from event data
var page = e.detail.page;
})
</script>
</body>
</html>
输出
让我们执行以下步骤来了解上面给出的代码是如何工作的：
将上述 html 代码保存到服务器根文件夹中的 status_bar.html 文件中。
以 https://127.0.0.1/status_bar.html 的形式打开此 HTML 文件，输出结果如下所示。
此示例展示了 statusbar-overlay 的用法，它允许您在状态栏与应用程序重叠时构建全屏应用程序。
Framework7 - 侧边面板
描述
侧边栏移动到屏幕的左侧或右侧以显示内容。Framework7 允许您在应用程序中包含最多 2 个面板（右侧面板和左侧面板）。您需要在 <body> 的开头添加面板，然后通过应用以下列出的类来选择打开效果：
panel-reveal − 这将使整个应用程序的内容移出。
panel-cover − 这将使面板覆盖在应用程序内容上。
例如，以下代码显示了如何使用上述类：
<body>
<!-- First add Panel's overlay which will overlays app while panel is opened -->
<div class = "panel-overlay"></div>
<!-- Left panel -->
<div class = "panel panel-left panel-cover">
panel's content
</div>
<!-- Right panel -->
<div class = "panel panel-right panel-reveal">
panel's content
</div>
</body>
下表显示了 Framework77 支持的面板类型：
| 序号 | 类型及描述 |
|---|---|
| 1 | 打开和关闭面板
添加面板和效果后，我们需要添加 打开 和 关闭 面板的功能。 |
| 2 | 面板事件
要检测用户如何与面板交互，您可以使用面板事件。 |
| 3 | 使用滑动打开面板
Framework7 提供了使用 滑动手势 打开面板的功能。 |
| 4 | 面板已打开？
我们可以使用 with-panel[position]-[effect] 规则确定面板是否已打开。 |
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 文件中。
以 https://127.0.0.1/content_block.html 的形式打开此 HTML 文件，输出结果如下所示。
该代码为文本内容添加了额外的格式和所需的间距。
Framework7 - 网格布局
描述
Framework7 提供不同类型的网格类型，以便根据用户需要放置内容。
布局网格提供不同类型的列大小，如下表所述：
| 序号 | 类 | 表格类 | 宽度 |
|---|---|---|---|
| 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 | 等宽 |
示例
以下示例提供了网格布局，以便您在 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 文件中。
以 https://127.0.0.1/layout_grid.html 的形式打开此 HTML 文件，输出结果如下所示。
此代码提供了不同类型的网格类型，以便根据用户需要放置内容。
Framework7 - 覆盖层
描述
Framework7 提供不同类型的覆盖层，以便应用程序能够流畅地运行。下表列出了一些 Framework7 覆盖层：
| 序号 | 覆盖层类型及描述 |
|---|---|
| 1 | 模态框
模态框是一个小窗口，它显示来自不同来源的内容，而无需离开父窗口。 |
| 2 | 弹出窗口
弹出窗口是一个弹出框，当用户单击元素时会显示内容。 |
| 3 | 弹出菜单
要管理临时内容的呈现，可以使用弹出菜单组件。 |
| 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 文件中。
以 https://127.0.0.1/preloader.html 的形式打开此 HTML 文件，输出结果如下所示。
此代码显示预加载器指示器，该指示器使用 SVG 制作，并使用 CSS 进行动画处理。
Framework7 - 进度条
描述
进度条可用于向用户显示资产加载或任务进度。您可以使用 progressbar 类指定进度条。当用户不知道请求的加载过程将持续多长时间时，可以使用 progressbar-infinite 类。
进度条 JavaScript API
进度条可以与 JavaScript API 一起使用，以使用以下方法指定 显示、隐藏 和 进度 属性：
| 序号 | 方法 | 描述及参数 |
|---|---|---|
| 1 | myApp.setProgressbar (container , progress, speed) | 设置任务进度的进度条。
|
| 2 | myApp.hideProgressbar (contain er) | 隐藏进度条。
|
| 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 文件中。
以 https://127.0.0.1/progress_bar.html 的形式打开此 HTML 文件，输出结果如下所示。
此示例显示了进度条，它指示操作完成过程需要多长时间，并显示不同类型的进度条以指示活动。
Framework7 - 列表视图
描述
列表视图是功能强大的 UI 组件，用于在多个行的可滚动列表中呈现数据。Framework7 提供不同类型的 列表视图 以便与您的应用程序配合使用。下表列出了一些 Framework7 列表视图：
| 序号 | 类型及描述 |
|---|---|
| 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 中的手风琴 -
| 序号 | 类和描述 |
|---|---|
| 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的参数，它是手风琴项目的 HTML 或字符串元素。
手风琴事件
手风琴包含四个事件，如下表所示 -
| 序号 | 事件 | 目标和描述 |
|---|---|---|
| 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>
// here initialize the app
var myApp = new Framework7();
// If your using custom DOM library, then save it to $$ variable
var $$ = Dom7;
// Add the view
var mainView = myApp.addView('.view-main', {
// enable the dynamic navbar for this view:
dynamicNavbar: true
});
</script>
</body>
</html>
输出
让我们执行以下步骤来了解上面给出的代码是如何工作的：
将上面给定的 HTML 代码另存为服务器根文件夹中的accordion.html文件。
将此 HTML 文件打开为 https://127.0.0.1/accordion.html，输出将如下所示。
该示例提供了可折叠布局，可以展开以显示与手风琴关联的内容。
Framework7 - 卡片
描述
卡片包含与单个主题相关联的有组织的信息，例如照片、链接和文本。下表显示了 Framework7 卡片类型 -
| 序号 | 类型及描述 |
|---|---|
| 1 | 卡片 HTML 布局
基本的卡片 HTML 布局使用卡片类来排列其项目。 |
| 2 | 带有卡片的列表视图
您可以通过将cards-list类添加到<div class="list-block">中来使用卡片作为列表视图元素。 |
Framework7 - 芯片
描述
芯片是一个小的实体块，可以包含照片、一小段标题和简短的信息。
芯片 HTML 布局
以下代码显示了 Framework7 中使用的基本芯片 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 - 它是芯片容器。
chip-media - 这是芯片媒体元素，可以包含图像、头像或图标。它是可选的。
card-label - 它是芯片文本标签。
card-delete - 它是芯片的可选删除图标链接。
示例
以下示例表示实体，例如专辑、卡片元素等，以及照片和简短信息 -
<!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文件。
将此 HTML 文件打开为 https://127.0.0.1/cards_html_layout.html，输出将如下所示。
该示例以小块的形式表示复杂实体，例如专辑、卡片元素、发布的图像，其中包含照片、标题字符串和简短信息。
Framework7 - 按钮
描述
Framework7 通过仅向链接或输入按钮添加适当的类，提供了一组现成的按钮。
| 序号 | 类型及描述 |
|---|---|
| 1 | iOS 主题按钮
Framework7 提供了许多 iOS 主题按钮，可以通过应用适当的类来使用。 |
| 2 | 材质主题按钮
材质主题提供了许多按钮，可以通过使用适当的类在您的应用程序中使用。 |
Framework7 - 操作按钮
描述
Framework7 为提升的操作提供了浮动操作按钮。它们显示为 UI 上方的浮动圆形图标。它具有包含变形、启动和转移锚点的运动行为。
浮动操作按钮仅在材质主题中受支持。
下表列出了 Framework7 中使用的操作按钮类型 -
| 序号 | 类型及描述 |
|---|---|
| 1 | 浮动操作按钮布局
这非常简单；您只需要将其放置为页面或视图的子元素即可。 |
| 2 | 变形为弹出窗口
如果要点击浮动操作按钮打开弹出窗口，则可以使用floating-button-to-popover类。 |
| 3 | 快速拨号
您可以通过使用快速拨号在点击浮动操作按钮时调用相关操作。 |
Framework7 - 表单
描述
表单用于与用户交互，并使用文本字段、复选框、单选按钮等从 Web 用户收集数据。
Framework7 提供了不同类型的表单元素，以便像下表中指定的那样与应用程序顺畅地协同工作 -
| 序号 | 覆盖层类型及描述 |
|---|---|
| 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"> - 它是一个选项卡，应该具有唯一的 id属性。
-
<div class = "tab active"> - 它是一个活动的选项卡，它使用额外的active类使选项卡可见（活动）。
在选项卡之间切换
您可以在选项卡布局中使用一些控制器，以便用户可以在它们之间切换。
为此，您需要创建带有tab-link类和href属性（等于目标选项卡的id属性）的链接（<a>标签） -
<!-- 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>
选项卡链接的data-tab属性包含目标选项卡/选项卡的 CSS 选择器。
我们可以使用不同的选项卡方式，这些方式在以下表格中指定 -
| 序号 | 选项卡类型和描述 |
|---|---|
| 1 | 内联选项卡
内联选项卡是一组在内联中分组的选项卡，允许您快速在它们之间切换。 |
| 2 | 从导航栏切换选项卡
我们可以将选项卡放置在导航栏中，以便您可以在它们之间切换。 |
| 3 | 从标签栏切换视图
单个选项卡可用于在其自己的导航和布局之间切换视图。 |
| 4 | 动画选项卡
您可以使用简单的过渡（动画）来切换选项卡。 |
| 5 | 可滑动选项卡
您可以通过为选项卡使用tabs-swipeable-wrap类创建具有简单过渡的可滑动选项卡。 |
| 6 | 选项卡 JavaScript 事件
当您使用 JavaScript 代码处理选项卡时，可以使用 JavaScript 事件。 |
| 7 | 使用 JavaScript 显示选项卡
您可以使用 JavaScript 方法切换或显示选项卡。 |
Framework7 - Swiper 滑块
描述
Swiper 滑块是最强大和最现代的触摸滑块，并带有大量功能进入 Framework7。
以下 HTML 布局显示了 Swiper 滑块 -
<!-- 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 - 这些是包含 Swiper 参数对象的可选元素。
例如 -
var mySwiper = app.swiper('.swiper-container', {
speed: 400,
spaceBetween: 100
});
可以访问 Swiper 的实例，并且滑块容器的swiper属性具有以下 HTML 元素 -
var mySwiper = $$('.swiper-container')[0].swiper;
// Here you can use all slider methods like:
mySwiper.slideNext();
您可以在下表中看到 Swiper 的不同方式和类型 -
| 序号 | Swiper 类型和描述 |
|---|---|
| 1 | 带有分页的默认 Swiper
它是一个现代的触摸滑块，Swiper 默认水平滑动。 |
| 2 | 垂直 Swiper
它也作为默认 Swiper 工作，但它垂直滑动。 |
| 3 | 幻灯片之间有空格
此 Swiper 用于在两个幻灯片之间留出空间。 |
| 4 | 多个 Swiper
此 Swiper 在单个页面上使用多个 Swiper。 |
| 5 | 嵌套 Swiper
它是垂直和水平幻灯片的组合。 |
| 6 | 自定义控件
它用于自定义控件来选择或滑动任何幻灯片。 |
| 7 | 延迟加载
它可以用于多媒体文件，这些文件需要时间加载。 |
Framework7 - 照片浏览器
描述
照片浏览器类似于 iOS 照片浏览器组件，用于显示一组可以缩放和平移的图像。要在一个图像之间滑动，照片浏览器使用Swiper 滑块。
下表显示了 Framework7 中使用照片浏览器类型 -
| 序号 | 照片浏览器类型和描述 |
|---|---|
| 1 | 创建照片浏览器实例
照片浏览器只能使用 JavaScript 创建和初始化。 |
| 2 | 照片浏览器参数
Framework7 提供了一系列参数，这些参数与照片浏览器一起使用。 |
| 3 | 照片浏览器方法和属性
初始化照片浏览器后，您将获得一个初始化的实例变量来使用照片浏览器方法和属性。 |
| 4 | 照片数组
在初始化照片浏览器期间，您需要在photos参数中传递包含照片/视频的数组。 |
| 5 | 照片浏览器模板
Framework7 为您提供了许多照片浏览器模板，您可以在初始化照片浏览器时传递这些模板。 |
Framework7 - 自动完成
描述
自动完成是 Framework7 的一个移动友好且触控优化的组件，可以用作下拉列表或独立方式。您可以使用 JavaScript 方法创建和初始化自动完成实例 -
myApp.autocomplete(parameters)
其中parameters是用于初始化自动完成实例的必需对象。
自动完成参数
下表列出了 Framework7 中可用的自动完成参数 -
| 序号 | 参数和描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 | openIn 它定义了如何打开自动完成，可以用作下拉列表、弹出窗口或页面。 |
字符串 | 页面 |
| 2 | 源 它使用自动完成实例、搜索查询和渲染函数来传递匹配项数组。 |
function (autocomplete, query, render) | - |
| 3 | valueProperty 它指定匹配项对象的键的项目值。 |
字符串 | ID |
| 4 | 限制 它显示每个查询中自动完成中的项目数量限制。 |
数字 | - |
| 5 | 加载程序 加载程序可用于通过将其设置为 true 来指定自动完成布局。 |
布尔值 | false |
| 6 | preloaderColor 它指定加载程序的颜色。默认情况下，颜色为“黑色”。 |
字符串 | - |
| 7 | 值 定义包含默认选中值的数组。 |
数组 | - |
| 8 | textProperty 它指定匹配项对象的键的项目值，可以用作显示选项的标题。 |
字符串 | 文本 |
独立自动完成参数
下表列出了 Framework7 中可用的独立自动完成参数 -
| 序号 | 参数和描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 | 开启器 它是字符串或 HTML 元素参数，它将打开独立自动完成页面。 |
字符串或 HTMLElement | - |
| 2 | popupCloseText 它用于关闭自动完成弹出窗口。 |
字符串 | '关闭' |
| 3 | backText 当自动完成作为页面打开时，它提供返回链接。 |
字符串 | '后退' |
| 4 | pageTitle 它指定自动完成页面标题。 |
字符串 | - |
| 5 | searchbarPlaceholderText 它指定搜索栏占位符文本。 |
字符串 | '搜索' |
| 6 | searchbarCancelText 它定义搜索栏取消按钮文本。 |
字符串 | '取消' |
| 7 | notFoundText 当找不到匹配的元素时，它会显示文本。 |
字符串 | '未找到' |
| 8 | 多 通过将其设置为 true，它允许选择多选。 |
布尔值 | false |
| 9 | navbarTheme 它指定导航栏的颜色主题。 |
字符串 | - |
| 10 | backOnSelect 当用户选择值时，通过将其设置为 true，自动完成将关闭。 |
布尔值 | false |
| 11 | formTheme 它指定表单的颜色主题。 |
字符串 | - |
下拉自动完成参数
下表列出了 Framework7 中可用的下拉自动完成参数 -
| 序号 | 参数和描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 | 输入 它是用于文本输入的字符串或 HTML 元素。 |
字符串或 HTMLElement | - |
| 2 | dropdownPlaceholderText 它指定下拉列表的占位符文本。 |
字符串 | - |
| 3 | updateInputValueOnSelect 您可以通过将其设置为 true 来更新选择时的输入值。 |
布尔值 | true |
| 4 | expandInput 您可以扩展列表视图中的文本输入，以便在下拉列表可见时使其全屏宽度，方法是将item-input设置为 true。 |
布尔值 | false |
自动完成回调函数
下表列出了 Framework7 中可用的下拉自动完成参数 -
| 序号 | 参数和描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 | onChange 每当自动完成值更改时，都会执行此回调函数。 |
function (autocomplete, value) | - |
| 2 | onOpen 每当自动完成打开时，都会执行此回调函数。 |
function (autocomplete) | - |
| 3 | onClose 每当自动完成关闭时，都会执行此回调函数。 |
function (autocomplete) | - |
自动完成模板
下表列出了 Framework7 中可用的下拉自动完成参数 -
| 序号 | 参数和描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 | navbarTemplate 它是独立的自动完成导航栏模板。 |
字符串 | - |
| 2 | itemTemplate 它是独立的 Template7 表单项。 |
字符串 | - |
| 3 | dropdownTemplate 它是 Template7 下拉列表模板。 |
字符串 | - |
| 4 | dropdownItemTemplate 它是 Template7 下拉列表项。 |
字符串 | - |
| 5 | dropdownPlaceholderTemplate 它是 Template7 下拉列表占位符项。 |
字符串 | - |
默认模板
以下是上述定义的模板参数的默认模板代码片段 -
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 中可用的自动完成方法 -
| 序号 | 方法及描述 |
|---|---|
| 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 中可用的自动完成方法 -
| 序号 | 属性及描述 |
|---|---|
| 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;
}
// You can find matched items
for (var i = 0; i < countries.length; i++) {
if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0)
results.push(countries[i]);
}
// Display the items by passing array with result items
render(results);
}
});
// Dropdown with input expand
var autocompleteDropdownExpand = myApp.autocomplete ({
input: '#autocomplete-dropdown-expand',
openIn: 'dropdown',
expandInput: true, // expandInput used as item-input in List View will be expanded to full screen wide
//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]);
}
// Display the items by passing array with result items
render(results);
}
});
// Dropdown with all values
var autocompleteDropdownAll = myApp.autocomplete ({
input: '#autocomplete-dropdown-all',
openIn: 'dropdown',
source: function (autocomplete, query, render) {
var results = [];
// You can find matched items
for (var i = 0; i < countries.length; i++) {
if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0)
results.push(countries[i]);
}
// Display the items by passing array with result items
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;
}
// You can find matched items
for (var i = 0; i < countries.length; i++) {
if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0)
results.push(countries[i]);
}
// Display the items by passing array with result items
render(results);
}
});
// Simple Standalone
var autocompleteStandaloneSimple = myApp.autocomplete ({
openIn: 'page', //open in page
opener: $$('#autocomplete-standalone'), //link that opens autocomplete
backOnSelect: true, //go back after we select something
source: function (autocomplete, query, render) {
var results = [];
if (query.length === 0) {
render(results);
return;
}
// You can find matched items
for (var i = 0; i < countries.length; i++) {
if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0)
results.push(countries[i]);
}
// Display the items by passing array with result items
render(results);
},
onChange: function (autocomplete, value) {
// Here add the item text value to item-after
$$('#autocomplete-standalone').find('.item-after').text(value[0]);
// You can add item value to input value
$$('#autocomplete-standalone').find('input').val(value[0]);
}
});
// Standalone Popup
var autocompleteStandalonePopup = myApp.autocomplete ({
openIn: 'popup', // Opens the Autocomplete in page
opener: $$('#autocomplete-standalone-popup'), // It will open standalone autocomplete popup
backOnSelect: true, //After selecting item, then go back to page
source: function (autocomplete, query, render) {
var results = [];
if (query.length === 0) {
render(results);
return;
}
// You can find matched items
for (var i = 0; i < countries.length; i++) {
if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(countries[i]);
}
// Display the items by passing array with result items
render(results);
},
onChange: function (autocomplete, value) {
// Here add the item text value to item-after
$$('#autocomplete-standalone-popup').find('.item-after').text(value[0]);
// You can add item value to input value
$$('#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'), //link that opens autocomplete
multiple: true, //Allow multiple values
source: function (autocomplete, query, render) {
var results = [];
if (query.length === 0) {
render(results);
return;
}
// You can find matched items
for (var i = 0; i < countries.length; i++) {
if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(countries[i]);
}
// Display the items by passing array with result items
render(results);
},
onChange: function (autocomplete, value) {
// Here add the item text value to item-after
$$('#autocomplete-standalone-multiple').find('.item-after').text(value.join(', '));
// You can add item value to input value
$$('#autocomplete-standalone-multiple').find('input').val(value.join(', '));
}
});
</script>
</body>
</html>
输出
让我们执行以下步骤来了解上面给出的代码是如何工作的：
将上面给出的 HTML 代码保存为服务器根文件夹中的autocomplete.html文件。
以 https://127.0.0.1/autocomplete.html 的形式打开此 HTML 文件，输出将如下所示。
该示例提供了简单下拉列表、包含所有值的下拉列表、带占位符的下拉列表、独立自动完成等值自动完成。
Framework7 - 选择器
描述
Picker 类似于 iOS 原生 Picker，它是一个功能强大的组件，允许您从列表中选择任何值，还可以用于创建自定义叠加 Picker。您可以将 Picker 用作内联组件或叠加层。叠加层 Picker 将在平板电脑（iPad）上自动转换为 Popover。
使用以下 App 的方法，您可以创建并初始化 JavaScript 方法 -
myApp.picker(parameters)
其中parameters是用于初始化 Picker 实例的必需对象，它是一个必需的方法。
Picker 参数
下表指定了 Picker 中可用的参数 -
| 序号 | 参数和描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 | 容器 用于为内联 Picker 生成 Picker HTML 的 CSS 选择器字符串或 HTMLElement。 |
字符串或 HTMLElement | - |
| 2 | 输入 使用 CSS 选择器字符串或 HTMLElement 与相关输入元素放置。 |
字符串或 HTMLElement | - |
| 3 | scrollToInput 每当 Picker 打开时，它用于滚动输入的视口（页面内容）。 |
布尔值 | true |
| 4 | inputReadOnly 用于在指定的输入上设置“只读”属性。 |
布尔值 | true |
| 5 | convertToPopover 它用于在 iPad 等大屏幕上将 Picker 模态转换为 Popover。 |
布尔值 | true |
| 6 | onlyOnPopover 您可以通过启用它在 Popover 中打开 Picker。 |
布尔值 | true |
| 7 | cssClass 对于 Picker 模态，您可以使用其他 CSS 类名称。 |
字符串 | - |
| 8 | closeByOutsideClick 您可以通过启用该方法通过单击 Picker 或输入元素外部来关闭 Picker。 |
布尔值 | false |
| 9 | 工具栏 它用于启用 Picker 模态工具栏。 |
布尔值 | true |
| 10 | toolbarCloseText 用于完成/关闭工具栏按钮。 |
字符串 | '完成' |
| 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>
|
字符串 | - |
特定 Picker 参数
下表列出了可用的特定 Picker 参数 -
| 序号 | 参数和描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 | rotateEffect 它在 Picker 中启用 3D 旋转效果。 |
布尔值 | false |
| 2 | momentumRatio 当您在快速触摸和移动后释放 Picker 时，它会产生更大的动量。 |
数字 | 7 |
| 3 | updateValuesOnMomentum 用于在动量期间更新 Picker 和输入值。 |
布尔值 | false |
| 4 | updateValuesOnTouchmove 用于在触摸移动期间更新 Picker 和输入值。 |
布尔值 | true |
| 5 | 值 该数组具有其初始值，并且每个数组项都表示相关列的值。 |
数组 | - |
| 6 | formatValue 该函数用于格式化输入值，它应返回新的/格式化的字符串值。values和displayValues是相关列的数组。 |
function (p, values, displayValues) | - |
| 7 | 列 每个数组项都表示一个包含列参数的对象。 |
数组 | - |
Picker 参数回调
下表显示了 Picker 中可用的回调函数列表 -
| 序号 | 回调函数及描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 | onChange 每当 Picker 值更改时，回调函数将被执行，并且values和displayValues是相关列的数组。 |
function (p, values, displayValues) | - |
| 2 | onOpen 每当 Picker 打开时，回调函数将被执行。 |
function (p) | - |
| 3 | onClose 每当 Picker 关闭时，回调函数将被执行。 |
function (p) | - |
列参数
在配置 Picker 时，我们需要传递cols参数。它表示为一个数组，其中每个项目都是一个包含列参数的对象 -
| 序号 | 参数和描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 | 值 您可以使用数组指定字符串列值。 |
数组 | - |
| 2 | displayValues 它包含字符串列值的数组，并且当未指定时，它将从values参数中显示值。 |
数组 | - |
| 3 | cssClass 用于在列 HTML 容器上设置的CSS 类名称。 |
字符串 | - |
| 4 | textAlign 它用于设置列值的文本对齐方式，可以是“left”，“center”或“right”。 |
字符串 | - |
| 5 | 宽度 默认情况下，宽度会自动计算。如果您需要使用应以px为单位的依赖列在 Picker 中修复列宽度。 |
数字 | - |
| 6 | 分隔符 它用于应为视觉分隔符的列，它没有任何值。 |
布尔值 | false |
| 7 | 内容 它用于使用列的内容指定分隔符列(divider:true)。 |
字符串 | - |
列回调参数
| 序号 | 回调函数及描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 | onChange 每当列值更改时，回调函数将执行。value和displayValue分别表示当前列的value和displayValue。 |
function (p, value, displayValue) | - |
Picker 属性
Picker 变量具有许多属性，这些属性在下表中给出 -
| 序号 | 属性及描述 |
|---|---|
| 1 | myPicker.params 您可以使用对象初始化传递的参数。 |
| 2 | myPicker.value 每列选中的值由一个项目数组表示。 |
| 3 | myPicker.displayValue 每列选中的显示值由一个项目数组表示。 |
| 4 | myPicker.opened 当选择器打开时，它设置为true值。 |
| 5 | myPicker.inline 当选择器内联时，它设置为true值。 |
| 6 | myPicker.cols Picker 列有其自身的方法和属性。 |
| 7 | myPicker.container Dom7 实例用于 HTML 容器。 |
Picker 方法
picker 变量有一些有用的方法，如下表所示：
| 序号 | 方法及描述 |
|---|---|
| 1 | myPicker.setValue(values, duration) 用于设置新的 picker 值。values 是一个数组，其中每个项目代表每列的value。duration - 以毫秒为单位的过渡持续时间。 |
| 2 | myPicker.open() 用于打开 Picker。 |
| 3 | myPicker.close() 用于关闭 Picker。 |
| 4 | myPicker.destroy() 用于销毁 Picker 实例并移除所有事件。 |
列属性
myPicker.cols 数组中的每一列也有其自身的有用属性，如下表所示：
//Get first column var col = myPicker.cols[0];
| 序号 | 属性及描述 |
|---|---|
| 1 | col.container 您可以使用列 HTML 容器创建一个实例。 |
| 2 | col.items 您可以使用列项目 HTML 元素创建一个实例。 |
| 3 | col.value 用于选择当前列的值。 |
| 4 | col.displayValue 用于选择当前列的显示值。 |
| 5 | col.activeIndex 给出当前索引号，即选定/活动的项目。 |
列方法
有用的列方法如下表所示：
| 序号 | 方法及描述 |
|---|---|
| 1 | col.setValue(value, duration) 用于为当前列设置新值。value 必须是新值，duration 是以毫秒为单位的过渡持续时间。 |
| 2 | col.replaceValues(values, displayValues) 用于用新值替换列值和 displayValues。 |
当您将 Picker 初始化为内联 Picker 时，它用于从其 HTML 容器访问 Picker 的实例。
var myPicker = $$('.picker-inline')[0].f7Picker;
如下表所示，Picker 有不同类型：
| 序号 | 选项卡类型和描述 |
|---|---|
| 1 | 带有单个值的 Picker
这是一个强大的组件，允许您从列表中选择任何值。 |
| 2 | 两个值和 3D 旋转效果
在 picker 中，您可以使用 3D 旋转效果。 |
| 3 | 依赖值
对于指定的元素，值相互依赖。 |
| 4 | 自定义工具栏
您可以在单个页面上使用一个或多个 picker 进行自定义。 |
| 5 | 内联 Picker / 日期时间
您可以在内联 picker 中选择多个值。例如，日期有日期、月份、年份，时间有小时、分钟、秒。 |
Framework7 - 日历
描述
日历组件允许您轻松处理日期，并且可以用作内联组件或覆盖组件。覆盖日历将在平板电脑上自动转换为弹出窗口。
日历只能通过 JavaScript 创建和初始化。您需要使用相关的 App 方法，如下所示：
myApp.calendar(parameters) - 此方法返回初始化的日历实例。它接受一个对象作为参数。
下表显示了 Framework7 中日历的使用情况：
| 序号 | 日历用法和说明 |
|---|---|
| 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 事件，如下表所示：
| 序号 | 事件及描述 | 目标 |
|---|---|---|
| 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"> |
有一些 App 方法可以与下拉刷新一起使用。
| 序号 | App 的方法和说明 |
|---|---|
| 1 | myApp.pullToRefreshDone(ptrContent) 它用于重置下拉刷新内容。 |
| 2 | myApp.pullToRefreshTrigger(ptrContent) 它用于在指定的下拉刷新内容上触发刷新。 |
| 3 | myApp.destroyPullToRefresh(ptrContent) 它用于销毁/禁用指定下拉刷新内容上的下拉刷新。 |
| 4 | myApp.initPullToRefresh(ptrContent) 它用于初始化/启用下拉刷新内容。 |
其中ptrContent用于HTMLElement或字符串到下拉刷新内容以重置/触发或禁用/启用。
示例
以下示例演示了刷新组件的使用，该组件启动页面内容的刷新：
<!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文件。
打开此 HTML 文件，网址为 https://127.0.0.1/pull_to_refresh.html，输出结果如下所示。
当用户下拉时，页面将使用内容刷新。
Framework7 - 无限滚动
描述
无限滚动允许您加载其他内容，并在页面接近底部时执行所需的操作。
以下 HTML 布局显示了无限滚动：
<div class = "page">
<div class = "page-content infinite-scroll" data-distance = "100">
...
</div>
</div>
上述布局包含以下类：
page-content infinite-scroll - 用于无限滚动容器。
data-distance - 此属性允许您配置页面底部触发无限滚动事件的距离（以 px 为单位），其默认值为50px。
如果要在页面顶部使用无限滚动，则需要将额外的“infinite-scroll-top”类添加到“page-content”中：
<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)
其中参数是作为HTMLElement或字符串用于无限滚动容器的必需选项。
示例
以下示例演示了无限滚动，当页面滚动接近底部时加载其他内容：
<!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;
// Loading flag
var loading = false;
// Last loaded index
var lastIndex = $$('.list-block li').length;
// Max items to load
var maxItems = 60;
// Append items per load
var itemsPerLoad = 20;
// Attach 'infinite' event handler
$$('.infinite-scroll').on('infinite', function () {
// Exit, if loading in progress
if (loading) return;
// Set loading flag
loading = true;
// Emulate 1s loading
setTimeout(function () {
// Reset loading flag
loading = false;
if (lastIndex >= maxItems) {
// Nothing more to load, detach infinite scroll events to prevent unnecessary loadings
myApp.detachInfiniteScroll($$('.infinite-scroll'));
// Remove preloader
$$('.infinite-scroll-preloader').remove();
return;
}
// Generate new items 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>';
}
// Append new items
$$('.list-block ul').append(html);
// Update last loaded index
lastIndex = $$('.list-block li').length;
}, 1000);
});
</script>
</body>
</html>
输出
让我们执行以下步骤来了解上面给出的代码是如何工作的：
将上面给出的 HTML 代码保存为服务器根文件夹中的infinite_scroll.html文件。
打开此 HTML 文件，网址为 https://127.0.0.1/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>
布局在不同的区域包含以下类：
消息页面布局
下表显示了消息页面布局的类及其描述。
| 序号 | 类和描述 |
|---|---|
| 1 | messages-content 这是添加到“page-content”的必需附加类，用于消息包装器。 |
| 2 | messages 它是消息气泡的必需元素。 |
| 3 | messages-date 它使用日期戳容器来显示发送或接收消息的日期和时间。 |
| 4 | message 它是要显示的单个消息。 |
单个消息内部部分
下表显示了简单消息内部部分的类及其描述。
| 序号 | 类和描述 |
|---|---|
| 1 | message-name 它提供发送者的姓名。 |
| 2 | message-text 使用气泡类型定义文本。 |
| 3 | message-avatar 它指定发送者的头像。 |
| 4 | message-label 它指定气泡下方的文本标签。 |
单个消息容器的其他类
下表显示了单个消息容器描述的其他类。
| 序号 | 类和描述 |
|---|---|
| 1 | message-sent 它指定消息是由用户发送的，并在右侧显示为绿色背景颜色。 |
| 2 | message-received 它用于显示单个消息，指示消息是由用户接收的，并在左侧显示为灰色背景颜色。 |
| 3 | message-pic 它是用于使用单个消息显示图像的附加类。 |
| 4 | message-with-avatar 它是用于显示带有头像的单个消息（已接收或已发送）的附加类。 |
| 5 | message-with-tail 您可以为单个消息（已接收或已发送）添加气泡尾部。 |
单个消息的其他可用类
下表显示了单个消息的可用类及其描述。
| 序号 | 类和描述 |
|---|---|
| 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 - 它指定一个包含消息参数的对象。
消息参数
下表显示了消息参数及其说明。
| 序号 | 参数 & 说明 | 类型 | 默认值 |
|---|---|---|---|
| 1 | autoLayout 通过启用它，它会为每条消息添加其他必需的类。 |
布尔值 | true |
| 2 | newMessagesFirst 通过启用它，您可以将消息显示在顶部，而不是显示在底部。 |
布尔值 | false |
| 3 | messages 它显示一个消息数组，其中每条消息都应表示为包含消息参数的对象。 |
数组 | - |
| 4 | messageTemplate 它显示单个消息模板。 |
字符串 | - |
消息属性
下表显示了消息属性及其说明。
| 序号 | 属性 & 说明 |
|---|---|
| 1 | myMessages.params 您可以使用对象初始化传递的参数。 |
| 2 | myMessages.container 定义包含消息栏 HTML 容器的 DOM7 元素。 |
消息方法
下表显示了消息方法及其说明。
| 序号 | 方法 & 说明 |
|---|---|
| 1 | myMessages.addMessage(messageParameters, method, animate); 可以使用 method 参数将消息添加到开头或结尾。 它具有以下参数：
|
| 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(); 它用于销毁消息。 |
单个消息参数
下表显示了单个消息的参数及其说明。
| 序号 | 参数 & 说明 | 类型 | 默认值 |
|---|---|---|---|
| 1 | 文本 它定义消息文本，可以是 HTML 字符串。 |
字符串 | - |
| 2 | name 它指定发送者姓名。 |
字符串 | - |
| 3 | avatar 它指定发送者头像 URL 字符串。 |
字符串 | - |
| 4 | time 它指定消息的时间字符串，例如“上午 9:45”、“18:35”。 |
字符串 | - |
| 5 | type 它提供消息类型，无论是已发送还是已接收的消息。 |
字符串 | sent |
| 6 | label 它定义消息的标签。 |
字符串 | - |
| 7 | day 它提供消息的日期字符串，例如“星期日”、“星期一”、“昨天”等。 |
字符串 | - |
使用 HTML 初始化消息
您可以通过在 messages 中使用附加的 messages-init 类，并使用 data- 属性传递所需的参数，来使用 HTML 而无需 JavaScript 初始化消息，如下面的代码片段所示：
...
<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;
// It indicates conversation flag
var conversationStarted = false;
// Here initiliaze the messages
var myMessages = myApp.messages('.messages', {
autoLayout:true
});
// Initiliaze the messagebar
var myMessagebar = myApp.messagebar('.messagebar');
// Displays the text after clicking the button
$$('.messagebar .link').on('click', function () {
// specifies the message text
var messageText = myMessagebar.value().trim();
// If there is no message, then exit from there
if (messageText.length === 0) return;
// Specifies the empty messagebar
myMessagebar.clear()
// Defines the random message type
var messageType = (['sent', 'received'])[Math.round(Math.random())];
// Provides the avatar and name for the received message
var avatar, name;
if(messageType === 'received') {
name = 'Smith';
}
// It adds the message
myMessages.addMessage ({
// It provides the message text
text: messageText,
// It displays the random message type
type: messageType,
// Specifies the avatar and name of the sender
avatar: avatar,
name: name,
// Displays the day, date and time of the message
day: !conversationStarted ? 'Today' : false,
time: !conversationStarted ? (new Date()).getHours() + ':' + (new Date()).getMinutes() : false
})
// Here you can update the conversation flag
conversationStarted = true;
});
</script>
</body>
</html>
输出
让我们执行以下步骤来了解上面给出的代码是如何工作的：
将上面给出的 HTML 代码保存为服务器根文件夹中的 messages.html 文件。
打开此 HTML 文件，网址为 https://127.0.0.1/messages.html，输出将显示如下。
当您在消息框中键入消息并单击“发送”按钮时，它表示您的消息已发送，并在右侧显示为绿色背景颜色。
您收到的消息将显示在左侧，带有灰色背景以及发送者姓名。
Framework7 - 消息栏
描述
Framework7 提供了特殊的可调整大小的工具栏，以便在应用程序中使用消息系统。
以下代码显示了消息栏布局：
<div clas = "toolbar messagebar">
<div clas = "toolbar-inner">
<textarea placeholder = "Message"></textarea>
<a href = "#" clas = "link">Send</a>
</div>
</div>
在消息栏中，“页面”的内部非常重要，位于“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 元素或字符串，包含消息栏容器 HTML 元素。
parameters - 它指定一个包含消息栏参数的对象。
例如 -
var myMessagebar = app.messagebar('.messagebar', {
maxHeight: 200
});
消息栏参数
maxHeight - 它用于设置文本区域的最大高度，并根据其文本量调整大小。参数类型为 number，默认值为 null。
消息栏属性
下表显示了消息栏属性。
| 序号 | 属性及描述 |
|---|---|
| 1 | myMessagebar.params 您可以使用传递的初始化参数指定对象。 |
| 2 | myMessagebar.container 您可以使用消息栏容器 HTML 元素指定 dom7 元素。 |
| 3 | myMessagebar.textarea 您可以使用消息栏文本区域 HTML 元素指定 dom7 元素。 |
消息栏方法
下表显示了消息栏方法。
| 序号 | 方法及描述 |
|---|---|
| 1 | myMessagebar.value(newValue); 它设置消息栏文本区域的值/文本，如果未指定 newValue，则返回消息栏文本区域的值。 |
| 2 | myMessagebar.clear(); 它清除文本区域并更新/重置大小。 |
| 3 | myMessagebar.destroy(); 它销毁消息栏实例。 |
使用 HTML 初始化消息栏
您可以通过在 .messagebar 中添加 messagebar-init 类，使用 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 Message bar 属性实现的。
var myMessagebar = $$('.messagebar')[0].f7Messagebar;
// Now you can use it
myMessagebar.value('Hello world');
您可以查看此 链接 中解释的消息栏示例。
Framework7 - 通知
描述
通知用于显示所需的消息，这些消息显示为推送（或本地）iOS 通知。
下表详细演示了通知的使用：
| 序号 | 通知用法 & 说明 |
|---|---|
| 1 | 通知 JavaScript API
还可以使用相关的应用程序方法通过 JavaScript 添加或关闭通知。 |
| 2 | 通知布局
Framework7 通知将通过 JavaScript 添加。 |
| 3 | iOS 示例
Framework7 允许您在 iOS 布局中使用不同类型的通知。 |
| 4 | Material 示例
Framework7 通知也可以在 Material 布局中使用。 |
Framework7 - 延迟加载
描述
延迟加载会延迟给定页面上的图像加载过程。延迟加载可提高滚动性能，加快页面加载速度并节省流量。
延迟加载的元素和图像必须位于可滚动的 <div class = "page-content"> 内才能正常工作。
下表演示了延迟加载的使用：
| 序号 | 延迟加载用法 & 说明 |
|---|---|
| 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 文件，网址为 https://127.0.0.1/framework7_lazy_load.html，输出将显示如下。
该示例指定了图像的延迟加载，当您向下滚动时，图像将在页面上加载。
Framework7 - 颜色主题
描述
Framework7 为您的应用程序提供了不同的颜色主题。
颜色主题提供了不同类型的主题颜色，用于流畅地使用应用程序，如下表所示：
| 序号 | 主题类型 & 说明 |
|---|---|
| 1 | iOS 主题颜色
您可以为应用程序使用 10 种不同的默认 iOS 颜色主题。 |
| 2 | Material 主题颜色
Framework7 为应用程序提供了 22 种不同的默认 Material 颜色主题。 |
应用颜色主题
Framework7 允许您通过在父元素中使用 theme-[color] 类，将颜色主题应用于不同的元素，例如页面、列表块、导航栏、按钮行等。
示例
... </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>
布局主题
您可以通过使用两个主题 white 和 dark 为您的应用程序使用默认布局主题。可以通过在父元素中使用 layout-[theme] 类应用这些主题。
示例
... </body> <div class = "navbar layout-white"> ... </div> <div class = "buttons-row layout-dark"> ... </div>
辅助类
Framework7 提供了其他辅助类，可以在主题外部或没有主题的情况下使用，如下所示：
color-[color] - 它可以用于更改块的文本颜色或按钮、链接、图标等的颜色。
bg-[color] - 它在块或元素上设置预定义的背景颜色。
border-[color] - 它在块或元素上设置预定义的边框颜色。
Framework7 - 分割线
描述
Hairline 是一个类，它通过使用边框类在图像周围添加 1px 边框。随着 1.x 的发布，Hairlines 修订了使用 :after 和 :before 伪元素而不是使用 CSS 边框的工作方式。
Hairlines 包含以下规则：
:after - 此伪元素用于 bottom 和 right Hairlines。
:before - 此伪元素用于 top 和 left Hairlines。
以下代码片段显示了 :after 元素的使用。
.navbar:after {
background-color: red;
}
以下代码片段删除了底部 Hairline 工具栏：
.navbar:after {
display:none;
}
.toolbar:before {
display:none;
}
"no-border" 类
通过使用 no-border 类将删除 Hairline，并且它支持 Navbar、toolbar、card 及其元素。
以下代码用于从导航栏中删除 Hairline：
<div class = "navbar no-border"> ... </div>
Framework7 - 模板概述
描述
Template7 是一款轻量级的、移动优先的 JavaScript 引擎，它将 Ajax 和动态页面表示为具有指定上下文的 Template7 模板，并且不需要任何额外的脚本。Template7 与 Framework7 关联，作为默认的轻量级模板引擎，在应用程序中运行速度更快。
性能
将字符串编译成 JS 函数的过程是 Template7 最慢的部分。因此，您无需多次编译模板，只需编译一次即可。
//Here initialize the app
var myApp = new Framework7();
// After initializing compile templates on app
var searchTemplate = $('script#search-template').html();
var compiledSearchTemplate = Template7.compile(searchTemplate);
var listTemplate = $('script#list-template').html();
var compiledListTemplate = Template7.compile(listTemplate);
// Execute the compiled templates with required context using onPageInit() method
myApp.onPageInit('search', function (page) {
// Execute the compiled templates with required content
var html = compiledSearchTemplate({/*...some data...*/});
// Do stuff with html
});
Template7 是一款轻量级的模板引擎，可以用作独立的库，无需 Framework7。Template7 文件可以通过两种方式安装：
您可以从 Template7 的 GitHub 仓库 下载。
您可以使用以下命令通过 Bower 安装：
或者
bower install template7
Framework7 - 自动编译
描述
在 Template7 中，您可以通过在 `