Framework7 - 快速指南
Framework7 - Overview
Framework7是一个免费的开源框架，适用于移动HTML。 它用于为iOS和Android设备开发混合移动应用程序或Web应用程序。
Framework7于2014年推出。最新版本1.4.2于2016年2月发布，在麻省理工学院获得许可。
为什么使用Framework7？
- 为iOS和Android开发应用程序更容易。
- Framework7的学习曲线非常简单。
- 它有许多预先设计的小部件/组件。
- 它有内置的帮助程序库。
特点 (Features)
Framework7是一个开源且免费使用的框架。
Framework7具有简单而熟悉的jQuery语法，可以毫不拖延地开始使用。
为了控制触摸UI的点击延迟，Framework7内置了FastClick库。
Framework7具有内置的网格系统布局，用于响应地排列元素。
Framework7通过flexible router api动态加载模板中的页面。
优势 (Advantages)
即使对于DOM操作，Framework7也不依赖于任何第三方库。 相反，它有自己的自定义DOM7。
Framework7还可以与Angular和React框架一起使用。
一旦您了解HTML，CSS和一些基本JavaScript，就可以开始创建应用程序。
它通过Bower支持更快的开发。
无需学习即可轻松开发适用于iOS和Android的应用程序。
缺点 (Disadvantages)
Framework7仅支持iOS和Android等平台。
与iOS和Andriod相比，Framework7框架的在线社区支持较少。
Framework7 - Environment
在本章中，我们将讨论如何安装和设置Framework7。
您可以通过两种方式下载Framework7 -
您可以使用Bower安装Framework7，如下所示 -
bower install framework7
成功安装Framework7后，您需要按照以下给出的步骤在您的应用程序中使用Framework7 -
Step 1 - 您需要使用以下命令安装gulp-cli来构建Framework7的开发和dist版本。
npm install gulp-cli
cli代表Gulp的命令行实用程序。
Step 2 - 必须使用以下命令全局安装Gulp。
npm install --global gulp
Step 3 - 接下来，安装NodeJS包管理器，它安装节点程序，以便更容易指定和链接依赖项。 以下命令用于安装npm。
npm install
Step 4 - 可以使用以下命令构建Framework7的开发版本。
npm build
Step 5 - 构建Framework7的开发版本后，使用以下命令从dist/文件夹开始构建应用程序。
npm dist
Step 6 - 将您的应用程序文件夹保留在服务器中，然后运行以下命令以在应用程序页面之间进行导航。
gulp server
从CDNs下载Framework7库
CDN或内容分发网络是用于向用户提供文件的服务器网络。 如果您在网页中使用CDN链接，则会将托管文件的责任从您自己的服务器转移到一系列外部服务器。 这也提供了一个优势，如果您的网页的访问者已经从同一CDN下载了Framework7的副本，则不必重新下载。 您可以将以下CDN文件包含在HTML文档中。
以下CDN用于iOS App layout -
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
它用于将Framework7 iOS CSS库包含到您的应用程序中。
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
它用于为您的应用程序包含Framework7 iOS相关颜色样式。
以下CDN用于Android/Material App Layout -
<script src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
它用于将Framework7 JS库包含到您的应用程序中。
<script src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.min.css"></script>
它用于为您的应用程序包含Framework7 Material样式。
我们在本教程中使用了库的CDN版本。 我们使用AMPPS（AMPPS是Apache，MySQL，MongoDB，PHP，Perl和Python的WAMP，MAMP和LAMP堆栈）服务器来执行我们的所有示例。
例子 (Example)
以下示例演示了在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>
输出 (Output)
让我们执行以下步骤，看看上面给出的代码是如何工作的 -
将上述HTML代码保存为服务器根文件夹中的framework7_environment.html文件。
以http://localhost/framework7_environment.html打开此HTML文件，输出显示如下。
单击导航栏时，它将显示带有自定义消息的警告框。
Framework7 - Layouts
描述 (Description)
Framework7为您的应用程序提供了不同类型的布局。 它支持三种类型的Navbar/Toolbar布局 -
| S.No | 布局类型和说明 |
|---|---|
| 1 | 静态布局 静态布局最常用于布局类型，包括导航栏和工具栏，它们可以是可滚动的页面内容，每个页面都包含自己的导航栏和工具栏。 |
| 2 | 固定布局 固定布局包括自己的导航栏和工具栏，它们可以在屏幕上显示，并且无法在页面上滚动。 |
| 3 | Through Layout 在此布局中，导航栏和工具栏对于单个视图中的所有页面都显示为固定。 |
| 4 | Mixed Layout 您可以在单个视图中混合使用不同类型的布局。 |
No Navbar/Toolbar
如果您不想使用导航栏和工具栏，则不要在页面/页面/视图中包含适当的类（ navbar-fixed ， navbar-through ， toolbar-fixed ， toolbar-through ）。
Framework7 - Navbars
描述 (Description)
在本章中，让我们研究一下navbar 。 它通常位于包含页面标题和导航元素的屏幕顶部。
Navbar由三部分组成，每部分可能包含任何HTML内容，但建议您按照以下方式使用这些部分 -
Left - 它旨在放置link图标或单个文本链接。
Center - 用于显示页面标题或标签链接。
Right - 这部分类似于left部分。
下表详细介绍了navbar的使用 -
| S.No | 导航类型和描述 |
|---|---|
| 1 | Basic navbar 可以使用navbar ， navbar-inner navbar ， navbar-inner ， left ， center和right类创建基本导航栏。 |
| 2 | 带有链接的Navbar 要使用导航栏left和right部分中的链接，只需添加带有类link 《a》标记即可。 |
| 3 | 多个链接 要使用多个链接，只需在您选择的部分添加更多《a class = "link"》 。 |
| 4 | 与文本和图标的链接 通过添加图标类并使用《span》元素包装链接文本，可以为链接提供图标和文本。 |
| 5 | Links with only icons 通过向链接添加仅图标类，可以仅为图标提供导航栏链接。 |
| 6 | 相关的应用和视图方法 在初始化View ，framework7允许您使用navbar可用的方法。 |
| 7 | Hide navbar automatically 对于某些不需要导航栏的Ajax加载页面，可以自动隐藏/显示导航栏。 |
Framework7 - Toolbars
描述 (Description)
通过使用屏幕底部的导航元素，工具栏可以轻松访问其他页面。
您可以按表中指定的两种方式使用工具栏 -
| S.No | 工具栏类型和说明 |
|---|---|
| 1 | 隐藏工具栏 使用no-toolbar类加载页面加载页面时，可以自动隐藏工具栏。 |
| 2 | 底部工具栏 使用toolbar-bottom类将工具栏放在页面toolbar-bottom 。 |
工具栏的方法
工具栏可以使用以下可用方法 -
| S.No | 工具栏方法和说明 |
|---|---|
| 1 | myApp.hideToolbar(toolbar) 它隐藏指定的工具栏。 |
| 2 | myApp.showToolbar(toolbar) 它显示指定的工具栏。 |
| 3 | view.hideToolbar() 它隐藏了视图中指定的工具栏。 |
| 4 | view.showToolbar() 它显示视图中的指定工具栏。 |
例子 (Example)
以下示例演示了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初始化您的应用程序和视图。
输出 (Output)
让我们执行以下步骤，看看上面给出的代码是如何工作的 -
将上面给出的HTML代码保存为服务器根文件夹中的toolbar.html文件。
以http://localhost/toolbar.html打开此HTML文件，输出显示如下。
Framework7 - Search Bar
描述 (Description)
框架7允许使用searchbar类搜索元素。
搜索栏参数
| S.No | 参数和描述 | 类型 | 默认 |
|---|---|---|---|
| 1 | searchList 它搜索列表的CSS选择器或HTML元素。 | 字符串或HTML元素 | - |
| 2 | searchIn 您可以搜索CSS选择器的列表视图元素，也可以通过传递.item-title ， .item-text类来搜索元素。 | string | '.item-title' |
| 3 | found 它使用“found”元素搜索CSS选择器或HTML元素。 此外，如果没有指定元素，它使用.searchbar-found元素。 | 字符串或HTML元素 | - |
| 4 | notfound 它使用“not-found”元素搜索CSS选择器或HTML元素。 此外，如果没有指定元素，它使用.searchbar-not-found元素。 | 字符串或HTML元素 | - |
| 5 | overlay 它使用“ .searchbar-overlay overlay”元素搜索CSS选择器或HTML元素，如果没有指定元素，则使用.searchbar-overlay元素。 | 字符串或HTML元素 | - |
| 6 | ignore 您可以使用搜索栏忽略项目的CSS选择器。 | string | '.searchbar-ignore' |
| 7 | customSearch 启用后，搜索栏将不会搜索searchList指定的任何列表块，您将被允许使用自定义搜索功能。 | boolean | false |
| 8 | removeDiacritics 搜索元素时，请通过启用此参数来删除变音符号。 | boolean | false |
| 9 | hideDividers 如果没有项目，此参数将隐藏项目分隔符和组标题。 | boolean | true |
| 10 | hideGroups 如果在列表视图组中找不到任何项目，则此参数将隐藏组。 | boolean | true |
搜索栏回调
| S.No | 回调和描述 | 类型 | 默认 |
|---|---|---|---|
| 1 | onSearch 此方法将在执行搜索时触发回调函数。 | function (s) | - |
| 2 | onEnable 当搜索栏变为活动状态时，此方法将触发回调函数。 | function (s) | - |
| 3 | onDisable 当搜索栏变为非活动状态时，此方法将触发回调函数。 | function (s) | - |
| 4 | onClear 单击“clear”元素时，此方法将触发回调函数。 | function (s) | - |
搜索栏属性
| S.No | 属性和描述 |
|---|---|
| 1 | mySearchbar.params 表示使用object传递的初始化参数。 |
| 2 | mySearchbar.query 搜索当前查询。 |
| 3 | mySearchbar.searchList 定义搜索列表块。 |
| 4 | mySearchbar.container 使用HTML元素定义搜索栏容器。 |
| 5 | mySearchbar.input 使用HTML元素定义搜索栏输入。 |
| 6 | mySearchbar.active 它定义是启用还是禁用搜索栏。 |
搜索栏方法
| S.No | 方法和描述 |
|---|---|
| 1 | mySearchbar.search(query); 此方法搜索传递的查询。 |
| 2 | mySearchbar.enable(); 它启用了搜索栏。 |
| 3 | mySearchbar.disable(); 它会禁用搜索栏。 |
| 4 | mySearchbar.clear(); 您可以清除查询和搜索结果。 |
| 5 | mySearchbar.destroy(); 它会破坏搜索栏实例。 |
搜索栏JavaScript事件
| S.No | 活动和描述 | 目标 |
|---|---|---|
| 1 | search 您可以在搜索元素时触发此事件。 | |
| 2 | clearSearch 当用户单击clearSearch元素时，将触发此事件。 | |
| 3 | enableSearch 当搜索栏启用时，此事件将被触发。 | |
| 4 | disableSearch 当搜索栏被禁用，用户点击取消按钮或“搜索栏覆盖”元素时，此事件将被触发。 |
例子 (Example)
以下示例演示了在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>
输出 (Output)
让我们执行以下步骤，看看上面给出的代码是如何工作的 -
将上面给出的HTML代码search_bar.html文件保存在服务器根文件夹中。
以http://localhost/search_bar.html打开此HTML文件，输出显示如下。
如果列表中包含的元素在搜索栏中输入，则会在列表中显示该特定元素。
如果输入了列表中包含的元素以外的元素，则不会显示找到的元素。
Framework7 - Status Bar
描述 (Description)
iOS 7+允许您构建全屏应用，当您的状态栏与您的应用重叠时，这可能会产生问题。 Framework7通过检测您的应用是否处于全屏模式来解决此问题。 如果你的应用程序处于全屏模式，那么Framework7会自动将with-statusbar-overlay类添加到《html》 （如果app不是全屏模式，则删除），你需要在《body》添加statusbar-overlay类如下面的代码所示 -
<html class = "with-statusbar-overlay">
...
<body>
<div class = "statusbar-overlay"></div>
...
默认情况下， 《div》将始终隐藏并固定在屏幕顶部。 只有当应用程序处于全屏模式并且with-statusbar-overlay类添加到《html》时，它才会显示。
例子 (Example)
以下示例演示了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>
输出 (Output)
让我们执行以下步骤，看看上面给出的代码是如何工作的 -
将上面给出的html代码保存为服务器根文件夹中的status_bar.html文件。
将此HTML文件打开为http://localhost/status_bar.html，输出显示如下。
该示例显示了statusbar-overlay的使用，它允许您在状态栏与应用程序重叠时构建全屏应用程序。
Framework7 - Side Panels
描述 (Description)
side panel移动到屏幕的左侧或右侧以显示内容。 Framework7允许您在应用程序中包含最多2个面板（右侧面板和左侧面板）。 您需要在《body》的开头添加面板，然后通过应用以下列出的类来选择打开效果 -
panel-reveal - 这将使整个应用程序的内容移出。
panel-cover - 这将使面板覆盖应用程序的内容。
例如，以下代码显示了如何使用上述类 -
<body>
<!-- First add Panel's overlay which will overlays app while panel is opened -->
<div class = "panel-overlay"></div>
<!-- Left panel -->
<div class = "panel panel-left panel-cover">
panel's content
</div>
<!-- Right panel -->
<div class = "panel panel-right panel-reveal">
panel's content
</div>
</body>
下表显示了Framework77支持的面板类型 -
| S.No | 类型和描述 |
|---|---|
| 1 | Open and Close Panels 添加面板和效果后，我们需要添加open和close面板的功能。 |
| 2 | Panel Events 要检测用户与面板的交互方式，您可以使用面板事件。 |
| 3 | Open Panels With Swipe Framework7为您提供了使用swipe gesture打开面板的功能。 |
| 4 | Panel is Opened? 我们可以使用with-panel[position]-[effect]规则来确定面板是否打开。 |
Framework7 - Content Block
描述 (Description)
内容块可用于添加不同格式的额外内容。
例子 (Example)
以下示例演示了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>
输出 (Output)
让我们执行以下步骤，看看上面给出的代码是如何工作的 -
将上面给出的HTML代码保存为服务器根文件夹中的content_block.html文件。
以http://localhost/content_block.html打开此HTML文件，输出显示如下。
该代码为文本内容添加了额外的格式和所需的间距。
Framework7 - Layout Grid
描述 (Description)
Framework7提供了不同类型的网格类型，以根据用户需要放置内容。
布局网格提供不同类型的列大小，如下表所述 -
| S.No | 类 | 表类 | 宽度 |
|---|---|---|---|
| 1 | col-5 | tablet-5 | 5% |
| 2 | col-10 | tablet-10 | 10% |
| 3 | col-15 | tablet-15 | 15% |
| 4 | col-20 | tablet-20 | 20% |
| 5 | col-25 | tablet-25 | 25% |
| 6 | col-30 | tablet-30 | 30% |
| 7 | col-33 | tablet-33 | 33.3% |
| 8 | col-35 | tablet-35 | 35% |
| 9 | col-40 | tablet-40 | 40% |
| 10 | col-45 | tablet-45 | 45% |
| 11 | col-50 | tablet-50 | 50% |
| 12 | col-55 | tablet-55 | 55% |
| 13 | col-60 | tablet-60 | 60% |
| 14 | col-65 | tablet-65 | 65% |
| 15 | col-66 | tablet-66 | 66.6% |
| 16 | col-70 | tablet-70 | 70% |
| 17 | col-75 | tablet-75 | 75% |
| 18 | col-80 | tablet-80 | 80% |
| 19 | col-85 | tablet-85 | 85% |
| 20 | col-90 | tablet-90 | 90% |
| 21 | col-95 | tablet-95 | 95% |
| 21 | col-100 | tablet-100 | 100% |
| 22 | col-auto | tablet-auto | 宽度相等 |
例子 (Example)
以下示例提供了在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>
输出 (Output)
让我们执行以下步骤，看看上面给出的代码是如何工作的 -
将上面给出的HTML代码保存为服务器根文件夹中的layout_grid.html文件。
以http://localhost/layout_grid.html打开此HTML文件，输出显示如下。
此代码提供不同类型的网格类型，以根据用户需要放置内容。
Framework7 - Overlays
描述 (Description)
Framework7提供了不同类型的叠加，以便顺利地处理应用程序。 下表列出了一些Framework7覆盖 -
| S.No | 叠加类型和说明 |
|---|---|
| 1 | Modal Modal是一个小窗口，可以显示来自不同源的内容，而无需离开父窗口。 |
| 2 | Popup 弹出窗口是一个弹出框，用于在用户单击元素时显示内容。 |
| 3 | Popover 为了管理临时内容的呈现，可以使用弹出窗口组件。 |
| 4 | Action Sheet Action Sheet用于向用户呈现如何处理给定任务的一系列可能性。 |
| 5 | Login Screen 叠加登录屏幕用于显示登录屏幕格式，可以在页面或弹出窗口中使用，也可以作为独立叠加显示。 |
| 6 | Picker Modal Picker模式用于选择一些与日历选择器类似的自定义内容。 |
Framework7 - Preloaders
描述 (Description)
Framework7中的预加载器由可缩放矢量图形（SVG）制成，并使用CSS动画，这使其易于调整大小。 预加载器有两种颜色 -
- 默认为浅色背景
- 另一个是黑暗的背景
您可以在HTML中使用preloader类，如下所示 -
例子 (Example)
以下示例演示了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>
输出 (Output)
让我们执行以下步骤，看看上面给出的代码是如何工作的 -
将上面给出的HTML代码保存为服务器根文件夹中的preloader.html文件。
以http://localhost/preloader.html打开此HTML文件，输出显示如下。
此代码显示预加载器指示器，该指示器由SVG制作并使用CSS进行动画处理。
Framework7 - Progress Bar
描述 (Description)
进度条可用于向用户显示资产加载或任务进度。 您可以使用progressbar类指定进度条。 当用户不知道请求的加载过程需要多长时间时，您可以使用progressbar-infinite类。
进度条JavaScript API
进度条可以与JavaScript API一起使用，以通过使用以下方法指定show ， hide和progress属性 -
| S.No | 方法 | 说明和参数 |
|---|---|---|
| 1 | myApp.setProgressbar (container , progress, speed) | 它设置任务进度的进度条。
|
| 2 | myApp.hideProgressbar (contain er) | 它隐藏了进度条。
|
| 3 | myApp.showProgressbar (contai ner, progress, color) | 它显示进度条。
|
例子 (Example)
以下示例显示动画确定和不确定进度条以指示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>
输出 (Output)
让我们执行以下步骤，看看上面给出的代码是如何工作的 -
将上面给出的HTML代码保存为服务器根文件夹中的progress_bar.html文件。
以http://localhost/progress_bar.html打开此HTML文件，输出显示如下。
该示例显示进度条，指示操作完成过程所需的时间，并显示不同类型的进度条以指示活动。
Framework7 - List Views
描述 (Description)
列表视图是功能强大的UI组件，它在多行的可滚动列表中显示数据。 Framework7提供了不同类型的List View以与您的应用程序一起使用。 下表列出了一些Framework7 List View -
| S.No | 类型和描述 |
|---|---|
| 1 | 列表显示 列表视图是功能强大的用户界面组件，它在包含多行的可滚动列表中显示数据。 |
| 2 | 联系人列表 联系人列表是一种列表视图，可用于显示人员联系人列表。 |
| 3 | 媒体列表视图 媒体列表视图用于显示复杂的数据结构，如产品，服务，用户信息。 |
| 4 | Swipeout 通过swipeout ，您可以通过滑动列表元素来显示隐藏的菜单操作。 |
| 5 | 可排序列表 可排序列表是一种列表视图，用于对列表视图元素进行排序。 |
| 6 | 虚拟列表 虚拟列表一种列表视图，其中包括大量数据元素的列表，而不会降低其性能。 |
Framework7 - Accordion
描述 (Description)
手风琴是一个图形控制元素，显示为堆叠的项目列表。 每个手风琴都可以expanded或stretched以显示与手风琴相关的内容。
可折叠布局
当您使用单个单独的可折叠元素时，您需要省略accordion-list包装元素。
以下是可折叠布局的结构 -
<!-- Single collapsible element ------>
<div class = "accordion-item">
<div class = "accordion-item-toggle"></div>
<div class = "accordion-item-content"></div>
</div>
<!-- Separate collapsible element -->
<div class = "accordion-item">
<div class = "accordion-item-toggle"></div>
<div class = "accordion-item-content"></div>
</div>
Framework7中的以下类用于手风琴 -
| S.No | 课程和描述 |
|---|---|
| 1 | accordion-list 它是一个可选类，包含一组手风琴项列表。 |
| 2 | accordion-item 这是单个手风琴项目的必需类。 |
| 3 | accordion-item-toggle 它是用于扩展手风琴项目内容的必需类。 |
| 4 | accordion-item-content 它是隐藏的手风琴项目内容所必需的类。 |
| 5 | accordion-item-expanded 这是一个扩展的手风琴项目。 |
Accordion JavaScript API
JavaScript API方法用于以编程方式打开和关闭手风琴。
它包含以下JavaScript API方法 -
myApp.accordionOpen(item) - 用于打开手风琴。
myApp.accordionClose(item) - 用于关闭手风琴。
myApp.accordionToggle(item) - 用于切换手风琴。
所有方法都包含名为item参数，它是HTML或accordion-item的字符串元素。
手风琴活动
Accordion包含下表中列出的四个事件 -
| S.No | 事件 | 目标和描述 |
|---|---|---|
| 1 | open | Accordion item 当您打开动画时，此事件将被触发。 |
| 2 | opened | Accordion item 当动画的开始完成时，此事件将被触发。 |
| 3 | close | Accordion item 关闭动画时，此事件将被触发。 |
| 4 | closed | Accordion item 关闭动画完成后，此事件将被触发。 |
手风琴列表视图
在手风琴列表视图中，您可以使用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>
例子 (Example)
以下示例演示了在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>
输出 (Output)
让我们执行以下步骤，看看上面给出的代码是如何工作的 -
将上面给出的HTML代码保存为服务器根文件夹中的accordion.html文件。
以http://localhost/accordion.html打开此HTML文件，输出显示如下。
该示例提供了可折叠布局，可以扩展该布局以显示与手风琴相关联的内容。
Framework7 - Cards
描述 (Description)
Cards包含与单个主题相关的有组织的信息，如照片，链接和文本。 下表显示了Framework7卡类型 -
| S.No | 类型和描述 |
|---|---|
| 1 | 卡片HTML布局 基本卡片HTML布局使用卡片类来排列其项目。 |
| 2 | 列表视图与卡 通过将cards-list类添加到《div class="list-block"》可以将cards用作列表视图元素。 |
Framework7 - Chips
描述 (Description)
Chip是一小块实体，可以包含照片，小标题和短信息。
芯片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 - 这是芯片的可选删除图标链接。
例子 (Example)
以下示例表示相册，卡片元素等实体以及照片和简要信息 -
<!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>
输出 (Output)
让我们执行以下步骤，看看上面给出的代码是如何工作的 -
将上面给出的HTML代码保存为服务器根文件夹中的cards_html_layout.html文件。
以http://localhost/cards_html_layout.html打开此HTML文件，输出显示如下。
该示例表示小块中的复杂实体，例如专辑，卡片元素，已发布图像，其中包含照片，标题字符串和简要信息。
Framework7 - Buttons
描述 (Description)
Framework7通过向链接或输入按钮添加适当的类来提供一组随时可用的按钮。
| S.No | 类型和描述 |
|---|---|
| 1 | iOS主题按钮 Framework7提供了许多iOS主题按钮，可以通过应用适当的类来使用。 |
| 2 | 材料主题按钮 材质主题通过使用适当的类提供了许多要在应用程序中使用的按钮。 |
Framework7 - Action Button
描述 (Description)
Framework7为提升的操作提供floating action button 。 它们在UI上显示为浮动圆圈图标。 它具有包含morphing ， launching和transferring an anchor point的运动行为。
浮动操作按钮仅在材质主题中受支持。
下表列出了Framework7中使用的操作按钮类型 -
| S.No | 类型和描述 |
|---|---|
| 1 | 浮动动作按钮布局 这很简单; 你只需要把它作为page或view的孩子。 |
| 2 | Morph To Popover 如果要在单击浮动操作按钮时打开弹出窗口，则可以使用floating-button-to-popover类。 |
| 3 | Speed Dial 您可以使用speed dial单击浮动操作按钮来调用相关操作。 |
Framework7 - Forms
描述 (Description)
表单用于与用户交互，并使用文本字段，复选框，单选按钮等从Web用户收集数据。
Framework7提供了不同类型的表单元素，以便顺利地使用应用程序，如下表所示 -
| S.No | 叠加类型和说明 |
|---|---|
| 1 | Form Elements 表单元素用于制作外观漂亮的表单布局。 |
| 2 | 复选框和无线电 list view扩展允许您在Framework7中创建复选框和无线电输入。 |
| 3 | Smart Select 智能选择是一种通过使用复选框和无线电输入将表单选择更改为动态页面的简便方法。 |
| 4 | Disabled Elements 可以通过将disabled类应用于元素或为表单元素添加disabled属性来disabled元素。 |
| 5 | 表格数据 Framework7几乎没有什么有用的方法，这使得使用表单变得容易。 |
| 6 | 表格存储 表单存储很容易在Ajax加载的页面上自动存储和解析表单数据。 |
| 7 | Ajax表单提交 Framework7允许您使用Ajax自动发送数据。 |
Framework7 - Tabs
描述 (Description)
标签是一组逻辑分组的内容，允许我们在它们之间快速翻转并保存像手风琴一样的空间。
标签布局
以下代码定义选项卡的布局 -
<!-- 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>
Where −
<div class = "tabs"> - 它是所有选项卡的必需包装器。 如果我们错过了这个，标签将根本不起作用。
<div class = "tab"> - 它是一个单选项卡，应具有unique id属性。
<div class = "tab active"> - 它是一个活动选项卡，它使用其他active类使选项卡可见（活动）。
在标签之间切换
您可以在选项卡布局中使用某些控制器，以便用户可以在它们之间切换。
为此，您需要使用tab-link类创建链接（<a>标签），并且href属性等于target标签的id属性 -
<!-- Here the link is used to activates 1st tab, has the same href attribute (#tab1) as the id attribute of 1st tab (tab1) -->
<a href = "#tab1" class = "tab-link active">Tab 1</a>
<!-- Here the link is used to activates 2st tab, has the same href attribute (#tab2) as the id attribute of 2st tab (tab2) -->
<a href = "#tab2" class = "tab-link">Tab 2</a>
<a href = "#tab3" class = "tab-link">Tab 3</a>
切换多个标签
如果使用单个选项卡链接在多个选项卡之间切换，则可以使用类而不是使用ID's和data-tab属性。
<!-- For Top Tabs -->
<div class = "tabs tabs-top">
<div class = "tab tab1 active">...</div>
<div class = "tab tab2">...</div>
<div class = "tab tab3">...</div>
</div>
<!-- For Bottom Tabs -->
<div class = "tabs tabs-bottom">
<div class = "tab tab1 active">...</div>
<div class = "tab tab2">...</div>
<div class = "tab tab3">...</div>
</div>
<!-- For Tabs links -->
<div class = "tab-links">
<!-- Links are switch top and bottom tabs to .tab1 -->
<a href = "#" class = "tab-link" data-tab = ".tab1">Tab 1</a>
<!-- Links are switch top and bottom tabs to .tab2 -->
<a href = "#" class = "tab-link" data-tab = ".tab2">Tab 2</a>
<!-- Links are switch top and bottom tabs to .tab3 -->
<a href = "#" class = "tab-link" data-tab = ".tab3">Tab 3</a>
</div>
tab-link的data-tab属性包含目标选项卡/选项卡的CSS选择器。
我们可以使用不同的选项卡方式，这些方式在下表中指定 -
| S.No | 选项卡类型和描述 |
|---|---|
| 1 | 内联选项卡 内联选项卡是以内联方式分组的集合，允许您在它们之间快速切换。 |
| 2 | 从导航栏切换选项卡 我们可以在导航栏中放置标签，允许您在它们之间进行切换。 |
| 3 | 从标签栏切换视图 单个选项卡可用于在具有自己的导航和布局的视图之间切换。 |
| 4 | 动画标签 您可以使用简单转换（动画）来切换选项卡。 |
| 5 | Swipeable Tabs 您可以使用tabs-swipeable-wrap类为选项卡创建具有简单转换的可滑动选项卡。 |
| 6 | 选项卡JavaScript事件 当您使用选项卡的JavaScript代码时，可以使用JavaScript事件。 |
| 7 | 使用JavaScript显示选项卡 您可以使用JavaScript方法切换或显示选项卡。 |
Framework7 - Swiper Slider
描述 (Description)
swiper滑块是最强大和最现代的触摸滑块，并且具有许多功能的Framework7。
以下HTML布局显示了滑动滑块 -
<!-- Container class for slider -->
<div class = "swiper-container">
<!-- Wrapper class for slider -->
<div class = "swiper-wrapper">
<!-- Slides -->
<div class = "swiper-slide">Slide 1</div>
<div class = "swiper-slide">Slide 2</div>
<div class = "swiper-slide">Slide 3</div>
... other slides ...
</div>
<!-- Define pagination, if it is required -->
<div class = "swiper-pagination"></div>
</div>
以下类用于滑动滑块 -
swiper-container - 它是主滑块容器的必需元素，用于幻灯片和分页。
Swiper-wrapper - 它是附加包装幻灯片的必需元素。
swiper-slide - 它是一个单一的幻灯片元素，它可以包含任何HTML内部。
swiper-pagination - 对于分页项目符号是可选的，它们是自动创建的。
您可以使用相关方法使用JavaScript初始化swiper -
myApp.swiper(swiperContainer,parameters)
OR
new Swiper(swiperContainer, parameters)
这两种方法都用于使用选项初始化滑块。
以上给出的方法包含以下参数 -
swiperContainer - 它是HTMLElement or string swiper容器的HTMLElement or string ，它是必需的。
parameters - 这些是包含带有滑块参数的对象的可选元素。
例如 -
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();
您可以在下表中看到不同的防尘方式和类型 -
| S.No | Swiper类型和描述 |
|---|---|
| 1 | 默认Swiper与分页 默认情况下，它是一个现代触摸滑块和水平滑动刷卡。 |
| 2 | 垂直Swiper 这个也作为默认的swiper工作，但它垂直滑动。 |
| 3 | With Space Between Slides 该滑动器用于在两个滑块之间留出空间。 |
| 4 | 多个Swipers 该swiper在一个页面上使用多个swipers。 |
| 5 | 嵌套Swipers 它是垂直和水平滑块的组合。 |
| 6 | 自定义控件 它用于自定义控件以选择或滑动任何幻灯片。 |
| 7 | Lazy Loading 它可以用于多媒体文件，这需要时间来加载。 |
Framework7 - Photo Browser
描述 (Description)
Photo浏览器类似于iOS照片浏览器组件，用于显示图像组，可以进行缩放和平移。 要在图像之间滑动，照片浏览器使用Swiper Slider 。
下表显示了framework7中使用的照片浏览器类型 -
| S.No | 照片浏览器类型和说明 |
|---|---|
| 1 | Create Photo Browser Instance 可以仅使用JavaScript创建和初始化照片浏览器。 |
| 2 | Photo Browser Parameters Framework7提供了一个参数列表，用于照片浏览器。 |
| 3 | 照片浏览器方法和属性 初始化照片浏览器后，您将获得初始化的实例变量以使用照片浏览器方法和属性。 |
| 4 | 照片数组 在初始化照片浏览器期间，您需要在photos参数中传递包含照片/视频的数组。 |
| 5 | Photo Browser Templates Framework7为您提供了许多照片浏览器模板，您可以将其传递给照片浏览器初始化。 |
Framework7 - Autocomplete
描述 (Description)
自动填充是Framework7的移动友好和触摸优化组件，可以是下拉列表或独立方式。 您可以使用JavaScript方法创建和初始化自动完成实例 -
myApp.autocomplete(parameters)
其中parameters是用于初始化自动完成实例的必需对象。
自动填充参数
下表列出了Framework7中可用的自动填充参数 -
| S.No | 参数和描述 | 类型 | 默认 |
|---|---|---|---|
| 1 | openIn 它定义了如何打开自动填充功能，可以用作下拉列表，弹出窗口或页面。 | string | page |
| 2 | source 它使用自动完成实例，搜索查询和渲染函数来传递匹配的项目与数组。 | function (autocomplete, query, render) | - |
| 3 | valueProperty 它指定匹配项对象的键的项值。 | string | id |
| 4 | limit 它会在每个查询的自动填充中显示有限数量的项目。 | number | - |
| 5 | preloader 预加载器可用于通过将其设置为true来指定自动完成布局。 | boolean | false |
| 6 | preloaderColor 它指定预加载器颜色。 默认情况下，颜色为“黑色”。 | string | - |
| 7 | value 使用默认选定值定义数组。 | array | - |
| 8 | textProperty 它指定匹配项对象的键的项值，可用作显示选项的标题。 | string | text |
独立自动完成参数
下表列出了Framework7中可用的独立自动填充参数 -
| S.No | 参数和描述 | 类型 | 默认 |
|---|---|---|---|
| 1 | opener 它是字符串或HTML元素参数，它将打开独立的自动完成页面。 | 字符串或HTMLElement | - |
| 2 | popupCloseText 它用于关闭自动完成弹出窗口。 | string | 'Close' |
| 3 | backText 当自动填充作为页面打开时，它提供反向链接。 | string | 'Back' |
| 4 | pageTitle 它指定自动完成页面标题。 | string | - |
| 5 | searchbarPlaceholderText 它指定搜索栏占位符文本。 | string | 'Search' |
| 6 | searchbarCancelText 它定义了搜索栏取消按钮文本。 | string | 'cancel' |
| 7 | notFoundText 它在没有找到匹配元素时显示文本。 | string | 'Nothing found' |
| 8 | multiple 它允许通过将其设置为true来选择多个选择。 | boolean | false |
| 9 | navbarTheme 它指定了导航栏的颜色主题。 | string | - |
| 10 | backOnSelect 当用户选择值时，将通过将其设置为true来关闭自动完成。 | boolean | false |
| 11 | formTheme 它指定表单的颜色主题。 | string | - |
下拉自动完成参数
下表列出了Framework7中可用的Dropdown Autocomplete参数 -
| S.No | 参数和描述 | 类型 | 默认 |
|---|---|---|---|
| 1 | input 它是用于文本输入的字符串或HTML元素。 | 字符串或HTMLElement | - |
| 2 | dropdownPlaceholderText 它指定下拉占位符文本。 | string | - |
| 3 | updateInputValueOnSelect 您可以通过将其设置为true来更新select上的输入值。 | boolean | true |
| 4 | expandInput 您可以通过将item-input设置为true，在列表视图中展开文本输入以在下拉期间全屏显示。 | boolean | false |
自动回调功能 (Autocomplete Callbacks Functions)
下表列出了Framework7中可用的Dropdown Autocomplete参数 -
| S.No | 参数和描述 | 类型 | 默认 |
|---|---|---|---|
| 1 | onChange 每当更改自动完成值时，将执行此回调函数。 | function (autocomplete, value) | - |
| 2 | onOpen 每当打开自动完成时，将执行此回调函数。 | function (autocomplete) | - |
| 3 | onClose 每当关闭自动完成时，将执行此回调函数。 | function (autocomplete) | - |
自动填充模板
下表列出了Framework7中可用的Dropdown Autocomplete参数 -
| S.No | 参数和描述 | 类型 | 默认 |
|---|---|---|---|
| 1 | navbarTemplate 它是独立的自动完成导航栏模板。 | string | - |
| 2 | itemTemplate 它是独立的template7表单项。 | string | - |
| 3 | dropdownTemplate 它是template7下拉模板。 | string | - |
| 4 | dropdownItemTemplate 它是template7下拉列表项。 | string | - |
| 5 | dropdownPlaceholderTemplate 它是template7下拉占位符项。 | string | - |
默认模板
以下是上面定义的模板参数的默认模板代码片段 -
navbarTemplate (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 (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 (dropdownTemplate)
<div class = "autocomplete-dropdown">
<div class = "autocomplete-dropdown-inner">
<div class = "list-block">
<ul></ul>
</div>
</div>
{{#if preloader}}
<div class = "autocomplete-preloader preloader
{{#if preloaderColor}}
preloader-{{preloaderColor}}
{{/if}}">
{{#if material}}
{{materialPreloaderHtml}}
{{/if}}
</div>
{{/if}}
</div>
dropdownItemTemplate
<li>
<label class = "{{#unless placeholder}}label-radio{{/unless}} item-content" data-value = "{{value}}">
<div class = "item-inner">
<div class = "item-title">{{text}}</div>
</div>
</label>
</li>
dropdownPlaceholderTemplate
<li class = "autocomplete-dropdown-placeholder">
<div class = "item-content">
<div class = "item-inner">
<div class = "item-title">{{text}}</div>
</div>
</label>
</li>
自动填充方法
下表指定了Framework7中可用的自动填充方法 -
| S.No | 方法和描述 |
|---|---|
| 1 | myAutocomplete.params 定义与对象一起传递的初始化参数。 |
| 2 | myAutocomplete.value 它使用选定的值定义数组。 |
| 3 | myAutocomplete.opened 如果设置为true，则会打开自动完成功能。 |
| 4 | myAutocomplete.dropdown 它指定自动完成下拉列表的实例。 |
| 5 | myAutocomplete.popup 它指定自动完成弹出窗口的实例。 |
| 6 | myAutocomplete.page 它指定了自动填充页面的实例。 |
| 7 | myAutocomplete.pageData 它定义了自动填充页面数据。 |
| 8 | myAutocomplete.searchbar 它定义了自动填充搜索栏实例。 |
自动完成属性
下表指定了Framework7中可用的自动填充方法 -
| S.No | 属性和描述 |
|---|---|
| 1 | myAutocomplete.open() 它会打开自动填充功能，可以用作下拉列表，弹出窗口或页面。 |
| 2 | myAutocomplete.close() 它会关闭自动填充功能。 |
| 3 | myAutocomplete.showPreloader() 它显示自动完成预加载器。 |
| 4 | myAutocomplete.hidePreloader() 它隐藏了自动完成预加载器。 |
| 5 | myAutocomplete.destroy() 它会破坏自动完成预加载器实例并删除所有事件。 |
例子 (Example)
以下示例演示了隐藏在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>
输出 (Output)
让我们执行以下步骤，看看上面给出的代码是如何工作的 -
将上面给出的HTML代码保存为服务器根文件夹中的autocomplete.html文件。
以http://localhost/autocomplete.html打开此HTML文件，输出显示如下。
该示例在简单下拉列表中提供值的自动完成，包含所有值的下拉列表，带占位符的下拉列表，独立自动完成等。
Framework7 - Picker
描述 (Description)
Picker看起来像iOS原生选择器，它是一个功能强大的组件，允许您从列表中选择任何值，也用于创建自定义重叠选择器。 您可以将Picker用作内联组件或叠加层。 叠加选择器将自动转换为平板电脑上的Popover（iPad）。
使用以下App的方法，您可以创建和初始化JavaScript方法 -
myApp.picker(parameters)
其中parameters是必需对象，用于初始化选择器实例，它是必需的方法。
选择器参数
下表指定了拣货员中的可用参数 -
| S.No | 参数和描述 | 类型 | 默认 |
|---|---|---|---|
| 1 | container 带有CSS选择器或HTMLElement的字符串，用于为内联选择器生成Picker HTML。 | 字符串或HTMLElement | - |
| 2 | input 相关的input元素与字符串一起放置CSS选择器或HTMLElement。 | 字符串或HTMLElement | - |
| 3 | scrollToInput 无论何时打开选择器，它都用于滚动输入的视口（页面内容）。 | boolean | true |
| 4 | inputReadOnly 用于在指定输入上设置“readonly”属性。 | boolean | true |
| 5 | convertToPopover 它用于在iPad等大屏幕上将选择器模式转换为Popover。 | boolean | true |
| 6 | onlyOnPopover 您可以通过启用它来打开Popover中的选择器。 | boolean | true |
| 7 | cssClass 要选择模态，您可以使用其他CSS类名。 | string | - |
| 8 | closeByOutsideClick 您可以通过启用方法单击选择器或输入元素外部来关闭选取器。 | boolean | false |
| 9 | toolbar 它用于启用选取器模式工具栏。 | boolean | true |
| 10 | toolbarCloseText 用于完成/关闭工具栏按钮。 | string | 'Done' |
| 11 | toolbarTemplate 它是工具栏HTML模板，默认情况下它是带有以下模板的HTML字符串 - | string | - |
特定的选择器参数
下表列出了可用的特定选择器参数 -
| S.No | 参数和描述 | 类型 | 默认 |
|---|---|---|---|
| 1 | rotateEffect 它可以在拾取器中实现3D旋转效果。 | boolean | false |
| 2 | momentumRatio 当您在快速触摸和移动后释放拾取器时，它会产生更多动量。 | number | 7 |
| 3 | updateValuesOnMomentum 用于在动量期间更新拣货员和输入值。 | boolean | false |
| 4 | updateValuesOnTouchmove 用于在触摸移动期间更新拾取器和输入值。 | boolean | true |
| 5 | value 数组具有其初始值，每个数组项也表示相关列的值。 | array | - |
| 6 | formatValue 该函数用于格式化输入值，它应返回新的/格式化的字符串值。 values和displayValues是相关列的数组。 | function (p, values, displayValues) | - |
| 7 | cols 每个数组项表示具有列参数的对象。 | array | - |
选择器参数回调
下表显示了选择器中可用的回调函数列表 -
| S.No | 回调和描述 | 类型 | 默认 |
|---|---|---|---|
| 1 | onChange 每当values and displayValues值改变且values and displayValues是相关列的数组时，将执行回调函数。 | function (p, values, displayValues) | - |
| 2 | onOpen 无论何时打开选择器，都将执行回调函数。 | function (p) | - |
| 3 | onClose 只要选择器关闭，就会执行回调函数。 | function (p) | - |
列参数
在配置Picker时，我们需要传递cols参数。 它表示为数组，其中每个项目都是具有列参数的对象 -
| S.No | 参数和描述 | 类型 | 默认 |
|---|---|---|---|
| 1 | values 您可以使用数组指定字符串列值。 | array | - |
| 2 | displayValues 它具有带字符串列值的数组，它将显示values参数的values ，如果未指定。 | array | - |
| 3 | cssClass 用于在列HTML容器上设置的CSS class名。 | string | - |
| 4 | textAlign 它用于设置列值的文本对齐方式，可以是"left", "center" or "right" 。 | string | - |
| 5 | width 默认情况下，自动计算宽度。 如果需要使用应该在px相关列来修复选择器中的列宽。 | number | - |
| 6 | divider 它用于应该是可视分割器的列，它没有任何值。 | boolean | false |
| 7 | content 它用于指定divider-column (divider:true)和列的内容。 | string | - |
列回调参数
| S.No | 回调和描述 | 类型 | 默认 |
|---|---|---|---|
| 1 | onChange 每当列值发生变化时，将执行回调函数。 value and displayValue表示当前列value and displayValue 。 | function (p, value, displayValue) | - |
选择器属性
Picker变量有许多属性，如下表所示 -
| S.No | 属性和描述 |
|---|---|
| 1 | myPicker.params 您可以使用object初始化传递的参数。 |
| 2 | myPicker.value 每列的选定值由项数组表示。 |
| 3 | myPicker.displayValue 每列的选定显示值由项数组表示。 |
| 4 | myPicker.opened 打开选择器时，它将设置为true值。 |
| 5 | myPicker.inline 当选择器是内联时，它设置为true值。 |
| 6 | myPicker.cols Picker列有自己的方法和属性。 |
| 7 | myPicker.container Dom7实例用于HTML容器。 |
选择方法
picker变量有一些有用的方法，如下表所示 -
| S.No | 方法和描述 |
|---|---|
| 1 | myPicker.setValue(values, duration) 用于设置新的选择器值。 值位于数组中，其中每个项表示每列的value 。 duration - 以ms为单位的转换持续时间。 |
| 2 | myPicker.open() 用于打开Picker。 |
| 3 | myPicker.close() 用于关闭Picker。 |
| 4 | myPicker.destroy() 用于销毁Picker实例并删除所有事件。 |
列属性
myPicker.cols数组中的每一列也都有自己的有用属性，如下表所示 -
//Get first column
var col = myPicker.cols[0];
| S.No | 属性和描述 |
|---|---|
| 1 | col.container 您可以使用列HTML容器创建实例。 |
| 2 | col.items 您可以使用列项HTML元素创建实例。 |
| 3 | col.value 用于选择当前列值。 |
| 4 | col.displayValue 用于选择显示的当前列值。 |
| 5 | col.activeIndex 给出当前索引号，这是选定/活动项。 |
列方法
有用的列方法如下表所示 -
| S.No | 方法和描述 |
|---|---|
| 1 | col.setValue(value, duration) 用于为当前列设置新值。 该value必须是新值， duration是以ms为单位的转换持续时间。 |
| 2 | col.replaceValues(values, displayValues) 用于将列值和displayValues替换为新值。 |
每当您将Picker初始化为内联选择器时，它用于从其HTML容器访问Picker的实例。
var myPicker = $$('.picker-inline')[0].f7Picker;
下表中指定了不同类型的拣货员 -
| S.No | 选项卡类型和描述 |
|---|---|
| 1 | Picker With Single Value 它是一个功能强大的组件，允许您从列表中选择任何值。 |
| 2 | 两个值和3D旋转效果 在拾取器中，您可以使用3D旋转效果。 |
| 3 | Dependent Values 值与指定元素相互依赖。 |
| 4 | 自定义工具栏 您可以在单个页面上使用一个或多个选择器进行自定义。 |
| 5 | 内联选择器/日期时间 您可以在内联选择器中选择多个值。类似日期的date, month, year和时间包括hours, minutes, seconds. |
Framework7 - Calendar
描述 (Description)
Calendar组件允许您轻松处理日期，并可用作内联或叠加组件。 叠加日历将自动转换为平板电脑上的弹出框。
只能使用JavaScript创建和初始化日历。 您需要使用相关App的方法，如下所示 -
myApp.calendar(parameters) - 此方法返回初始化的日历实例。 它接受一个object作为参数。
下表显示了Framework7中的日历用法 -
| S.No | 日历用法和说明 |
|---|---|
| 1 | Calendar Parameters Framework7提供了一个与日历一起使用的参数列表。 |
| 2 | Calendar Methods & Properties 初始化日历后，您将获得初始化的实例变量以使用日历方法和属性。 |
| 3 | Access to Calendar's Instance 将日历初始化为内联时，可以从其HTML容器访问日历实例。 |
Framework7 - Refresh
描述 (Description)
它是一个特殊的组件，用于通过拉取它来刷新（重新加载）页面内容。
以下代码显示了如何刷新页面内容 -
<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所必需的。
pull-to-refresh-layer - 它是一个隐藏层，用于pull to refresh视觉元素，它只是一个预加载器和一个箭头。
data-ptr-distance = "55" - 这是一个附加属性，允许您设置自定义“拉到刷新”触发距离，其默认值为44px。
拉动刷新事件
在“Pull to Refresh”中，有一些JavaScript事件，如下表所示 -
| S.No | 活动和描述 | 目标 |
|---|---|---|
| 1 | pullstart 每当您开始提取内容时，它都会被触发。 | 拉动刷新内容。 |
| 2 | pullmove 当您要刷新内容时会触发它。 | 拉动刷新内容。 |
| 3 | pullend 每当您释放pull以刷新内容时，它都会被触发。 | 拉动刷新内容。 |
| 4 | refresh 当刷新进入"refreshing"状态时，将触发此事件。 | 拉动刷新内容。 |
| 5 | refreshdone 它将在刷新后触发并返回初始状态。 这将在调用pullToRefreshDone方法后完成。 | 拉动刷新内容。 |
有一些App的方法可以与Pull to Refresh一起使用。
| S.No | 应用程序的方法和描述 |
|---|---|
| 1 | myApp.pullToRefreshDone(ptrContent) 它用于重置pull-to-refresh内容。 |
| 2 | myApp.pullToRefreshTrigger(ptrContent) 它用于触发刷新指定的pull to refresh content 。 |
| 3 | myApp.destroyPullToRefresh(ptrContent) 它用于destroy/disable pull to刷新指定的pull to refresh content 。 |
| 4 | myApp.initPullToRefresh(ptrContent) 它用于initialize/enable pull to refresh content 。 |
其中ptrContent用于HTMLElement或string拉到刷新内容以重置/触发或禁用/启用。
例子 (Example)
以下示例演示了如何使用刷新组件来启动页面内容的刷新 -
<!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>
输出 (Output)
让我们执行以下步骤，看看上面给出的代码是如何工作的 -
将上面给出的HTML代码保存为服务器根文件夹中的pull_to_refresh.html文件。
以http://localhost/pull_to_refresh.html打开此HTML文件，输出显示如下。
当用户下拉时，页面将刷新内容。
Framework7 - Infinite Scroll
描述 (Description)
无限滚动允许您加载其他内容，并在页面接近底部时执行所需的操作。
以下HTML布局显示无限滚动 -
<div class = "page">
<div class = "page-content infinite-scroll" data-distance = "100">
...
</div>
</div>
上面的布局包含以下类 -
page-content infinite-scroll - 用于无限滚动容器。
data-distance - 此属性允许您配置从页面底部（以px为单位）到触发无限滚动事件的距离，其默认值为50 px。
如果你想在页面顶部使用无限滚动，你需要在"page-content"添加额外的"infinite-scroll-top"类 -
<div class = "page">
<div class = "page-content infinite-scroll infinite-scroll-top">
...
</div>
</div>
无限滚动事件
infinite - 用于在页面滚动到达底部指定距离时触发。 它将是div class = "page-content infinite-scroll" 。
有两种App的方法可以与无限滚动容器一起使用 -
要将无限滚动事件侦听器添加到指定的HTML容器，请使用以下方法 -
myApp.attachInfiniteScroll(container)
您可以使用以下方法从指定的HTML容器中删除无限滚动事件侦听器 -
myApp.detachInfiniteScroll(container)
where parameters是必需的选项用作HTMLElement或string用于无限滚动容器。
例子 (Example)
以下示例演示了当页面滚动接近底部时加载其他内容的无限滚动 -
<!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>
输出 (Output)
让我们执行以下步骤，看看上面给出的代码是如何工作的 -
将上面给出的HTML代码保存为服务器根文件夹中的infinite_scroll.html文件。
以http://localhost/infinite_scroll.html打开此HTML文件，输出显示如下。
该示例允许在页面滚动到达底部的指定距离时加载其他内容。
Framework7 - Messages
描述 (Description)
消息是Framework7的组件，它提供应用程序中注释和消息系统的可视化。
消息布局
framework7具有以下消息布局结构 -
<div class = "page">
<div class = "page-content messages-content">
<div class = "messages">
<!-- Defines the date stamp -->
<div class = "messages-date">Monday, Apr 26 <span>10:30</span></div>
<!-- Displays the sent message and by default, it will be in green color on right side -->
<div class = "message message-sent">
<!-- Define the text with bubble type -->
<div class = "message-text">Hello</div>
</div>
<!-- Displays the another sent message -->
<div class = "message message-sent">
<!-- Define the text with bubble type -->
<div class = "message-text">How are you?</div>
</div>
<!-- Displays the received message and by default, it will be in grey color on left side -->
<div class = "message message-with-avatar message-received">
<!-- Provides sender name -->
<div class = "message-name">Smith</div>
<!-- Define the text with bubble type -->
<div class = "message-text">I am fine, thanks</div>
<!-- Defines the another date stamp -->
<div class = "messages-date">Tuesday, April 28 <span>11:16</span></div>
</div>
</div>
</div>
布局包含不同领域的以下类 -
消息页面布局
下表显示了带有描述的消息页面布局类。
| S.No | 课程和描述 |
|---|---|
| 1 | messages-content 它是“页面内容”中添加的必需附加类，用于消息包装器。 |
| 2 | messages 它是消息气泡的必需元素。 |
| 3 | messages-date 它使用日期戳容器显示发送或接收的消息的日期和时间。 |
| 4 | message 这是一条要显示的消息。 |
单个消息内部零件
下表显示了带描述的简单消息内部部分的类。
| S.No | 课程和描述 |
|---|---|
| 1 | message-name 它提供发件人姓名。 |
| 2 | message-text 使用气泡类型定义文本。 |
| 3 | message-avatar 它指定发件人头像。 |
| 4 | message-label 它指定气泡下方的文本标签。 |
单个消息容器的其他类
下表显示了单个消息容器描述的其他类。
| S.No | 课程和描述 |
|---|---|
| 1 | message-sent 它指定消息是由用户发送的，并在右侧以绿色背景颜色显示。 |
| 2 | message-received 它用于显示单个消息，指示消息是由用户接收并保留在左侧，背景为灰色。 |
| 3 | message-pic 它是使用单个消息显示图像的附加类。 |
| 4 | message-with-avatar 它是用于显示具有化身的单个消息（接收或发送）的附加类。 |
| 5 | message-with-tail 您可以为单个消息（已接收或已发送）添加气泡尾部。 |
单个消息的其他可用类
下表显示了包含说明的单个邮件的可用类。
| S.No | 课程和描述 |
|---|---|
| 1 | message-hide-name 它是用于隐藏单个消息（已接收或已发送）的消息名称的附加类。 |
| 2 | message-hide-avatar 它是用于隐藏单个消息（接收或发送）的消息化身的附加类。 |
| 3 | message-hide-label 它是用于隐藏单个消息（已接收或已发送）的消息标签的附加类。 |
| 4 | message-last 您可以使用此类来指示一个发件人在当前会话中针对单个消息（已接收或已发送）的最后收到或发送的消息。 |
| 5 | message-first 您可以使用此类来指示一个发件人在当前会话中针对单个消息（已接收或已发送）首先收到或首次发送的消息。 |
使用JavaScript初始化消息
您可以使用以下方法使用JavaScript初始化消息 -
myApp.messages(messagesContainer, parameters)
该方法有两种选择 -
messagesContainer - 它是一个必需的HTML元素或字符串，包含消息容器HTML元素。
parameters - 它指定带有消息参数的对象。
消息参数
下表显示了带描述的消息的参数。
| S.No | 参数和描述 | 类型 | 默认 |
|---|---|---|---|
| 1 | autoLayout 它通过启用它为每条消息添加了额外的必需类。 | boolean | true |
| 2 | newMessagesFirst 您可以在顶部显示消息，而不是通过启用它在底部显示。 | boolean | false |
| 3 | messages 它显示一组消息，其中每条消息都应表示为带有消息参数的对象。 | array | - |
| 4 | messageTemplate 它显示单个消息模板。 | string | - |
消息属性
下表显示了带描述的消息的属性。
| S.No | 财产和描述 |
|---|---|
| 1 | myMessages.params 您可以使用object初始化传递的参数。 |
| 2 | myMessages.container 使用消息栏HTML容器定义DOM7元素。 |
消息方法
下表显示了带描述的消息的方法。
| S.No | 方法和描述 |
|---|---|
| 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(); 它用于销毁消息。 |
单个消息参数
下表显示了包含说明的单个邮件的参数。
| S.No | 参数和描述 | 类型 | 默认 |
|---|---|---|---|
| 1 | text 它定义了消息文本，它可以是HTML字符串。 | string | - |
| 2 | name 它指定发件人名称。 | string | - |
| 3 | avatar 它指定发件人头像URL字符串。 | string | - |
| 4 | time 它指定消息的时间字符串，如'9:45 AM'，'18:35'。 | string | - |
| 5 | type 它提供的消息类型是否可以发送或接收消息。 | string | sent |
| 6 | label 它定义了消息的标签。 | string | - |
| 7 | day 它给出了消息的日期字符串，如'sunday'，'monday'，'yesterday'等。 | string | - |
使用HTML初始化消息
您可以使用HTML而不使用JavaScript来初始化消息，方法是使用附加的messages-init类messages并使用data- attributes传递所需的参数，如下面的代码片段所示 -
...
<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>
...
例子 (Example)
以下示例演示了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>
输出 (Output)
让我们执行以下步骤，看看上面给出的代码是如何工作的 -
将上面给出的HTML代码保存为服务器根文件夹中的messages.html文件。
以http://localhost/messages.html打开此HTML文件，输出显示如下。
当您在消息框中键入消息并单击“发送”按钮时，它会指定您的消息已发送并在右侧以绿色背景显示。
您收到的消息显示在左侧，带有灰色背景和发件人姓名。
Framework7 - Message Bar
描述 (Description)
Framework7提供了特殊的可调整大小的工具栏，用于处理应用程序中的消息传递系统
以下代码显示消息栏布局 -
<div clas = "toolbar messagebar">
<div clas = "toolbar-inner">
<textarea placeholder = "Message"></textarea>
<a href = "#" clas = "link">Send</a>
</div>
</div>
在消息栏中，“页面”的内部非常重要，位于“消息内容”的右侧 -
<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 - 用于设置textarea的最大高度，并根据文本的大小调整大小。 参数类型为number ，默认值为null 。
消息栏属性
下表显示了消息栏属性 -
| S.No | 属性和描述 |
|---|---|
| 1 | myMessagebar.params 您可以使用传递的初始化参数指定对象。 |
| 2 | myMessagebar.container 您可以使用messagebar容器HTML元素指定dom7元素。 |
| 3 | myMessagebar.textarea 您可以使用messagebar textarea HTML元素指定dom7元素。 |
消息栏方法
下表显示了消息栏方法 -
| S.No | 方法和描述 |
|---|---|
| 1 | myMessagebar.value(newValue); 如果未指定newValue ，它将设置messagebar textarea值/文本并返回messagebar textarea值。 |
| 2 | myMessagebar.clear(); 它清除textarea并更新/重置大小。 |
| 3 | myMessagebar.destroy(); 它会破坏消息栏实例。 |
使用HTML初始化消息栏
您可以通过将messagebar-init类添加到.messagebar来使用不使用JavaScript方法和属性的HTML来初始化消息.messagebar并且可以使用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>
访问Messagebar的实例
如果使用HTML初始化消息栏实例，则可以访问消息栏实例; 它是通过使用其容器元素的f7 Message bar属性实现的。
var myMessagebar = $$('.messagebar')[0].f7Messagebar;
// Now you can use it
myMessagebar.value('Hello world');
您可以看到Messagebar的示例，该link中对此进行了解释
Framework7 - Notifications
描述 (Description)
通知用于显示所需的消息，这些消息看起来像推送（或本地）iOS通知。
下表详细说明了通知的使用 -
| S.No | 通知用法和说明 |
|---|---|
| 1 | 通知JavaScript API 也可以使用相关的app方法使用JavaScript添加或关闭通知。 |
| 2 | Notifications Layout 将使用JavaScript添加Framework7通知。 |
| 3 | 示例iOS Framework7允许您在iOS布局中使用不同类型的通知。 |
| 4 | Example Material Framework7通知也可用于材质布局。 |
Framework7 - Lazy Load
描述 (Description)
延迟加载会延迟给定页面上的图像加载过程。 延迟加载可提高滚动性能，加快页面加载并节省流量。
延迟加载元素和图像必须位于可滚动的
内才能正常工作。
下表演示了延迟加载的使用 -
| S.No | 延迟加载使用和描述 |
|---|---|
| 1 | Usage 延迟加载可以应用于图像，背景图像和淡入效果。 |
| 2 | Init懒惰手动加载 初始化页面后，如果手动添加延迟加载图像，则延迟加载将不起作用，您需要使用方法来初始化它。 |
可以通过在惰性图像/元素上使用lazy事件手动触发图像加载，如下所示 -
$$('img.lazy').trigger('lazy');
$$('div.lazy').trigger('lazy');
例子 (Example)
以下示例演示了在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>
输出 (Output)
让我们执行以下步骤，看看上面给出的代码是如何工作的 -
将上面给出的HTML代码保存为服务器根文件夹中的framework7_lazy_load.html文件。
以http://localhost/framework7_lazy_load.html打开此HTML文件，输出显示如下。
该示例指定图像的延迟加载，当您向下滚动图像时，图像将加载到页面上。
Framework7 - Color Themes
描述 (Description)
Framework7为您的应用程序提供不同的颜色主题。
颜色主题提供了不同类型的主题颜色，用于平滑地处理应用程序，如下表所示 -
| S.No | 主题类型和描述 |
|---|---|
| 1 | iOS主题颜色 您可以为应用程序使用10种不同的默认iOS颜色主题。 |
| 2 | Material Theme Colors Framework7为应用程序提供了22种不同的默认材质颜色主题。 |
应用色彩主题
Framework7允许您通过将theme-[color]类用于父元素，在不同的元素（如页面，列表块，导航栏，按钮行等）上应用颜色主题。
例子 (Example)
...
</body>
<div class = "page theme-gray">
...
</div>
<div class = "list-block theme-blue">
...
</div>
<div class = "navbar theme-green">
...
</div>
<div class = "buttons-row theme-red">
...
</div>
布局主题
您可以使用white和dark两个主题为您的应用程序使用默认布局主题。 可以通过将layout-[theme]类用于父元素来应用layout-[theme] 。
例子 (Example)
...
</body>
<div class = "navbar layout-white">
...
</div>
<div class = "buttons-row layout-dark">
...
</div>
助手课程
Framework7提供了额外的帮助程序类，可以在外部使用或不使用主题，如下所示 -
color-[color] - 可用于更改块的文本颜色或按钮，链接，图标等的颜色。
bg-[color] - 它在块或元素上设置预定义的背景颜色。
border-[color] - 它在块或元素上设置预定义的边框颜色。
Framework7 - Hairlines
描述 (Description)
细线是一个使用边框类在图像周围添加1px边框的类。 随着1.x的发布，hairlines修改了使用:after和:before伪元素而不是使用CSS边框。
Hairlines包含以下规则 -
:after - 此伪元素用于bottom和right线。
:before - 此伪元素用于top和left细线。
以下代码段显示了使用:after元素。
.navbar:after {
background-color: red;
}
以下代码段删除了底部的细线工具栏 -
.navbar:after {
display:none;
}
.toolbar:before {
display:none;
}
"no-border" class
将使用no-border类删除细线，并在Navbar, toolbar, card及其元素上支持。
以下代码用于从导航栏中删除细线 -
<div class = "navbar no-border">
...
</div>
Framework7 - Templates Overview
描述 (Description)
Template7是一个轻量级，移动优先的JavaScript引擎，它将Ajax和动态页面表示为具有指定上下文的Template7模板，不需要任何其他脚本。 Template7与Framework7相关联，作为默认的轻量级模板引擎，可以更快地为应用程序运行。
表现(Performance)
将字符串编译为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安装它 -
OR
bower install template7
Framework7 - Auto Compilation
描述 (Description)
在Template7中，您可以通过在
以下代码显示自动编译布局 -
<script type = "text/template7" id = "myTemplate">
<p>Hello, my name is {{name}} and i am {{age}} years old</p>
</script>
您可以使用以下属性初始化自动编译 -
type = "text/template7" - 用于告诉Template7自动编译，它是必需的脚本类型。
id = "myTemplate" - 模板可通过id访问，它是必需的模板ID。
对于自动编译，您需要通过传递以下参数来启用应用程序初始化 -
var myApp = new Framework7 ({
//It is used to compile templates on app init in Framework7
precompileTemplates: true,
});
Template7.templates/myApp.templates
初始化应用程序后，可以作为Template7.templates属性访问自动编译的模板。 它也称为myApp.templates ，其中myApp是应用程序的初始化实例。
您可以在我们的index.html文件中使用以下模板 -
<script type = "text/template7" id = "personTemplate">
<p>Hello, my name is {{name}} and i am {{age}} years old</p>
<p>I work as {{position}} at {{company}}</p>
</script>
<script type = "text/template7" id = "carTemplate">
<p>I have a great car, it is {{vendor}} {{model}}, made in {{year}} year.</p>
<p>It has {{power}} hp engine with {{speed}} km/h maximum speed.</p>
</script>
您还可以after应用初始化after使用JavaScript访问模板 -
var myApp = new Framework7 ({
//Tell Framework7 to compile templates on app init
precompileTemplates: true
});
// Render person template to HTML, its template is already compiled and accessible as
//Template7.templates.personTemplate
var personHTML = Template7.templates.personTemplate ({
name: 'King Amit',
age: 27,
position: 'Developer',
company: 'AngularJs'
});
// Compile car template to HTML, its template is already compiled and accessible as
//Template7.templates.carTemplate
var carHTML = Template7.templates.carTemplate({
vendor: 'Honda',
model: 'city',
power: 1200hp,
speed: 300
});
Framework7 - Template7 Pages
描述 (Description)
Template7是一个移动优先的JavaScript模板引擎，带有handlebars.js就像语法一样。 它是Framework7中的超轻量级和超快速的默认模板引擎。
首先，我们需要在应用程序初始化时传递以下参数，将所有Ajax和动态页面呈现为Template7模板 -
var myApp = new Framework7 ({
template7Pages: true // enable Template7 rendering for Ajax and Dynamic pages
});
| S.No | Template7 Pages用法和描述 |
|---|---|
| 1 | 模板/页面数据 您可以通过在初始化App时发送的template7Data参数中指定所有页面数据来传递特定页面所需的数据/上下文。 |
| 2 | 传递自定义上下文 Framework7允许您将自定义上下文传递给任何动态页面或任何加载的Ajax。 |
| 3 | Load Templates Directly 您可以在动态页面上渲染和加载模板。 |
| 4 | URL Query 如果您使用Template7来呈现Ajax页面，则其上下文将始终使用特殊属性url_query进行扩展。 |
例子 (Example)
以下示例提供了链接，当您单击这些链接时，这些链接显示用户信息，例如用户详细信息，用户喜欢等。
的index.html
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>Framework7</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "center sliding">Template7 Pages</div>
</div>
</div>
<div class = "pages navbar-through toolbar-through">
<div data-page = "index" class = "page">
<div class = "page-content">
<div class = "list-block">
<ul>
<li>
//plain data objects allow to pass custom context to loaded page using 'data-context-name' attribute
<a href = "#" data-template = "about" data-context-name = "about" class = "item-link item-content">
<div class = "item-inner">
//provides link as 'About'
<div class = "item-title">About</div>
</div>
</a>
</li>
<li>
//a context name for this link we pass context path from template7Data root
<a href = "/framework7/src/likes.html" class = "item-link item-content">
<div class = "item-inner">
//provides link as 'Likes'
<div class = "item-title">Likes</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script type = "text/template7" id = "about">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left sliding">
<a href = "#" class = "back link"> <i class = "icon icon-back"></i><span>Back</span></a>
</div>
<div class = "center sliding">About Me</div>
<div class = "right">
<a href = "#" class = "link icon-only open-panel"> <i class = "icon icon-bars"></i></a>
</div>
</div>
</div>
<div class = "pages">
<div data-page = "about" class = "page">
<div class = "page-content">
<div class = "content-block">
<div class = "content-block-inner">
//displays the details of the user by using the 'my-app.js' file
<p>Hello, i am <b>{{firstname}} {{lastname}}</b>,
<b>{{age}}</b> years old and working as
<b>{{position}}</b> at <b>{{company}}</b>.</p>
</div>
</div>
</div>
</div>
</div>
</script>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script type = "text/javascript"
src = "/framework7/src/js/my-app.js">
</script>
</body>
</html>
my-app.js
// Initialize your app
var myApp = new Framework7 ({
animateNavBackIcon: true,
// Enable templates auto precompilation
precompileTemplates: true,
// Enabled rendering pages using Template7
template7Pages: true,
// Specify Template7 data for pages
template7Data: {
//provides the url for different page with data-page = "likes"
'url:likes.html': {
likes: [
{
title: 'Nelson Mandela',
description: 'Champion of Freedom'
},
{
title: 'Srinivasa Ramanujan',
description: 'The Man Who Knew Infinity'
},
{
title: 'James Cameron',
description: 'Famous Filmmaker'
}
]
},
about: {
firstname: 'William ',
lastname: 'Root',
age: 27,
position: 'Developer',
company: 'TechShell',
}
}
});
// Add main View
var mainView = myApp.addView('.view-main', {
// Enable dynamic Navbar
dynamicNavbar: true
});
likes.html
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left sliding">
<a href = "#" class = "back link"> <i class = "icon icon-back"></i><span>Back</span></a>
</div>
<div class = "center sliding">Likes</div>
<div class = "right">
<a href = "#" class = "link icon-only open-panel"> <i class = "icon icon-bars"></i></a>
</div>
</div>
</div>
<div class = "pages">
<div data-page = "likes" class = "page">
<div class = "page-content">
<div class = "content-block-title">My Likes</div>
<div class = "list-block media-list">
//iterate through likes
<ul>
{{#each likes}}
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title-row">
//displays the title and description by using the 'my-app.js' file
<div class = "item-title">{{title}}</div>
</div>
<div class = "item-subtitle">{{description}}</div>
</div>
</li>
{{/each}}
</ul>
</div>
</div>
</div>
</div>
输出 (Output)
让我们执行以下步骤，看看上面给出的代码是如何工作的 -
将上面给出的HTML代码保存为服务器根文件夹中的index.html文件。
将此HTML文件打开为http://localhost/index.html，输出显示如下。
该示例提供了链接，当您单击这些链接时，这些链接显示用户信息，例如用户详细信息，用户喜欢的用户信息。
Framework7 - Active State
描述 (Description)
点击链接和按钮时，它们会突出显示。 这是由Framework7中的active state完成的。
- 它的行为类似于原生应用，而不像网络应用。
- 它有一个内置的Fast clicks库，应该启用它。
- active-state类与CSS :active选择器相同。
- 通过将watch-active-state类添加到<html>元素来启用watch-active-state 。
以下代码用于CSS样式中的活动状态 -
/* Usual state */
.my-button {
color: red;
}
/* Active/tapped state */
.my-button.active-state {
color: blue;
}
以下代码显示了禁用活动状态或快速点击时的后备兼容性 -
/* Usual state */
.my-button {
color: red;
}
/* Active/tapped state */
.my-button.active-state {
color: blue;
}
/* Fallback, when active state is disabled */
html:not(.watch-active-state) .my-button:active {
color: blue;
}
Framework7 - Tap Hold Event
描述 (Description)
Tap hold事件用于在持续和完成触摸事件之后触发（启用），因此，它被称为tap hold事件。 Tab Hold是一个内置的Fast Clicks库。
以下参数用于默认禁用或启用和配置 -
| S.No | 参数和描述 | 类型 | 默认 |
|---|---|---|---|
| 1 | tapHold 在设置为true时启用点按保留事件。 | boolean | false |
| 2 | tapHoldDelay 它指定在触发目标元素上的taphold事件之前保持敲击的持续时间。 | number | 750 |
| 3 | tapHoldPreventClicks 单击事件后，不会触发点按保持事件。 | boolean | true |
以下代码用于启用点击保持事件 -
var myApp = new Framework7 ({
tapHold: true //enable tap hold events
});
var $$ = Dom7;
$$('.some-link').on('taphold', function () {
myApp.alert('Tap hold fired!');
});
Framework7 - Touch Ripple
描述 (Description)
Touch Ripple是仅在Framework7材质主题中受支持的效果。 默认情况下，它在材质主题中启用，您可以使用materialRipple:false参数禁用它。
波纹元素
您可以启用ripple元素以匹配某些CSS选择器，例如 -
- ripple
- a.link
- a.item-link
- .button
- .tab-link
- .label-radio
- .label-checkbox等
这些在materialRippleElements参数中指定。 您需要启用touch波纹，将元素的选择器添加到materialRippleElements参数以使用波纹效果，或者只使用ripple类。
波纹波色
通过将ripple-[color]类添加到元素，可以在元素上更改纹波的ripple-[color] 。
例如 -
<a href = "#" class = "button ripple-orange">Ripple Button</a>
或者您可以使用CSS定义波纹波颜色，如下所示 -
.button .ripple-wave {
background-color: #FFFF00;
}
禁用纹波元素
您可以通过向这些元素添加no-ripple类来禁用某些指定元素no-ripple 。 例如 -
<a href = "#" class = "button no-ripple">Ripple Button</a>
