- Framework7 教程
- Framework7 - 首頁
- Framework7 - 概述
- Framework7 - 環境
- Framework7 元件
- Framework7 - 佈局
- Framework7 - 導航欄
- Framework7 - 工具欄
- Framework7 - 搜尋欄
- Framework7 - 狀態列
- Framework7 - 側邊面板
- Framework7 - 內容塊
- Framework7 - 網格佈局
- Framework7 - 覆蓋層
- Framework7 - 預載入器
- Framework7 - 進度條
- Framework7 - 列表檢視
- Framework7 - 手風琴
- Framework7 - 卡片
- Framework7 - 晶片
- Framework7 - 按鈕
- Framework7 - 操作按鈕
- Framework7 - 表單
- Framework7 - 標籤頁
- Framework7 - Swiper 滑塊
- Framework7 - 照片瀏覽器
- Framework7 - 自動完成
- Framework7 - 選擇器
- Framework7 - 日曆
- Framework7 - 重新整理
- Framework7 - 無限滾動
- Framework7 - 訊息
- Framework7 - 訊息欄
- Framework7 - 通知
- Framework7 - 延遲載入
- Framework7 樣式
- Framework7 - 顏色主題
- Framework7 - 分割線
- Framework7 模板
- Framework7 - 模板概述
- Framework7 - 自動編譯
- Framework7 - Template7 頁面
- Framework7 快速點選
- Framework7 - 活動狀態
- Framework7 - 長按事件
- Framework7 - 觸控漣漪
- Framework7 有用資源
- Framework7 快速指南
- Framework7 - 有用資源
- Framework7 - 討論
Framework7 快速指南
Framework7 - 概述
Framework7 是一個免費且開源的移動 HTML 框架。它用於開發混合移動應用或適用於 iOS 和 Android 裝置的 Web 應用。
Framework7 於 2014 年推出。最新版本 1.4.2 於 2016 年 2 月釋出，採用 MIT 許可證。
為什麼要使用 Framework7？
- 開發 iOS 和 Android 應用更容易。
- Framework7 的學習曲線非常平緩。
- 它有很多預先設定好的 widget/元件。
- 它內建了輔助庫。
特性
Framework7 是一個開源且免費使用的框架。
Framework7 具有簡單且熟悉的 jQuery 語法，可以立即上手。
為了控制觸控 UI 的點選延遲，Framework7 內建了 FastClick 庫。
Framework7 具有內建的網格系統佈局，可以響應式地排列元素。
Framework7 透過 靈活的路由 API 動態載入模板中的頁面。
優勢
Framework7 不依賴於任何第三方庫，甚至 DOM 操作也不依賴。相反，它有自己的自定義 DOM7。
Framework7 也可以與 Angular 和 React 框架一起使用。
只要你瞭解 HTML、CSS 和一些基本的 JavaScript，就可以開始建立應用。
它透過 Bower 支援更快的開發。
無需學習即可輕鬆開發 iOS 和 Android 應用。
劣勢
Framework7 僅支援 iOS 和 Android 等平臺。
與 iOS 和 Android 相比，Framework7 框架的線上社群支援較少。
Framework7 - 環境
在本章中，我們將討論如何安裝和設定 Framework7。
您可以透過兩種方式下載 Framework7：
從 Framework7 Github 倉庫 下載
您可以使用 Bower 安裝 Framework7，如下所示：
bower install framework7
成功安裝 Framework7 後，您需要按照以下步驟在您的應用中使用 Framework7：
步驟 1 - 您需要安裝 gulp-cli，以便使用以下命令構建 Framework7 的開發和 dist 版本。
npm install gulp-cli
cli 代表 Gulp 的命令列工具。
步驟 2 - 必須使用以下命令全域性安裝 Gulp。
npm install --global gulp
步驟 3 - 接下來，安裝 NodeJS 包管理器，它安裝 node 程式，使指定和連結依賴項更容易。以下命令用於安裝 npm。
npm install
步驟 4 - 可以使用以下命令構建 Framework7 的開發版本。
npm build
步驟 5 - 構建 Framework7 的開發版本後，使用以下命令從 dist/ 資料夾開始構建應用。
npm dist
步驟 6 - 將您的應用資料夾儲存在伺服器上，並執行以下命令以在應用的頁面之間導航。
gulp server
從 CDN 下載 Framework7 庫
CDN 或內容分發網路是旨在向用戶提供檔案的伺服器網路。如果在網頁中使用 CDN 連結，則將託管檔案的工作從自己的伺服器轉移到一系列外部伺服器。這也提供了一個優勢，即如果您的網頁訪問者已經從同一個 CDN 下載了 Framework7 的副本，則無需重新下載。您可以將以下 CDN 檔案包含到 HTML 文件中。
以下 CDN 用於 iOS 應用佈局：
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
它用於將 Framework7 iOS CSS 庫包含到您的應用中。
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
它用於將 Framework7 iOS 相關的顏色樣式包含到您的應用中。
以下 CDN 用於 Android/Material 應用佈局：
<script src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
它用於將 Framework7 JS 庫包含到您的應用中。
<script src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.min.css"></script>
它用於將 Framework7 Material 樣式包含到您的應用中。
在本教程中，我們使用庫的 CDN 版本。我們使用 AMPPS（AMPPS 是一個 WAMP、MAMP 和 LAMP 堆疊，包含 Apache、MySQL、MongoDB、PHP、Perl 和 Python）伺服器來執行所有示例。
示例
以下示例演示了在 Framework7 中使用簡單應用，當您點選導航欄時，它將顯示帶有自定義訊息的警告框。
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>My App</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
</head>
<body>
//you can control the background color of the Status bar
<div class = "statusbar-overlay"></div>
<div class = "panel-overlay"></div>
<div class = "panel panel-right panel-reveal">
<div class = "content-block">
<p>Contents goes here...</p>
</div>
</div>
<div class = "views">
<div class = "view view-main">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "center sliding">My App</div>
<div class = "right">
<a href = "#" class = "link icon-only open-panel">
<i class = "icon icon-bars"></i>
</a>
</div>
</div>
</div>
<div class = "pages navbar-through toolbar-through">
<div data-page = "index" class = "page">
<div class = "page-content">
<p>This is simple application...</p>
<div class = "list-block">
<ul>
<li>
<a href = "envirmnt_about.html" class = "">
<div class = "item-content">
<div class = "item-inner">
<div class = "item-title">Blog</div>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class = "toolbar">
<div class = "toolbar-inner">
<a href = "#" class = "link">First Link</a>
<a href = "#" class = "link">Second Link</a>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
// here initialize the app
var myApp = new Framework7();
// If your using custom DOM library, then save it to $$ variable
var $$ = Dom7;
// Add the view
var mainView = myApp.addView('.view-main', {
// enable the dynamic navbar for this view:
dynamicNavbar: true
});
//use the 'pageInit' event handler for all pages
$$(document).on('pageInit', function (e) {
//get page data from event data
var page = e.detail.page;
if (page.name === 'blog') {
// you will get below message in alert box when page with data-page attribute is equal to "about"
myApp.alert('Here its your About page');
}
})
</script>
</body>
</html>
接下來，再建立一個 HTML 頁面，即 envirmnt_about.html，如下所示：
envirmnt_about.html
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left">
<a href = "#" class = "back link">
<i class = "icon icon-back"></i>
<span>Back</span>
</a>
</div>
<div class = "center sliding">My Blog</div>
<div class = "right">
<a href = "#" class = "link icon-only open-panel">
<i class = "icon icon-bars"></i>
</a>
</div>
</div>
</div>
<div class = "pages">
<div data-page = "blog" class = "page">
<div class = "page-content">
<div class = "content-block">
<h2>My Blog</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
</div>
</div>
</div>
輸出
讓我們執行以下步驟來了解上面給出的程式碼是如何工作的：
將上面的 HTML 程式碼儲存為 framework7_environment.html 檔案，放在伺服器根目錄下。
以 https:///framework7_environment.html 的方式開啟此 HTML 檔案，輸出結果如下所示。
當您點選導航欄時，它將顯示帶有自定義訊息的警告框。
Framework7 - 佈局
描述
Framework7 為您的應用提供了不同型別的佈局。它支援三種類型的導航欄/工具欄佈局：
| 序號 | 佈局型別和描述 |
|---|---|
| 1 | 靜態佈局
靜態佈局是最常使用的佈局型別，包括導航欄和工具欄，可以是可滾動的頁面內容，每個頁面都包含自己的導航欄和工具欄。 |
| 2 | 固定佈局
固定佈局包含其自己的導航欄和工具欄，它們始終可見，無法在頁面上滾動。 |
| 3 | 貫穿佈局
在此佈局中，導航欄和工具欄在單個檢視中的所有頁面上都保持固定。 |
| 4 | 混合佈局
您可以在單個檢視中混合不同型別的佈局。 |
無導航欄/工具欄
如果您不想使用導航欄和工具欄，則不要在頁面/頁面/檢視中包含相應的類（navbar-fixed、navbar-through、toolbar-fixed、toolbar-through）。
Framework7 - 導航欄
描述
在本章中，讓我們學習一下 導航欄。它通常位於螢幕頂部，包含頁面的標題和導航元素。
導航欄由三個部分組成，每個部分都可以包含任何 HTML 內容，但建議您按照以下方式使用它們：
左側 - 用於放置返回 連結 圖示或單個文字連結。
中間 - 用於顯示頁面的標題或標籤連結。
右側 - 此部分類似於 左側 部分。
下表詳細演示了 導航欄 的用法：
| 序號 | 導航欄型別和描述 |
|---|---|
| 1 | 基本導航欄
可以使用 navbar、navbar-inner、left、center 和 right 類建立基本導航欄。 |
| 2 | 帶有連結的導航欄
要在導航欄的 左側 和 右側 部分使用連結，只需新增帶有 link 類的 <a> 標籤即可。 |
| 3 | 多個連結
要使用多個連結，只需在您選擇的部分新增幾個 <a class = "link"> 即可。 |
| 4 | 帶有文字和圖示的連結
可以透過新增圖示的類並用 <span> 元素包裝連結文字，為連結提供圖示和文字。 |
| 5 | 僅帶有圖示的連結
可以透過向連結新增 icon-only 類，為導航欄連結僅提供圖示。 |
| 6 | 相關的應用和檢視方法
在初始化 檢視 時，framework7 允許您使用導航欄可用的方法。 |
| 7 | 自動隱藏導航欄
對於某些不需要導航欄的 Ajax 載入的頁面，可以自動隱藏/顯示導航欄。 |
Framework7 - 工具欄
描述
工具欄透過使用螢幕底部的導航元素輕鬆訪問其他頁面。
您可以透過兩種方式使用工具欄，如表中所述：
工具欄方法
以下可用方法可用於工具欄：
| 序號 | 工具欄方法和描述 |
|---|---|
| 1 | myApp.hideToolbar(toolbar) 它隱藏指定的工具欄。 |
| 2 | myApp.showToolbar(toolbar) 它顯示指定的工具欄。 |
| 3 | view.hideToolbar() 它隱藏檢視中指定的工具欄。 |
| 4 | view.showToolbar() 它顯示檢視中指定的工具欄。 |
示例
以下示例演示了在 Framework7 中使用工具欄佈局。
首先，我們將建立一個名為 toolbar.html 的 HTML 頁面，如下所示：
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>Toolbar Layout</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "center sliding">Toolbar Layout</div>
</div>
</div>
<div class = "pages navbar-through">
<div data-page = "index" class = "page with-subnavbar">
<div class = "page-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse at nibh felis. Nunc consequat diam et tellus tempor gravida.
Donec hendrerit aliquet risus, ut tempor purus dictum sit amet. Aenean
sagittis interdum leo in molestie. Aliquam sodales in diam eu consectetur.
Sed posuere a orci id imperdiet.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse at nibh felis. Nunc consequat diam et tellus tempor gravida.
Donec hendrerit aliquet risus, ut tempor purus dictum sit amet. Aenean
sagittis interdum leo in molestie. Aliquam sodales in diam eu consectetur.
Sed posuere a orci id imperdiet.</p>
</div>
</div>
</div>
<div class = "toolbar">
<div class = "toolbar-inner">
<a href = "#" class = "link">Link 1</a>
<a href = "#" class = "link">Link 2</a>
<a href = "#" class = "link">Link 3</a>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
// here initialize the app
var myApp = new Framework7();
// If your using custom DOM library, then save it to $$ variable
var $$ = Dom7;
// Add the view
var mainView = myApp.addView('.view-main', {
// enable the dynamic navbar for this view
dynamicNavbar: true
});
</script>
</body>
</html>
現在，在自定義 JS 檔案 toolbar.js 中初始化您的應用和檢視。
輸出
讓我們執行以下步驟來了解上面給出的程式碼是如何工作的：
將上面給出的 HTML 程式碼儲存為 toolbar.html 檔案，放在伺服器根目錄下。
以 https:///toolbar.html 的方式開啟此 HTML 檔案，輸出結果如下所示。
Framework7 - 搜尋欄
描述
Framework 7 允許使用 searchbar 類搜尋元素。
搜尋欄引數
| 序號 | 引數和描述 | 型別 | 預設值 |
|---|---|---|---|
| 1 | searchList 它搜尋列表的 CSS 選擇器或 HTML 元素。 |
字串或 HTML 元素 | - |
| 2 | searchIn 您可以搜尋 CSS 選擇器的列表檢視元素，還可以透過傳遞 .item-title、.item-text 類來搜尋元素。 |
字串 | '.item-title' |
| 3 | found 它使用“found”元素搜尋 CSS 選擇器或 HTML 元素。此外，如果沒有指定元素，它將使用 .searchbar-found 元素。 |
字串或 HTML 元素 | - |
| 4 | notfound 它使用“not-found”元素搜尋 CSS 選擇器或 HTML 元素。此外，如果沒有指定元素，它將使用 .searchbar-not-found 元素。 |
字串或 HTML 元素 | - |
| 5 | overlay 它使用“searchbar overlay”元素搜尋 CSS 選擇器或 HTML 元素，如果沒有指定元素，則使用 .searchbar-overlay 元素。 |
字串或 HTML 元素 | - |
| 6 | ignore 您可以使用搜索欄忽略專案的 CSS 選擇器。 |
字串 | '.searchbar-ignore' |
| 7 | customSearch 啟用此引數後，搜尋欄將不會搜尋由 searchList 指定的任何列表塊，並且您可以使用自定義搜尋功能。 |
布林值 | false |
| 8 | removeDiacritics 搜尋元素時，透過啟用此引數刪除變音符號。 |
布林值 | false |
| 9 | hideDividers 如果列表中沒有專案，此引數將隱藏專案分隔符和組標題。 |
布林值 | true |
| 10 | hideGroups 如果在列表檢視組中沒有找到專案，則此引數將隱藏這些組。 |
布林值 | true |
搜尋欄回撥函式
| 序號 | 回撥函式及描述 | 型別 | 預設值 |
|---|---|---|---|
| 1 | onSearch 執行搜尋時，此方法將觸發回撥函式。 |
function (s) | - |
| 2 | onEnable 搜尋欄變為活動狀態時，此方法將觸發回撥函式。 |
function (s) | - |
| 3 | onDisable 搜尋欄變為非活動狀態時，此方法將觸發回撥函式。 |
function (s) | - |
| 4 | onClear 單擊“清除”元素時，此方法將觸發回撥函式。 |
function (s) | - |
搜尋欄屬性
| 序號 | 屬性及描述 |
|---|---|
| 1 | mySearchbar.params 表示使用物件傳遞的初始化引數。 |
| 2 | mySearchbar.query 搜尋當前查詢。 |
| 3 | mySearchbar.searchList 定義搜尋列表塊。 |
| 4 | mySearchbar.container 使用 HTML 元素定義搜尋欄容器。 |
| 5 | mySearchbar.input 使用 HTML 元素定義搜尋欄輸入框。 |
| 6 | mySearchbar.active 定義搜尋欄是啟用還是停用。 |
搜尋欄方法
| 序號 | 方法及描述 |
|---|---|
| 1 | mySearchbar.search(query); 此方法搜尋傳遞的查詢。 |
| 2 | mySearchbar.enable(); 啟用搜索欄。 |
| 3 | mySearchbar.disable(); 禁用搜索欄。 |
| 4 | mySearchbar.clear(); 您可以清除查詢和搜尋結果。 |
| 5 | mySearchbar.destroy(); 銷燬搜尋欄例項。 |
搜尋欄 JavaScript 事件
| 序號 | 事件及描述 | 目標 |
|---|---|---|
| 1 | search 搜尋元素時，可以觸發此事件。 |
<div class="list-block"> |
| 2 | clearSearch 使用者單擊 clearSearch 元素時，將觸發此事件。 |
<div class="list-block"> |
| 3 | enableSearch 搜尋欄啟用時，將觸發此事件。 |
<div class="list-block"> |
| 4 | disableSearch 搜尋欄停用時，使用者單擊取消按鈕或“搜尋欄疊加層”元素時，將觸發此事件。 |
<div class="list-block"> |
示例
以下示例演示了在 Framework7 中使用滾動搜尋欄的方法：
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>Search Bar Layout</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "pages navbar-fixed">
<div data-page = "home" class = "page">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "center sliding">Search Bar Layout</div>
</div>
</div>
<form data-search-list = ".list-block-search" data-search-in = ".item-title"
class = "searchbar searchbar-init">
<div class = "searchbar-input">
<input type = "search" placeholder = "Search"><a href = "#"
class = "searchbar-clear"></a>
</div>
<a href = "#" class = "searchbar-cancel">Cancel</a>
</form>
<div class = "searchbar-overlay"></div>
<div class = "page-content">
<div class = "content-block searchbar-not-found">
<div class = "content-block-inner">No element found...</div>
</div>
<div class = "list-block list-block-search searchbar-found">
<ul>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">India</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Argentina</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Belgium</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Brazil</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Canada</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Colombia</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Denmark</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Ecuador</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">France</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Germany</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Greece</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Haiti</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Hong Kong</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Iceland</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Ireland</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Jamaica</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Japan</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Kenya</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Kuwait</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Libya</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Liberia</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Malaysia</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Mauritius</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Mexico</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Namibia</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">New Zealand</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Oman</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Paraguay</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Philippines</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Russia</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Singapore</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">South Africa</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Thailand</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">United Kingdom</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Vatican City</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Zimbabwe</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
var myApp = new Framework7();
var mainView = myApp.addView('.view-main');
</script>
</body>
</html>
輸出
讓我們執行以下步驟來了解上面給出的程式碼是如何工作的：
將上述 HTML 程式碼儲存到伺服器根資料夾中的 search_bar.html 檔案中。
以 https:///search_bar.html 的形式開啟此 HTML 檔案，輸出結果如下所示。
如果在搜尋欄中輸入列表中包含的元素，則會顯示列表中的該特定元素。
如果輸入的元素不是列表中包含的元素，則會顯示“未找到元素”。
Framework7 - 狀態列
描述
iOS 7+ 允許您構建全屏應用程式，這在狀態列與您的應用程式重疊時可能會造成問題。Framework7 透過檢測您的應用程式是否處於全屏模式來解決此問題。如果您的應用程式處於全屏模式，則 Framework7 會自動將 with-statusbar-overlay 類新增到 <html>（或在應用程式不處於全屏模式時將其移除），並且您需要在 <body> 中新增 statusbar-overlay 類，如下面的程式碼所示：
<html class = "with-statusbar-overlay">
...
<body>
<div class = "statusbar-overlay"></div>
...
預設情況下，<div> 將始終隱藏並在螢幕頂部固定。僅當應用程式處於全屏模式且 with-statusbar-overlay 類已新增到 <html> 時，它才會可見。
示例
以下示例演示了在 Framework7 中使用狀態列的方法：
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>My App</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
</head>
<body>
<div class = "statusbar-overlay"></div>
<div class = "panel-overlay"></div>
<div class = "panel panel-right panel-reveal">
<div class = "content-block">
<p>Contents goes here...</p>
</div>
</div>
<div class = "views">
<div class = "view view-main">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "center sliding">My App</div>
<div class = "right">
<a href = "#" class = "link icon-only open-panel"><i class = "icon icon-bars"></i></a>
</div>
</div>
</div>
<div class = "pages navbar-through toolbar-through">
<div data-page = "index" class = "page">
<div class = "page-content">
<p>This is simple application...</p>
<p>page contents goes here!!!</p>
</div>
</div>
</div>
<div class = "toolbar">
<div class = "toolbar-inner">
<a href = "#" class = "link">First Link</a>
<a href = "#" class = "link">Second Link</a>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
// here initialize the app
var myApp = new Framework7();
// If your using custom DOM library, then save it to $$ variable
var $$ = Dom7;
// Add the view
var mainView = myApp.addView('.view-main', {
// enable the dynamic navbar for this view:
dynamicNavbar: true
});
//use the 'pageInit' event handler for all pages
$$(document).on('pageInit', function (e) {
//get page data from event data
var page = e.detail.page;
})
</script>
</body>
</html>
輸出
讓我們執行以下步驟來了解上面給出的程式碼是如何工作的：
將上述 html 程式碼儲存到伺服器根資料夾中的 status_bar.html 檔案中。
以 https:///status_bar.html 的形式開啟此 HTML 檔案，輸出結果如下所示。
此示例展示了 statusbar-overlay 的用法，它允許您在狀態列與應用程式重疊時構建全屏應用程式。
Framework7 - 側邊面板
描述
側邊欄移動到螢幕的左側或右側以顯示內容。Framework7 允許您在應用程式中包含最多 2 個面板（右側面板和左側面板）。您需要在 <body> 的開頭新增面板，然後透過應用以下列出的類來選擇開啟效果：
panel-reveal − 這將使整個應用程式的內容移出。
panel-cover − 這將使面板覆蓋在應用程式內容上。
例如，以下程式碼顯示瞭如何使用上述類：
<body>
<!-- First add Panel's overlay which will overlays app while panel is opened -->
<div class = "panel-overlay"></div>
<!-- Left panel -->
<div class = "panel panel-left panel-cover">
panel's content
</div>
<!-- Right panel -->
<div class = "panel panel-right panel-reveal">
panel's content
</div>
</body>
下表顯示了 Framework77 支援的面板型別：
| 序號 | 型別及描述 |
|---|---|
| 1 | 開啟和關閉面板
新增面板和效果後，我們需要新增 開啟 和 關閉 面板的功能。 |
| 2 | 面板事件
要檢測使用者如何與面板互動，您可以使用面板事件。 |
| 3 | 使用滑動打開面板
Framework7 提供了使用 滑動手勢 打開面板的功能。 |
| 4 | 面板已開啟？
我們可以使用 with-panel[position]-[effect] 規則確定面板是否已開啟。 |
Framework7 - 內容塊
描述
內容塊可用於新增具有不同格式的額外內容。
示例
以下示例演示了在 Framework7 中使用內容塊的方法：
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>Content Block</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "pages">
<div data-page = "home" class = "page navbar-fixed">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left"> </div>
<div class = "center">Content Block</div>
<div class = "right"> </div>
</div>
</div>
<div class = "page-content">
<p>This is out side of content block!!!</p>
<div class = "content-block">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis
et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
<div class = "content-block">
<div class = "content-block-inner">This is another text block wrapped with "content-block-inner"</div>
</div>
<div class = "content-block-title">Content Block Title</div>
<div class = "content-block">
<p>Praesent nec imperdiet diam. Maecenas vel lectus porttitor, consectetur
magna nec, viverra sem. Aliquam sed risus dolor. Morbi tincidunt ut libero id sodales.
Integer blandit varius nisi quis consectetur.</p>
</div>
<div class = "content-block-title">This is another long content block title</div>
<div class = "content-block">
<div class = "content-block-inner">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo
inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
<div class = "content-block-title">Content Block Inset</div>
<div class = "content-block inset">
<div class = "content-block-inner">
<p>Donec et nulla auctor massa pharetra adipiscing ut sit amet sem.
Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis,
vulputate turpis vel, sagittis felis. </p>
</div>
</div>
<div class = "content-block-title">Content Block Tablet Inset</div>
<div class = "content-block tablet-inset">
<div class = "content-block-inner">
<p>Donec et nulla auctor massa pharetra adipiscing ut sit amet sem.
Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis,
vulputate turpis vel, sagittis felis. </p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
var myApp = new Framework7();
var mainView = myApp.addView('.view-main');
</script>
</body>
</html>
輸出
讓我們執行以下步驟來了解上面給出的程式碼是如何工作的：
將上述 HTML 程式碼儲存到伺服器根資料夾中的 content_block.html 檔案中。
以 https:///content_block.html 的形式開啟此 HTML 檔案，輸出結果如下所示。
該程式碼為文字內容添加了額外的格式和所需的間距。
Framework7 - 網格佈局
描述
Framework7 提供不同型別的網格型別，以便根據使用者需要放置內容。
佈局網格提供不同型別的列大小，如下表所述：
| 序號 | 類 | 表格類 | 寬度 |
|---|---|---|---|
| 1 | col-5 | tablet-5 | 5% |
| 2 | col-10 | tablet-10 | 10% |
| 3 | col-15 | tablet-15 | 15% |
| 4 | col-20 | tablet-20 | 20% |
| 5 | col-25 | tablet-25 | 25% |
| 6 | col-30 | tablet-30 | 30% |
| 7 | col-33 | tablet-33 | 33.3% |
| 8 | col-35 | tablet-35 | 35% |
| 9 | col-40 | tablet-40 | 40% |
| 10 | col-45 | tablet-45 | 45% |
| 11 | col-50 | tablet-50 | 50% |
| 12 | col-55 | tablet-55 | 55% |
| 13 | col-60 | tablet-60 | 60% |
| 14 | col-65 | tablet-65 | 65% |
| 15 | col-66 | tablet-66 | 66.6% |
| 16 | col-70 | tablet-70 | 70% |
| 17 | col-75 | tablet-75 | 75% |
| 18 | col-80 | tablet-80 | 80% |
| 19 | col-85 | tablet-85 | 85% |
| 20 | col-90 | tablet-90 | 90% |
| 21 | col-95 | tablet-95 | 95% |
| 21 | col-100 | tablet-100 | 100% |
| 22 | col-auto | tablet-auto | 等寬 |
示例
以下示例提供了網格佈局，以便您在 Framework7 中根據需要放置內容：
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>Layout Grid</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
<style>
div[class* = "col-"] {
background: #fff;
text-align: center;
color: #000;
border: 1px solid #D8D8D8;
}
.row {
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "center sliding">Layout Grid</div>
</div>
</div>
<div class = "pages">
<div data-page = "index" class = "page navbar-fixed">
<div class = "page-content">
<div class = "content-block-title">Columns with gutter</div>
<div class = "content-block">
<div class = "row">
<div class = "col-50">col 1</div>
<div class = "col-50">col 2</div>
</div>
<div class = "row">
<div class = "col-25">col 1</div>
<div class = "col-25">col 2</div>
<div class = "col-25">col 3</div>
<div class = "col-25">col 4</div>
</div>
<div class = "row">
<div class = "col-33">col 1</div>
<div class = "col-33">col 2</div>
<div class = "col-33">col 3</div>
</div>
<div class = "content-block-title">Columns without gutter</div>
<div class = "content-block">
<div class = "row no-gutter">
<div class = "col-50">col 1</div>
<div class = "col-50">col 2</div>
</div>
<div class = "row no-gutter">
<div class = "col-25">col 1</div>
<div class = "col-25">col 2</div>
<div class = "col-25">col 3</div>
<div class = "col-25">col 4</div>
</div>
<div class = "row no-gutter">
<div class = "col-33">col 1</div>
<div class = "col-33">col 2</div>
<div class = "col-33">col 3</div>
</div>
</div>
<div class = "content-block-title">Nested Columns</div>
<div class = "content-block">
<div class = "row">
<div class = "col-50">
col 1
<div class = "row">
<div class = "col-40">col 2</div>
<div class = "col-60">col 3</div>
</div>
</div>
<div class = "col-50">
col 1
<div class = "row">
<div class = "col-75">col 2</div>
<div class = "col-25">col 3</div>
</div>
</div>
</div>
</div>
<div class = "content-block-title">Columns With Different Equal Width</div>
<div class = "content-block">
<div class = "row">
<div class = "col-100 tablet-50">col 1</div>
<div class = "col-100 tablet-50">col 2</div>
</div>
<div class = "row">
<div class = "col-50 tablet-25">col 1</div>
<div class = "col-50 tablet-25">col 2</div>
<div class = "col-50 tablet-25">col 3</div>
<div class = "col-50 tablet-25">col 4</div>
</div>
<div class = "row">
<div class = "col-100 tablet-40">col 1</div>
<div class = "col-50 tablet-60">col 2</div>
<div class = "col-50 tablet-60">col 3</div>
<div class = "col-100 tablet-40">col 4</div>
</div>
</div>
<div class = "content-block-title">Columns With Equal Width</div>
<div class = "content-block">
<div class = "row">
<div class = "col-auto">col-1</div>
<div class = "col-auto">col-2</div>
<div class = "col-auto">col-3</div>
<div class = "col-auto">col-4</div>
</div>
<div class = "row no-gutter">
<div class = "col-auto">col-1</div>
<div class = "col-auto">col-2</div>
<div class = "col-auto">col-3</div>
<div class = "col-auto">col-4</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
var myApp = new Framework7();
var mainView = myApp.addView('.view-main');
</script>
</body>
</html>
輸出
讓我們執行以下步驟來了解上面給出的程式碼是如何工作的：
將上述 HTML 程式碼儲存到伺服器根資料夾中的 layout_grid.html 檔案中。
以 https:///layout_grid.html 的形式開啟此 HTML 檔案，輸出結果如下所示。
此程式碼提供了不同型別的網格型別，以便根據使用者需要放置內容。
Framework7 - 覆蓋層
描述
Framework7 提供不同型別的覆蓋層，以便應用程式能夠流暢地執行。下表列出了一些 Framework7 覆蓋層：
| 序號 | 覆蓋層型別及描述 |
|---|---|
| 1 | 模態框
模態框是一個小視窗，它顯示來自不同來源的內容，而無需離開父視窗。 |
| 2 | 彈出視窗
彈出視窗是一個彈出框，當用戶單擊元素時會顯示內容。 |
| 3 | 彈出選單
要管理臨時內容的呈現，可以使用彈出選單元件。 |
| 4 | 操作表單
操作表單用於向用戶提供一組關於如何處理給定任務的可能性。 |
| 5 | 登入螢幕
覆蓋登入螢幕用於顯示登入螢幕格式，該格式可用於頁面或彈出視窗，或作為獨立的覆蓋層。 |
| 6 | 選擇器模態框
選擇器模態框用於選擇一些自定義內容，類似於日曆選擇器。 |
Framework7 - 預載入器
描述
Framework7 中的預載入器使用可縮放向量圖形 (SVG) 製作，並使用 CSS 進行動畫處理，這使得它易於調整大小。預載入器有兩種顏色：
- 預設是淺色背景
- 另一種是深色背景
您可以在 HTML 中使用 preloader 類，如下所示：
示例
以下示例演示了在 Framework7 中使用預載入器的方法：
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>Panel Events</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "pages">
<div data-page = "home" class = "page navbar-fixed">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left"> </div>
<div class = "center">Framework7 Preloader</div>
<div class = "right"> </div>
</div>
</div>
<div class = "page-content">
<div class = "content-block row">
<div class = "col-25"><span class = "preloader"></span><br>Default Preloader</div>
<div class = "col-25 col-dark"><span class = "preloader preloader-white"></span><br>White Preloader</div>
<div class = "col-25"><span style = "width:42px; height:42px" class = "preloader"></span><br>Big Preloader</div>
<div class = "col-25 col-dark"><span style = "width:42px; height:42px" class = "preloader preloader-white"></span><br>White Preloader</div>
</div>
</div>
</div>
</div>
</div>
</div>
<style>.col-25{padding:5px;text-align:center;}.col-dark{background:#222;}</style>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
var myApp = new Framework7();
</script>
</body>
</html>
輸出
讓我們執行以下步驟來了解上面給出的程式碼是如何工作的：
將上述 HTML 程式碼儲存到伺服器根資料夾中的 preloader.html 檔案中。
以 https:///preloader.html 的形式開啟此 HTML 檔案，輸出結果如下所示。
此程式碼顯示預載入器指示器，該指示器使用 SVG 製作，並使用 CSS 進行動畫處理。
Framework7 - 進度條
描述
進度條可用於向用戶顯示資產載入或任務進度。您可以使用 progressbar 類指定進度條。當用戶不知道請求的載入過程將持續多長時間時，可以使用 progressbar-infinite 類。
進度條 JavaScript API
進度條可以與 JavaScript API 一起使用，以使用以下方法指定 顯示、隱藏 和 進度 屬性：
| 序號 | 方法 | 描述及引數 |
|---|---|---|
| 1 | myApp.setProgressbar (container , progress, speed) | 設定任務進度的進度條。
|
| 2 | myApp.hideProgressbar (contain er) | 隱藏進度條。
|
| 3 | myApp.showProgressbar (contai ner, progress, color) | 顯示進度條。
|
示例
以下示例顯示了動畫確定性和不確定性進度條，以指示 Framework7 中的活動：
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>Progress Bar</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.colors.min.css" />
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "pages">
<div data-page = "home" class = "page navbar-fixed">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "center">Progress Bar</div>
</div>
</div>
<div class = "page-content">
<div class = "content-block-title">Determinate Progress Bar</div>
<div class = "content-block">
<div class = "content-block-inner">
<p>Inline determinate progress bar:</p>
<div class = "progressbar-inline">
<p><span data-progress = "10" class = "progressbar"></span></p>
<p class = "buttons-row">
<a href = "#" data-progress = "25" class = "button button-raised">25%</a>
<a href = "#" data-progress = "50" class = "button button-raised">50%</a>
<a href = "#" data-progress = "75" class = "button button-raised">75%</a>
<a href = "#" data-progress = "100" class = "button button-raised">100%</a>
</p>
</div>
<p>Loads and hides the determinate progress bar:</p>
<div class = "progressbar-load-hide">
<p><a href = "#" class = "button button-raised">Start Loading</a></p>
</div>
<p>Displays the determinate progress bar on top:</p>
<p class = "progressbar-overlay"><a href = "#" class = "button button-raised">Start Loading</a></p>
</div>
</div>
<div class = "content-block-title">Infinite Progress Bar</div>
<div class = "content-block">
<div class = "content-block-inner">
<p>Inline infinite progress bar:</p>
<p><span class = "progressbar-infinite"></span></p>
<p>Displays the infinite progress bar in multiple colors:</p>
<p><span class = "progressbar-infinite color-multi"></span></p>
<p>Displays the infinite progress bar on top:</p>
<p class = "progressbar-infinite-overlay"><a href = "#" class = "button button-raised">Start Loading</a></p>
<p>Displays the infinite progress bar in multiple colors on top:</p>
<p class = "progressbar-infinite-multi-overlay"><a href = "#" class = "button button-raised">Start Loading</a></p>
</div>
</div>
<div class = "content-block-title">Different types of colored progress bars:</div>
<div class = "list-block">
<ul>
<li class = "item-content">
<div class = "item-inner">
<div data-progress = "5" class = "progressbar color-red"></div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div data-progress = "10" class = "progressbar color-pink"></div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div data-progress = "20" class = "progressbar color-deeppurple"></div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div data-progress = "30" class = "progressbar color-blue"></div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div data-progress = "40" class = "progressbar color-cyan"></div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div data-progress = "50" class = "progressbar color-green"></div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div data-progress = "60" class = "progressbar color-lime"></div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div data-progress = "70" class = "progressbar color-amber"></div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div data-progress = "80" class = "progressbar color-deeporange"></div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div data-progress = "90" class = "progressbar color-gray"></div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div data-progress = "100" class = "progressbar color-black"></div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
var myApp = new Framework7({
material: true
});
var $$ = Dom7;
$$('.progressbar-inline .button').on('click', function () {
var progress = $$(this).attr('data-progress');
var progressbar = $$('.progressbar-inline .progressbar');
myApp.setProgressbar(progressbar, progress);
});
$$('.progressbar-load-hide .button').on('click', function () {
var container = $$('.progressbar-load-hide p:first-child');
//it doesn't load if another progresbar is loading
if (container.children('.progressbar').length) return;
myApp.showProgressbar(container, 0);
var progress = 0;
function simulateLoading() {
setTimeout(function () {
var progressBefore = progress;
progress += Math.random() * 20;
myApp.setProgressbar(container, progress);
if (progressBefore < 100) {
simulateLoading();
}
else myApp.hideProgressbar(container);
}, Math.random() * 200 + 200);
}
simulateLoading();
});
$$('.progressbar-overlay .button').on('click', function () {
var container = $$('body');
if (container.children('.progressbar, .progressbar-infinite').length) return;
myApp.showProgressbar(container, 0, 'orange');
var progress = 0;
function simulateLoading() {
setTimeout(function () {
var progressBefore = progress;
progress += Math.random() * 20;
myApp.setProgressbar(container, progress);
if (progressBefore < 100) {
simulateLoading();
}
//hides the progressbar
else myApp.hideProgressbar(container);
}, Math.random() * 200 + 200);
}
simulateLoading();
});
$$('.progressbar-infinite-overlay .button').on('click', function () {
var container = $$('body');
if (container.children('.progressbar, .progressbar-infinite').length) return;
myApp.showProgressbar(container, 'yellow');
setTimeout(function () {
myApp.hideProgressbar();
}, 3000);
});
$$('.progressbar-infinite-multi-overlay .button').on('click', function () {
var container = $$('body');
if (container.children('.progressbar, .progressbar-infinite').length) return;
myApp.showProgressbar(container, 'multi');
setTimeout(function () {
myApp.hideProgressbar();
}, 3000);
});
</script>
</body>
</html>
輸出
讓我們執行以下步驟來了解上面給出的程式碼是如何工作的：
將上述 HTML 程式碼儲存到伺服器根資料夾中的 progress_bar.html 檔案中。
以 https:///progress_bar.html 的形式開啟此 HTML 檔案，輸出結果如下所示。
此示例顯示了進度條，它指示操作完成過程需要多長時間，並顯示不同型別的進度條以指示活動。
Framework7 - 列表檢視
描述
列表檢視是功能強大的 UI 元件，用於在多個行的可滾動列表中呈現資料。Framework7 提供不同型別的 列表檢視 以便與您的應用程式配合使用。下表列出了一些 Framework7 列表檢視：
| 序號 | 型別及描述 |
|---|---|
| 1 | 列表檢視
列表檢視是功能強大的使用者介面元件，用於在包含多行的可滾動列表中呈現資料。 |
| 2 | 聯絡人列表
聯絡人列表是一種列表檢視，可用於顯示人員聯絡人的列表。 |
| 3 | 媒體列表檢視
媒體列表檢視用於顯示覆雜的資料結構，如產品、服務、使用者資訊。 |
| 4 | 滑動刪除
滑動刪除允許您透過在列表元素上滑動來顯示隱藏的選單操作。 |
| 5 | 可排序列表
可排序列表是一種列表檢視，用於對列表檢視元素進行排序。 |
| 6 | 虛擬列表
虛擬列表是一種列表檢視，它包含大量資料元素的列表，而不會降低其效能。 |
Framework7 - 手風琴
描述
手風琴是一種圖形控制元素，顯示為專案的堆疊列表。每個手風琴可以展開或拉伸以顯示與該手風琴關聯的內容。
可摺疊佈局
當您使用單個獨立的可摺疊元素時，您需要省略accordion-list包裝器元素。
以下是可摺疊佈局的結構 -
<!-- Single collapsible element ------> <div class = "accordion-item"> <div class = "accordion-item-toggle"></div> <div class = "accordion-item-content"></div> </div> <!-- Separate collapsible element --> <div class = "accordion-item"> <div class = "accordion-item-toggle"></div> <div class = "accordion-item-content"></div> </div>
以下類用於 Framework7 中的手風琴 -
| 序號 | 類和描述 |
|---|---|
| 1 | accordion-list 這是一個可選的類，包含一組手風琴專案列表。 |
| 2 | accordion-item 這是單個手風琴專案所需的類。 |
| 3 | accordion-item-toggle 這是用於展開手風琴專案內容的必需類。 |
| 4 | accordion-item-content 這是用於隱藏手風琴專案內容的必需類。 |
| 5 | accordion-item-expanded 它是一個展開的手風琴專案。 |
手風琴 JavaScript API
JavaScript API 方法用於以程式設計方式開啟和關閉手風琴。
它包含以下 JavaScript API 方法 -
myApp.accordionOpen(item) - 用於開啟手風琴。
myApp.accordionClose(item) - 用於關閉手風琴。
myApp.accordionToggle(item) - 用於切換手風琴。
所有方法都包含名為item的引數，它是手風琴專案的 HTML 或字串元素。
手風琴事件
手風琴包含四個事件，如下表所示 -
| 序號 | 事件 | 目標和描述 |
|---|---|---|
| 1 | open | 手風琴專案 當您開啟動畫時，此事件將被觸發。 |
| 2 | opened | 手風琴專案 當動畫開啟完成時，此事件將被觸發。 |
| 3 | close | 手風琴專案 當您關閉動畫時，此事件將被觸發。 |
| 4 | closed | 手風琴專案 當動畫關閉完成時，此事件將被觸發。 |
手風琴列表檢視
在手風琴列表檢視中，您可以使用item-link元素代替accordion-toggle。
<div class = "list-block accordion-list">
<ul>
<li class = "accordion-item">
<a href = "" class = "item-link item-content">
<div class = "item-inner">
<div class = "item-title">1st Item</div>
</div>
</a>
<div class = "accordion-item-content">Content for 1st Item...</div>
</li>
<li class = "accordion-item">
<a href = "" class = "item-link item-content">
<div class = "item-inner">
<div class = "item-title">2nd Item</div>
</div>
</a>
<div class = "accordion-item-content">Content for 2nd Item...</div>
</li>
</ul>
</div>
示例
以下示例演示了在 Framework7 中使用手風琴 -
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>Accordion</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css">
</head>
<body>
<div class="views">
<div class="view view-main">
<div class="pages">
<div data-page="home" class="page navbar-fixed">
<div class="navbar">
<div class="navbar-inner">
<div class="left"> </div>
<div class="center">Accordion</div>
<div class="right"> </div>
</div>
</div>
<div class="page-content">
<div class="content-block-title">List of Programming Lagauges</div>
<div class="list-block accordion-list">
<ul>
<li class="accordion-item">
<a href="#" class="item-content item-link">
<div class="item-inner">
<div class="item-title">C</div>
</div>
</a>
<div class="accordion-item-content">
<div class="content-block">
<p>C is a general-purpose, procedural, imperative computer programming language developed in 1972 by Dennis M. Ritchie at the Bell Telephone Laboratories to develop the UNIX operating system. C is the most widely used computer language. It keeps fluctuating at number one scale of popularity along with Java programming language, which is also equally popular and most widely used among modern software programmers.</p>
</div>
</div>
</li>
<li class="accordion-item">
<a href="#" class="item-content item-link">
<div class="item-inner">
<div class="item-title">C++</div>
</div>
</a>
<div class="accordion-item-content">
<div class="content-block">
<p>C++ is a middle-level programming language developed by Bjarne Stroustrup starting in 1979 at Bell Labs. C++ runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX.
This reference will take you through simple and practical approach while learning C++ Programming language.
</p>
</div>
</div>
</li>
<li class="accordion-item">
<a href="#" class="item-content item-link">
<div class="item-inner">
<div class="item-title">Java</div>
</div>
</a>
<div class="accordion-item-content">
<div class="content-block">
<p>Java is a high-level programming language originally developed by Sun Microsystems and released in 1995. Java runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX. This tutorial gives a complete understanding of Java.
This reference will take you through simple and practical approach while learning Java Programming language.
</p>
</div>
</div>
</li>
</ul>
</div>
<div class="content-block-title">Separate Collapsibles</div>
<div class="list-block">
<ul>
<li class="accordion-item">
<a href="#" class="item-content item-link">
<div class="item-inner">
<div class="item-title">C</div>
</div>
</a>
<div class="accordion-item-content">
<div class="content-block">
<p >C is a general-purpose, procedural, imperative computer programming language developed in 1972 by Dennis M. Ritchie at the Bell Telephone Laboratories to develop the UNIX operating system. C is the most widely used computer language. It keeps fluctuating at number one scale of popularity along with Java programming language, which is also equally popular and most widely used among modern software programmers.</p>
</div>
</div>
</li>
<li class="accordion-item">
<a href="#" class="item-content item-link">
<div class="item-inner">
<div class="item-title">C++</div>
</div>
</a>
<div class="accordion-item-content">
<div class="content-block">
<p>C++ is a middle-level programming language developed by Bjarne Stroustrup starting in 1979 at Bell Labs. C++ runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX.
This reference will take you through simple and practical approach while learning C++ Programming language.
</p>
</div>
</div>
</li>
<li class="accordion-item">
<a href="#" class="item-content item-link">
<div class="item-inner">
<div class="item-title">Java</div>
</div>
</a>
<div class="accordion-item-content">
<div class="content-block">
<p>Java is a high-level programming language originally developed by Sun Microsystems and released in 1995. Java runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX. This tutorial gives a complete understanding of Java.
This reference will take you through simple and practical approach while learning Java Programming language.
</p>
</div>
</div>
</li>
</ul>
</div>
<div class="content-block-title">Custom Accordion</div>
<div class="content-block accordion-list custom-accordion">
<div class="accordion-item">
<div class="accordion-item-toggle"><i class="icon icon-plus">+</i><i class="icon icon-minus">-</i><span>C</span></div>
<div class="accordion-item-content">
<p>C is a general-purpose, procedural, imperative computer programming language developed in 1972 by Dennis M. Ritchie at the Bell Telephone Laboratories to develop the UNIX operating system. C is the most widely used computer language. It keeps fluctuating at number one scale of popularity along with Java programming language, which is also equally popular and most widely used among modern software programmers.</p>
</div>
</div>
<div class="accordion-item">
<div class="accordion-item-toggle"><i class="icon icon-plus">+</i><i class="icon icon-minus">-</i><span>C++</span></div>
<div class="accordion-item-content">
<p>C++ is a middle-level programming language developed by Bjarne Stroustrup starting in 1979 at Bell Labs. C++ runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX.
This reference will take you through simple and practical approach while learning C++ Programming language.
</p>
</div>
</div>
<div class="accordion-item">
<div class="accordion-item-toggle"><i class="icon icon-plus">+</i><i class="icon icon-minus">-</i><span>Java</span></div>
<div class="accordion-item-content">
<p>Java is a high-level programming language originally developed by Sun Microsystems and released in 1995. Java runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX. This tutorial gives a complete understanding of Java.
This reference will take you through simple and practical approach while learning Java Programming language.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<style>.custom-accordion{padding-left:0;padding-right:0;}.custom-accordion .accordion-item-toggle{padding:0px 15px;height:44px;line-height:44px;font-size:17px;color:#000;border-bottom:1px solid rgba(0,0,0,0.15);cursor:pointer;}.custom-accordion .accordion-item-toggle:active{background:rgba(0,0,0,0.15);}.custom-accordion .accordion-item-toggle span{display:inline-block;margin-left:15px;}.custom-accordion .accordion-item:last-child .accordion-item-toggle{border-bottom:none;}.custom-accordion .icon-plus,.custom-accordion .icon-minus{display:inline-block;width:22px;height:22px;border:1px solid #000;border-radius:100%;line-height:20px;text-align:center;}.custom-accordion .icon-minus{display:none;}.custom-accordion .accordion-item-expanded .icon-minus{display:inline-block;}.custom-accordion .accordion-item-expanded .icon-plus{display:none;}.custom-accordion .accordion-item-content{padding:0px 15px;}</style>
<script>
// here initialize the app
var myApp = new Framework7();
// If your using custom DOM library, then save it to $$ variable
var $$ = Dom7;
// Add the view
var mainView = myApp.addView('.view-main', {
// enable the dynamic navbar for this view:
dynamicNavbar: true
});
</script>
</body>
</html>
輸出
讓我們執行以下步驟來了解上面給出的程式碼是如何工作的：
將上面給定的 HTML 程式碼另存為伺服器根資料夾中的accordion.html檔案。
將此 HTML 檔案開啟為 https:///accordion.html，輸出將如下所示。
該示例提供了可摺疊佈局，可以展開以顯示與手風琴關聯的內容。
Framework7 - 卡片
描述
卡片包含與單個主題相關聯的有組織的資訊，例如照片、連結和文字。下表顯示了 Framework7 卡片型別 -
| 序號 | 型別及描述 |
|---|---|
| 1 | 卡片 HTML 佈局
基本的卡片 HTML 佈局使用卡片類來排列其專案。 |
| 2 | 帶有卡片的列表檢視
您可以透過將cards-list類新增到<div class="list-block">中來使用卡片作為列表檢視元素。 |
Framework7 - 晶片
描述
晶片是一個小的實體塊，可以包含照片、一小段標題和簡短的資訊。
晶片 HTML 佈局
以下程式碼顯示了 Framework7 中使用的基本晶片 HTML 佈局 -
<div class = "chip">
<div class = "chip-media">
<img src = "http://lorempixel.com/100/100/people/9/">
</div>
<div class = "chip-label">Jane Doe</div>
<a href = "#" class = "chip-delete"></a>
</div>
以上 HTML 佈局包含許多類，如下所示 -
chips - 它是晶片容器。
chip-media - 這是晶片媒體元素，可以包含影像、頭像或圖示。它是可選的。
card-label - 它是晶片文字標籤。
card-delete - 它是晶片的可選刪除圖示連結。
示例
以下示例表示實體，例如專輯、卡片元素等，以及照片和簡簡訊息 -
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>Chips HTML Layout</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.colors.min.css" />
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "pages">
<div class = "page navbar-fixed">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "center">Chips HTML Layout</div>
</div>
</div>
<div class = "page-content">
<div class = "content-block-title">Chips With Text</div>
<div class = "content-block">
<div class = "chip">
<div class = "chip-label">Chip one</div>
</div>
<div class = "chip">
<div class = "chip-label">Chip two</div>
</div>
</div>
<div class = "content-block-title">Chips with icons</div>
<div class = "content-block">
<div class = "chip">
<div class = "chip-media bg-blue"><i class = "icon icon-form-calendar"></i></div>
<div class = "chip-label">Set Date</div>
</div>
<div class = "chip">
<div class = "chip-media bg-purple"><i class = "icon icon-form-email"></i></div>
<div class = "chip-label">Sent Mail</div>
</div>
</div>
<div class = "content-block-title">Contact Chips</div>
<div class = "content-block">
<div class = "chip">
<div class = "chip-media"><img src = "/framework7/images/pic.jpg"></div>
<div class = "chip-label">James Willsmith</div>
</div>
<div class = "chip">
<div class = "chip-media"><img src = "/framework7/images/pic2.jpg"></div>
<div class = "chip-label">Sunil Narayan</div>
</div>
<div class = "chip">
<div class = "chip-media bg-pink">R</div>
<div class = "chip-label">Raghav</div>
</div>
<div class = "chip">
<div class = "chip-media bg-teal">S</div>
<div class = "chip-label">Sharma</div>
</div>
<div class = "chip">
<div class = "chip-media bg-red">Z</div>
<div class = "chip-label">Zien</div>
</div>
</div>
<div class = "content-block-title">Deletable Chips</div>
<div class = "content-block">
<div class = "chip">
<div class = "chip-label">Chip one</div>
<a href = "#" class = "chip-delete"></a>
</div>
<div class = "chip">
<div class = "chip-media bg-teal">S</div>
<div class = "chip-label">Sharma</div>
<a href = "#" class = "chip-delete"></a>
</div>
<div class = "chip">
<div class = "chip-media bg-purple"><i class = "icon icon-form-email"></i></div>
<div class = "chip-label">Sent</div>
<a href = "#" class = "chip-delete"></a>
</div>
<div class = "chip">
<div class = "chip-media"><img src = "/framework7/images/pic.jpg"></div>
<div class = "chip-label">James Willsmith</div>
<a href = "#" class = "chip-delete"></a>
</div>
<div class = "chip">
<div class = "chip-label">Chip two</div>
<a href = "#" class = "chip-delete"></a>
</div>
<div class = "chip">
<div class = "chip-media bg-green">R</div>
<div class = "chip-label">Raghav</div>
<a href = "#" class = "chip-delete"></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<style>
</style>
<script>
var myApp = new Framework7 ({
material: true
});
var $$ = Dom7;
$$('.chip-delete').on('click', function (e) {
e.preventDefault();
var chip = $$(this).parents('.chip');
myApp.confirm('Do you want to delete this Chip?', function () {
chip.remove();
});
});
</script>
</body>
</html>
輸出
讓我們執行以下步驟來了解上面給出的程式碼是如何工作的：
將上面給定的 HTML 程式碼另存為伺服器根資料夾中的cards_html_layout.html檔案。
將此 HTML 檔案開啟為 https:///cards_html_layout.html，輸出將如下所示。
該示例以小塊的形式表示複雜實體，例如專輯、卡片元素、釋出的影像，其中包含照片、標題字串和簡簡訊息。
Framework7 - 按鈕
描述
Framework7 透過僅向連結或輸入按鈕新增適當的類，提供了一組現成的按鈕。
| 序號 | 型別及描述 |
|---|---|
| 1 | iOS 主題按鈕
Framework7 提供了許多 iOS 主題按鈕，可以透過應用適當的類來使用。 |
| 2 | 材質主題按鈕
材質主題提供了許多按鈕，可以透過使用適當的類在您的應用程式中使用。 |
Framework7 - 操作按鈕
描述
Framework7 為提升的操作提供了浮動操作按鈕。它們顯示為 UI 上方的浮動圓形圖示。它具有包含變形、啟動和轉移錨點的運動行為。
浮動操作按鈕僅在材質主題中受支援。
下表列出了 Framework7 中使用的操作按鈕型別 -
| 序號 | 型別及描述 |
|---|---|
| 1 | 浮動操作按鈕佈局
這非常簡單；您只需要將其放置為頁面或檢視的子元素即可。 |
| 2 | 變形為彈出視窗
如果要點選浮動操作按鈕開啟彈出視窗，則可以使用floating-button-to-popover類。 |
| 3 | 快速撥號
您可以透過使用快速撥號在點選浮動操作按鈕時呼叫相關操作。 |
Framework7 - 表單
描述
表單用於與使用者互動，並使用文字欄位、複選框、單選按鈕等從 Web 使用者收集資料。
Framework7 提供了不同型別的表單元素，以便像下表中指定的那樣與應用程式順暢地協同工作 -
| 序號 | 覆蓋層型別及描述 |
|---|---|
| 1 | 表單元素
表單元素用於建立美觀的表單佈局。 |
| 2 | 複選框和單選按鈕
列表檢視擴充套件允許您在 Framework7 中建立複選框和單選輸入。 |
| 3 | 智慧選擇
智慧選擇是一種簡單的方法，可以透過使用複選框和單選輸入組將表單選擇更改為動態頁面。 |
| 4 | 停用元素
可以透過將disabled類應用於元素或為表單元素新增disabled屬性來停用元素。 |
| 5 | 表單資料
Framework7 有一些非常有用的方法，使表單操作變得容易。 |
| 6 | 表單儲存
使用表單儲存可以輕鬆地在 Ajax 載入的頁面上自動儲存和解析表單資料。 |
| 7 | Ajax 表單提交
Framework7 允許您使用 Ajax 自動傳送資料。 |
Framework7 - 標籤頁
描述
選項卡是一組邏輯分組的內容，允許我們快速在它們之間切換並節省空間，就像手風琴一樣。
選項卡布局
以下程式碼定義了選項卡的佈局 -
<!-- Tabs wrapper, shoud have "tabs" class.It is a required element -->
<div class = "tabs">
<!-- The tab, should have "tab" class and unique id attribute -->
<!-- The tab is active by default - "active" class -->
<div class = "tab active" id = "tab1">
... The content for Tab 1 goes here ...
</div>
<!-- The second tab, should have "tab" class and unique id attribute -->
<div class = "tab" id = "tab2">
... The content for Tab 2 goes here ...
</div>
</div>
其中 -
<div class = "tabs"> - 它是所有選項卡的必需包裝器。如果我們錯過了它，選項卡將根本無法工作。
-
<div class = "tab"> - 它是一個選項卡，應該具有唯一的 id屬性。
-
<div class = "tab active"> - 它是一個活動的選項卡，它使用額外的active類使選項卡可見（活動）。
在選項卡之間切換
您可以在選項卡布局中使用一些控制器，以便使用者可以在它們之間切換。
為此，您需要建立帶有tab-link類和href屬性（等於目標選項卡的id屬性）的連結（<a>標籤） -
<!-- Here the link is used to activates 1st tab, has the same href attribute (#tab1) as the id attribute of 1st tab (tab1) --> <a href = "#tab1" class = "tab-link active">Tab 1</a> <!-- Here the link is used to activates 2st tab, has the same href attribute (#tab2) as the id attribute of 2st tab (tab2) --> <a href = "#tab2" class = "tab-link">Tab 2</a> <a href = "#tab3" class = "tab-link">Tab 3</a>
切換多個選項卡
如果您使用單個選項卡連結在多個選項卡之間切換，則可以使用類而不是使用ID和data-tab屬性。
<!-- For Top Tabs --> <div class = "tabs tabs-top"> <div class = "tab tab1 active">...</div> <div class = "tab tab2">...</div> <div class = "tab tab3">...</div> </div> <!-- For Bottom Tabs --> <div class = "tabs tabs-bottom"> <div class = "tab tab1 active">...</div> <div class = "tab tab2">...</div> <div class = "tab tab3">...</div> </div> <!-- For Tabs links --> <div class = "tab-links"> <!-- Links are switch top and bottom tabs to .tab1 --> <a href = "#" class = "tab-link" data-tab = ".tab1">Tab 1</a> <!-- Links are switch top and bottom tabs to .tab2 --> <a href = "#" class = "tab-link" data-tab = ".tab2">Tab 2</a> <!-- Links are switch top and bottom tabs to .tab3 --> <a href = "#" class = "tab-link" data-tab = ".tab3">Tab 3</a> </div>
選項卡連結的data-tab屬性包含目標選項卡/選項卡的 CSS 選擇器。
我們可以使用不同的選項卡方式，這些方式在以下表格中指定 -
| 序號 | 選項卡型別和描述 |
|---|---|
| 1 | 內聯選項卡
內聯選項卡是一組在內聯中分組的選項卡，允許您快速在它們之間切換。 |
| 2 | 從導航欄切換選項卡
我們可以將選項卡放置在導航欄中，以便您可以在它們之間切換。 |
| 3 | 從標籤欄切換檢視
單個選項卡可用於在其自己的導航和佈局之間切換檢視。 |
| 4 | 動畫選項卡
您可以使用簡單的過渡（動畫）來切換選項卡。 |
| 5 | 可滑動選項卡
您可以透過為選項卡使用tabs-swipeable-wrap類建立具有簡單過渡的可滑動選項卡。 |
| 6 | 選項卡 JavaScript 事件
當您使用 JavaScript 程式碼處理選項卡時，可以使用 JavaScript 事件。 |
| 7 | 使用 JavaScript 顯示選項卡
您可以使用 JavaScript 方法切換或顯示選項卡。 |
Framework7 - Swiper 滑塊
描述
Swiper 滑塊是最強大和最現代的觸控滑塊，並帶有大量功能進入 Framework7。
以下 HTML 佈局顯示了 Swiper 滑塊 -
<!-- Container class for slider -->
<div class = "swiper-container">
<!-- Wrapper class for slider -->
<div class = "swiper-wrapper">
<!-- Slides -->
<div class = "swiper-slide">Slide 1</div>
<div class = "swiper-slide">Slide 2</div>
<div class = "swiper-slide">Slide 3</div>
... other slides ...
</div>
<!-- Define pagination, if it is required -->
<div class = "swiper-pagination"></div>
</div>
以下類用於 Swiper 滑塊 -
swiper-container - 它是主滑塊容器的必需元素，用於幻燈片和分頁。
Swiper-wrapper - 它是幻燈片的額外包裝器的必需元素。
swiper-slide - 它是一個幻燈片元素，可以在其中包含任何 HTML。
swiper-pagination - 它是分頁專案的可選元素，這些專案是自動建立的。
您可以使用其相關方法使用 JavaScript 初始化 Swiper -
myApp.swiper(swiperContainer,parameters)
或
new Swiper(swiperContainer, parameters)
這兩種方法都用於使用選項初始化滑塊。
上面給出的方法包含以下引數 -
swiperContainer - 它是 Swiper 容器的HTMLElement 或字串，這是必需的。
parameters - 這些是包含 Swiper 引數物件的可選元素。
例如 -
var mySwiper = app.swiper('.swiper-container', {
speed: 400,
spaceBetween: 100
});
可以訪問 Swiper 的例項，並且滑塊容器的swiper屬性具有以下 HTML 元素 -
var mySwiper = $$('.swiper-container')[0].swiper;
// Here you can use all slider methods like:
mySwiper.slideNext();
您可以在下表中看到 Swiper 的不同方式和型別 -
| 序號 | Swiper 型別和描述 |
|---|---|
| 1 | 帶有分頁的預設 Swiper
它是一個現代的觸控滑塊，Swiper 預設水平滑動。 |
| 2 | 垂直 Swiper
它也作為預設 Swiper 工作，但它垂直滑動。 |
| 3 | 幻燈片之間有空格
此 Swiper 用於在兩個幻燈片之間留出空間。 |
| 4 | 多個 Swiper
此 Swiper 在單個頁面上使用多個 Swiper。 |
| 5 | 巢狀 Swiper
它是垂直和水平幻燈片的組合。 |
| 6 | 自定義控制元件
它用於自定義控制元件來選擇或滑動任何幻燈片。 |
| 7 | 延遲載入
它可以用於多媒體檔案，這些檔案需要時間載入。 |
Framework7 - 照片瀏覽器
描述
照片瀏覽器類似於 iOS 照片瀏覽器元件，用於顯示一組可以縮放和平移的影像。要在一個影像之間滑動，照片瀏覽器使用Swiper 滑塊。
下表顯示了 Framework7 中使用照片瀏覽器型別 -
| 序號 | 照片瀏覽器型別和描述 |
|---|---|
| 1 | 建立照片瀏覽器例項
照片瀏覽器只能使用 JavaScript 建立和初始化。 |
| 2 | 照片瀏覽器引數
Framework7 提供了一系列引數，這些引數與照片瀏覽器一起使用。 |
| 3 | 照片瀏覽器方法和屬性
初始化照片瀏覽器後，您將獲得一個初始化的例項變數來使用照片瀏覽器方法和屬性。 |
| 4 | 照片陣列
在初始化照片瀏覽器期間，您需要在photos引數中傳遞包含照片/影片的陣列。 |
| 5 | 照片瀏覽器模板
Framework7 為您提供了許多照片瀏覽器模板，您可以在初始化照片瀏覽器時傳遞這些模板。 |
Framework7 - 自動完成
描述
自動完成是 Framework7 的一個移動友好且觸控最佳化的元件，可以用作下拉列表或獨立方式。您可以使用 JavaScript 方法建立和初始化自動完成例項 -
myApp.autocomplete(parameters)
其中parameters是用於初始化自動完成例項的必需物件。
自動完成引數
下表列出了 Framework7 中可用的自動完成引數 -
| 序號 | 引數和描述 | 型別 | 預設值 |
|---|---|---|---|
| 1 | openIn 它定義瞭如何開啟自動完成，可以用作下拉列表、彈出視窗或頁面。 |
字串 | 頁面 |
| 2 | 源 它使用自動完成例項、搜尋查詢和渲染函式來傳遞匹配項陣列。 |
function (autocomplete, query, render) | - |
| 3 | valueProperty 它指定匹配項物件的鍵的專案值。 |
字串 | ID |
| 4 | 限制 它顯示每個查詢中自動完成中的專案數量限制。 |
數字 | - |
| 5 | 載入程式 載入程式可用於透過將其設定為 true 來指定自動完成佈局。 |
布林值 | false |
| 6 | preloaderColor 它指定載入程式的顏色。預設情況下，顏色為“黑色”。 |
字串 | - |
| 7 | 值 定義包含預設選中值的陣列。 |
陣列 | - |
| 8 | textProperty 它指定匹配項物件的鍵的專案值，可以用作顯示選項的標題。 |
字串 | 文字 |
獨立自動完成引數
下表列出了 Framework7 中可用的獨立自動完成引數 -
| 序號 | 引數和描述 | 型別 | 預設值 |
|---|---|---|---|
| 1 | 開啟器 它是字串或 HTML 元素引數，它將開啟獨立自動完成頁面。 |
字串或 HTMLElement | - |
| 2 | popupCloseText 它用於關閉自動完成彈出視窗。 |
字串 | '關閉' |
| 3 | backText 當自動完成作為頁面開啟時，它提供返回連結。 |
字串 | '後退' |
| 4 | pageTitle 它指定自動完成頁面標題。 |
字串 | - |
| 5 | searchbarPlaceholderText 它指定搜尋欄佔位符文字。 |
字串 | '搜尋' |
| 6 | searchbarCancelText 它定義搜尋欄取消按鈕文字。 |
字串 | '取消' |
| 7 | notFoundText 當找不到匹配的元素時，它會顯示文字。 |
字串 | '未找到' |
| 8 | 多 透過將其設定為 true，它允許選擇多選。 |
布林值 | false |
| 9 | navbarTheme 它指定導航欄的顏色主題。 |
字串 | - |
| 10 | backOnSelect 當用戶選擇值時，透過將其設定為 true，自動完成將關閉。 |
布林值 | false |
| 11 | formTheme 它指定表單的顏色主題。 |
字串 | - |
下拉自動完成引數
下表列出了 Framework7 中可用的下拉自動完成引數 -
| 序號 | 引數和描述 | 型別 | 預設值 |
|---|---|---|---|
| 1 | 輸入 它是用於文字輸入的字串或 HTML 元素。 |
字串或 HTMLElement | - |
| 2 | dropdownPlaceholderText 它指定下拉列表的佔位符文字。 |
字串 | - |
| 3 | updateInputValueOnSelect 您可以透過將其設定為 true 來更新選擇時的輸入值。 |
布林值 | true |
| 4 | expandInput 您可以擴充套件列表檢視中的文字輸入，以便在下拉列表可見時使其全屏寬度，方法是將item-input設定為 true。 |
布林值 | false |
自動完成回撥函式
下表列出了 Framework7 中可用的下拉自動完成引數 -
| 序號 | 引數和描述 | 型別 | 預設值 |
|---|---|---|---|
| 1 | onChange 每當自動完成值更改時，都會執行此回撥函式。 |
function (autocomplete, value) | - |
| 2 | onOpen 每當自動完成開啟時，都會執行此回撥函式。 |
function (autocomplete) | - |
| 3 | onClose 每當自動完成關閉時，都會執行此回撥函式。 |
function (autocomplete) | - |
自動完成模板
下表列出了 Framework7 中可用的下拉自動完成引數 -
| 序號 | 引數和描述 | 型別 | 預設值 |
|---|---|---|---|
| 1 | navbarTemplate 它是獨立的自動完成導航欄模板。 |
字串 | - |
| 2 | itemTemplate 它是獨立的 Template7 表單項。 |
字串 | - |
| 3 | dropdownTemplate 它是 Template7 下拉列表模板。 |
字串 | - |
| 4 | dropdownItemTemplate 它是 Template7 下拉列表項。 |
字串 | - |
| 5 | dropdownPlaceholderTemplate 它是 Template7 下拉列表佔位符項。 |
字串 | - |
預設模板
以下是上述定義的模板引數的預設模板程式碼片段 -
navbarTemplate
<div class = "navbar {{#if navbarTheme}}theme-{{navbarTheme}}{{/if}}">
<div class = "navbar-inner">
<div class = "left sliding">
{{#if material}}
<a href = "#" class = "link {{#if inPopup}}close-popup{{else}}back{{/if}} icon-only">
<i class = "icon icon-back"></i>
</a>
{{else}}
<a href = "#" class = "link {{#if inPopup}}close-popup{{else}}back{{/if}}">
<i class = "icon icon-back"></i>
{{#if inPopup}}
<span>{{popupCloseText}}</span>
{{else}}
<span>{{backText}}</span>
{{/if}}
</a>
{{/if}}
</div>
<div class = "center sliding">{{pageTitle}}</div>
{{#if preloader}}
<div class = "right">
<div class = "autocomplete-preloader preloader
{{#if preloaderColor}}
preloader-{{preloaderColor}}
{{/if}}">
</div>
</div>
{{/if}}
</div>
</div>
itemTemplate
<li>
<label class = "label-{{inputType}} item-content">
<input type = "{{inputType}}" name = "{{inputName}}" value = "{{value}}" {{#if selected}}checked{{/if}}>
{{#if material}}
<div class = "item-media">
<i class = "icon icon-form-{{inputType}}"></i>
</div>
<div class = "item-inner">
<div class = "item-title">{{text}}</div>
</div>
{{else}}
{{#if checkbox}}
<div class = "item-media">
<i class = "icon icon-form-checkbox"></i>
</div>
{{/if}}
<div class = "item-inner">
<div class = "item-title">{{text}}</div>
</div>
{{/if}}
</label>
</li>
dropdownTemplate
<div class = "autocomplete-dropdown">
<div class = "autocomplete-dropdown-inner">
<div class = "list-block">
<ul></ul>
</div>
</div>
{{#if preloader}}
<div class = "autocomplete-preloader preloader
{{#if preloaderColor}}
preloader-{{preloaderColor}}
{{/if}}">
{{#if material}}
{{materialPreloaderHtml}}
{{/if}}
</div>
{{/if}}
</div>
dropdownItemTemplate
<li>
<label class = "{{#unless placeholder}}label-radio{{/unless}} item-content" data-value = "{{value}}">
<div class = "item-inner">
<div class = "item-title">{{text}}</div>
</div>
</label>
</li>
dropdownPlaceholderTemplate
<li class = "autocomplete-dropdown-placeholder">
<div class = "item-content">
<div class = "item-inner">
<div class = "item-title">{{text}}</div>
</div>
</label>
</li>
自動完成方法
下表指定了 Framework7 中可用的自動完成方法 -
| 序號 | 方法及描述 |
|---|---|
| 1 | myAutocomplete.params 定義與物件一起傳遞的初始化引數。 |
| 2 | myAutocomplete.value 它定義包含所選值的陣列。 |
| 3 | myAutocomplete.opened 如果將其設定為 true，它將開啟自動完成。 |
| 4 | myAutocomplete.dropdown 它指定自動完成下拉列表的例項。 |
| 5 | myAutocomplete.popup 它指定自動完成彈出視窗的例項。 |
| 6 | myAutocomplete.page 它指定自動完成頁面的例項。 |
| 7 | myAutocomplete.pageData 它定義自動完成頁面資料。 |
| 8 | myAutocomplete.searchbar 它定義自動完成搜尋欄例項。 |
自動完成屬性
下表指定了 Framework7 中可用的自動完成方法 -
| 序號 | 屬性及描述 |
|---|---|
| 1 | myAutocomplete.open() 它開啟自動完成，可以用作下拉列表、彈出視窗或頁面。 |
| 2 | myAutocomplete.close() 它關閉自動完成。 |
| 3 | myAutocomplete.showPreloader() 它顯示自動完成載入程式。 |
| 4 | myAutocomplete.hidePreloader() 它隱藏自動完成載入程式。 |
| 5 | myAutocomplete.destroy() 它破壞自動完成載入程式例項並刪除所有事件。 |
示例
以下示例演示了在 Framework7 中隱藏自動完成引數的使用 -
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>Autocomplete</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "pages">
<div data-page = "home" class = "page navbar-fixed">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left"> </div>
<div class = "center">Autcomplete</div>
<div class = "right"> </div>
</div>
</div>
<div class = "page-content">
<div class = "content-block-title">Simple Dropdown Autocomplete</div>
<div class = "list-block">
<ul>
<li class = "item-content">
<div class = "item-title label">Country</div>
<div class = "item-input">
<input type = "text" placeholder = "Country" id = "autocomplete-dropdown">
</div>
</li>
</ul>
</div>
<div class = "content-block-title">Dropdown With Input Expand</div>
<div class = "list-block">
<ul>
<li class = "item-content">
<div class = "item-title label">Country</div>
<div class = "item-input">
<input type = "text" placeholder = "Country" id = "autocomplete-dropdown-expand">
</div>
</li>
</ul>
</div>
<div class = "content-block-title">Dropdown With All Values</div>
<div class = "list-block">
<ul>
<li class = "item-content">
<div class = "item-title label">Country</div>
<div class = "item-input">
<input type = "text" placeholder = "Country" id = "autocomplete-dropdown-all">
</div>
</li>
</ul>
</div>
<div class = "content-block-title">Dropdown With Placeholder</div>
<div class = "list-block">
<ul>
<li class = "item-content">
<div class = "item-title label">Country</div>
<div class = "item-input">
<input type = "text" placeholder = "Country" id = "autocomplete-dropdown-placeholder">
</div>
</li>
</ul>
</div>
<div class = "content-block-title">Simple Standalone Autocomplete</div>
<div class = "list-block">
<ul>
<li>
<a href = "#" id = "autocomplete-standalone" class = "item-link item-content autocomplete-opener">
<input type = "hidden">
<div class = "item-inner">
<div class = "item-title">Favorite Country</div>
<div class = "item-after"></div>
</div>
</a>
</li>
</ul>
</div>
<div class = "content-block-title">Popup Standalone Autocomplete</div>
<div class = "list-block">
<ul>
<li>
<a href = "#" id = "autocomplete-standalone-popup" class = "item-link item-content autocomplete-opener">
<input type = "hidden">
<div class = "item-inner">
<div class = "item-title">Favorite Country</div>
<div class = "item-after"></div>
</div>
</a>
</li>
</ul>
</div>
<div class = "content-block-title">Multiple Values Standalone Autocomplete</div>
<div class = "list-block">
<ul>
<li>
<a href = "#" id = "autocomplete-standalone-multiple" class = "item-link item-content autocomplete-opener">
<input type = "hidden">
<div class = "item-inner">
<div class = "item-title">Favorite Countries</div>
<div class = "item-after"></div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
var myApp = new Framework7();
var $$ = Dom7;
var mainView = myApp.addView('.view-main');
// Countries data array
var countries = ('India Africa Australia NewZealand England WestIndies Scotland Zimbabwe Srilanka Bangladesh').split(' ');
// Simple Dropdown
var autocompleteDropdownSimple = myApp.autocomplete ({
input: '#autocomplete-dropdown',
openIn: 'dropdown',
source: function (autocomplete, query, render) {
var results = [];
if (query.length === 0) {
render(results);
return;
}
// You can find matched items
for (var i = 0; i < countries.length; i++) {
if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0)
results.push(countries[i]);
}
// Display the items by passing array with result items
render(results);
}
});
// Dropdown with input expand
var autocompleteDropdownExpand = myApp.autocomplete ({
input: '#autocomplete-dropdown-expand',
openIn: 'dropdown',
expandInput: true, // expandInput used as item-input in List View will be expanded to full screen wide
//during dropdown
source: function (autocomplete, query, render) {
var results = [];
if (query.length === 0) {
render(results);
return;
}
// Find matched items
for (var i = 0; i < countries.length; i++) {
if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(countries[i]);
}
// Display the items by passing array with result items
render(results);
}
});
// Dropdown with all values
var autocompleteDropdownAll = myApp.autocomplete ({
input: '#autocomplete-dropdown-all',
openIn: 'dropdown',
source: function (autocomplete, query, render) {
var results = [];
// You can find matched items
for (var i = 0; i < countries.length; i++) {
if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0)
results.push(countries[i]);
}
// Display the items by passing array with result items
render(results);
}
});
// Dropdown with placeholder
var autocompleteDropdownPlaceholder = myApp.autocomplete ({
input: '#autocomplete-dropdown-placeholder',
openIn: 'dropdown',
dropdownPlaceholderText: 'Type as "India"',
source: function (autocomplete, query, render) {
var results = [];
if (query.length === 0) {
render(results);
return;
}
// You can find matched items
for (var i = 0; i < countries.length; i++) {
if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0)
results.push(countries[i]);
}
// Display the items by passing array with result items
render(results);
}
});
// Simple Standalone
var autocompleteStandaloneSimple = myApp.autocomplete ({
openIn: 'page', //open in page
opener: $$('#autocomplete-standalone'), //link that opens autocomplete
backOnSelect: true, //go back after we select something
source: function (autocomplete, query, render) {
var results = [];
if (query.length === 0) {
render(results);
return;
}
// You can find matched items
for (var i = 0; i < countries.length; i++) {
if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0)
results.push(countries[i]);
}
// Display the items by passing array with result items
render(results);
},
onChange: function (autocomplete, value) {
// Here add the item text value to item-after
$$('#autocomplete-standalone').find('.item-after').text(value[0]);
// You can add item value to input value
$$('#autocomplete-standalone').find('input').val(value[0]);
}
});
// Standalone Popup
var autocompleteStandalonePopup = myApp.autocomplete ({
openIn: 'popup', // Opens the Autocomplete in page
opener: $$('#autocomplete-standalone-popup'), // It will open standalone autocomplete popup
backOnSelect: true, //After selecting item, then go back to page
source: function (autocomplete, query, render) {
var results = [];
if (query.length === 0) {
render(results);
return;
}
// You can find matched items
for (var i = 0; i < countries.length; i++) {
if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(countries[i]);
}
// Display the items by passing array with result items
render(results);
},
onChange: function (autocomplete, value) {
// Here add the item text value to item-after
$$('#autocomplete-standalone-popup').find('.item-after').text(value[0]);
// You can add item value to input value
$$('#autocomplete-standalone-popup').find('input').val(value[0]);
}
});
// Multiple Standalone
var autocompleteStandaloneMultiple = myApp.autocomplete ({
openIn: 'page', //Opens the Autocomplete in page
opener: $$('#autocomplete-standalone-multiple'), //link that opens autocomplete
multiple: true, //Allow multiple values
source: function (autocomplete, query, render) {
var results = [];
if (query.length === 0) {
render(results);
return;
}
// You can find matched items
for (var i = 0; i < countries.length; i++) {
if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(countries[i]);
}
// Display the items by passing array with result items
render(results);
},
onChange: function (autocomplete, value) {
// Here add the item text value to item-after
$$('#autocomplete-standalone-multiple').find('.item-after').text(value.join(', '));
// You can add item value to input value
$$('#autocomplete-standalone-multiple').find('input').val(value.join(', '));
}
});
</script>
</body>
</html>
輸出
讓我們執行以下步驟來了解上面給出的程式碼是如何工作的：
將上面給出的 HTML 程式碼儲存為伺服器根資料夾中的autocomplete.html檔案。
以 https:///autocomplete.html 的形式開啟此 HTML 檔案，輸出將如下所示。
該示例提供了簡單下拉列表、包含所有值的下拉列表、帶佔位符的下拉列表、獨立自動完成等值自動完成。
Framework7 - 選擇器
描述
Picker 類似於 iOS 原生 Picker，它是一個功能強大的元件，允許您從列表中選擇任何值，還可以用於建立自定義疊加 Picker。您可以將 Picker 用作內聯元件或疊加層。疊加層 Picker 將在平板電腦（iPad）上自動轉換為 Popover。
使用以下 App 的方法，您可以建立並初始化 JavaScript 方法 -
myApp.picker(parameters)
其中parameters是用於初始化 Picker 例項的必需物件，它是一個必需的方法。
Picker 引數
下表指定了 Picker 中可用的引數 -
| 序號 | 引數和描述 | 型別 | 預設值 |
|---|---|---|---|
| 1 | 容器 用於為內聯 Picker 生成 Picker HTML 的 CSS 選擇器字串或 HTMLElement。 |
字串或 HTMLElement | - |
| 2 | 輸入 使用 CSS 選擇器字串或 HTMLElement 與相關輸入元素放置。 |
字串或 HTMLElement | - |
| 3 | scrollToInput 每當 Picker 開啟時，它用於滾動輸入的視口（頁面內容）。 |
布林值 | true |
| 4 | inputReadOnly 用於在指定的輸入上設定“只讀”屬性。 |
布林值 | true |
| 5 | convertToPopover 它用於在 iPad 等大螢幕上將 Picker 模態轉換為 Popover。 |
布林值 | true |
| 6 | onlyOnPopover 您可以透過啟用它在 Popover 中開啟 Picker。 |
布林值 | true |
| 7 | cssClass 對於 Picker 模態，您可以使用其他 CSS 類名稱。 |
字串 | - |
| 8 | closeByOutsideClick 您可以透過啟用該方法透過單擊 Picker 或輸入元素外部來關閉 Picker。 |
布林值 | false |
| 9 | 工具欄 它用於啟用 Picker 模態工具欄。 |
布林值 | true |
| 10 | toolbarCloseText 用於完成/關閉工具欄按鈕。 |
字串 | '完成' |
| 11 | toolbarTemplate 它是工具欄 HTML 模板，預設情況下它是具有以下模板的 HTML 字串 - <div class = "toolbar">
<div class = "toolbar-inner">
<div class = "left"></div>
<div class = "right">
<a href = "#" class = "link close-picker">
{{closeText}}
</a>
</div>
</div>
</div>
|
字串 | - |
特定 Picker 引數
下表列出了可用的特定 Picker 引數 -
| 序號 | 引數和描述 | 型別 | 預設值 |
|---|---|---|---|
| 1 | rotateEffect 它在 Picker 中啟用 3D 旋轉效果。 |
布林值 | false |
| 2 | momentumRatio 當您在快速觸控和移動後釋放 Picker 時，它會產生更大的動量。 |
數字 | 7 |
| 3 | updateValuesOnMomentum 用於在動量期間更新 Picker 和輸入值。 |
布林值 | false |
| 4 | updateValuesOnTouchmove 用於在觸控移動期間更新 Picker 和輸入值。 |
布林值 | true |
| 5 | 值 該陣列具有其初始值，並且每個陣列項都表示相關列的值。 |
陣列 | - |
| 6 | formatValue 該函式用於格式化輸入值，它應返回新的/格式化的字串值。values和displayValues是相關列的陣列。 |
function (p, values, displayValues) | - |
| 7 | 列 每個陣列項都表示一個包含列引數的物件。 |
陣列 | - |
Picker 引數回撥
下表顯示了 Picker 中可用的回撥函式列表 -
| 序號 | 回撥函式及描述 | 型別 | 預設值 |
|---|---|---|---|
| 1 | onChange 每當 Picker 值更改時，回撥函式將被執行，並且values和displayValues是相關列的陣列。 |
function (p, values, displayValues) | - |
| 2 | onOpen 每當 Picker 開啟時，回撥函式將被執行。 |
function (p) | - |
| 3 | onClose 每當 Picker 關閉時，回撥函式將被執行。 |
function (p) | - |
列引數
在配置 Picker 時，我們需要傳遞cols引數。它表示為一個數組，其中每個專案都是一個包含列引數的物件 -
| 序號 | 引數和描述 | 型別 | 預設值 |
|---|---|---|---|
| 1 | 值 您可以使用陣列指定字串列值。 |
陣列 | - |
| 2 | displayValues 它包含字串列值的陣列，並且當未指定時，它將從values引數中顯示值。 |
陣列 | - |
| 3 | cssClass 用於在列 HTML 容器上設定的CSS 類名稱。 |
字串 | - |
| 4 | textAlign 它用於設定列值的文字對齊方式，可以是“left”，“center”或“right”。 |
字串 | - |
| 5 | 寬度 預設情況下，寬度會自動計算。如果您需要使用應以px為單位的依賴列在 Picker 中修復列寬度。 |
數字 | - |
| 6 | 分隔符 它用於應為視覺分隔符的列，它沒有任何值。 |
布林值 | false |
| 7 | 內容 它用於使用列的內容指定分隔符列(divider:true)。 |
字串 | - |
列回撥引數
| 序號 | 回撥函式及描述 | 型別 | 預設值 |
|---|---|---|---|
| 1 | onChange 每當列值更改時，回撥函式將執行。value和displayValue分別表示當前列的value和displayValue。 |
function (p, value, displayValue) | - |
Picker 屬性
Picker 變數具有許多屬性，這些屬性在下表中給出 -
| 序號 | 屬性及描述 |
|---|---|
| 1 | myPicker.params 您可以使用物件初始化傳遞的引數。 |
| 2 | myPicker.value 每列選中的值由一個專案陣列表示。 |
| 3 | myPicker.displayValue 每列選中的顯示值由一個專案陣列表示。 |
| 4 | myPicker.opened 當選擇器開啟時，它設定為true值。 |
| 5 | myPicker.inline 當選擇器內聯時，它設定為true值。 |
| 6 | myPicker.cols Picker 列有其自身的方法和屬性。 |
| 7 | myPicker.container Dom7 例項用於 HTML 容器。 |
Picker 方法
picker 變數有一些有用的方法，如下表所示：
| 序號 | 方法及描述 |
|---|---|
| 1 | myPicker.setValue(values, duration) 用於設定新的 picker 值。values 是一個數組，其中每個專案代表每列的value。duration - 以毫秒為單位的過渡持續時間。 |
| 2 | myPicker.open() 用於開啟 Picker。 |
| 3 | myPicker.close() 用於關閉 Picker。 |
| 4 | myPicker.destroy() 用於銷燬 Picker 例項並移除所有事件。 |
列屬性
myPicker.cols 陣列中的每一列也有其自身的有用屬性，如下表所示：
//Get first column var col = myPicker.cols[0];
| 序號 | 屬性及描述 |
|---|---|
| 1 | col.container 您可以使用列 HTML 容器建立一個例項。 |
| 2 | col.items 您可以使用列專案 HTML 元素建立一個例項。 |
| 3 | col.value 用於選擇當前列的值。 |
| 4 | col.displayValue 用於選擇當前列的顯示值。 |
| 5 | col.activeIndex 給出當前索引號，即選定/活動的專案。 |
列方法
有用的列方法如下表所示：
| 序號 | 方法及描述 |
|---|---|
| 1 | col.setValue(value, duration) 用於為當前列設定新值。value 必須是新值，duration 是以毫秒為單位的過渡持續時間。 |
| 2 | col.replaceValues(values, displayValues) 用於用新值替換列值和 displayValues。 |
當您將 Picker 初始化為內聯 Picker 時，它用於從其 HTML 容器訪問 Picker 的例項。
var myPicker = $$('.picker-inline')[0].f7Picker;
如下表所示，Picker 有不同型別：
| 序號 | 選項卡型別和描述 |
|---|---|
| 1 | 帶有單個值的 Picker
這是一個強大的元件，允許您從列表中選擇任何值。 |
| 2 | 兩個值和 3D 旋轉效果
在 picker 中，您可以使用 3D 旋轉效果。 |
| 3 | 依賴值
對於指定的元素，值相互依賴。 |
| 4 | 自定義工具欄
您可以在單個頁面上使用一個或多個 picker 進行自定義。 |
| 5 | 內聯 Picker / 日期時間
您可以在內聯 picker 中選擇多個值。例如，日期有日期、月份、年份，時間有小時、分鐘、秒。 |
Framework7 - 日曆
描述
日曆元件允許您輕鬆處理日期，並且可以用作內聯元件或覆蓋元件。覆蓋日曆將在平板電腦上自動轉換為彈出視窗。
日曆只能透過 JavaScript 建立和初始化。您需要使用相關的 App 方法，如下所示：
myApp.calendar(parameters) - 此方法返回初始化的日曆例項。它接受一個物件作為引數。
下表顯示了 Framework7 中日曆的使用情況：
| 序號 | 日曆用法和說明 |
|---|---|
| 1 | 日曆引數
Framework7 提供了與日曆一起使用的引數列表。 |
| 2 | 日曆方法和屬性
初始化日曆後，您將獲得一個初始化的例項變數來使用日曆方法和屬性。 |
| 3 | 訪問日曆的例項
當您將日曆初始化為內聯時，可以從其 HTML 容器訪問日曆例項。 |
Framework7 - 重新整理
描述
這是一個特殊的元件，用於透過拉動來重新整理（重新載入）頁面內容。
以下程式碼顯示瞭如何重新整理頁面內容：
<div class = "page">
<!-- Page content should have additional "pull-to-refresh-content" class -->
<div class = "page-content pull-to-refresh-content" data-ptr-distance = "55">
<!-- Default pull to refresh layer-->
<div class = "pull-to-refresh-layer">
<div class = "preloader"></div>
<div class = "pull-to-refresh-arrow"></div>
</div>
<!-- usual content below -->
<div class = "list-block">
...
</div>
</div>
重新整理中使用了以下類：
page-content - 它有一個額外的pull-to-refresh-content類，並且需要啟用下拉重新整理。
pull-to-refresh-layer - 這是一個隱藏的層，用於下拉重新整理視覺元素，它只是一個載入器和一個箭頭。
data-ptr-distance = "55" - 這是一個額外的屬性，允許您設定自定義“下拉重新整理”觸發距離，其預設值為 44px。
下拉重新整理事件
在“下拉重新整理”中，有一些 JavaScript 事件，如下表所示：
| 序號 | 事件及描述 | 目標 |
|---|---|---|
| 1 | pullstart 每當您開始下拉重新整理內容時，它都會被觸發。 |
下拉重新整理內容。 <div class = "pull-to-refresh-content"> |
| 2 | pullmove 當您下拉重新整理內容時，它會被觸發。 |
下拉重新整理內容。 <div class="pull-to-refresh-content"> |
| 3 | pullend 每當您釋放下拉重新整理內容時，它都會被觸發。 |
下拉重新整理內容。 <div class="pull-to-refresh-content"> |
| 4 | refresh 當下拉重新整理進入“重新整理中”狀態時，此事件將被觸發。 |
下拉重新整理內容。 <div class="pull-to-refresh-content"> |
| 5 | refreshdone 重新整理完成後，它會回到初始狀態，它將在呼叫pullToRefreshDone方法後完成。 |
下拉重新整理內容。 <div class="pull-to-refresh-content"> |
有一些 App 方法可以與下拉重新整理一起使用。
| 序號 | App 的方法和說明 |
|---|---|
| 1 | myApp.pullToRefreshDone(ptrContent) 它用於重置下拉重新整理內容。 |
| 2 | myApp.pullToRefreshTrigger(ptrContent) 它用於在指定的下拉重新整理內容上觸發重新整理。 |
| 3 | myApp.destroyPullToRefresh(ptrContent) 它用於銷燬/停用指定下拉重新整理內容上的下拉重新整理。 |
| 4 | myApp.initPullToRefresh(ptrContent) 它用於初始化/啟用下拉重新整理內容。 |
其中ptrContent用於HTMLElement或字串到下拉重新整理內容以重置/觸發或停用/啟用。
示例
以下示例演示了重新整理元件的使用，該元件啟動頁面內容的重新整理：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>Pull To Refresh</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css">
</head>
<div class="views">
<div class="view view-main">
<div class="pages">
<div data-page="home" class="page navbar-fixed">
<div class="navbar">
<div class="navbar-inner">
<div class="left"> </div>
<div class="center">Pull To Refresh</div>
<div class="right"> </div>
</div>
</div>
<div class="page-content pull-to-refresh-content">
<div class="pull-to-refresh-layer">
<div class="preloader"></div>
<div class="pull-to-refresh-arrow"></div>
</div>
<div class="list-block media-list">
<ul>
<li class="item-content">
<div class="item-media"><img src="/framework7/images/apple.png" width="44"></div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">apple</div>
</div>
</div>
</li>
<li class="item-content">
<div class="item-media"><img src="/framework7/images/froots_img.jpg" width="44"></div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">strawberry</div>
</div>
</div>
</li>
<li class="item-content">
<div class="item-media"><img src="/framework7/images/mango.jpg" width="44"></div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">Mango</div>
</div>
</div>
</li>
</ul>
<div class="list-block-label">
<p>Just pull page down to let the magic happen.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
var myApp = new Framework7();
var $$ = Dom7;
// Dummy Content
var fruits = ['mango', 'orange', 'watermelon', 'banana'];
// Pull to refresh content
var ptrContent = $$('.pull-to-refresh-content');
// Add 'refresh' listener on it
ptrContent.on('refresh', function (e) {
// Emulate 2s loading
setTimeout(function () {
var picURL = 'images/Fruit.jpg' + Math.round(Math.random() * 100);
var fruit = fruits[Math.floor(Math.random() * fruits.length)];
var itemHTML = '<li class="item-content">' +
'<div class="item-media"><img src="/framework7/images/Fruit.jpg" width="44"/></div>' +
'<div class="item-inner">' +
'<div class="item-title-row">' +
'<div class="item-title">' + fruit + '</div>' +
'</div>' + '</div>' + '</li>';
// Prepend new list element
ptrContent.find('ul').prepend(itemHTML);
// When loading done, we need to reset it
myApp.pullToRefreshDone();
}, 2000);
});
</script>
</html>
輸出
讓我們執行以下步驟來了解上面給出的程式碼是如何工作的：
將上面給出的 HTML 程式碼儲存為伺服器根資料夾中的pull_to_refresh.html檔案。
開啟此 HTML 檔案，網址為 https:///pull_to_refresh.html，輸出結果如下所示。
當用戶下拉時，頁面將使用內容重新整理。
Framework7 - 無限滾動
描述
無限滾動允許您載入其他內容，並在頁面接近底部時執行所需的操作。
以下 HTML 佈局顯示了無限滾動：
<div class = "page">
<div class = "page-content infinite-scroll" data-distance = "100">
...
</div>
</div>
上述佈局包含以下類：
page-content infinite-scroll - 用於無限滾動容器。
data-distance - 此屬性允許您配置頁面底部觸發無限滾動事件的距離（以 px 為單位），其預設值為50px。
如果要在頁面頂部使用無限滾動，則需要將額外的“infinite-scroll-top”類新增到“page-content”中：
<div class = "page">
<div class = "page-content infinite-scroll infinite-scroll-top">
...
</div>
</div>
無限滾動事件
infinite - 用於在頁面滾動到達底部指定距離時觸發。它將由div class = "page-content infinite-scroll"作為目標。
有兩個 App 方法可以與無限滾動容器一起使用：
要將無限滾動事件偵聽器新增到指定的 HTML 容器，請使用以下方法：
myApp.attachInfiniteScroll(container)
您可以使用以下方法從指定的 HTML 容器中刪除無限滾動事件偵聽器：
myApp.detachInfiniteScroll(container)
其中引數是作為HTMLElement或字串用於無限滾動容器的必需選項。
示例
以下示例演示了無限滾動，當頁面滾動接近底部時載入其他內容：
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>infinite_scroll</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left"> </div>
<div class = "center sliding">Infinite Scroll</div>
<div class = "right"> </div>
</div>
</div>
<div class = "pages navbar-through">
<div data-page = "home" class = "page">
<div class = "page-content infinite-scroll">
<div class = "list-block">
<ul>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 1</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 2</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 3</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 4</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 5</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 6</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 7</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 8</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 9</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 10</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 11</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 12</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 13</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 14</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 15</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 16</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 17</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 18</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 19</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 20</div>
</div>
</li>
</ul>
</div>
<div class = "infinite-scroll-preloader">
<div class = "preloader"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<style>
.infinite-scroll-preloader {
margin-top:-20px;
margin-bottom:10px;
text-align:center;
}
.infinite-scroll-preloader .preloader {
width:34px;
height:34px;
}
</style>
<script>
var myApp = new Framework7();
var $$ = Dom7;
// Loading flag
var loading = false;
// Last loaded index
var lastIndex = $$('.list-block li').length;
// Max items to load
var maxItems = 60;
// Append items per load
var itemsPerLoad = 20;
// Attach 'infinite' event handler
$$('.infinite-scroll').on('infinite', function () {
// Exit, if loading in progress
if (loading) return;
// Set loading flag
loading = true;
// Emulate 1s loading
setTimeout(function () {
// Reset loading flag
loading = false;
if (lastIndex >= maxItems) {
// Nothing more to load, detach infinite scroll events to prevent unnecessary loadings
myApp.detachInfiniteScroll($$('.infinite-scroll'));
// Remove preloader
$$('.infinite-scroll-preloader').remove();
return;
}
// Generate new items HTML
var html = '';
for (var i = lastIndex + 1; i <= lastIndex + itemsPerLoad; i++) {
html += '<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">
Item ' + i + '
</div>
</div>
</li>';
}
// Append new items
$$('.list-block ul').append(html);
// Update last loaded index
lastIndex = $$('.list-block li').length;
}, 1000);
});
</script>
</body>
</html>
輸出
讓我們執行以下步驟來了解上面給出的程式碼是如何工作的：
將上面給出的 HTML 程式碼儲存為伺服器根資料夾中的infinite_scroll.html檔案。
開啟此 HTML 檔案，網址為 https:///infinite_scroll.html，輸出結果如下所示。
此示例允許在頁面滾動到達底部指定距離時載入其他內容。
Framework7 - 訊息
描述
訊息是 Framework7 的元件，它在應用程式中提供評論和訊息系統的視覺化。
訊息佈局
framework7 具有以下訊息佈局結構：
<div class = "page">
<div class = "page-content messages-content">
<div class = "messages">
<!-- Defines the date stamp -->
<div class = "messages-date">Monday, Apr 26 <span>10:30</span></div>
<!-- Displays the sent message and by default, it will be in green color on right side -->
<div class = "message message-sent">
<!-- Define the text with bubble type -->
<div class = "message-text">Hello</div>
</div>
<!-- Displays the another sent message -->
<div class = "message message-sent">
<!-- Define the text with bubble type -->
<div class = "message-text">How are you?</div>
</div>
<!-- Displays the received message and by default, it will be in grey color on left side -->
<div class = "message message-with-avatar message-received">
<!-- Provides sender name -->
<div class = "message-name">Smith</div>
<!-- Define the text with bubble type -->
<div class = "message-text">I am fine, thanks</div>
<!-- Defines the another date stamp -->
<div class = "messages-date">Tuesday, April 28 <span>11:16</span></div>
</div>
</div>
</div>
佈局在不同的區域包含以下類：
訊息頁面佈局
下表顯示了訊息頁面佈局的類及其描述。
| 序號 | 類和描述 |
|---|---|
| 1 | messages-content 這是新增到“page-content”的必需附加類，用於訊息包裝器。 |
| 2 | messages 它是訊息氣泡的必需元素。 |
| 3 | messages-date 它使用日期戳容器來顯示傳送或接收訊息的日期和時間。 |
| 4 | message 它是要顯示的單個訊息。 |
單個訊息內部部分
下表顯示了簡單訊息內部部分的類及其描述。
| 序號 | 類和描述 |
|---|---|
| 1 | message-name 它提供傳送者的姓名。 |
| 2 | message-text 使用氣泡型別定義文字。 |
| 3 | message-avatar 它指定傳送者的頭像。 |
| 4 | message-label 它指定氣泡下方的文字標籤。 |
單個訊息容器的其他類
下表顯示了單個訊息容器描述的其他類。
| 序號 | 類和描述 |
|---|---|
| 1 | message-sent 它指定訊息是由使用者傳送的，並在右側顯示為綠色背景顏色。 |
| 2 | message-received 它用於顯示單個訊息，指示訊息是由使用者接收的，並在左側顯示為灰色背景顏色。 |
| 3 | message-pic 它是用於使用單個訊息顯示影像的附加類。 |
| 4 | message-with-avatar 它是用於顯示帶有頭像的單個訊息（已接收或已傳送）的附加類。 |
| 5 | message-with-tail 您可以為單個訊息（已接收或已傳送）新增氣泡尾部。 |
單個訊息的其他可用類
下表顯示了單個訊息的可用類及其描述。
| 序號 | 類和描述 |
|---|---|
| 1 | message-hide-name 它是用於隱藏單個訊息（已接收或已傳送）的訊息名稱的附加類。 |
| 2 | message-hide-avatar 它是用於隱藏單個訊息（已接收或已傳送）的訊息頭像的附加類。 |
| 3 | message-hide-label 它是用於隱藏單個訊息（已接收或已傳送）的訊息標籤的附加類。 |
| 4 | message-last 您可以使用此類來指示當前對話中單個訊息（已接收或已傳送）的一個傳送者最後接收或傳送的訊息。 |
| 5 | message-first 您可以使用此類來指示當前對話中單個訊息（已接收或已傳送）的一個傳送者第一次接收或傳送的訊息。 |
使用 JavaScript 初始化訊息
您可以使用以下方法透過 JavaScript 初始化訊息：
myApp.messages(messagesContainer, parameters)
該方法接受兩個選項：
messagesContainer - 它是一個必需的 HTML 元素或字串，包含訊息容器 HTML 元素。
parameters - 它指定一個包含訊息引數的物件。
訊息引數
下表顯示了訊息引數及其說明。
| 序號 | 引數 & 說明 | 型別 | 預設值 |
|---|---|---|---|
| 1 | autoLayout 透過啟用它，它會為每條訊息新增其他必需的類。 |
布林值 | true |
| 2 | newMessagesFirst 透過啟用它，您可以將訊息顯示在頂部，而不是顯示在底部。 |
布林值 | false |
| 3 | messages 它顯示一個訊息陣列，其中每條訊息都應表示為包含訊息引數的物件。 |
陣列 | - |
| 4 | messageTemplate 它顯示單個訊息模板。 |
字串 | - |
訊息屬性
下表顯示了訊息屬性及其說明。
| 序號 | 屬性 & 說明 |
|---|---|
| 1 | myMessages.params 您可以使用物件初始化傳遞的引數。 |
| 2 | myMessages.container 定義包含訊息欄 HTML 容器的 DOM7 元素。 |
訊息方法
下表顯示了訊息方法及其說明。
| 序號 | 方法 & 說明 |
|---|---|
| 1 | myMessages.addMessage(messageParameters, method, animate); 可以使用 method 引數將訊息新增到開頭或結尾。 它具有以下引數：
|
| 2 | myMessages.appendMessage(messageParameters, animate); 它將訊息新增到訊息容器的末尾。 |
| 3 | myMessages.prependMessage(messageParameters, animate); 它將訊息新增到訊息容器的開頭。 |
| 4 | myMessages.addMessages(messages, method, animate); 您可以一次新增多條訊息。 它具有以下引數：
|
| 5 | myMessages.removeMessage(message); 它用於刪除訊息。 它具有以下引數：
|
| 6 | myMessages.removeMessages(messages); 您可以刪除多條訊息。 它具有以下引數：
|
| 7 | myMessages.scrollMessages(); 您可以根據新訊息的第一個引數，從上到下或從下到上滾動訊息。 |
| 8 | myMessages.layout(); 可以將自動佈局應用於訊息。 |
| 9 | myMessages.clean(); 它用於清理訊息。 |
| 10 | myMessages.destroy(); 它用於銷燬訊息。 |
單個訊息引數
下表顯示了單個訊息的引數及其說明。
| 序號 | 引數 & 說明 | 型別 | 預設值 |
|---|---|---|---|
| 1 | 文字 它定義訊息文字，可以是 HTML 字串。 |
字串 | - |
| 2 | name 它指定傳送者姓名。 |
字串 | - |
| 3 | avatar 它指定傳送者頭像 URL 字串。 |
字串 | - |
| 4 | time 它指定訊息的時間字串，例如“上午 9:45”、“18:35”。 |
字串 | - |
| 5 | type 它提供訊息型別，無論是已傳送還是已接收的訊息。 |
字串 | sent |
| 6 | label 它定義訊息的標籤。 |
字串 | - |
| 7 | day 它提供訊息的日期字串，例如“星期日”、“星期一”、“昨天”等。 |
字串 | - |
使用 HTML 初始化訊息
您可以透過在 messages 中使用附加的 messages-init 類，並使用 data- 屬性傳遞所需的引數，來使用 HTML 而無需 JavaScript 初始化訊息，如下面的程式碼片段所示：
...
<div class = "page-content messages-content">
<!-- Initialize the messages using additional "messages-init" class-->
<div class = "messages messages-init" data-auto-layout = "true" data-new-messages-first = "false">
...
</div>
</div>
...
示例
以下示例演示了在 Framework7 中使用訊息：
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>Messages</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "pages">
<div data-page = "home" class = "page navbar-fixed toolbar-fixed">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left"> </div>
<div class = "center">Messages</div>
<div class = "right"> </div>
</div>
</div>
<div class = "toolbar messagebar">
<div class = "toolbar-inner">
<textarea placeholder = "Message"></textarea><a href = "#" class = "link">Send</a>
</div>
</div>
<div class = "page-content messages-content">
<div class = "messages">
<div class = "messages-date">Friday, Apr 26 <span>10:30</span></div>
<div class = "message message-sent">
<div class = "message-text">Hello</div>
</div>
<div class = "message message-sent">
<div class = "message-text">Happy Birthday</div>
</div>
<div class = "message message-received">
<div class = "message-name">Smith</div>
<div class = "message-text">Thank you</div>
<div style = "background-image:url(/framework7/images/person.png)" class = "message-avatar"></div>
</div>
<div class = "messages-date">Saturday, Apr 27 <span>9:30</span></div>
<div class = "message message-sent">
<div class = "message-text">Good Morning...</div>
</div>
<div class = "message message-sent">
<div class = "message-text"><img src = "/framework7/images/gm.jpg"></div>
<div class = "message-label">Delivered</div>
</div>
<div class = "message message-received">
<div class = "message-name">Smith</div>
<div class = "message-text">Very Good Morning...</div>
<div style = "background-image:url(/framework7/images/person.png)" class = "message-avatar"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
var myApp = new Framework7();
var $$ = Dom7;
// It indicates conversation flag
var conversationStarted = false;
// Here initiliaze the messages
var myMessages = myApp.messages('.messages', {
autoLayout:true
});
// Initiliaze the messagebar
var myMessagebar = myApp.messagebar('.messagebar');
// Displays the text after clicking the button
$$('.messagebar .link').on('click', function () {
// specifies the message text
var messageText = myMessagebar.value().trim();
// If there is no message, then exit from there
if (messageText.length === 0) return;
// Specifies the empty messagebar
myMessagebar.clear()
// Defines the random message type
var messageType = (['sent', 'received'])[Math.round(Math.random())];
// Provides the avatar and name for the received message
var avatar, name;
if(messageType === 'received') {
name = 'Smith';
}
// It adds the message
myMessages.addMessage ({
// It provides the message text
text: messageText,
// It displays the random message type
type: messageType,
// Specifies the avatar and name of the sender
avatar: avatar,
name: name,
// Displays the day, date and time of the message
day: !conversationStarted ? 'Today' : false,
time: !conversationStarted ? (new Date()).getHours() + ':' + (new Date()).getMinutes() : false
})
// Here you can update the conversation flag
conversationStarted = true;
});
</script>
</body>
</html>
輸出
讓我們執行以下步驟來了解上面給出的程式碼是如何工作的：
將上面給出的 HTML 程式碼儲存為伺服器根資料夾中的 messages.html 檔案。
開啟此 HTML 檔案，網址為 https:///messages.html，輸出將顯示如下。
當您在訊息框中鍵入訊息並單擊“傳送”按鈕時，它表示您的訊息已傳送，並在右側顯示為綠色背景顏色。
您收到的訊息將顯示在左側，帶有灰色背景以及傳送者姓名。
Framework7 - 訊息欄
描述
Framework7 提供了特殊的可調整大小的工具欄，以便在應用程式中使用訊息系統。
以下程式碼顯示了訊息欄佈局：
<div clas = "toolbar messagebar">
<div clas = "toolbar-inner">
<textarea placeholder = "Message"></textarea>
<a href = "#" clas = "link">Send</a>
</div>
</div>
在訊息欄中，“頁面”的內部非常重要，位於“messages-content”的右側：
<div class = "page toolbar-fixed">
<!-- messagebar -->
<div class = "toolbar messagebar">
<div class = "toolbar-inner">
<textarea placeholder = "Message"></textarea>
<a href = "#" class = "link">Send</a>
</div>
</div>
<!-- messages-content -->
<div class = "page-content messages-content">
<div class = "messages">
... messages
</div>
</div>
</div>
您可以使用以下方法透過 JavaScript 初始化訊息欄：
myApp.messagesbar(messagesbarContainer, parameters)
該方法有兩個選項：
messagesbarContainer - 它是一個必需的 HTML 元素或字串，包含訊息欄容器 HTML 元素。
parameters - 它指定一個包含訊息欄引數的物件。
例如 -
var myMessagebar = app.messagebar('.messagebar', {
maxHeight: 200
});
訊息欄引數
maxHeight - 它用於設定文字區域的最大高度，並根據其文字量調整大小。引數型別為 number，預設值為 null。
訊息欄屬性
下表顯示了訊息欄屬性。
| 序號 | 屬性及描述 |
|---|---|
| 1 | myMessagebar.params 您可以使用傳遞的初始化引數指定物件。 |
| 2 | myMessagebar.container 您可以使用訊息欄容器 HTML 元素指定 dom7 元素。 |
| 3 | myMessagebar.textarea 您可以使用訊息欄文字區域 HTML 元素指定 dom7 元素。 |
訊息欄方法
下表顯示了訊息欄方法。
| 序號 | 方法及描述 |
|---|---|
| 1 | myMessagebar.value(newValue); 它設定訊息欄文字區域的值/文字，如果未指定 newValue，則返回訊息欄文字區域的值。 |
| 2 | myMessagebar.clear(); 它清除文字區域並更新/重置大小。 |
| 3 | myMessagebar.destroy(); 它銷燬訊息欄例項。 |
使用 HTML 初始化訊息欄
您可以透過在 .messagebar 中新增 messagebar-init 類，使用 HTML 而無需 JavaScript 方法和屬性初始化訊息欄，並且您可以使用 data- 屬性傳遞所需的引數。
以下程式碼指定了使用 HTML 初始化訊息欄：
<div class = "toolbar messagebar messagebar-init" data-max-height = "200">
<div class = "toolbar-inner">
<textarea placeholder = "Message"></textarea>
<a href = "#" class = "link">Send</a>
</div>
</div>
訪問訊息欄的例項
如果使用 HTML 初始化訊息欄，則可以訪問訊息欄例項；這是透過使用其容器元素的 f7 Message bar 屬性實現的。
var myMessagebar = $$('.messagebar')[0].f7Messagebar;
// Now you can use it
myMessagebar.value('Hello world');
您可以檢視此 連結 中解釋的訊息欄示例。
Framework7 - 通知
描述
通知用於顯示所需的訊息，這些訊息顯示為推送（或本地）iOS 通知。
下表詳細演示了通知的使用：
| 序號 | 通知用法 & 說明 |
|---|---|
| 1 | 通知 JavaScript API
還可以使用相關的應用程式方法透過 JavaScript 新增或關閉通知。 |
| 2 | 通知佈局
Framework7 通知將透過 JavaScript 新增。 |
| 3 | iOS 示例
Framework7 允許您在 iOS 佈局中使用不同型別的通知。 |
| 4 | Material 示例
Framework7 通知也可以在 Material 佈局中使用。 |
Framework7 - 延遲載入
描述
延遲載入會延遲給定頁面上的影像載入過程。延遲載入可提高滾動效能，加快頁面載入速度並節省流量。
延遲載入的元素和影像必須位於可滾動的 <div class = "page-content"> 內才能正常工作。
下表演示了延遲載入的使用：
| 序號 | 延遲載入用法 & 說明 |
|---|---|
| 1 | 用法
延遲載入可以應用於影像、背景影像以及淡入效果。 |
| 2 | 手動初始化延遲載入
如果在初始化頁面後手動新增延遲載入影像，則延遲載入將無法工作，您需要使用方法來初始化它。 |
可以透過在延遲載入的影像/元素上使用 lazy 事件手動觸發影像載入，如下所示：
$$('img.lazy').trigger('lazy');
$$('div.lazy').trigger('lazy');
示例
以下示例演示了在 Framework7 中使用延遲載入：
<!DOCTYPE html>
<html class = "with-statusbar-overlay">
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>Lazy Load</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "pages">
<div data-page = "home" class = "page navbar-fixed">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left"> </div>
<div class = "center">Lazy Load</div>
<div class = "right"> </div>
</div>
</div>
<div class = "page-content">
<div class = "content-block">
<div class = "content-block-inner">
<p> <img data-src = "/framework7/images/pic4.jpg"
width = "100%" class = "lazy lazy-fadeIn"></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur.</p>
<p> <img data-src = "/framework7/images/pic5.jpg"
width = "100%" class = "lazy lazy-fadeIn"></p>
<p>Sed ut perspiciatis unde omnis iste natus error sit
voluptatem accusantium doloremque laudantium, totam rem aperiam,
eaque ipsa quae ab illo inventore veritatis et quasi architecto
beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur
magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
<p> <img data-src = "/framework7/images/background.jpg"
width = "100%" class = "lazy lazy-fadeIn"></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur.</p>
<p> <img data-src = "/framework7/images/pic6.jpg"
width = "100%" class = "lazy lazy-fadeIn"></p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab
illo inventore veritatis et quasi architecto beatae vitae dicta sunt
explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut
odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt.</p>
<p> <img data-src = "/framework7/images/pic7.jpg"
width = "100%" class = "lazy lazy-fadeIn"></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur.</p>
<p> <img data-src = "/framework7/images/pic8.jpg"
width = "100%" class = "lazy lazy-fadeIn"></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Praesent laoreet nisl eget neque blandit lobortis. Sed sagittis risus
id vestibulum finibus. Cras vestibulum sem et massa hendrerit maximus.
Vestibulum suscipit tristique iaculis. Nam vitae risus non eros auctor
tincidunt quis vel nulla. Sed volutpat, libero ac blandit vehicula, est
sem gravida lectus, sed imperdiet sapien risus ut neque.</p>
<p><b>Using as background image:</b></p>
<div data-background = "/framework7/images/pic7.jpg"
style = "background: #aaa; height:60vw; background-size-cover"
class = "lazy lazy-fadeIn">
</div>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab
illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
sed quia consequuntur magni dolores eos qui ratione voluptatem sequi
nesciunt.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>var myApp = new Framework7();</script>
</body>
</html>
輸出
讓我們執行以下步驟來了解上面給出的程式碼是如何工作的：
將上面給出的 HTML 程式碼儲存為伺服器根資料夾中的 framework7_lazy_load.html 檔案。
開啟此 HTML 檔案，網址為 https:///framework7_lazy_load.html，輸出將顯示如下。
該示例指定了影像的延遲載入，當您向下滾動時，影像將在頁面上載入。
Framework7 - 顏色主題
描述
Framework7 為您的應用程式提供了不同的顏色主題。
顏色主題提供了不同型別的主題顏色，用於流暢地使用應用程式，如下表所示：
| 序號 | 主題型別 & 說明 |
|---|---|
| 1 | iOS 主題顏色
您可以為應用程式使用 10 種不同的預設 iOS 顏色主題。 |
| 2 | Material 主題顏色
Framework7 為應用程式提供了 22 種不同的預設 Material 顏色主題。 |
應用顏色主題
Framework7 允許您透過在父元素中使用 theme-[color] 類，將顏色主題應用於不同的元素，例如頁面、列表塊、導航欄、按鈕行等。
示例
... </body> <div class = "page theme-gray"> ... </div> <div class = "list-block theme-blue"> ... </div> <div class = "navbar theme-green"> ... </div> <div class = "buttons-row theme-red"> ... </div>
佈局主題
您可以透過使用兩個主題 white 和 dark 為您的應用程式使用預設佈局主題。可以透過在父元素中使用 layout-[theme] 類應用這些主題。
示例
... </body> <div class = "navbar layout-white"> ... </div> <div class = "buttons-row layout-dark"> ... </div>
輔助類
Framework7 提供了其他輔助類，可以在主題外部或沒有主題的情況下使用，如下所示：
color-[color] - 它可以用於更改塊的文字顏色或按鈕、連結、圖示等的顏色。
bg-[color] - 它在塊或元素上設定預定義的背景顏色。
border-[color] - 它在塊或元素上設定預定義的邊框顏色。
Framework7 - 分割線
描述
Hairline 是一個類，它透過使用邊框類在影像周圍新增 1px 邊框。隨著 1.x 的釋出，Hairlines 修訂了使用 :after 和 :before 偽元素而不是使用 CSS 邊框的工作方式。
Hairlines 包含以下規則：
:after - 此偽元素用於 bottom 和 right Hairlines。
:before - 此偽元素用於 top 和 left Hairlines。
以下程式碼片段顯示了 :after 元素的使用。
.navbar:after {
background-color: red;
}
以下程式碼片段刪除了底部 Hairline 工具欄：
.navbar:after {
display:none;
}
.toolbar:before {
display:none;
}
"no-border" 類
透過使用 no-border 類將刪除 Hairline，並且它支援 Navbar、toolbar、card 及其元素。
以下程式碼用於從導航欄中刪除 Hairline：
<div class = "navbar no-border"> ... </div>
Framework7 - 模板概述
描述
Template7 是一款輕量級的、移動優先的 JavaScript 引擎，它將 Ajax 和動態頁面表示為具有指定上下文的 Template7 模板，並且不需要任何額外的指令碼。Template7 與 Framework7 關聯，作為預設的輕量級模板引擎，在應用程式中執行速度更快。
效能
將字串編譯成 JS 函式的過程是 Template7 最慢的部分。因此，您無需多次編譯模板，只需編譯一次即可。
//Here initialize the app
var myApp = new Framework7();
// After initializing compile templates on app
var searchTemplate = $('script#search-template').html();
var compiledSearchTemplate = Template7.compile(searchTemplate);
var listTemplate = $('script#list-template').html();
var compiledListTemplate = Template7.compile(listTemplate);
// Execute the compiled templates with required context using onPageInit() method
myApp.onPageInit('search', function (page) {
// Execute the compiled templates with required content
var html = compiledSearchTemplate({/*...some data...*/});
// Do stuff with html
});
Template7 是一款輕量級的模板引擎，可以用作獨立的庫，無需 Framework7。Template7 檔案可以透過兩種方式安裝：
您可以從 Template7 的 GitHub 倉庫 下載。
您可以使用以下命令透過 Bower 安裝：
或者
bower install template7
Framework7 - 自動編譯
描述
在 Template7 中，您可以透過在 `