Framework7-クイックガイド
Framework7は、モバイルHTML用の無料のオープンソースフレームワークです。iOSおよびAndroidデバイス用のハイブリッドモバイルアプリまたはWebアプリの開発に使用されます。
Framework7は2014年に導入されました。最新バージョン1.4.2は、MITの下でライセンス供与された2016年2月にリリースされました。
Framework7を使用する理由
- iOSおよびAndroid用のアプリを開発する方が簡単です。
- Framework7の学習曲線は非常に簡単です。
- 多くの事前にスタイル設定されたウィジェット/コンポーネントがあります。
- ヘルパーライブラリが組み込まれています。
特徴
Framework7はオープンソースであり、自由に使用できるフレームワークです。
Framework7には、簡単で使い慣れたjQuery構文があり、遅滞なく開始できます。
タッチUIのクリック遅延を制御するために、Framework7にはFastClickライブラリが組み込まれています。
Framework7には、要素をレスポンシブに配置するためのグリッドシステムレイアウトが組み込まれています。
Framework7は、柔軟なルーターAPIを介してテンプレートからページを動的にロードします。
利点
Framework7は、DOM操作であっても、サードパーティのライブラリに依存していません。代わりに、独自のカスタムDOM7があります。
Framework7は、AngularおよびReactフレームワークでも使用できます。
HTML、CSS、およびいくつかの基本的なJavaScriptを理解したら、アプリの作成を開始できます。
Bowerを介したより高速な開発をサポートします。
iOSとAndroid向けのアプリは、習得しなくても簡単に開発できます。
短所
Framework7は、iOSやAndroidなどのプラットフォームのみをサポートします。
Framework7フレームワークのオンラインコミュニティサポートは、iOSやAndriodに比べて少ないです。
この章では、Framework7をインストールしてセットアップする方法について説明します。
Framework7は2つの方法でダウンロードできます-
Framework7Githubリポジトリからダウンロード
以下に示すように、Bowerを使用してFramework7をインストールできます-
bower install framework7Framework7のインストールが正常に完了したら、以下の手順に従って、アプリケーションでFramework7を使用する必要があります。
Step 1 −インストールする必要があります gulp-cli 次のコマンドを使用して、Framework7の開発バージョンとdistバージョンをビルドします。
npm install gulp-cliCLIは、ガルプのためのコマンドラインユーティリティの略です。
Step 2 − Gulpは、次のコマンドを使用してグローバルにインストールする必要があります。
npm install --global gulpStep 3−次に、NodeJSパッケージマネージャーをインストールします。これにより、依存関係の指定とリンクが容易になるノードプログラムがインストールされます。次のコマンドを使用してnpmをインストールします。
npm installStep 4 − Framework7の開発バージョンは、次のコマンドを使用してビルドできます。
npm buildStep 5− Framework7の開発バージョンをビルドしたら、次のコマンドを使用して、dist /フォルダーからアプリのビルドを開始します。
npm distStep 6 −アプリフォルダーをサーバーに保持し、次のコマンドを実行してアプリのページ間を移動します。
gulp serverCDNからFramework7ライブラリをダウンロードする
CDNまたはコンテンツ配信ネットワークは、ユーザーにファイルを提供するように設計されたサーバーのネットワークです。WebページでCDNリンクを使用すると、ファイルをホストする責任が自分のサーバーから一連の外部サーバーに移ります。これには、Webページの訪問者が同じCDNからFramework7のコピーを既にダウンロードしている場合、再ダウンロードする必要がないという利点もあります。次のCDNファイルをHTMLドキュメントに含めることができます。
次のCDNは、 iOS App layout −
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />これは、Framework7 iOSCSSライブラリをアプリケーションに含めるために使用されます。
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />これは、Framework7iOS関連のカラースタイルをアプリケーションに含めるために使用されます。
次のCDNはで使用されます Android/Material App Layout −
<script src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>これは、Framework7JSライブラリをアプリケーションに含めるために使用されます。
<script src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.min.css"></script>これは、Framework7マテリアルスタイリングをアプリケーションに含めるために使用されます。
このチュートリアルでは、ライブラリのCDNバージョンを使用しています。AMPPS（AMPPSはApache、MySQL、MongoDB、PHP、Perl、PythonのWAMP、MAMP、LAMPスタック）サーバーを使用して、すべての例を実行します。
例
次の例は、Framework7での単純なアプリケーションの使用法を示しています。このアプリケーションは、ナビゲーションバーをクリックすると、カスタマイズされたメッセージとともにアラートボックスを表示します。
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>My App</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
</head>
<body>
//you can control the background color of the Status bar
<div class = "statusbar-overlay"></div>
<div class = "panel-overlay"></div>
<div class = "panel panel-right panel-reveal">
<div class = "content-block">
<p>Contents goes here...</p>
</div>
</div>
<div class = "views">
<div class = "view view-main">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "center sliding">My App</div>
<div class = "right">
<a href = "#" class = "link icon-only open-panel">
<i class = "icon icon-bars"></i>
</a>
</div>
</div>
</div>
<div class = "pages navbar-through toolbar-through">
<div data-page = "index" class = "page">
<div class = "page-content">
<p>This is simple application...</p>
<div class = "list-block">
<ul>
<li>
<a href = "envirmnt_about.html" class = "">
<div class = "item-content">
<div class = "item-inner">
<div class = "item-title">Blog</div>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class = "toolbar">
<div class = "toolbar-inner">
<a href = "#" class = "link">First Link</a>
<a href = "#" class = "link">Second Link</a>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
// here initialize the app
var myApp = new Framework7();
// If your using custom DOM library, then save it to $$ variable
var $$ = Dom7;
// Add the view
var mainView = myApp.addView('.view-main', {
// enable the dynamic navbar for this view:
dynamicNavbar: true
});
//use the 'pageInit' event handler for all pages
$$(document).on('pageInit', function (e) {
//get page data from event data
var page = e.detail.page;
if (page.name === 'blog') {
// you will get below message in alert box when page with data-page attribute is equal to "about"
myApp.alert('Here its your About page');
}
})
</script>
</body>
</html>次に、もう1つのHTMLページを作成します。 envirmnt_about.html 以下に示すように-
envirmnt_about.html
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left">
<a href = "#" class = "back link">
<i class = "icon icon-back"></i>
<span>Back</span>
</a>
</div>
<div class = "center sliding">My Blog</div>
<div class = "right">
<a href = "#" class = "link icon-only open-panel">
<i class = "icon icon-bars"></i>
</a>
</div>
</div>
</div>
<div class = "pages">
<div data-page = "blog" class = "page">
<div class = "page-content">
<div class = "content-block">
<h2>My Blog</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
</div>
</div>
</div>出力
上記のコードがどのように機能するかを確認するために、次の手順を実行してみましょう-
上記のHTMLコードを次のように保存します framework7_environment.html サーバーのルートフォルダにあるファイル。
このHTMLファイルをhttp：//localhost/framework7_environment.htmlとして開くと、出力が次のように表示されます。
ナビゲーションバーをクリックすると、カスタマイズされたメッセージを含むアラートボックスが表示されます。
説明
Framework7は、アプリケーションにさまざまなタイプのレイアウトを提供します。3種類のナビゲーションバー/ツールバーレイアウトをサポートします-
| S.No | レイアウトの種類と説明 |
|---|---|
| 1 | 静的レイアウト 静的レイアウトは、最も頻繁に使用されるレイアウトタイプであり、ナビゲーションバーとツールバーが含まれています。これらはスクロール可能なページコンテンツであり、各ページには独自のナビゲーションバーとツールバーが含まれています。 |
| 2 | 固定レイアウト 固定レイアウトには、独自のナビゲーションバーとツールバーが含まれています。これらは画面に表示でき、ページ上でスクロールすることはできません。 |
| 3 | レイアウトを介して このレイアウトでは、ナビゲーションバーとツールバーは、単一のビュー内のすべてのページに対して固定されて表示されます。 |
| 4 | 混合レイアウト 1つのビューにさまざまなタイプのレイアウトを混在させることができます。 |
ナビゲーションバー/ツールバーなし
navbarとtoolbarを使用したくない場合は、適切なクラス（navbar-fixed、navbar-through、toolbar-fixed、toolbar-through）をpage / pages / viewに含めないでください。
説明
この章では、navbarについて学習しましょう。これは通常、ページのタイトルとナビゲーション要素を含む画面の上部に配置されます。
Navbarは3つの部分で構成されており、それぞれにHTMLコンテンツを含めることができますが、以下の方法でこれらを使用することをお勧めします。
Left−バックリンクアイコンまたは単一テキストリンクを配置するように設計されています。
Center −ページのタイトルまたはタブリンクを表示するために使用されます。
Right−この部分は左の部分と同様です。
次の表は、ナビゲーションバーの使用法を詳細に示しています-
| S.No | ナビゲーションバーの種類と説明 |
|---|---|
| 1 | 基本的なナビゲーションバー 基本的なナビゲーションバーは、navbar、navbar-inner、left、center、rightクラスを使用して作成できます。 |
| 2 | リンク付きのナビゲーションバー 内のリンクを使用するには、左と右のあなたのナビゲーションバーの一部だけを追加<A>クラスとタグのリンクを。 |
| 3 | 複数のリンク 複数のリンクを使用するには、選択した部分に<a class ="link">をいくつか追加するだけです。 |
| 4 | テキストとアイコンのリンク アイコンのクラスを追加し、リンクテキストを<span>要素でラップすることにより、リンクにアイコンとテキストを提供できます。 |
| 5 | アイコンのみのリンク リンクにアイコンのみのクラスを追加することにより、ナビゲーションバーのリンクにアイコンのみを提供できます。 |
| 6 | 関連するアプリと表示方法 ビューの初期化時に、framework7ではnavbarで使用可能なメソッドを使用できます。 |
| 7 | ナビゲーションバーを自動的に非表示 ナビゲーションバーが不要な一部のAjaxロードページでは、ナビゲーションバーを自動的に非表示/表示できます。 |
説明
ツールバーを使用すると、画面下部のナビゲーション要素を使用して他のページに簡単にアクセスできます。
表で指定されているように、ツールバーは2つの方法で使用できます-
| S.No | ツールバーの種類と説明 |
|---|---|
| 1 | ツールバーを非表示 を使用してページをロードすると、ツールバーを自動的に非表示にできます。 no-toolbar ロードされたページへのクラス。 |
| 2 | 下部ツールバー を使用して、ページの下部にツールバーを配置します。 toolbar-bottom クラス。 |
ツールバーの方法
以下の利用可能な方法はツールバーで使用できます-
| S.No | ツールバーの方法と説明 |
|---|---|
| 1 | myApp.hideToolbar(toolbar) 指定したツールバーを非表示にします。 |
| 2 | myApp.showToolbar(toolbar) 指定したツールバーが表示されます。 |
| 3 | view.hideToolbar() ビュー内の指定されたツールバーを非表示にします。 |
| 4 | view.showToolbar() 指定したツールバーがビューに表示されます。 |
例
次の例は、Framework7でのツールバーレイアウトの使用法を示しています。
まず、というHTMLページを1つ作成します。 toolbar.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 サーバーのルートフォルダにあるファイル。
このHTMLファイルをhttp：//localhost/toolbar.htmlとして開くと、出力が次のように表示されます。
説明
Framework 7では、searchbarクラスを使用して要素を検索できます。
検索バーのパラメータ
| S.No | パラメータと説明 | タイプ | デフォルト |
|---|---|---|---|
| 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 「searchbaroverlay」要素を使用してCSSセレクターまたはHTML要素を検索し、要素が指定されていない場合は.searchbar-overlay要素を使用します。 |
文字列またはHTML要素 | - |
| 6 | ignore 検索バーを使用して、アイテムのCSSセレクターを無視できます。 |
ストリング | '.searchbar-無視' |
| 7 | customSearch 有効にすると、検索バーはsearchListで指定されたリストブロックを検索せず、カスタム検索機能を使用できるようになります。 |
ブール値 | false |
| 8 | removeDiacritics 要素を検索するときは、このパラメーターを有効にして発音区別符号を削除します。 |
ブール値 | false |
| 9 | hideDividers このパラメーターは、アイテムがない場合、アイテムの仕切りとグループタイトルを非表示にします。 |
ブール値 | true |
| 10 | hideGroups リストビューグループにアイテムが見つからない場合、このパラメーターはグループを非表示にします。 |
ブール値 | true |
検索バーのコールバック
| S.No | コールバックと説明 | タイプ | デフォルト |
|---|---|---|---|
| 1 | onSearch このメソッドは、検索中にコールバック関数を起動します。 |
関数） | - |
| 2 | onEnable このメソッドは、検索バーがアクティブになるとコールバック関数を起動します。 |
関数） | - |
| 3 | onDisable このメソッドは、検索バーが非アクティブになったときにコールバック関数を起動します。 |
関数） | - |
| 4 | onClear このメソッドは、「clear」要素をクリックするとコールバック関数を起動します。 |
関数） | - |
検索バーのプロパティ
| S.No | プロパティと説明 |
|---|---|
| 1 | mySearchbar.params オブジェクトとともに渡される初期化されたパラメータを表します。 |
| 2 | mySearchbar.query 現在のクエリを検索します。 |
| 3 | mySearchbar.searchList 検索リストブロックを定義します。 |
| 4 | mySearchbar.container HTML要素を使用して検索バーコンテナを定義します。 |
| 5 | mySearchbar.input HTML要素を使用して検索バーの入力を定義します。 |
| 6 | mySearchbar.active 検索バーを有効にするか無効にするかを定義します。 |
検索バーの方法
| S.No | 方法と説明 |
|---|---|
| 1 | mySearchbar.search(query); このメソッドは、渡されたクエリを検索します。 |
| 2 | mySearchbar.enable(); 検索バーを有効にします。 |
| 3 | mySearchbar.disable(); 検索バーを無効にします。 |
| 4 | mySearchbar.clear(); クエリと検索結果をクリアできます。 |
| 5 | mySearchbar.destroy(); 検索バーのインスタンスを破棄します。 |
検索バーのJavaScriptイベント
| S.No | イベントと説明 | 目標 |
|---|---|---|
| 1 | search 要素の検索中にこのイベントを発生させることができます。 |
<div class = "list-block"> |
| 2 | clearSearch このイベントは、ユーザーがclearSearch要素をクリックしたときに発生します。 |
<div class = "list-block"> |
| 3 | enableSearch 検索バーが有効になると、このイベントが発生します。 |
<div class = "list-block"> |
| 4 | disableSearch 検索バーが無効になり、ユーザーがキャンセルボタンまたは「検索バーオーバーレイ」要素をクリックすると、このイベントが発生します。 |
<div class = "list-block"> |
例
次の例は、Framework7のスクロールでの検索バーの使用を示しています。
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>Search Bar Layout</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "pages navbar-fixed">
<div data-page = "home" class = "page">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "center sliding">Search Bar Layout</div>
</div>
</div>
<form data-search-list = ".list-block-search" data-search-in = ".item-title"
class = "searchbar searchbar-init">
<div class = "searchbar-input">
<input type = "search" placeholder = "Search"><a href = "#"
class = "searchbar-clear"></a>
</div>
<a href = "#" class = "searchbar-cancel">Cancel</a>
</form>
<div class = "searchbar-overlay"></div>
<div class = "page-content">
<div class = "content-block searchbar-not-found">
<div class = "content-block-inner">No element found...</div>
</div>
<div class = "list-block list-block-search searchbar-found">
<ul>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">India</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Argentina</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Belgium</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Brazil</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Canada</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Colombia</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Denmark</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Ecuador</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">France</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Germany</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Greece</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Haiti</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Hong Kong</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Iceland</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Ireland</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Jamaica</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Japan</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Kenya</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Kuwait</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Libya</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Liberia</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Malaysia</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Mauritius</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Mexico</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Namibia</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">New Zealand</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Oman</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Paraguay</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Philippines</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Russia</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Singapore</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">South Africa</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Thailand</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">United Kingdom</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Vatican City</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Zimbabwe</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
var myApp = new Framework7();
var mainView = myApp.addView('.view-main');
</script>
</body>
</html>出力
上記のコードがどのように機能するかを確認するために、次の手順を実行してみましょう-
上記のHTMLコードを保存します search_bar.html サーバーのルートフォルダにあるファイル。
このHTMLファイルをhttp：//localhost/search_bar.htmlとして開くと、出力が次のように表示されます。
リストに含まれる要素が検索バーに入力されると、リストからその特定の要素が表示されます。
リストに含まれている要素以外の要素を入力すると、要素が見つかりませんと表示されます。
説明
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 サーバーのルートフォルダにあるファイル。
このHTMLファイルをhttp：//localhost/status_bar.htmlとして開くと、出力が次のように表示されます。
例は、の使用法を示しています statusbar-overlay、ステータスバーがアプリと重なっている場合にフルスクリーンアプリを作成できます。
説明
サイドパネル画面の左側または右側に移動してコンテンツを表示します。Framework7では、最大2つのパネル（右側のパネルと左側のパネル）をアプリに含めることができます。<body>の先頭にパネルを追加してから、次のクラスを適用してオープニングエフェクトを選択する必要があります-
panel-reveal −これにより、アプリのコンテンツ全体が移動します。
panel-cover −これにより、パネルがアプリのコンテンツにオーバーレイされます。
たとえば、次のコードは、上記のクラスの使用方法を示しています-
<body>
<!-- First add Panel's overlay which will overlays app while panel is opened -->
<div class = "panel-overlay"></div>
<!-- Left panel -->
<div class = "panel panel-left panel-cover">
panel's content
</div>
<!-- Right panel -->
<div class = "panel panel-right panel-reveal">
panel's content
</div>
</body>次の表は、Framework77でサポートされているパネルタイプを示しています。
| S.No | タイプと説明 |
|---|---|
| 1 | パネルを開いたり閉じたりする あなたはパネルやエフェクトを追加すると、我々はに機能を追加する必要があり、オープンとクローズのパネル。 |
| 2 | パネルイベント ユーザーがパネルをどのように操作したかを検出するには、パネルイベントを使用できます。 |
| 3 | スワイプでパネルを開く Framework7は、スワイプジェスチャでパネルを開く機能を提供します。 |
| 4 | パネルが開いていますか？ パネルが開いているかどうかは、 with-panel[position]-[effect] ルール。 |
説明
コンテンツブロックを使用して、さまざまな形式のコンテンツを追加できます。
例
次の例は、Framework7でのコンテンツブロックの使用を示しています。
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>Content Block</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "pages">
<div data-page = "home" class = "page navbar-fixed">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left"> </div>
<div class = "center">Content Block</div>
<div class = "right"> </div>
</div>
</div>
<div class = "page-content">
<p>This is out side of content block!!!</p>
<div class = "content-block">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis
et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
<div class = "content-block">
<div class = "content-block-inner">This is another text block wrapped with "content-block-inner"</div>
</div>
<div class = "content-block-title">Content Block Title</div>
<div class = "content-block">
<p>Praesent nec imperdiet diam. Maecenas vel lectus porttitor, consectetur
magna nec, viverra sem. Aliquam sed risus dolor. Morbi tincidunt ut libero id sodales.
Integer blandit varius nisi quis consectetur.</p>
</div>
<div class = "content-block-title">This is another long content block title</div>
<div class = "content-block">
<div class = "content-block-inner">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo
inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
<div class = "content-block-title">Content Block Inset</div>
<div class = "content-block inset">
<div class = "content-block-inner">
<p>Donec et nulla auctor massa pharetra adipiscing ut sit amet sem.
Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis,
vulputate turpis vel, sagittis felis. </p>
</div>
</div>
<div class = "content-block-title">Content Block Tablet Inset</div>
<div class = "content-block tablet-inset">
<div class = "content-block-inner">
<p>Donec et nulla auctor massa pharetra adipiscing ut sit amet sem.
Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis,
vulputate turpis vel, sagittis felis. </p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
var myApp = new Framework7();
var mainView = myApp.addView('.view-main');
</script>
</body>
</html>出力
上記のコードがどのように機能するかを確認するために、次の手順を実行してみましょう-
上記のHTMLコードを次のように保存します content_block.html サーバーのルートフォルダにあるファイル。
このHTMLファイルをhttp：//localhost/content_block.htmlとして開くと、出力が次のように表示されます。
このコードは、テキストコンテンツに追加のフォーマットと必要な間隔を追加します。
説明
Framework7は、ユーザーのニーズに応じてコンテンツを配置するためのさまざまなタイプのグリッドタイプを提供します。
レイアウトグリッドは、次の表で説明されているように、さまざまなタイプの列サイズを提供します。
| S.No | クラス | テーブルクラス | 幅 |
|---|---|---|---|
| 1 | col-5 | タブレット-5 | 5％ |
| 2 | col-10 | タブレット-10 | 10％ |
| 3 | col-15 | タブレット-15 | 15％ |
| 4 | col-20 | タブレット-20 | 20％ |
| 5 | col-25 | タブレット-25 | 25％ |
| 6 | col-30 | タブレット-30 | 30％ |
| 7 | col-33 | タブレット-33 | 33.3％ |
| 8 | col-35 | タブレット-35 | 35％ |
| 9 | col-40 | タブレット-40 | 40％ |
| 10 | col-45 | タブレット-45 | 45％ |
| 11 | col-50 | タブレット-50 | 50％ |
| 12 | col-55 | タブレット-55 | 55％ |
| 13 | col-60 | タブレット-60 | 60％ |
| 14 | col-65 | タブレット-65 | 65％ |
| 15 | col-66 | タブレット-66 | 66.6％ |
| 16 | col-70 | タブレット-70 | 70％ |
| 17 | col-75 | タブレット-75 | 75％ |
| 18 | col-80 | タブレット-80 | 80％ |
| 19 | col-85 | タブレット-85 | 85％ |
| 20 | col-90 | タブレット-90 | 90％ |
| 21 | col-95 | タブレット-95 | 95％ |
| 21 | col-100 | タブレット-100 | 100％ |
| 22 | col-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 サーバーのルートフォルダにあるファイル。
このHTMLファイルをhttp：//localhost/layout_grid.htmlとして開くと、出力が次のように表示されます。
このコードは、ユーザーのニーズに応じてコンテンツを配置するためのさまざまなタイプのグリッドタイプを提供します。
説明
Framework7は、アプリケーションをスムーズに操作するためのさまざまなタイプのオーバーレイを提供します。次の表に、Framework7オーバーレイの一部を示します-
| S.No | オーバーレイの種類と説明 |
|---|---|
| 1 | モーダル モーダルは、親ウィンドウを離れることなく、別々のソースからのコンテンツを表示する小さなウィンドウです。 |
| 2 | 現れる ポップアップは、ユーザーが要素をクリックしたときにコンテンツを表示するポップアップボックスです。 |
| 3 | ポップオーバー 一時的なコンテンツの表示を管理するために、ポップオーバーコンポーネントを使用できます。 |
| 4 | アクションシート アクションシートは、与えられたタスクを処理する方法の可能性のセットをユーザに提示するために使用されます。 |
| 5 | ログイン画面 オーバーレイログイン画面は、ページやポップアップで、またはスタンドアロンのオーバーレイとして使用できるログイン画面形式を表示するために使用されます。 |
| 6 | ピッカーモーダル ピッカーモーダルは、カレンダーピッカーに似たカスタムコンテンツを選択するために使用されます。 |
説明
Framework7のプリローダーはScalableVector Graphic（SVG）で作成され、CSSでアニメーション化されているため、簡単にサイズを変更できます。プリローダーは2色でご利用いただけます-
- デフォルトは明るい背景です
- もう1つは暗い背景です
以下に示すように、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>Panel Events</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "pages">
<div data-page = "home" class = "page navbar-fixed">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left"> </div>
<div class = "center">Framework7 Preloader</div>
<div class = "right"> </div>
</div>
</div>
<div class = "page-content">
<div class = "content-block row">
<div class = "col-25"><span class = "preloader"></span><br>Default Preloader</div>
<div class = "col-25 col-dark"><span class = "preloader preloader-white"></span><br>White Preloader</div>
<div class = "col-25"><span style = "width:42px; height:42px" class = "preloader"></span><br>Big Preloader</div>
<div class = "col-25 col-dark"><span style = "width:42px; height:42px" class = "preloader preloader-white"></span><br>White Preloader</div>
</div>
</div>
</div>
</div>
</div>
</div>
<style>.col-25{padding:5px;text-align:center;}.col-dark{background:#222;}</style>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
var myApp = new Framework7();
</script>
</body>
</html>出力
上記のコードがどのように機能するかを確認するために、次の手順を実行してみましょう-
上記のHTMLコードを次のように保存します preloader.html サーバーのルートフォルダにあるファイル。
このHTMLファイルをhttp：//localhost/preloader.htmlとして開くと、出力が次のように表示されます。
このコードは、SVGで作成され、CSSでアニメーション化されたプリローダーインジケーターを表示します。
説明
プログレスバーを使用して、アセットの読み込みやタスクの進行状況をユーザーに表示できます。あなたは使用してプログレスバーを指定することができプログレスバークラスを。ユーザーがリクエストの読み込みプロセスの期間がわからない場合は、progressbar-infiniteクラスを使用できます。
プログレスバーJavaScriptAPI
プログレスバーは、指定したJavaScript APIと一緒に使用することができますショー、非表示と進捗次の方法を使用してプロパティを-
| S.No | メソッド | 説明とパラメータ |
|---|---|---|
| 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 サーバーのルートフォルダにあるファイル。
このHTMLファイルをhttp：//localhost/progress_bar.htmlとして開くと、出力が次のように表示されます。
この例では、操作がプロセスを完了するのにかかる時間を示す進行状況バーと、アクティビティを示すさまざまなタイプの進行状況バーが表示されます。
説明
リストビューは、複数行のスクロール可能なリストにデータを表示する強力なUIコンポーネントです。Framework7は、アプリケーションで動作するさまざまなタイプのリストビューを提供します。次の表は、いくつかの一覧ですFramework7リストビューを-
| S.No | タイプと説明 |
|---|---|
| 1 | リストビュー リストビューは強力なユーザーインターフェイスコンポーネントであり、複数の行を含むスクロール可能なリストにデータを表示します。 |
| 2 | 連絡先リスト 連絡先リストはリストビューの一種であり、連絡先のリストを表示するために使用できます。 |
| 3 | メディアリストビュー メディアリストビューは、製品、サービス、ユーザー情報などの複雑なデータ構造を表示するために使用されます。 |
| 4 | スワイプアウト swipeoutは、リストの要素の上にスワイプして隠されたメニュー・アクションを明らかにすることができます。 |
| 5 | ソート可能なリスト 並べ替え可能なリストは、リストビューの要素を並べ替えるリストビューの一種です。 |
| 6 | 仮想リスト 仮想リストは、パフォーマンスを低下させることなく多数のデータ要素のリストを含むリストビューの一種です。 |
説明
アコーディオンは、アイテムのスタックリストとして表示されるグラフィカルな制御要素です。各アコーディオンをすることができる拡張又は延伸そのアコーディオンに関連付けられたコンテンツを明らかにする。
折りたたみ可能なレイアウト
単一の個別の折りたたみ可能な要素を使用している場合は、アコーディオンリストラッパー要素を省略する必要があります。
以下は折りたたみ可能なレイアウトの構造です-
<!-- Single collapsible element ------>
<div class = "accordion-item">
<div class = "accordion-item-toggle"></div>
<div class = "accordion-item-content"></div>
</div>
<!-- Separate collapsible element -->
<div class = "accordion-item">
<div class = "accordion-item-toggle"></div>
<div class = "accordion-item-content"></div>
</div>次のクラスは、Framework7のアコーディオンに使用されます-
| S.No | クラスと説明 |
|---|---|
| 1 | accordion-list これはオプションのクラスであり、アコーディオンアイテムリストのグループが含まれています。 |
| 2 | accordion-item シングルアコーディオンアイテムに必須のクラスです。 |
| 3 | accordion-item-toggle アコーディオンアイテムのコンテンツを拡張するために使用される必須クラスです。 |
| 4 | accordion-item-content 非表示のアコーディオンアイテムのコンテンツに使用される必須クラスです。 |
| 5 | accordion-item-expanded 単一の拡張アコーディオンアイテムです。 |
アコーディオンJavaScriptAPI
JavaScript APIメソッドは、プログラムでアコーディオンを開いたり閉じたりするために使用されます。
次のJavaScriptAPIメソッドが含まれています-
myApp.accordionOpen(item) −アコーディオンを開くために使用されます。
myApp.accordionClose(item) −アコーディオンを閉じるために使用されます。
myApp.accordionToggle(item) −アコーディオンを切り替えるために使用されます。
すべてのメソッドには、HTMLまたはaccordion-itemの文字列要素であるitemというパラメータが含まれています。
アコーディオンイベント
アコーディオンには、次の表に示す4つのイベントが含まれています-
| S.No | イベント | ターゲットと説明 |
|---|---|---|
| 1 | 開いた | Accordion item アニメーションを開くと、このイベントが発生します。 |
| 2 | オープン | Accordion item アニメーションのオープニングが完了すると、このイベントが発生します。 |
| 3 | 閉じる | Accordion item アニメーションを閉じると、このイベントが発生します。 |
| 4 | 閉まっている | Accordion item アニメーションの終了が完了すると、このイベントが発生します。 |
アコーディオンリストビュー
アコーディオンリストビューでは、accordion-toggleの代わりにitem-link要素を使用できます。
<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ファイルをhttp：//localhost/accordion.htmlとして開くと、出力が次のように表示されます。
この例では、折りたたみ可能なレイアウトを提供しています。これを展開して、アコーディオンに関連付けられたコンテンツを表示できます。
説明
カードには、写真、リンク、テキストなど、単一の主題に関連する整理された情報が含まれています。次の表は、Framework7カードの種類を示しています-
| S.No | タイプと説明 |
|---|---|
| 1 | カードのHTMLレイアウト 基本的なカードのHTMLレイアウトでは、カードクラスを使用してアイテムを配置します。 |
| 2 | カード付きリストビュー カードをリストビュー要素として使用するには、cards-listクラスを<div class = "list-block">に追加します。 |
説明
チップはエンティティの小さなブロックであり、写真、タイトルの小さな文字列、および短い情報を含めることができます。
チップの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ファイルをhttp：//localhost/cards_html_layout.htmlとして開くと、出力が次のように表示されます。
この例は、アルバム、カード要素、投稿された画像などの小さなブロック内の複雑なエンティティを表しており、写真、タイトル文字列、簡単な情報が含まれています。
説明
Framework7は、リンクまたは入力ボタンに適切なクラスを追加するだけで、すぐに使用できるボタンのグループを提供します。
| S.No | タイプと説明 |
|---|---|
| 1 | iOSのテーマボタン Framework7には、適切なクラスを適用することで使用できる多くのiOSテーマボタンが用意されています。 |
| 2 | 素材テーマボタン マテリアルテーマは、適切なクラスを使用してアプリケーションで使用する多くのボタンを提供します。 |
説明
Framework7は、プロモートアクション用のフローティングアクションボタンを提供します。これらは、UI上に浮かぶ丸いアイコンとして表示されます。モーフィング、起動、アンカーポイントの転送を含むモーション動作があります。
フローティングアクションボタンは、マテリアルテーマでのみサポートされています。
次の表に、Framework7で使用されるアクションボタンのタイプを示します。
| S.No | タイプと説明 |
|---|---|
| 1 | フローティングアクションボタンのレイアウト とても簡単です。ページまたはビューの子として配置する必要があります。 |
| 2 | ポップオーバーへのモーフ フローティングアクションボタンをクリックしてポップオーバーを開きたい場合は、フローティングボタンからポップオーバーへのクラスを使用できます。 |
| 3 | 短縮ダイヤル スピードダイヤルを使用して、フローティングアクションボタンをクリックすると、関連するアクションを呼び出すことができます。 |
説明
フォームはユーザーとの対話に使用され、テキストフィールド、チェックボックス、ラジオボタンなどを使用してWebユーザーからデータを収集します。
Framework7は、以下の表に指定されているように、アプリケーションをスムーズに操作するためのさまざまなタイプのフォーム要素を提供します。
| S.No | オーバーレイの種類と説明 |
|---|---|
| 1 | フォーム要素 フォーム要素は、見栄えの良いフォームレイアウトを作成するために使用されます。 |
| 2 | チェックボックスとラジオ リストビューの拡張子は、あなたがFramework7でチェックボックスやラジオの入力を作成することができます。 |
| 3 | スマートセレクト スマート選択は、チェックボックスと無線入力のグループを使用して、フォーム選択を動的ページに変更する簡単な方法です。 |
| 4 | 無効な要素 要素にdisabledクラスを適用するか、form要素にdisabled属性を追加することで、要素を無効にできます。 |
| 5 | フォームデータ Framework7には便利なメソッドがほとんどないため、フォームの操作が簡単になります。 |
| 6 | フォームストレージ フォームストレージを使用すると、Ajaxがロードされたページにフォームデータを自動的に保存して解析するのは簡単です。 |
| 7 | Ajaxフォーム送信 Framework7では、Ajaxを使用してデータを自動的に送信できます。 |
説明
タブは論理的にグループ化されたコンテンツのセットであり、タブ間をすばやく切り替えて、アコーディオンのようにスペースを節約できます。
タブレイアウト
次のコードは、タブのレイアウトを定義します-
<!-- Tabs wrapper, shoud have "tabs" class.It is a required element -->
<div class = "tabs">
<!-- The tab, should have "tab" class and unique id attribute -->
<!-- The tab is active by default - "active" class -->
<div class = "tab active" id = "tab1">
... The content for Tab 1 goes here ...
</div>
<!-- The second tab, should have "tab" class and unique id attribute -->
<div class = "tab" id = "tab2">
... The content for Tab 2 goes here ...
</div>
</div>ここで-
<div class = "tabs">−すべてのタブに必須のラッパーです。これを見逃すと、タブはまったく機能しなくなります。
-
<div class = "tab"> −これは単一のタブであり、 unique id 属性。
-
<div class = "tab active">−これは単一のアクティブなタブであり、追加のアクティブなクラスを使用してタブを表示（アクティブ）にします。
タブ間の切り替え
タブレイアウトでいくつかのコントローラーを使用して、ユーザーがそれらを切り替えることができるようにすることができます。
このためには、タブリンククラスとターゲットタブのid属性に等しいhref属性を持つリンク（<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とデータタブ属性を使用する代わりにクラスを使用できます。
<!-- For Top Tabs -->
<div class = "tabs tabs-top">
<div class = "tab tab1 active">...</div>
<div class = "tab tab2">...</div>
<div class = "tab tab3">...</div>
</div>
<!-- For Bottom Tabs -->
<div class = "tabs tabs-bottom">
<div class = "tab tab1 active">...</div>
<div class = "tab tab2">...</div>
<div class = "tab tab3">...</div>
</div>
<!-- For Tabs links -->
<div class = "tab-links">
<!-- Links are switch top and bottom tabs to .tab1 -->
<a href = "#" class = "tab-link" data-tab = ".tab1">Tab 1</a>
<!-- Links are switch top and bottom tabs to .tab2 -->
<a href = "#" class = "tab-link" data-tab = ".tab2">Tab 2</a>
<!-- Links are switch top and bottom tabs to .tab3 -->
<a href = "#" class = "tab-link" data-tab = ".tab3">Tab 3</a>
</div>tab-linkのdata-tab属性には、ターゲットタブ/タブのCSSセレクターが含まれています。
タブにはさまざまな方法を使用できます。これらは次の表で指定されています-
| S.No | タブの種類と説明 |
|---|---|
| 1 | インラインタブ インラインタブは、インラインでグループ化されたセットであり、タブをすばやく切り替えることができます。 |
| 2 | ナビゲーションバーからタブを切り替える ナビゲーションバーにタブを配置して、タブを切り替えることができます。 |
| 3 | タブバーからビューを切り替える 単一のタブを使用して、独自のナビゲーションとレイアウトでビューを切り替えることができます。 |
| 4 | アニメーションタブ 単純な遷移（アニメーション）を使用してタブを切り替えることができます。 |
| 5 | スワイプ可能なタブ タブにtabs-swipeable-wrapクラスを使用すると、簡単な遷移でスワイプ可能なタブを作成できます。 |
| 6 | タブJavaScriptイベント JavaScriptイベントは、タブのJavaScriptコードを操作しているときに使用できます。 |
| 7 | JavaScriptを使用してタブを表示 JavaScriptメソッドを使用して、タブを切り替えたり表示したりできます。 |
説明
スワイパースライダーは最も強力で最新のタッチスライダーであり、多くの機能を備えたFramework7に組み込まれています。
次のHTMLレイアウトは、スワイパースライダーを示しています-
<!-- Container class for slider -->
<div class = "swiper-container">
<!-- Wrapper class for slider -->
<div class = "swiper-wrapper">
<!-- Slides -->
<div class = "swiper-slide">Slide 1</div>
<div class = "swiper-slide">Slide 2</div>
<div class = "swiper-slide">Slide 3</div>
... other slides ...
</div>
<!-- Define pagination, if it is required -->
<div class = "swiper-pagination"></div>
</div>以下のクラスはスワイパースライダーに使用されます-
swiper-container −メインスライダーコンテナに必須の要素であり、スライドやページ付けに使用されます。
Swiper-wrapper −追加のラッパースライドに必要な要素です。
swiper-slide −これは単一のスライド要素であり、内部に任意のHTMLを含めることができます。
swiper-pagination −ページ付けの箇条書きではオプションであり、それらは自動的に作成されます。
関連するメソッドを使用して、JavaScriptでスワイパーを初期化できます-
myApp.swiper(swiperContainer,parameters)または
new Swiper(swiperContainer, parameters)どちらの方法も、オプションを使用してスライダーを初期化するために使用されます。
上記のメソッドには、次のパラメータが含まれています-
swiperContainer− HTMLElementまたはスワイパーコンテナの文字列であり、必須です。
parameters −これらは、スワイパーパラメーターを持つオブジェクトを含むオプションの要素です。
例-
var mySwiper = app.swiper('.swiper-container', {
speed: 400,
spaceBetween: 100
});スワイパーのインスタンスにアクセスすることが可能であり、スライダーのコンテナーのスワイパープロパティには次のHTML要素があります-
var mySwiper = $$('.swiper-container')[0].swiper;
// Here you can use all slider methods like:
mySwiper.slideNext();次の表で、スワイパーのさまざまな方法とタイプを確認できます。
| S.No | スワイパーの種類と説明 |
|---|---|
| 1 | ページネーション付きのデフォルトのスワイパー これは最新のタッチスライダーであり、デフォルトではスワイパーが水平方向にスワイプします。 |
| 2 | 垂直スワイパー これはデフォルトのスワイパーとしても機能しますが、垂直方向にスワイプします。 |
| 3 | スライドの間にスペースがある このスワイパーは、2つのスライドの間にスペースを与えるために使用されます。 |
| 4 | 複数のスワイパー このスワイパーは、1ページに複数のスワイパーを使用します。 |
| 5 | ネストされたスワイパー これは、垂直スライドと水平スライドの組み合わせです。 |
| 6 | カスタムコントロール スライドを選択またはスワイプするカスタムコントロールに使用されます。 |
| 7 | 遅延読み込み 読み込みに時間がかかるマルチメディアファイルに使用できます。 |
説明
フォトブラウザはiOSフォトブラウザコンポーネントに似ており、ズームやパンが可能な画像のグループを表示します。画像間をスライドするために、フォトブラウザはSwiperSliderを使用します。
次の表は、framework7で使用されるフォトブラウザの種類を示しています。
| S.No | フォトブラウザの種類と説明 |
|---|---|
| 1 | フォトブラウザインスタンスの作成 フォトブラウザは、JavaScriptを使用してのみ作成および初期化できます。 |
| 2 | フォトブラウザのパラメータ Framework7は、フォトブラウザで使用されるパラメータのリストを提供します。 |
| 3 | フォトブラウザの方法とプロパティ フォトブラウザを初期化すると、フォトブラウザのメソッドとプロパティを使用するための初期化されたインスタンス変数を取得します。 |
| 4 | 写真配列 写真ブラウザの初期化中に、写真パラメータに写真/ビデオを含む配列を渡す必要があります。 |
| 5 | フォトブラウザテンプレート Framework7には、フォトブラウザの初期化を渡すことができる多くのフォトブラウザテンプレートが用意されています。 |
説明
オートコンプリートは、Framework7のモバイルフレンドリーでタッチに最適化されたコンポーネントであり、ドロップダウンまたはスタンドアロンの方法で使用できます。JavaScriptメソッドを使用してオートコンプリートインスタンスを作成および初期化できます-
myApp.autocomplete(parameters)どこのパラメータは、オートコンプリートのインスタンスを初期化するために使用されるオブジェクトを必要としています。
オートコンプリートパラメータ
次の表に、Framework7で使用可能なオートコンプリートパラメータを示します。
| S.No | パラメータと説明 | タイプ | デフォルト |
|---|---|---|---|
| 1 | openIn ドロップダウン、ポップアップ、またはページとして使用できるオートコンプリートを開く方法を定義します。 |
ストリング | ページ |
| 2 | source オートコンプリートインスタンス、検索クエリ、レンダリング機能を使用して、一致したアイテムを配列で渡します。 |
関数（オートコンプリート、クエリ、レンダリング） | - |
| 3 | valueProperty 一致したアイテムオブジェクトのキーのアイテム値を指定します。 |
ストリング | id |
| 4 | limit クエリごとにオートコンプリートで制限された数のアイテムが表示されます。 |
数 | - |
| 5 | preloader プリローダーを使用して、trueに設定することでオートコンプリートレイアウトを指定できます。 |
ブール値 | false |
| 6 | preloaderColor プリローダーの色を指定します。デフォルトでは、色は「黒」です。 |
ストリング | - |
| 7 | value デフォルトで選択された値で配列を定義します。 |
アレイ | - |
| 8 | textProperty 一致したアイテムオブジェクトのキーのアイテム値を指定します。これは、表示されるオプションのタイトルとして使用できます。 |
ストリング | テキスト |
スタンドアロンのオートコンプリートパラメータ
次の表に、Framework7で使用可能なスタンドアロンオートコンプリートパラメーターを示します。
| S.No | パラメータと説明 | タイプ | デフォルト |
|---|---|---|---|
| 1 | opener これは文字列またはHTML要素パラメータであり、スタンドアロンのオートコンプリートページを開きます。 |
文字列またはHTMLElement | - |
| 2 | popupCloseText オートコンプリートポップアップを閉じるために使用されます。 |
ストリング | '閉じる' |
| 3 | backText オートコンプリートをページとして開いたときにバックリンクを提供します。 |
ストリング | 'バック' |
| 4 | pageTitle オートコンプリートページのタイトルを指定します。 |
ストリング | - |
| 5 | searchbarPlaceholderText 検索バーのプレースホルダーテキストを指定します。 |
ストリング | '探す' |
| 6 | searchbarCancelText 検索バーのキャンセルボタンのテキストを定義します。 |
ストリング | 'キャンセル' |
| 7 | notFoundText 一致する要素が見つからない場合は、テキストが表示されます。 |
ストリング | '何も見つかりません' |
| 8 | multiple trueに設定することで、複数選択を選択できます。 |
ブール値 | false |
| 9 | navbarTheme ナビゲーションバーのカラーテーマを指定します。 |
ストリング | - |
| 10 | backOnSelect ユーザーが値を選択すると、オートコンプリートはtrueに設定して閉じられます。 |
ブール値 | false |
| 11 | formTheme フォームのカラーテーマを指定します。 |
ストリング | - |
ドロップダウンオートコンプリートパラメータ
次の表に、Framework7で使用可能なドロップダウンオートコンプリートパラメーターを示します。
| S.No | パラメータと説明 | タイプ | デフォルト |
|---|---|---|---|
| 1 | input テキスト入力に使用される文字列またはHTML要素です。 |
文字列またはHTMLElement | - |
| 2 | dropdownPlaceholderText ドロップダウンプレースホルダーテキストを指定します。 |
ストリング | - |
| 3 | updateInputValueOnSelect trueに設定すると、selectの入力値を更新できます。 |
ブール値 | true |
| 4 | expandInput item-inputをtrueに設定すると、リストビューで入力したテキストを展開して、ドロップダウン中に全画面を表示できるようになります。 |
ブール値 | false |
オートコンプリートコールバック関数
次の表に、Framework7で使用可能なドロップダウンオートコンプリートパラメーターを示します。
| S.No | パラメータと説明 | タイプ | デフォルト |
|---|---|---|---|
| 1 | onChange オートコンプリート値が変更されるたびに、このコールバック関数が実行されます。 |
関数（オートコンプリート、値） | - |
| 2 | onOpen オートコンプリートが開かれるたびに、このコールバック関数が実行されます。 |
関数（オートコンプリート） | - |
| 3 | onClose オートコンプリートが閉じられるたびに、このコールバック関数が実行されます。 |
関数（オートコンプリート） | - |
オートコンプリートテンプレート
次の表に、Framework7で使用可能なドロップダウンオートコンプリートパラメーターを示します。
| S.No | パラメータと説明 | タイプ | デフォルト |
|---|---|---|---|
| 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で使用可能なオートコンプリートメソッドを示しています。
| S.No | 方法と説明 |
|---|---|
| 1 | myAutocomplete.params オブジェクトとともに渡される初期化パラメータを定義します。 |
| 2 | myAutocomplete.value 選択した値で配列を定義します。 |
| 3 | myAutocomplete.opened trueに設定されている場合、オートコンプリートが開きます。 |
| 4 | myAutocomplete.dropdown オートコンプリートドロップダウンのインスタンスを指定します。 |
| 5 | myAutocomplete.popup オートコンプリートポップアップのインスタンスを指定します。 |
| 6 | myAutocomplete.page オートコンプリートページのインスタンスを指定します。 |
| 7 | myAutocomplete.pageData オートコンプリートページデータを定義します。 |
| 8 | myAutocomplete.searchbar オートコンプリート検索バーインスタンスを定義します。 |
オートコンプリートプロパティ
次の表は、Framework7で使用可能なオートコンプリートメソッドを示しています。
| S.No | プロパティと説明 |
|---|---|
| 1 | myAutocomplete.open() ドロップダウン、ポップアップ、またはページとして使用できるオートコンプリートが開きます。 |
| 2 | myAutocomplete.close() オートコンプリートを閉じます。 |
| 3 | myAutocomplete.showPreloader() オートコンプリートプリローダーが表示されます。 |
| 4 | myAutocomplete.hidePreloader() オートコンプリートプリローダーを非表示にします。 |
| 5 | myAutocomplete.destroy() オートコンプリートプリローダーインスタンスを台無しにし、すべてのイベントを削除します。 |
例
次の例は、Framework7に隠れているオートコンプリートパラメーターの使用法を示しています。
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>Autocomplete</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "pages">
<div data-page = "home" class = "page navbar-fixed">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left"> </div>
<div class = "center">Autcomplete</div>
<div class = "right"> </div>
</div>
</div>
<div class = "page-content">
<div class = "content-block-title">Simple Dropdown Autocomplete</div>
<div class = "list-block">
<ul>
<li class = "item-content">
<div class = "item-title label">Country</div>
<div class = "item-input">
<input type = "text" placeholder = "Country" id = "autocomplete-dropdown">
</div>
</li>
</ul>
</div>
<div class = "content-block-title">Dropdown With Input Expand</div>
<div class = "list-block">
<ul>
<li class = "item-content">
<div class = "item-title label">Country</div>
<div class = "item-input">
<input type = "text" placeholder = "Country" id = "autocomplete-dropdown-expand">
</div>
</li>
</ul>
</div>
<div class = "content-block-title">Dropdown With All Values</div>
<div class = "list-block">
<ul>
<li class = "item-content">
<div class = "item-title label">Country</div>
<div class = "item-input">
<input type = "text" placeholder = "Country" id = "autocomplete-dropdown-all">
</div>
</li>
</ul>
</div>
<div class = "content-block-title">Dropdown With Placeholder</div>
<div class = "list-block">
<ul>
<li class = "item-content">
<div class = "item-title label">Country</div>
<div class = "item-input">
<input type = "text" placeholder = "Country" id = "autocomplete-dropdown-placeholder">
</div>
</li>
</ul>
</div>
<div class = "content-block-title">Simple Standalone Autocomplete</div>
<div class = "list-block">
<ul>
<li>
<a href = "#" id = "autocomplete-standalone" class = "item-link item-content autocomplete-opener">
<input type = "hidden">
<div class = "item-inner">
<div class = "item-title">Favorite Country</div>
<div class = "item-after"></div>
</div>
</a>
</li>
</ul>
</div>
<div class = "content-block-title">Popup Standalone Autocomplete</div>
<div class = "list-block">
<ul>
<li>
<a href = "#" id = "autocomplete-standalone-popup" class = "item-link item-content autocomplete-opener">
<input type = "hidden">
<div class = "item-inner">
<div class = "item-title">Favorite Country</div>
<div class = "item-after"></div>
</div>
</a>
</li>
</ul>
</div>
<div class = "content-block-title">Multiple Values Standalone Autocomplete</div>
<div class = "list-block">
<ul>
<li>
<a href = "#" id = "autocomplete-standalone-multiple" class = "item-link item-content autocomplete-opener">
<input type = "hidden">
<div class = "item-inner">
<div class = "item-title">Favorite Countries</div>
<div class = "item-after"></div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
var myApp = new Framework7();
var $$ = Dom7;
var mainView = myApp.addView('.view-main');
// Countries data array
var countries = ('India Africa Australia NewZealand England WestIndies Scotland Zimbabwe Srilanka Bangladesh').split(' ');
// Simple Dropdown
var autocompleteDropdownSimple = myApp.autocomplete ({
input: '#autocomplete-dropdown',
openIn: 'dropdown',
source: function (autocomplete, query, render) {
var results = [];
if (query.length === 0) {
render(results);
return;
}
// 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 サーバーのルートフォルダにあるファイル。
このHTMLファイルをhttp：//localhost/autocomplete.htmlとして開くと、出力が次のように表示されます。
この例では、単純なドロップダウン、すべての値を含むドロップダウン、プレースホルダーを使用したドロップダウン、スタンドアロンのオートコンプリートなどで値のオートコンプリートを提供しています。
説明
PickerはiOSネイティブピッカーのように見え、リストから任意の値を選択できる強力なコンポーネントであり、カスタムオーバーレイピッカーの作成にも使用されます。Pickerは、インラインコンポーネントまたはオーバーレイとして使用できます。オーバーレイピッカーは、タブレット（iPad）では自動的にポップオーバーに変換されます。
次のアプリのメソッドを使用して、JavaScriptメソッドを作成および初期化できます-
myApp.picker(parameters)ここで、パラメータは、オブジェクトを必要な初期化ピッカーインスタンスに使用され、必要な方法でされています。
ピッカーパラメーター
次の表は、ピッカーで使用可能なパラメーターを示しています-
| S.No | パラメータと説明 | タイプ | デフォルト |
|---|---|---|---|
| 1 | container インラインピッカーのピッカーHTMLを生成するために使用されるCSSセレクターまたはHTMLElementを含む文字列。 |
文字列またはHTMLElement | - |
| 2 | input CSSセレクターまたはHTMLElementを使用して文字列とともに配置された関連する入力要素。 |
文字列またはHTMLElement | - |
| 3 | scrollToInput ピッカーが開かれるたびに、入力のビューポート（ページコンテンツ）をスクロールするために使用されます。 |
ブール値 | true |
| 4 | inputReadOnly 指定された入力に「読み取り専用」属性を設定するために使用されます。 |
ブール値 | true |
| 5 | convertToPopover iPadのような大画面でピッカーモーダルをポップオーバーに変換するために使用されます。 |
ブール値 | true |
| 6 | onlyOnPopover ポップオーバーでピッカーを有効にすると開くことができます。 |
ブール値 | true |
| 7 | cssClass モーダルをピッカーするには、追加のCSSクラス名を使用できます。 |
ストリング | - |
| 8 | closeByOutsideClick メソッドを有効にしてピッカーまたは入力要素の外側をクリックすると、ピッカーを閉じることができます。 |
ブール値 | false |
| 9 | toolbar ピッカーモーダルツールバーを有効にするために使用されます。 |
ブール値 | true |
| 10 | toolbarCloseText 完了/閉じるツールバーボタンに使用されます。 |
ストリング | 「完了」 |
| 11 | toolbarTemplate これはツールバーのHTMLテンプレートであり、デフォルトでは次のテンプレートを含むHTML文字列です- |
ストリング | - |
特定のピッカーパラメーター
次の表に、使用可能な特定のピッカーパラメーターを示します。
| S.No | パラメータと説明 | タイプ | デフォルト |
|---|---|---|---|
| 1 | rotateEffect ピッカーで3D回転効果を有効にします。 |
ブール値 | false |
| 2 | momentumRatio すばやくタッチして動かした後にピッカーを放すと、勢いが増します。 |
数 | 7 |
| 3 | updateValuesOnMomentum 勢いの間にピッカーと入力値を更新するために使用されます。 |
ブール値 | false |
| 4 | updateValuesOnTouchmove タッチ移動中にピッカーと入力値を更新するために使用されます。 |
ブール値 | true |
| 5 | value 配列には初期値があり、各配列項目は関連する列の値を表します。 |
アレイ | - |
| 6 | formatValue この関数は入力値をフォーマットするために使用され、新しい/フォーマットされた文字列値を返す必要があります。値とdisplayValuesは、関連する列のアレイです。 |
関数（p、値、displayValues） | - |
| 7 | cols すべての配列項目は、列パラメーターを持つオブジェクトを表します。 |
アレイ | - |
ピッカーパラメータのコールバック
次の表は、ピッカーで使用できるコールバック関数のリストを示しています。
| S.No | コールバックと説明 | タイプ | デフォルト |
|---|---|---|---|
| 1 | onChange コールバック関数は、ピッカー値が変更され、valuesとdisplayValuesが関連する列の配列である場合に実行されます。 |
関数（p、値、displayValues） | - |
| 2 | onOpen コールバック関数は、ピッカーが開かれるたびに実行されます。 |
関数（p） | - |
| 3 | onClose コールバック関数は、ピッカーが閉じられるたびに実行されます。 |
関数（p） | - |
列パラメーター
Pickerの構成時に、colsパラメーターを渡す必要があります。これは配列として表され、各アイテムは列パラメーターを持つオブジェクトです-
| S.No | パラメータと説明 | タイプ | デフォルト |
|---|---|---|---|
| 1 | values 文字列列の値は配列で指定できます。 |
アレイ | - |
| 2 | displayValues 文字列列の値を持つ配列があり、指定されていない場合は、valuesパラメーターの値が表示されます。 |
アレイ | - |
| 3 | cssClass CSSクラスの列HTMLコンテナのセットに使用される名前。 |
ストリング | - |
| 4 | textAlign 列値のテキスト配置を設定するために使用され、「左」、「中央」、「右」のいずれかになります。 |
ストリング | - |
| 5 | width デフォルトでは、幅は自動的に計算されます。pxである必要がある従属列を使用して、ピッカーの列幅を修正する必要がある場合。 |
数 | - |
| 6 | divider 視覚的な仕切りである必要がある列に使用され、値はありません。 |
ブール値 | false |
| 7 | content これは、列の内容でdivider-column （divider：true）を指定するために使用されます。 |
ストリング | - |
列のコールバックパラメータ
| S.No | コールバックと説明 | タイプ | デフォルト |
|---|---|---|---|
| 1 | onChange その時点で列の値が変更されるたびに、コールバック関数が実行されます。値とdisplayValueは、現在の列表す値とdisplayValueを。 |
関数（p、値、displayValue） | - |
ピッカーのプロパティ
Picker変数には、次の表に示す多くのプロパティがあります。
| S.No | プロパティと説明 |
|---|---|
| 1 | myPicker.params 渡されたパラメータはオブジェクトで初期化できます。 |
| 2 | myPicker.value 各列で選択された値は、アイテムの配列で表されます。 |
| 3 | myPicker.displayValue 各列で選択された表示値は、アイテムの配列で表されます。 |
| 4 | myPicker.opened ピッカーを開くと、真の値に設定されます。 |
| 5 | myPicker.inline ピッカーがインラインの場合、真の値に設定されます。 |
| 6 | myPicker.cols Picker列には、独自のメソッドとプロパティがあります。 |
| 7 | myPicker.container Dom7インスタンスはHTMLコンテナに使用されます。 |
ピッカーメソッド
ピッカー変数には、次の表に示す便利なメソッドがあります。
| S.No | 方法と説明 |
|---|---|
| 1 | myPicker.setValue(values, duration) 新しいピッカー値を設定するために使用します。値は配列内にあり、各項目は各列の値を表します。期間-ミリ秒単位の遷移期間です。 |
| 2 | myPicker.open() ピッカーを開くために使用します。 |
| 3 | myPicker.close() ピッカーを閉じるために使用します。 |
| 4 | myPicker.destroy() Pickerインスタンスを破棄し、すべてのイベントを削除するために使用します。 |
列のプロパティ
myPicker.cols配列の各列にも、次の表に示す独自の便利なプロパティがあります。
//Get first column
var col = myPicker.cols[0];| S.No | プロパティと説明 |
|---|---|
| 1 | col.container 列HTMLコンテナを使用してインスタンスを作成できます。 |
| 2 | col.items 列アイテムのHTML要素を使用してインスタンスを作成できます。 |
| 3 | col.value 現在の列の値を選択するために使用されます。 |
| 4 | col.displayValue 表示の現在の列値を選択するために使用されます。 |
| 5 | col.activeIndex 選択されている/アクティブなアイテムである現在のインデックス番号を指定します。 |
カラムメソッド
有用なカラムメソッドを次の表に示します。
| S.No | 方法と説明 |
|---|---|
| 1 | col.setValue(value, duration) 現在の列に新しい値を設定するために使用されます。値が新しい値でなければならない、そして持続時間は、ミリ秒で所定の遷移期間です。 |
| 2 | col.replaceValues(values, displayValues) 列の値とdisplayValuesを新しいものに置き換えるために使用されます。 |
PickerをインラインPickerとして初期化するたびに、HTMLコンテナからPickerのインスタンスにアクセスするために使用されます。
var myPicker = $$('.picker-inline')[0].f7Picker;次の表に示すように、さまざまなタイプのピッカーがあります。
| S.No | タブの種類と説明 |
|---|---|
| 1 | 単一値のピッカー これは、リストから任意の値を選択できる強力なコンポーネントです。 |
| 2 | 2つの値と3D回転効果 ピッカーでは、3D回転効果に使用できます。 |
| 3 | 従属値 指定された要素の値は相互に依存しています。 |
| 4 | カスタムツールバー 1ページで1つ以上のピッカーを使用してカスタマイズできます。 |
| 5 | インラインピッカー/日時 インラインピッカーで値の数を選択できます。同様に、日付には日付、月、年があり、時間には時間、分、秒があります。 |
説明
カレンダーコンポーネントを使用すると、日付を簡単に処理でき、インラインまたはオーバーレイコンポーネントとして使用できます。オーバーレイカレンダーは、タブレットでは自動的にポップオーバーに変換されます。
カレンダーはJavaScriptを使用してのみ作成および初期化できます。以下に示すように、関連するアプリの方法を使用する必要があります-
myApp.calendar(parameters)−このメソッドは、初期化されたカレンダーインスタンスを返します。オブジェクトをパラメータとして受け入れます。
次の表は、Framework7でのカレンダーの使用法を示しています。
| S.No | カレンダーの使用法と説明 |
|---|---|
| 1 | カレンダーパラメータ Framework7は、カレンダーで使用されるパラメーターのリストを提供します。 |
| 2 | カレンダーのメソッドとプロパティ カレンダーを初期化すると、カレンダーのメソッドとプロパティを使用するための初期化されたインスタンス変数を取得します。 |
| 3 | カレンダーのインスタンスへのアクセス カレンダーをインラインとして初期化すると、HTMLコンテナからカレンダーインスタンスにアクセスできます。 |
説明
これは、ページのコンテンツをプルして更新（リロード）するために使用される特別なコンポーネントです。
次のコードは、ページコンテンツを更新する方法を示しています-
<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 torefreshを有効にするために必要です。
pull-to-refresh-layer−これは非表示のレイヤーであり、視覚要素を更新するためにプルするために使用され、単なるプリローダーと矢印です。
data-ptr-distance = "55" −これは、カスタムの「プルして更新」トリガー距離を設定できる追加の属性であり、デフォルト値は44pxです。
プルしてイベントを更新
「PulltoRefresh」には、次の表に示すJavaScriptイベントがいくつかあります。
| S.No | イベントと説明 | 目標 |
|---|---|---|
| 1 | pullstart プルを開始してコンテンツを更新するたびにトリガーされます。 |
プルしてコンテンツを更新します。 |
| 2 | pullmove コンテンツを更新するためにプルしているときにトリガーされます。 |
プルしてコンテンツを更新します。 |
| 3 | pullend プルを離してコンテンツを更新するたびにトリガーされます。 |
プルしてコンテンツを更新します。 |
| 4 | refresh このイベントは、プルトゥリフレッシュが「リフレッシュ」状態になるとトリガーされます。 |
プルしてコンテンツを更新します。 |
| 5 | refreshdone 更新されて初期状態に戻った後にトリガーされます。これは、pullToRefreshDoneメソッドを呼び出した後に実行されます。 |
プルしてコンテンツを更新します。 |
Pull toRefreshで使用できるアプリのメソッドがあります。
| S.No | アプリの方法と説明 |
|---|---|
| 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ファイルをhttp：//localhost/pull_to_refresh.htmlとして開くと、出力が次のように表示されます。
ユーザーがプルダウンすると、ページがコンテンツで更新されます。
説明
Infinite Scrollを使用すると、ページが下部に近づくと、追加のコンテンツをロードして必要なアクションを実行できます。
次のHTMLレイアウトは、無限スクロールを示しています-
<div class = "page">
<div class = "page-content infinite-scroll" data-distance = "100">
...
</div>
</div>上記のレイアウトには、次のクラスが含まれています-
page-content infinite-scroll −無限スクロールコンテナに使用されます。
data-distance −この属性を使用すると、ページの下部からの距離（ピクセル単位）を構成して、無限スクロールイベントをトリガーできます。デフォルト値は 50px。
ページの上部で無限スクロールを使用する場合は、「page-content」に「infinite-scroll-top」クラスを追加する必要があります-
<div class = "page">
<div class = "page-content infinite-scroll infinite-scroll-top">
...
</div>
</div>無限スクロールイベント
infinite−ページスクロールが指定された距離に達したときにトリガーするために使用されます。div class = "page-contentinfinite-scroll"のターゲットになります。
無限スクロールコンテナで使用できる2つのアプリの方法があります-
指定された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ファイルをhttp：//localhost/infinite_scroll.htmlとして開くと、出力が次のように表示されます。
この例では、ページスクロールが指定された距離に達したときに、追加のコンテンツを読み込むことができます。
説明
メッセージはFramework7のコンポーネントであり、アプリケーション内のコメントとメッセージングシステムを視覚化できます。
メッセージレイアウト
フレームワーク7のメッセージレイアウト構造は次のとおりです。
<div class = "page">
<div class = "page-content messages-content">
<div class = "messages">
<!-- Defines the date stamp -->
<div class = "messages-date">Monday, Apr 26 <span>10:30</span></div>
<!-- Displays the sent message and by default, it will be in green color on right side -->
<div class = "message message-sent">
<!-- Define the text with bubble type -->
<div class = "message-text">Hello</div>
</div>
<!-- Displays the another sent message -->
<div class = "message message-sent">
<!-- Define the text with bubble type -->
<div class = "message-text">How are you?</div>
</div>
<!-- Displays the received message and by default, it will be in grey color on left side -->
<div class = "message message-with-avatar message-received">
<!-- Provides sender name -->
<div class = "message-name">Smith</div>
<!-- Define the text with bubble type -->
<div class = "message-text">I am fine, thanks</div>
<!-- Defines the another date stamp -->
<div class = "messages-date">Tuesday, April 28 <span>11:16</span></div>
</div>
</div>
</div>レイアウトには、さまざまな領域に次のクラスが含まれています-
メッセージページのレイアウト
次の表に、メッセージのクラスのページレイアウトと説明を示します。
| S.No | クラスと説明 |
|---|---|
| 1 | messages-content これは、「page-content」に追加され、メッセージラッパーに使用される必須の追加クラスです。 |
| 2 | messages メッセージバブルに必須の要素です。 |
| 3 | messages-date 日付スタンプコンテナを使用して、送受信されたメッセージの日付と時刻を表示します。 |
| 4 | message 表示されるのは単一のメッセージです。 |
シングルメッセージインナーパーツ
次の表に、簡単なメッセージ内部パーツのクラスと説明を示します。
| S.No | クラスと説明 |
|---|---|
| 1 | message-name 送信者名を提供します。 |
| 2 | message-text バブルタイプでテキストを定義します。 |
| 3 | message-avatar 送信者のアバターを指定します。 |
| 4 | message-label バブルの下のテキストラベルを指定します。 |
シングルメッセージコンテナの追加クラス
次の表は、単一メッセージコンテナの説明のための追加のクラスを示しています。
| S.No | クラスと説明 |
|---|---|
| 1 | message-sent これは、メッセージがユーザーによって送信されたことを指定し、右側に緑色の背景色で表示されます。 |
| 2 | message-received これは、メッセージがユーザーによって受信され、灰色の背景色で左側にとどまっていることを示す単一のメッセージを表示するために使用されます。 |
| 3 | message-pic これは、単一のメッセージで画像を表示するための追加のクラスです。 |
| 4 | message-with-avatar これは、アバターで単一のメッセージ（受信または送信）を表示するための追加のクラスです。 |
| 5 | message-with-tail 単一のメッセージ（受信または送信）にバブルテールを追加できます。 |
単一メッセージで使用可能な追加のクラス
次の表は、説明付きの単一メッセージで使用可能なクラスを示しています。
| S.No | クラスと説明 |
|---|---|
| 1 | message-hide-name これは、単一のメッセージ（受信または送信）のメッセージ名を非表示にするための追加のクラスです。 |
| 2 | message-hide-avatar これは、単一のメッセージ（受信または送信）のメッセージアバターを非表示にするための追加のクラスです。 |
| 3 | message-hide-label これは、単一のメッセージ（受信または送信）のメッセージラベルを非表示にするための追加のクラスです。 |
| 4 | message-last このクラスを使用して、1つのメッセージ（受信または送信）に対して1人の送信者が現在の会話で最後に受信または送信したメッセージを示すことができます。 |
| 5 | message-first このクラスを使用して、1つのメッセージ（受信または送信）に対して1人の送信者が現在の会話で最初に受信または最初に送信したメッセージを示すことができます。 |
JavaScriptでメッセージを初期化する
次の方法を使用して、JavaScriptでメッセージを初期化できます-
myApp.messages(messagesContainer, parameters)この方法には2つのオプションがあります-
messagesContainer −メッセージコンテナのHTML要素を含む必須のHTML要素または文字列です。
parameters −メッセージパラメータでオブジェクトを指定します。
メッセージパラメータ
次の表に、メッセージのパラメータと説明を示します。
| S.No | パラメータと説明 | タイプ | デフォルト |
|---|---|---|---|
| 1 | autoLayout メッセージを有効にすることで、各メッセージに必要なクラスを追加します。 |
ブール値 | true |
| 2 | newMessagesFirst メッセージを有効にすると、メッセージを下に表示する代わりに上に表示できます。 |
ブール値 | false |
| 3 | messages これは、各メッセージがメッセージパラメータを持つオブジェクトとして表される必要があるメッセージの配列を表示します。 |
アレイ | - |
| 4 | messageTemplate 単一のメッセージテンプレートが表示されます。 |
ストリング | - |
メッセージのプロパティ
次の表に、メッセージのプロパティと説明を示します。
| S.No | プロパティと説明 |
|---|---|
| 1 | myMessages.params 渡されたパラメータはオブジェクトで初期化できます。 |
| 2 | myMessages.container メッセージバーのHTMLコンテナを使用してDOM7要素を定義します。 |
メッセージメソッド
次の表に、メッセージの方法と説明を示します。
| S.No | 方法と説明 |
|---|---|
| 1 | myMessages.addMessage(messageParameters, method, animate); メソッドパラメータを使用して、メッセージを最初または最後に追加できます。 次のパラメータがあります-
|
| 2 | myMessages.appendMessage(messageParameters, animate); メッセージコンテナの最後にメッセージを追加します。 |
| 3 | myMessages.prependMessage(messageParameters, animate); メッセージコンテナの先頭にメッセージを追加します。 |
| 4 | myMessages.addMessages(messages, method, animate); 一度に複数のメッセージを追加できます。 次のパラメータがあります-
|
| 5 | myMessages.removeMessage(message); メッセージを削除するために使用されます。 次のパラメータがあります-
|
| 6 | myMessages.removeMessages(messages); 複数のメッセージを削除できます。 次のパラメータがあります-
|
| 7 | myMessages.scrollMessages(); 新しいメッセージの最初のパラメータに応じて、メッセージを上から下に、またはその逆にスクロールできます。 |
| 8 | myMessages.layout(); 自動レイアウトをメッセージに適用できます。 |
| 9 | myMessages.clean(); メッセージをクリーンアップするために使用されます。 |
| 10 | myMessages.destroy(); メッセージを破棄するために使用されます。 |
単一メッセージパラメータ
次の表は、説明付きの単一メッセージのパラメーターを示しています。
| S.No | パラメータと説明 | タイプ | デフォルト |
|---|---|---|---|
| 1 | text HTML文字列である可能性のあるメッセージテキストを定義します。 |
ストリング | - |
| 2 | name 送信者名を指定します。 |
ストリング | - |
| 3 | avatar 送信者のアバターのURL文字列を指定します。 |
ストリング | - |
| 4 | time 「9:45 AM」、「18：35」のようなメッセージの時間文字列を指定します。 |
ストリング | - |
| 5 | type メッセージを送信できるか受信できるかを示すメッセージのタイプを提供します。 |
ストリング | 送信 |
| 6 | label メッセージのラベルを定義します。 |
ストリング | - |
| 7 | day 'sunday'、 'monday'、 'yesterday'などのメッセージの日文字列を提供します。 |
ストリング | - |
HTMLでメッセージを初期化する
以下に示すコードスニペットに示すように、追加のmessages-initクラスをメッセージに使用し、data-属性を使用して必要なパラメーターを渡すことにより、JavaScriptを使用せずにHTMLでメッセージを初期化できます。
...
<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ファイルをhttp：//localhost/messages.htmlとして開くと、出力が次のように表示されます。
メッセージボックスにメッセージを入力して[送信]ボタンをクリックすると、メッセージが送信されたことを示し、右側に緑色の背景色で表示されます。
受信したメッセージは、送信者名とともに灰色の背景で左側に表示されます。
説明
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)この方法には2つのオプションがあります-
messagesbarContainer −メッセージバーコンテナのHTML要素を含む必須のHTML要素または文字列です。
parameters −メッセージバーパラメータでオブジェクトを指定します。
例-
var myMessagebar = app.messagebar('.messagebar', {
maxHeight: 200
});メッセージバーパラメータ
maxHeight− textareaの最大高さを設定するために使用され、テキストの量に応じてサイズが変更されます。パラメータのタイプは数値で、デフォルト値はnullです。
メッセージバーのプロパティ
次の表に、メッセージバーのプロパティを示します-
| S.No | プロパティと説明 |
|---|---|
| 1 | myMessagebar.params 渡された初期化パラメーターを使用してオブジェクトを指定できます。 |
| 2 | myMessagebar.container dom7要素はメッセージバーコンテナのHTML要素で指定できます。 |
| 3 | myMessagebar.textarea メッセージバーtextareaHTML要素でdom7要素を指定できます。 |
メッセージバーメソッド
次の表に、メッセージバーのメソッドを示します-
| S.No | 方法と説明 |
|---|---|
| 1 | myMessagebar.value(newValue); メッセージバーのテキストエリア値/テキストを設定し、メッセージバーのテキストエリア値を返します。 newValue 指定されていません。 |
| 2 | myMessagebar.clear(); textareaをクリアし、サイズを更新/リセットします。 |
| 3 | myMessagebar.destroy(); メッセージバーインスタンスを破棄します。 |
HTMLでメッセージバーを初期化する
あなたは追加することにより、JavaScriptのメソッドとプロパティせずにHTMLを使用してmessagebarを初期化することができますmessagebar-INITにクラスを.messagebar、あなたが使用して必要なパラメータを渡すことができますDATA-属性を。
次のコードは、HTMLを使用したメッセージバーの初期化を指定します-
<div class = "toolbar messagebar messagebar-init" data-max-height = "200">
<div class = "toolbar-inner">
<textarea placeholder = "Message"></textarea>
<a href = "#" class = "link">Send</a>
</div>
</div>メッセージバーのインスタンスへのアクセス
HTMLを使用して初期化すると、メッセージバーインスタンスにアクセスできます。これは、コンテナ要素のf7メッセージバープロパティを使用して実現されます。
var myMessagebar = $$('.messagebar')[0].f7Messagebar;
// Now you can use it
myMessagebar.value('Hello world');このリンクで説明されているメッセージバーの例を見ることができます
説明
通知は、プッシュ（またはローカル）iOS通知のように表示される必要なメッセージを表示するために使用されます。
次の表は、通知の使用法を詳細に示しています-
| S.No | 通知の使用法と説明 |
|---|---|
| 1 | 通知JavaScriptAPI 通知は、関連するアプリのメソッドを使用してJavaScriptで追加または閉じることもできます。 |
| 2 | 通知のレイアウト Framework7の通知は、JavaScriptを使用して追加されます。 |
| 3 | iOSの例 Framework7を使用すると、iOSレイアウトでさまざまなタイプの通知を使用できます。 |
| 4 | 材料例 Framework7通知は、マテリアルレイアウトでも使用できます。 |
説明
遅延読み込みは、特定のページでの画像の読み込みプロセスを遅らせます。遅延読み込みは、スクロールパフォーマンスを向上させ、ページの読み込みを高速化し、トラフィックを節約します。
遅延読み込み要素と画像が正しく機能するには、スクロール可能な<div class = "page-content">内にある必要があります。
次の表は、遅延ロードの使用を示しています-
| S.No | 遅延読み込みの使用法と説明 |
|---|---|
| 1 | 使用法 遅延読み込みは、画像、背景画像、およびフェードイン効果に適用できます。 |
| 2 | 遅延読み込みを手動で初期化 ページを初期化した後、遅延読み込み画像を手動で追加すると、遅延読み込みが機能しないため、メソッドを使用してページを初期化する必要があります。 |
以下に示すように、レイジー画像/要素でレイジーイベントを使用して手動で画像の読み込みをトリガーすることができます-
$$('img.lazy').trigger('lazy');
$$('div.lazy').trigger('lazy');例
次の例は、Framework7での遅延読み込みの使用を示しています。
<!DOCTYPE html>
<html class = "with-statusbar-overlay">
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>Lazy Load</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "pages">
<div data-page = "home" class = "page navbar-fixed">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left"> </div>
<div class = "center">Lazy Load</div>
<div class = "right"> </div>
</div>
</div>
<div class = "page-content">
<div class = "content-block">
<div class = "content-block-inner">
<p> <img data-src = "/framework7/images/pic4.jpg"
width = "100%" class = "lazy lazy-fadeIn"></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur.</p>
<p> <img data-src = "/framework7/images/pic5.jpg"
width = "100%" class = "lazy lazy-fadeIn"></p>
<p>Sed ut perspiciatis unde omnis iste natus error sit
voluptatem accusantium doloremque laudantium, totam rem aperiam,
eaque ipsa quae ab illo inventore veritatis et quasi architecto
beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur
magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
<p> <img data-src = "/framework7/images/background.jpg"
width = "100%" class = "lazy lazy-fadeIn"></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur.</p>
<p> <img data-src = "/framework7/images/pic6.jpg"
width = "100%" class = "lazy lazy-fadeIn"></p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab
illo inventore veritatis et quasi architecto beatae vitae dicta sunt
explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut
odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt.</p>
<p> <img data-src = "/framework7/images/pic7.jpg"
width = "100%" class = "lazy lazy-fadeIn"></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur.</p>
<p> <img data-src = "/framework7/images/pic8.jpg"
width = "100%" class = "lazy lazy-fadeIn"></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Praesent laoreet nisl eget neque blandit lobortis. Sed sagittis risus
id vestibulum finibus. Cras vestibulum sem et massa hendrerit maximus.
Vestibulum suscipit tristique iaculis. Nam vitae risus non eros auctor
tincidunt quis vel nulla. Sed volutpat, libero ac blandit vehicula, est
sem gravida lectus, sed imperdiet sapien risus ut neque.</p>
<p><b>Using as background image:</b></p>
<div data-background = "/framework7/images/pic7.jpg"
style = "background: #aaa; height:60vw; background-size-cover"
class = "lazy lazy-fadeIn">
</div>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab
illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
sed quia consequuntur magni dolores eos qui ratione voluptatem sequi
nesciunt.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>var myApp = new Framework7();</script>
</body>
</html>出力
上記のコードがどのように機能するかを確認するために、次の手順を実行してみましょう-
上記のHTMLコードを次のように保存します framework7_lazy_load.html サーバーのルートフォルダにあるファイル。
このHTMLファイルをhttp：//localhost/framework7_lazy_load.htmlとして開くと、出力が次のように表示されます。
この例では、画像を下にスクロールしたときに画像がページに読み込まれる遅延読み込みを指定しています。
説明
Framework7は、アプリケーションにさまざまな色のテーマを提供します。
カラーテーマは、以下の表に指定されているように、アプリケーションをスムーズに操作するために使用されるさまざまなタイプのテーマカラーを提供します。
| S.No | テーマの種類と説明 |
|---|---|
| 1 | iOSのテーマの色 アプリケーションには、10種類のデフォルトのiOSカラーテーマを使用できます。 |
| 2 | マテリアルテーマの色 Framework7は、アプリケーションに22の異なるデフォルトのマテリアルカラーテーマを提供します。 |
カラーテーマの適用
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>レイアウトテーマ
白と暗いの2つのテーマを使用して、アプリケーションのデフォルトのレイアウトテーマを使用できます。テーマは、layout- [theme]クラスを使用して親要素に適用できます。
例
...
</body>
<div class = "navbar layout-white">
...
</div>
<div class = "buttons-row layout-dark">
...
</div>ヘルパークラス
Framework7は、以下にリストされているテーマの外部またはテーマなしで使用できる追加のヘルパークラスを提供します-
color-[color] −ブロックのテキストの色やボタン、リンク、アイコンなどの色を変更するために使用できます。
bg-[color] −ブロックまたは要素に事前定義された背景色を設定します。
border-[color] −ブロックまたは要素に事前定義された境界線の色を設定します。
説明
ヘアラインは、borderクラスを使用して画像の周囲に1pxの境界線を追加するクラスです。1.xのリリースにより、ヘアラインはCSS境界線を使用する代わりに：afterおよび：before疑似要素の操作を改訂しました。
ヘアラインには次のルールが含まれています-
:after−この疑似要素は、下と右のヘアラインに使用されます。
:before-この擬似要素はのために使用される上部と左ヘアライン。
次のコードスニペットは、：after要素の使用法を示しています。
.navbar:after {
background-color: red;
}次のコードスニペットは、下部のヘアラインツールバーを削除します-
.navbar:after {
display:none;
}
.toolbar:before {
display:none;
}「ノーボーダー」クラス
ヘアラインはno-borderクラスを使用して削除され、Navbar、ツールバー、カード、およびその要素でサポートされます。
次のコードは、ナビゲーションバーからヘアラインを削除するために使用されます-
<div class = "navbar no-border">
...
</div>説明
Template7は、軽量でモバイルファーストのJavaScriptエンジンであり、Ajaxページと動的ページを指定されたコンテキストを持つTemplate7テンプレートとして表し、追加のスクリプトを必要としません。Template7は、デフォルトの軽量テンプレートエンジンとしてFramework7に関連付けられており、アプリケーションでより高速に動作します。
パフォーマンス
文字列をJS関数にコンパイルするプロセスは、template7の最も遅いセグメントです。したがって、テンプレートを複数回コンパイルする必要はありません。1回で十分です。
//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ファイルは2つの方法でインストールできます-
Template7githubリポジトリからダウンロードできます。
Bower −を介して次のコマンドを使用してインストールできます。
または
bower install template7説明
Template7では、<script>タグで特別な属性を指定することにより、テンプレートを自動的にコンパイルできます。
次のコードは、自動コンパイルのレイアウトを示しています-
<script type = "text/template7" id = "myTemplate">
<p>Hello, my name is {{name}} and i am {{age}} years old</p>
</script>自動コンパイルを初期化するには、次の属性を使用できます-
type = "text/template7" − Template7に自動コンパイルするように指示するために使用され、必須のスクリプトタイプです。
id = "myTemplate" −テンプレートにはIDからアクセスでき、必須のテンプレートIDです。
自動コンパイルの場合、次のパラメーターを渡してアプリの初期化を有効にする必要があります-
var myApp = new Framework7 ({
//It is used to compile templates on app init in Framework7
precompileTemplates: true,
});Template7.templates / myApp.templates
自動的にコンパイルされたテンプレートは、アプリの初期化後にTemplate7.templatesのプロパティとしてアクセスできます。myApp.templatesとも呼ばれ、myAppはアプリの初期化されたインスタンスです。
index.htmlファイルで次のテンプレートを使用できます-
<script type = "text/template7" id = "personTemplate">
<p>Hello, my name is {{name}} and i am {{age}} years old</p>
<p>I work as {{position}} at {{company}}</p>
</script>
<script type = "text/template7" id = "carTemplate">
<p>I have a great car, it is {{vendor}} {{model}}, made in {{year}} year.</p>
<p>It has {{power}} hp engine with {{speed}} km/h maximum speed.</p>
</script>アプリの初期化後にJavaScriptでテンプレートにアクセスすることもできます-
var myApp = new Framework7 ({
//Tell Framework7 to compile templates on app init
precompileTemplates: true
});
// Render person template to HTML, its template is already compiled and accessible as
//Template7.templates.personTemplate
var personHTML = Template7.templates.personTemplate ({
name: 'King Amit',
age: 27,
position: 'Developer',
company: 'AngularJs'
});
// Compile car template to HTML, its template is already compiled and accessible as
//Template7.templates.carTemplate
var carHTML = Template7.templates.carTemplate({
vendor: 'Honda',
model: 'city',
power: 1200hp,
speed: 300
});説明
Template7はとモバイル最初のJavaScriptのテンプレートエンジンですhandlebars.js構文のように。これは、Framework7の超軽量で超高速のデフォルトテンプレートエンジンです。
まず、すべてのAjaxページと動的ページをTemplate7テンプレートとしてレンダリングするアプリの初期化で次のパラメーターを渡す必要があります-
var myApp = new Framework7 ({
template7Pages: true // enable Template7 rendering for Ajax and Dynamic pages
});| S.No | Template7ページの使用法と説明 |
|---|---|
| 1 | テンプレート/ページデータ アプリの初期化時に送信されるtemplate7Dataパラメーターですべてのページデータを指定することにより、特定のページに必要なデータ/コンテキストを渡すことができます。 |
| 2 | カスタムコンテキストを渡す Framework7を使用すると、カスタムコンテキストを任意の動的ページまたはロードされたAjaxに渡すことができます。 |
| 3 | テンプレートを直接ロードする テンプレートを動的ページとしてオンザフライでレンダリングおよびロードできます。 |
| 4 | URLクエリ AjaxページのレンダリングにTemplate7を使用している場合、そのコンテキストは常に特別なプロパティurl_queryで拡張されます。 |
例
次の例は、リンクをクリックしたときにユーザーの詳細やユーザーのいいねなどのユーザー情報を表示するリンクを示しています。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>Framework7</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "center sliding">Template7 Pages</div>
</div>
</div>
<div class = "pages navbar-through toolbar-through">
<div data-page = "index" class = "page">
<div class = "page-content">
<div class = "list-block">
<ul>
<li>
//plain data objects allow to pass custom context to loaded page using 'data-context-name' attribute
<a href = "#" data-template = "about" data-context-name = "about" class = "item-link item-content">
<div class = "item-inner">
//provides link as 'About'
<div class = "item-title">About</div>
</div>
</a>
</li>
<li>
//a context name for this link we pass context path from template7Data root
<a href = "/framework7/src/likes.html" class = "item-link item-content">
<div class = "item-inner">
//provides link as 'Likes'
<div class = "item-title">Likes</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script type = "text/template7" id = "about">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left sliding">
<a href = "#" class = "back link"> <i class = "icon icon-back"></i><span>Back</span></a>
</div>
<div class = "center sliding">About Me</div>
<div class = "right">
<a href = "#" class = "link icon-only open-panel"> <i class = "icon icon-bars"></i></a>
</div>
</div>
</div>
<div class = "pages">
<div data-page = "about" class = "page">
<div class = "page-content">
<div class = "content-block">
<div class = "content-block-inner">
//displays the details of the user by using the 'my-app.js' file
<p>Hello, i am <b>{{firstname}} {{lastname}}</b>,
<b>{{age}}</b> years old and working as
<b>{{position}}</b> at <b>{{company}}</b>.</p>
</div>
</div>
</div>
</div>
</div>
</script>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script type = "text/javascript"
src = "/framework7/src/js/my-app.js">
</script>
</body>
</html>my-app.js
// Initialize your app
var myApp = new Framework7 ({
animateNavBackIcon: true,
// Enable templates auto precompilation
precompileTemplates: true,
// Enabled rendering pages using Template7
template7Pages: true,
// Specify Template7 data for pages
template7Data: {
//provides the url for different page with data-page = "likes"
'url:likes.html': {
likes: [
{
title: 'Nelson Mandela',
description: 'Champion of Freedom'
},
{
title: 'Srinivasa Ramanujan',
description: 'The Man Who Knew Infinity'
},
{
title: 'James Cameron',
description: 'Famous Filmmaker'
}
]
},
about: {
firstname: 'William ',
lastname: 'Root',
age: 27,
position: 'Developer',
company: 'TechShell',
}
}
});
// Add main View
var mainView = myApp.addView('.view-main', {
// Enable dynamic Navbar
dynamicNavbar: true
});likes.html
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left sliding">
<a href = "#" class = "back link"> <i class = "icon icon-back"></i><span>Back</span></a>
</div>
<div class = "center sliding">Likes</div>
<div class = "right">
<a href = "#" class = "link icon-only open-panel"> <i class = "icon icon-bars"></i></a>
</div>
</div>
</div>
<div class = "pages">
<div data-page = "likes" class = "page">
<div class = "page-content">
<div class = "content-block-title">My Likes</div>
<div class = "list-block media-list">
//iterate through likes
<ul>
{{#each likes}}
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title-row">
//displays the title and description by using the 'my-app.js' file
<div class = "item-title">{{title}}</div>
</div>
<div class = "item-subtitle">{{description}}</div>
</div>
</li>
{{/each}}
</ul>
</div>
</div>
</div>
</div>出力
上記のコードがどのように機能するかを確認するために、次の手順を実行してみましょう-
上記のHTMLコードを次のように保存します index.html サーバーのルートフォルダにあるファイル。
このHTMLファイルをhttp：//localhost/index.htmlとして開くと、出力が次のように表示されます。
この例では、ユーザーの詳細などのユーザー情報を表示するリンクを提供しています。これらのリンクをクリックすると、ユーザーは高く評価します。
説明
リンクとボタンをタップすると、それらが強調表示されます。これは、Framework7のアクティブ状態によって実行されます。
- Webアプリではなく、ネイティブアプリのように動作します。
- 高速クリックライブラリが組み込まれているため、有効にする必要があります。
- アクティブ状態のクラスは、CSSと同じでアクティブ：セレクタ。
- アクティブ状態は、watch-active-stateクラスを<html>要素に追加することで有効になります。
次のコードは、CSSスタイルのアクティブ状態に使用されます-
/* Usual state */
.my-button {
color: red;
}
/* Active/tapped state */
.my-button.active-state {
color: blue;
}次のコードは、アクティブ状態または高速クリックが無効になっている場合のフォールバックの互換性を示しています-
/* Usual state */
.my-button {
color: red;
}
/* Active/tapped state */
.my-button.active-state {
color: blue;
}
/* Fallback, when active state is disabled */
html:not(.watch-active-state) .my-button:active {
color: blue;
}説明
タップホールドイベントは、タッチイベントが持続して完了した後にトリガー（有効化）するために使用されるため、タップホールドイベントとのみ呼ばれます。タブホールドが内蔵されていますFast Clicks 図書館。
次のパラメータは、デフォルトで無効または有効にするために使用され、設定されます-
| S.No | パラメータと説明 | タイプ | デフォルト |
|---|---|---|---|
| 1 | tapHold trueに設定されている場合にタップホールドイベントを有効にします。 |
ブール値 | false |
| 2 | tapHoldDelay これは、ターゲット要素でタップホールドイベントをトリガーする前にタップを保持する期間を指定します。 |
数 | 750 |
| 3 | tapHoldPreventClicks イベントをクリックした後、タップホールドイベントは発生しません。 |
ブール値 | true |
次のコードは、タップホールドイベントを有効にするために使用されます-
var myApp = new Framework7 ({
tapHold: true //enable tap hold events
});
var $$ = Dom7;
$$('.some-link').on('taphold', function () {
myApp.alert('Tap hold fired!');
});説明
タッチリップルは、Framework7マテリアルテーマでのみサポートされているエフェクトです。デフォルトでは、マテリアルテーマで有効になっており、materialRipple：falseパラメータを使用して無効にできます。
波紋要素
リップル要素を有効にして、-などの一部のCSSセレクターに一致させることができます。
- ripple
- a.link
- a.item-link
- .button
- .tab-link
- .label-radio
- .label-チェックボックスなど。
これらは、materialRippleElementsパラメーターで指定されます。タッチリップルを有効にするか、要素のセレクターをmaterialRippleElementsパラメーターに追加してリップル効果を利用するか、リップルクラスを使用する必要があります。
波紋の色
波紋の色は、ripple- [color]クラスを要素に追加することで要素で変更できます。
たとえば-
<a href = "#" class = "button ripple-orange">Ripple Button</a>または、以下に示すようにCSSを使用して波紋の色を定義できます。
.button .ripple-wave {
background-color: #FFFF00;
}リップル要素を無効にする
特定の要素にリップルなしクラスを追加することで、それらの要素のリップルを無効にできます。たとえば-
<a href = "#" class = "button no-ripple">Ripple Button</a>