Framework7-quick-guide
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は、_flexible router api_を介してテンプレートからページを動的にロードします。
利点
- Framework7は、DOM操作でもサードパーティライブラリに依存しません。 代わりに、独自のカスタムDOM7があります。
- Framework7は、_Angular_および_React_フレームワークでも使用できます。
- HTML、CSS、およびいくつかの基本的なJavaScriptを知ったら、アプリの作成を開始できます。
- _Bower_を介した高速開発をサポートします。
- iOSやAndroid向けのアプリを習得しなくても簡単に開発できます。
デメリット
- Framework7は、iOSやAndroidなどのプラットフォームのみをサポートします。
- Framework7フレームワークのオンラインコミュニティサポートは、iOSおよびAndriodに比べて少ないです。
Framework7-環境
この章では、Framework7のインストールおよびセットアップ方法について説明します。
あなたは2つの方法でFramework7をダウンロードすることができます-
Framework7 Github repositoryからダウンロードします
以下に示すように、Bowerを使用してFramework7をインストールできます-
bower install framework7Framework7のインストールが正常に完了したら、アプリケーションでFramework7を使用するために、以下の手順に従う必要があります-
ステップ1 *-次のコマンドを使用して、 *gulp-cli をインストールして、Framework7の開発および配布バージョンをビルドする必要があります。
npm install gulp-cli_cli_は、Gulpのコマンドラインユーティリティの略です。
- ステップ2 *-次のコマンドを使用して、Gulpをグローバルにインストールする必要があります。
npm install --global gulp- ステップ3 *-次に、NodeJSパッケージマネージャーをインストールします。これにより、依存関係の指定とリンクが容易になるノードプログラムがインストールされます。 次のコマンドを使用して、npmをインストールします。
npm install- ステップ4 *-Framework7の開発バージョンは、次のコマンドを使用してビルドできます。
npm build- ステップ5 *-Framework7の開発バージョンをビルドしたら、次のコマンドを使用して、_dist/_フォルダーからアプリのビルドを開始します。
npm dist- ステップ6 *-アプリフォルダーをサーバーに保持し、アプリのページ間を移動するために次のコマンドを実行します。
gulp serverCDNからFramework7ライブラリをダウンロードする
CDNまたはコンテンツ配信ネットワークは、ユーザーにファイルを提供するように設計されたサーバーのネットワークです。 WebページでCDNリンクを使用すると、ファイルをホストする責任が独自のサーバーから一連の外部サーバーに移ります。 これは、Webページへの訪問者が同じCDNからFramework7のコピーを既にダウンロードしている場合、再ダウンロードする必要がないという利点も提供します。 次のCDNファイルをHTMLドキュメントに含めることができます。
次のCDNは、* iOSアプリレイアウト*で使用されます-
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css"/>Framework7 iOS CSSライブラリをアプリケーションに含めるために使用されます。
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css"/>Framework7 iOS関連のカラースタイルをアプリケーションに含めるために使用されます。
次のCDNは Android/Material App Layout で使用されます-
<script src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>Framework7 JSライブラリをアプリケーションに含めるために使用されます。
<script src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.min.css"></script>Framework7マテリアルスタイリングをアプリケーションに含めるために使用されます。
'_このチュートリアルでは、ライブラリの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_aboutl" 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_aboutl 以下に示すように-
*envirmnt_aboutl*<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_environmentl ファイルとしてサーバーのルートフォルダーに保存します。
- このHTMLファイルをhttp：//localhost/framework7_environmentlとして開くと、出力は以下のように表示されます。
- ナビゲーションバーをクリックすると、カスタマイズされたメッセージを含むアラートボックスが表示されます。
Framework7-レイアウト
説明
Framework7は、アプリケーションにさまざまなタイプのレイアウトを提供します。 それは3種類のNavbar/Toolbarレイアウトをサポートします-
| S.No | Layout Types & Description |
|---|---|
| 1 |
静的レイアウトは最もよく使用されるレイアウトタイプで、スクロール可能なページコンテンツであるnavbarとtoolbarが含まれ、各ページには独自のnavbarとtoolbarが含まれます。 |
| 2 |
固定レイアウトには、画面上に表示でき、ページ上でスクロールできない独自のナビゲーションバーとツールバーが含まれます。 |
| 3 |
このレイアウトでは、単一ビュー内のすべてのページのnavbarとツールバーが固定されて表示されます。 |
| 4 |
単一のビューにさまざまなタイプのレイアウトを混在させることができます。 |
ナビゲーションバー/ツールバーなし
navbarとtoolbarを使用したくない場合、ページ/ページ/ビューに適切なクラス（navbar-fixed _、 navbar-through 、 toolbar-fixed 、 toolbar-through_）を含めないでください。
説明
この章では、_navbar_について学習しましょう。 通常、ページのタイトルとナビゲーション要素を含む画面の上部に配置されます。
Navbarは3つの部分で構成されており、それぞれにHTMLコンテンツが含まれている場合がありますが、以下に示す方法でこれらを使用することをお勧めします-
- 左-_link_アイコンまたは単一のテキストリンクを戻すように設計されています。
- センター-ページまたはタブのリンクのタイトルを表示するために使用されます。
- 右-この部分は_left_部分に似ています。
次の表は、_navbar_の使用の詳細を示しています-
| S.No | Navbar Types & Description |
|---|---|
| 1 |
navbar _、 navbar-inner 、 left 、 center_、および_right_クラスを使用して、基本的なnavbarを作成できます。 |
| 2 |
ナビゲーションバーの_left_および_right_部分でリンクを使用するには、クラス_link_で_ <a> _タグを追加するだけです。 |
| 3 |
複数のリンクを使用するには、選択した部分に_ <a class = "link"> _をいくつか追加するだけです。 |
| 4 |
アイコンのクラスを追加し、リンクテキストを_ <span> _要素でラップすることにより、リンクにアイコンとテキストを提供できます。 |
| 5 |
_icon-only_クラスをリンクに追加することにより、アイコンのみでNavbarリンクを提供できます。 |
| 6 |
_View_の初期化時に、framework7ではnavbarで利用可能なメソッドを使用できます。 |
| 7 |
navbarは、navbarが必要ない一部のAjaxロードページに対して自動的に非表示/表示できます。 |
Framework7-ツールバー
説明
ツールバーを使用すると、画面下部のナビゲーション要素を使用して他のページに簡単にアクセスできます。
あなたは、表に指定されているように2つの方法でツールバーを使用することができます-
| S.No | Toolbar types & Description |
|---|---|
| 1 |
|
| 2 |
|
ツールバーのメソッド
次の利用可能な方法は、ツールバーで使用することができます-
| S.No | Toolbar Methods & Description |
|---|---|
| 1 |
myApp.hideToolbar(toolbar) 指定されたツールバーを非表示にします。 |
| 2 |
myApp.showToolbar(toolbar) 指定されたツールバーを表示します。 |
| 3 |
view.hideToolbar() ビュー内の指定されたツールバーを非表示にします。 |
| 4 |
view.showToolbar() ビューに指定されたツールバーを表示します。 |
例
次の例は、Framework7でのツールバーレイアウトの使用を示しています。
最初に、以下に示すように、 toolbarl という1つの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コードを toolbarl ファイルとしてサーバーのルートフォルダーに保存します。
- このHTMLファイルをhttp：//localhost/toolbarlとして開くと、出力は以下のように表示されます。
Framework7-検索バー
説明
フレームワーク7では、_searchbar_クラスを使用して要素を検索できます。
検索バーのパラメーター
| S.No | Parameters & Description | Type | Default |
|---|---|---|---|
| 1 |
searchList リストのCSSセレクターまたはHTML要素を検索します。 |
string or HTML Element | - |
| 2 |
searchIn CSSセレクターのリストビュー要素を検索できます。また、。item-title _、。item-text_クラスを渡すことで要素を検索できます。 |
string | '.item-title' |
| 3 |
found 「found」要素を使用して、CSSセレクターまたはHTML要素を検索します。 さらに、要素が指定されていない場合は、_。searchbar-found_要素を使用します。 |
string or HTML Element | - |
| 4 |
notfound 「not-found」要素を使用して、CSSセレクターまたはHTML要素を検索します。 さらに、要素が指定されていない場合は、_。searchbar-not-found_要素を使用します。 |
string or HTML Element | - |
| 5 |
overlay 「searchbar overlay」要素を使用してCSSセレクターまたはHTML要素を検索し、指定された要素がない場合は_.searchbar-overlay_要素を使用します。 |
string or HTML Element | - |
| 6 |
ignore 検索バーを使用して、アイテムのCSSセレクターを無視できます。 |
string | '.searchbar-ignore' |
| 7 |
customSearch 有効にすると、検索バーは_searchList_で指定されたリストブロックを検索しなくなり、カスタム検索機能を使用できるようになります。 |
boolean | false |
| 8 |
removeDiacritics 要素を検索するときは、このパラメーターを有効にして分音記号を削除します。 |
boolean | false |
| 9 |
hideDividers アイテムがない場合、このパラメーターはアイテムの仕切りとグループタイトルを非表示にします。 |
boolean | true |
| 10 |
hideGroups リストビューグループにアイテムが見つからない場合、このパラメーターはグループを非表示にします。 |
boolean | true |
検索バーのコールバック
| S.No | Callbacks & Description | Type | Default |
|---|---|---|---|
| 1 |
onSearch このメソッドは、検索中にコールバック関数を起動します。 |
function (s) | - |
| 2 |
onEnable このメソッドは、検索バーがアクティブになるとコールバック関数を起動します。 |
function (s) | - |
| 3 |
onDisable このメソッドは、検索バーが非アクティブになるとコールバック関数を起動します。 |
function (s) | - |
| 4 |
onClear このメソッドは、「clear」要素をクリックするとコールバック関数を起動します。 |
function (s) | - |
検索バーのプロパティ
| S.No | Properties & Description |
|---|---|
| 1 |
mySearchbar.params オブジェクトで渡される初期化されたパラメーターを表します。 |
| 2 |
mySearchbar.query 現在のクエリを検索します。 |
| 3 |
mySearchbar.searchList 検索リストブロックを定義します。 |
| 4 |
mySearchbar.container HTML要素を使用して検索バーコンテナーを定義します。 |
| 5 |
mySearchbar.input HTML要素を使用して検索バー入力を定義します。 |
| 6 |
mySearchbar.active 検索バーを有効にするか無効にするかを定義します。 |
検索バーの方法
| S.No | Methods & Description |
|---|---|
| 1 |
mySearchbar.search(query); このメソッドは、渡されたクエリを検索します。 |
| 2 |
mySearchbar.enable(); 検索バーを有効にします。 |
| 3 |
mySearchbar.disable(); 検索バーを無効にします。 |
| 4 |
mySearchbar.clear(); クエリと検索結果をクリアできます。 |
| 5 |
mySearchbar.destroy(); 検索バーのインスタンスを破壊します。 |
検索バーのJavaScriptイベント
| S.No | Event & Description | Target |
|---|---|---|
| 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_barl ファイルをサーバーのルートフォルダーに保存します。
- このHTMLファイルをhttp：//localhost/search_barlとして開くと、出力は以下のように表示されます。
- リストに含まれる要素が検索バーに入力されると、リストからその特定の要素が表示されます。
- リストに含まれる要素以外の要素が入力された場合、見つかった要素は表示されません。
Framework7-ステータスバー
説明
iOS 7以降では、ステータスバーがアプリと重なると問題が発生する可能性があるフルスクリーンアプリを作成できます。 Framework7は、アプリが全画面モードになっているかどうかを検出することにより、この問題を解決します。 アプリがフルスクリーンモードの場合、Framework7は_with-statusbar-overlay_クラスを_ <html> _に自動的に追加します（またはアプリがフルスクリーンモードでない場合は削除します）。_statusbar-overlay_クラスを_に追加する必要があります。 <body> _次のコードに示すように-
<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_barl ファイルとしてサーバーのルートフォルダーに保存します。
- このHTMLファイルをhttp：//localhost/status_barlとして開くと、出力は以下のように表示されます。
この例は、 statusbar-overlay の使用方法を示しています。これにより、ステータスバーがアプリと重なったときにフルスクリーンアプリを構築できます。
Framework7-サイドパネル
説明
side panel_は、画面の左側または右側に移動してコンテンツを表示します。 Framework7では、アプリに最大2つのパネル（右側パネルと左側パネル）を含めることができます。 あなたは <body> _の先頭にパネルを追加する必要があり、それから次のリストされたクラスを適用することでオープニング効果を選択します-
- panel-reveal -これにより、アプリのコンテンツ全体が移動します。
- panel-cover -これにより、パネルがアプリのコンテンツにオーバーレイされます。
たとえば、次のコードは上記のクラスを使用する方法を示しています-
<body>
<!-- First add Panel's overlay which will overlays app while panel is opened -->
<div class = "panel-overlay"></div>
<!-- Left panel -->
<div class = "panel panel-left panel-cover">
panel's content
</div>
<!-- Right panel -->
<div class = "panel panel-right panel-reveal">
panel's content
</div>
</body>次の表は、Framework77でサポートされているパネルタイプを示しています-
| S.No | Type & Description |
|---|---|
| 1 |
パネルとエフェクトを追加したら、パネルを_open_および_close_する機能を追加する必要があります。 |
| 2 |
ユーザーがパネルと対話する方法を検出するには、パネルイベントを使用できます。 |
| 3 |
Framework7は、_swipeジェスチャー_でパネルを開く機能を提供します。 |
| 4 |
|
Framework7-コンテンツブロック
説明
コンテンツブロックを使用して、異なる形式のコンテンツを追加できます。
例
次の例は、Framework7でコンテンツブロックを使用する方法を示しています-
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui"/>
<meta name = "apple-mobile-web-app-capable" content = "yes"/>
<meta name = "apple-mobile-web-app-status-bar-style" content = "black"/>
<title>Content Block</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css"/>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css"/>
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "pages">
<div data-page = "home" class = "page navbar-fixed">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left"> </div>
<div class = "center">Content Block</div>
<div class = "right"> </div>
</div>
</div>
<div class = "page-content">
<p>This is out side of content block!!!</p>
<div class = "content-block">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis
et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
<div class = "content-block">
<div class = "content-block-inner">This is another text block wrapped with "content-block-inner"</div>
</div>
<div class = "content-block-title">Content Block Title</div>
<div class = "content-block">
<p>Praesent nec imperdiet diam. Maecenas vel lectus porttitor, consectetur
magna nec, viverra sem. Aliquam sed risus dolor. Morbi tincidunt ut libero id sodales.
Integer blandit varius nisi quis consectetur.</p>
</div>
<div class = "content-block-title">This is another long content block title</div>
<div class = "content-block">
<div class = "content-block-inner">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo
inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
<div class = "content-block-title">Content Block Inset</div>
<div class = "content-block inset">
<div class = "content-block-inner">
<p>Donec et nulla auctor massa pharetra adipiscing ut sit amet sem.
Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis,
vulputate turpis vel, sagittis felis. </p>
</div>
</div>
<div class = "content-block-title">Content Block Tablet Inset</div>
<div class = "content-block tablet-inset">
<div class = "content-block-inner">
<p>Donec et nulla auctor massa pharetra adipiscing ut sit amet sem.
Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis,
vulputate turpis vel, sagittis felis. </p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
var myApp = new Framework7();
var mainView = myApp.addView('.view-main');
</script>
</body>
</html>出力
上記のコードがどのように機能するかを確認するために次の手順を実行してみましょう-
- 上記のHTMLコードを content_blockl ファイルとしてサーバーのルートフォルダーに保存します。
- このHTMLファイルをhttp：//localhost/content_blocklとして開くと、出力は以下のように表示されます。
- コードは、テキストコンテンツに余分な書式設定と必要な間隔を追加します。
Framework7-レイアウトグリッド
説明
Framework7は、ユーザーのニーズに応じてコンテンツを配置するためのさまざまなタイプのグリッドタイプを提供します。
レイアウトグリッドは、次の表で説明するように、さまざまな種類の列サイズを提供します-
| S.No | Class | Table Class | Width |
|---|---|---|---|
| 1 | col-5 | tablet-5 | 5% |
| 2 | col-10 | tablet-10 | 10% |
| 3 | col-15 | tablet-15 | 15% |
| 4 | col-20 | tablet-20 | 20% |
| 5 | col-25 | tablet-25 | 25% |
| 6 | col-30 | tablet-30 | 30% |
| 7 | col-33 | tablet-33 | 33.3% |
| 8 | col-35 | tablet-35 | 35% |
| 9 | col-40 | tablet-40 | 40% |
| 10 | col-45 | tablet-45 | 45% |
| 11 | col-50 | tablet-50 | 50% |
| 12 | col-55 | tablet-55 | 55% |
| 13 | col-60 | tablet-60 | 60% |
| 14 | col-65 | tablet-65 | 65% |
| 15 | col-66 | tablet-66 | 66.6% |
| 16 | col-70 | tablet-70 | 70% |
| 17 | col-75 | tablet-75 | 75% |
| 18 | col-80 | tablet-80 | 80% |
| 19 | col-85 | tablet-85 | 85% |
| 20 | col-90 | tablet-90 | 90% |
| 21 | col-95 | tablet-95 | 95% |
| 21 | col-100 | tablet-100 | 100% |
| 22 | col-auto | tablet-auto | Equal width |
例
次の例は、Framework7で必要に応じてコンテンツを配置するためのグリッドレイアウトを提供します-
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui"/>
<meta name = "apple-mobile-web-app-capable" content = "yes"/>
<meta name = "apple-mobile-web-app-status-bar-style" content = "black"/>
<title>Layout Grid</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css"/>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css"/>
<style>
div[class* = "col-"] {
background: #fff;
text-align: center;
color: #000;
border: 1px solid #D8D8D8;
}
.row {
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "center sliding">Layout Grid</div>
</div>
</div>
<div class = "pages">
<div data-page = "index" class = "page navbar-fixed">
<div class = "page-content">
<div class = "content-block-title">Columns with gutter</div>
<div class = "content-block">
<div class = "row">
<div class = "col-50">col 1</div>
<div class = "col-50">col 2</div>
</div>
<div class = "row">
<div class = "col-25">col 1</div>
<div class = "col-25">col 2</div>
<div class = "col-25">col 3</div>
<div class = "col-25">col 4</div>
</div>
<div class = "row">
<div class = "col-33">col 1</div>
<div class = "col-33">col 2</div>
<div class = "col-33">col 3</div>
</div>
<div class = "content-block-title">Columns without gutter</div>
<div class = "content-block">
<div class = "row no-gutter">
<div class = "col-50">col 1</div>
<div class = "col-50">col 2</div>
</div>
<div class = "row no-gutter">
<div class = "col-25">col 1</div>
<div class = "col-25">col 2</div>
<div class = "col-25">col 3</div>
<div class = "col-25">col 4</div>
</div>
<div class = "row no-gutter">
<div class = "col-33">col 1</div>
<div class = "col-33">col 2</div>
<div class = "col-33">col 3</div>
</div>
</div>
<div class = "content-block-title">Nested Columns</div>
<div class = "content-block">
<div class = "row">
<div class = "col-50">
col 1
<div class = "row">
<div class = "col-40">col 2</div>
<div class = "col-60">col 3</div>
</div>
</div>
<div class = "col-50">
col 1
<div class = "row">
<div class = "col-75">col 2</div>
<div class = "col-25">col 3</div>
</div>
</div>
</div>
</div>
<div class = "content-block-title">Columns With Different Equal Width</div>
<div class = "content-block">
<div class = "row">
<div class = "col-100 tablet-50">col 1</div>
<div class = "col-100 tablet-50">col 2</div>
</div>
<div class = "row">
<div class = "col-50 tablet-25">col 1</div>
<div class = "col-50 tablet-25">col 2</div>
<div class = "col-50 tablet-25">col 3</div>
<div class = "col-50 tablet-25">col 4</div>
</div>
<div class = "row">
<div class = "col-100 tablet-40">col 1</div>
<div class = "col-50 tablet-60">col 2</div>
<div class = "col-50 tablet-60">col 3</div>
<div class = "col-100 tablet-40">col 4</div>
</div>
</div>
<div class = "content-block-title">Columns With Equal Width</div>
<div class = "content-block">
<div class = "row">
<div class = "col-auto">col-1</div>
<div class = "col-auto">col-2</div>
<div class = "col-auto">col-3</div>
<div class = "col-auto">col-4</div>
</div>
<div class = "row no-gutter">
<div class = "col-auto">col-1</div>
<div class = "col-auto">col-2</div>
<div class = "col-auto">col-3</div>
<div class = "col-auto">col-4</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
var myApp = new Framework7();
var mainView = myApp.addView('.view-main');
</script>
</body>
</html>出力
上記のコードがどのように機能するかを確認するために次の手順を実行してみましょう-
- 上記のHTMLコードを layout_gridl ファイルとしてサーバーのルートフォルダーに保存します。
- このHTMLファイルをhttp：//localhost/layout_gridlとして開きます。出力は以下のように表示されます。
- このコードは、ユーザーのニーズに応じてコンテンツを配置するためのさまざまなタイプのグリッドを提供します。
Framework7-オーバーレイ
説明
Framework7は、アプリケーションとスムーズに連携するためにさまざまな種類のオーバーレイを提供します。 次の表は、Framework7オーバーレイの一部を示しています-
| S.No | Overlay Type & Description |
|---|---|
| 1 |
モーダルは、親ウィンドウを離れることなく、別々のソースからコンテンツを表示する小さなウィンドウです。 |
| 2 |
ポップアップは、ユーザーが要素をクリックしたときにコンテンツを表示するポップアップボックスです。 |
| 3 |
一時的なコンテンツのプレゼンテーションを管理するには、ポップオーバーコンポーネントを使用できます。 |
| 4 |
_Action Sheet_は、特定のタスクを処理する方法の可能性のセットをユーザーに提示するために使用されます。 |
| 5 |
オーバーレイログイン画面は、ページまたはポップアップで、またはスタンドアロンオーバーレイとして使用できるログイン画面形式を表示するために使用されます。 |
| 6 |
ピッカーモーダルは、カレンダーピッカーに似たカスタムコンテンツを選択するために使用されます。 |
Framework7-プリローダー
説明
Framework7のプリローダーは、Scalable Vector Graphic（SVG）で作成され、CSSでアニメーション化されるため、簡単にサイズ変更できます。 プリローダーは2色で利用可能です-
- デフォルトは明るい背景です
- もう一つは暗い背景です
以下に示すように、HTMLで_preloader_クラスを使用できます-
例
次の例は、Framework7でのプリローダーの使用を示しています-
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui"/>
<meta name = "apple-mobile-web-app-capable" content = "yes"/>
<meta name = "apple-mobile-web-app-status-bar-style" content = "black"/>
<title>Panel Events</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css"/>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css"/>
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "pages">
<div data-page = "home" class = "page navbar-fixed">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left"> </div>
<div class = "center">Framework7 Preloader</div>
<div class = "right"> </div>
</div>
</div>
<div class = "page-content">
<div class = "content-block row">
<div class = "col-25"><span class = "preloader"></span><br>Default Preloader</div>
<div class = "col-25 col-dark"><span class = "preloader preloader-white"></span><br>White Preloader</div>
<div class = "col-25"><span style = "width:42px; height:42px" class = "preloader"></span><br>Big Preloader</div>
<div class = "col-25 col-dark"><span style = "width:42px; height:42px" class = "preloader preloader-white"></span><br>White Preloader</div>
</div>
</div>
</div>
</div>
</div>
</div>
<style>.col-25{padding:5px;text-align:center;}.col-dark{background:#222;}</style>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
var myApp = new Framework7();
</script>
</body>
</html>出力
上記のコードがどのように機能するかを確認するために次の手順を実行してみましょう-
- 上記のHTMLコードを preloaderl ファイルとしてサーバーのルートフォルダーに保存します。
- このHTMLファイルをhttp：//localhost/preloaderlとして開くと、出力が以下のように表示されます。
- このコードは、SVGで作成され、CSSでアニメーション化されるプリローダーインジケーターを表示します。
Framework7-進捗バー
説明
進行状況バーを使用して、アセットの読み込みまたはタスクの進行状況をユーザーに表示できます。 _progressbar_クラスを使用して、進行状況バーを指定できます。 ユーザーがリクエストに対してロードプロセスがどれくらいの時間続くかわからない場合は、_progressbar-infinite_クラスを使用できます。
Progress Bar JavaScript API
プログレスバーは、次のメソッドを使用して、show _、 hide_、および_progress_プロパティを指定するためにJavaScript APIと一緒に使用することができます-
| S.No | Methods | Description & Parameters |
|---|---|---|
| 1 | myApp.setProgressbar (container , progress, speed) |
It sets the progress bar for the progress of a task.
|
| 2 | myApp.hideProgressbar (contain er) |
It hides the progress bar.
|
| 3 | myApp.showProgressbar (contai ner, progress, color) |
It displays the progress bar.
|
例
次の例は、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_barl ファイルとしてサーバーのルートフォルダーに保存します。
- このHTMLファイルをhttp：//localhost/progress_barlとして開くと、出力は以下のように表示されます。
- この例では、進行状況バーが表示されます。これは、操作がプロセスを完了するのにかかる時間を示し、さまざまな種類の進行状況バーを表示してアクティビティを示します。
Framework7-リストビュー
説明
リストビューは強力なユーザーインターフェイスコンポーネントであり、複数行を含むスクロール可能なリストにデータを表示します。 リストビューには、以下に示すように多くの用途があります-
- これにより、ユーザーは整理されたデータを介してリンクできます。
- これにより、ユーザーは項目のインデックス付きリストから選択できます。
- 詳細な情報とコントロールが個別のグループに表示されます。
- 選択可能なオプションのリストが表示されます。
リストビューレイアウト
次の表は、リストビューの一般的なレイアウトを示しています-
| S.No | List View types & Description |
|---|---|
| 1 |
_list-block_クラスを使用するのは、リストビュー要素ラッパーです。 |
| 2 |
リストビューの要素は、他のページやデータへの_リンク_として使用できます。 |
| 3 |
これは、リスト項目とタイトルを視覚的に分割するタイトルを持つリスト要素です。 |
| 4 |
単一のリストブロック内でリストビュー要素をラップできます。 |
| 5 |
_inset_クラスを_list-block_に追加すると、リストブロックに_inset_スタイルを設定できます。 |
Framework7-アコーディオン
説明
アコーディオンは、積み重ねられたアイテムのリストとして表示されるグラフィカルなコントロール要素です。 各アコーディオンを_expanded_または_stretched_にして、そのアコーディオンに関連付けられたコンテンツを表示できます。
折りたたみ可能なレイアウト
単一の独立した折りたたみ可能な要素を使用している場合、_accordion-list_ラッパー要素を省略する必要があります。
以下は、折りたたみ可能なレイアウトの構造です-
<!-- Single collapsible element ------>
<div class = "accordion-item">
<div class = "accordion-item-toggle"></div>
<div class = "accordion-item-content"></div>
</div>
<!-- Separate collapsible element -->
<div class = "accordion-item">
<div class = "accordion-item-toggle"></div>
<div class = "accordion-item-content"></div>
</div>次のクラスは、Framework7のアコーディオンに使用されます-
| S.No | Classes & Description |
|---|---|
| 1 |
accordion-list これはオプションのクラスで、アコーディオンアイテムリストのグループが含まれています。 |
| 2 |
accordion-item これは、単一のアコーディオンアイテムに必要なクラスです。 |
| 3 |
accordion-item-toggle これは、アコーディオンアイテムのコンテンツを展開するために必要なクラスです。 |
| 4 |
accordion-item-content 非表示のアコーディオンアイテムのコンテンツに使用される必須クラスです。 |
| 5 |
accordion-item-expanded 単一の拡張アコーディオンアイテムです。 |
アコーディオンJavaScript API
JavaScript APIメソッドは、プログラムでアコーディオンを開閉するために使用されます。
次のJavaScript APIメソッドが含まれています-
- * myApp.accordionOpen（item）*-アコーディオンを開くために使用されます。
- * myApp.accordionClose（item）*-アコーディオンを閉じるために使用されます。
- * myApp.accordionToggle（item）*-アコーディオンの切り替えに使用されます。
すべてのメソッドには、HTMLまたはaccordion-itemの文字列要素である_item_というパラメーターが含まれています。
アコーディオンイベント
アコーディオンには、次の表に示す4つのイベントが含まれます-
| S.No | Event | Target & Description |
|---|---|---|
| 1 | open |
Accordion item アニメーションを開くと、このイベントが発生します。 |
| 2 | opened |
Accordion item アニメーションの開始が完了すると、このイベントが発生します。 |
| 3 | close |
Accordion item アニメーションを閉じると、このイベントが発生します。 |
| 4 | closed |
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コードを accordionl ファイルとしてサーバーのルートフォルダーに保存します。
- このHTMLファイルをhttp：//localhost/accordionlとして開くと、出力は以下のように表示されます。
- この例では、折りたたみ可能なレイアウトを提供します。このレイアウトを展開して、アコーディオンに関連付けられたコンテンツを表示できます。
Framework7-カード
説明
_カード_には、写真、リンク、テキストなどの単一の主題に関連する整理された情報が含まれています。 次の表は、Framework7カードの種類を示しています-
| S.No | Types & Description |
|---|---|
| 1 |
基本的なカードHTMLレイアウトでは、カードクラスを使用してアイテムを配置します。 |
| 2 |
cards_list_クラスを <div class = "list-block"> _に追加することにより、_cards_をリストビュー要素として使用できます。 |
Framework7-チップ
説明
チップはエンティティの小さなブロックであり、写真、タイトルの短い文字列、および短い情報を含めることができます。
Chips 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 -チップコンテナーです。
- チップメディア-これは、画像、アバターまたはアイコンを含むことができるチップメディア要素です。 オプションです。
- カードラベル-チップのテキストラベルです。
- 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_layoutl ファイルとしてサーバーのルートフォルダーに保存します。
- このHTMLファイルをhttp：//localhost/cards_html_layoutlとして開くと、出力は以下のように表示されます。
- この例は、アルバム、カード要素、写真、タイトル文字列、簡単な情報を含む投稿画像などの小さなブロックで複雑なエンティティを表します。
Framework7-ボタン
説明
Framework7は、適切なクラスをリンクまたは入力ボタンに追加するだけで、すぐに使用できるボタンのグループを提供します。
| S.No | Types & Description |
|---|---|
| 1 |
Framework7は、適切なクラスを適用することで使用できる多くのiOSテーマボタンを提供します。 |
| 2 |
マテリアルテーマには、適切なクラスを使用して、アプリケーションで使用する多くのボタンが用意されています。 |
Framework7-アクションボタン
説明
Framework7は、昇格されたアクションに_フローティングアクションボタン_を提供します。 これらは、UI上に浮いた丸いアイコンとして表示されます。 morphing _、 launching_、および_アンカーポイントの転送_を含むモーションビヘイビアがあります。
'_フローティングアクションボタンは、マテリアルテーマでのみサポートされています。_
次の表は、Framework7で使用されるアクションボタンの種類を示しています-
| S.No | Types & Description |
|---|---|
| 1 |
とても簡単です。 _page_または_view_の子として配置する必要があります。 |
| 2 |
フローティングアクションボタンをクリックしてポップオーバーを開きたい場合は、_floating-button-to-popover_クラスを使用できます。 |
| 3 |
_speed dial_を使用して、フローティングアクションボタンをクリックすると、関連するアクションを呼び出すことができます。 |
Framework7-フォーム
説明
フォームはユーザーとのやり取りに使用され、テキストフィールド、チェックボックス、ラジオボタンなどを使用してWebユーザーからデータを収集します。
Framework7は、以下の表に指定されているように、アプリケーションでスムーズに動作するためのさまざまなタイプのフォーム要素を提供します-
| S.No | Overlay Type & Description |
|---|---|
| 1 |
フォーム要素は、見栄えの良いフォームレイアウトを作成するために使用されます。 |
| 2 |
list view extentionを使用すると、Framework7でチェックボックスとラジオ入力を作成できます。 |
| 3 |
スマート選択は、チェックボックスとラジオ入力のグループを使用して、フォーム選択を動的ページに変更する簡単な方法です。 |
| 4 |
_disabled_クラスを要素に適用するか、フォーム要素の_disabled_属性を追加することにより、要素を無効にできます。 |
| 5 |
Framework7には、フォームの操作を簡単にする便利なメソッドがほとんどありません。 |
| 6 |
フォームストレージを使用すると、Ajaxで読み込まれたページにフォームデータを自動的に保存および解析できます。 |
| 7 |
Framework7では、Ajaxを使用してデータを自動的に送信できます。 |
Framework7-タブ
説明
タブは論理的にグループ化されたコンテンツのセットであり、タブ間をすばやく切り替えてアコーディオンのようなスペースを節約できます。
タブのレイアウト
次のコードは、タブのレイアウトを定義します-
<!-- Tabs wrapper, shoud have "tabs" class.It is a required element -->
<div class = "tabs">
<!-- The tab, should have "tab" class and unique id attribute -->
<!-- The tab is active by default - "active" class -->
<div class = "tab active" id = "tab1">
... The content for Tab 1 goes here ...
</div>
<!-- The second tab, should have "tab" class and unique id attribute -->
<div class = "tab" id = "tab2">
... The content for Tab 2 goes here ...
</div>
</div>どこ-
- <div class = "tabs"> -すべてのタブに必要なラッパーです。 これを怠ると、タブはまったく機能しなくなります。
- <div class = "tab"> -これは単一のタブで、*一意のid *属性を持つ必要があります。
- <div class = "tab active"> -これは単一のアクティブタブであり、追加の_active_クラスを使用してタブを表示（アクティブ）にします。
タブを切り替える
ユーザーがそれらの間で切り替えることができるように、タブレイアウトでいくつかのコントローラーを使用できます。
このためには、_tab-link_クラスとターゲットタブの_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’s_および_data-tab_属性を使用する代わりにクラスを使用できます。
<!-- For Top Tabs -->
<div class = "tabs tabs-top">
<div class = "tab tab1 active">...</div>
<div class = "tab tab2">...</div>
<div class = "tab tab3">...</div>
</div>
<!-- For Bottom Tabs -->
<div class = "tabs tabs-bottom">
<div class = "tab tab1 active">...</div>
<div class = "tab tab2">...</div>
<div class = "tab tab3">...</div>
</div>
<!-- For Tabs links -->
<div class = "tab-links">
<!-- Links are switch top and bottom tabs to .tab1 -->
<a href = "#" class = "tab-link" data-tab = ".tab1">Tab 1</a>
<!-- Links are switch top and bottom tabs to .tab2 -->
<a href = "#" class = "tab-link" data-tab = ".tab2">Tab 2</a>
<!-- Links are switch top and bottom tabs to .tab3 -->
<a href = "#" class = "tab-link" data-tab = ".tab3">Tab 3</a>
</div>tab-linkの_data-tab_属性には、ターゲットタブのCSSセレクターが含まれます。
私たちはタブのさまざまな方法を使用できます、これらは次の表で指定されています-
| S.No | Tabs Types & Description |
|---|---|
| 1 |
インラインタブは、インラインでグループ化されたセットで、すばやく切り替えることができます。 |
| 2 |
ナビゲーションバーにタブを配置して、タブを切り替えることができます。 |
| 3 |
単一のタブを使用して、独自のナビゲーションとレイアウトでビューを切り替えることができます。 |
| 4 |
単純なトランジション（アニメーション）を使用してタブを切り替えることができます。 |
| 5 |
タブに_tabs-swipeable-wrap_クラスを使用すると、単純な遷移でスワイプ可能なタブを作成できます。 |
| 6 |
JavaScriptイベントは、タブのJavaScriptコードで作業しているときに使用できます。 |
| 7 |
JavaScriptメソッドを使用してタブを切り替えたり表示したりできます。 |
Framework7-スワイパースライダー
説明
スワイパースライダーは最も強力で最新のタッチスライダーであり、多くの機能を備えたFramework7に搭載されています。
次のHTMLレイアウトはスワイパースライダーを示しています-
<!-- Container class for slider -->
<div class = "swiper-container">
<!-- Wrapper class for slider -->
<div class = "swiper-wrapper">
<!-- Slides -->
<div class = "swiper-slide">Slide 1</div>
<div class = "swiper-slide">Slide 2</div>
<div class = "swiper-slide">Slide 3</div>
... other slides ...
</div>
<!-- Define pagination, if it is required -->
<div class = "swiper-pagination"></div>
</div>次のクラスは、スワイパースライダーに使用されます-
- swiper-container -これはメインスライダーコンテナーに必要な要素であり、スライドおよびページ付けに使用されます。
- Swiper-wrapper -追加のラッパースライドに必要な要素です。
- swiper-slide -これは単一のスライド要素であり、内部に任意のHTMLを含めることができます。
- swiper-pagination -ページネーションの箇条書きではオプションであり、それらは自動的に作成されます。
あなたは、関連するメソッドを使用してJavaScriptでスワイパーを初期化することができます-
myApp.swiper(swiperContainer,parameters)OR
new Swiper(swiperContainer, parameters)両方のメソッドは、オプションでスライダーを初期化するために使用されます。
上記のメソッドには、次のパラメータが含まれています-
- swiperContainer -スワイパーコンテナの_HTMLElementまたはstring_であり、必須です。
- パラメータ-これらはスワイパーパラメータを持つオブジェクトを含むオプションの要素です。
たとえば-
var mySwiper = app.swiper('.swiper-container', {
speed: 400,
spaceBetween: 100
});スワイパーのインスタンスにアクセスすることが可能であり、スライダーのコンテナの_swiper_プロパティには次のHTML要素があります-
var mySwiper = $$('.swiper-container')[0].swiper;
//Here you can use all slider methods like:
mySwiper.slideNext();次の表でスワイパーのさまざまな方法と種類を見ることができます-
| S.No | Swiper Types & Description |
|---|---|
| 1 |
Default Swiper With Pagination これは最新のタッチスライダーであり、スワイパーはデフォルトで水平にスワイプします。 |
| 2 |
これはデフォルトのスワイパーとしても機能しますが、垂直にスワイプします。 |
| 3 |
このスワイパーは、2つのスライド間にスペースを与えるために使用されます。 |
| 4 |
このスワイパーは、1ページで複数のスワイパーを使用します。 |
| 5 |
これは、垂直スライドと水平スライドの組み合わせです。 |
| 6 |
カスタムコントロールがスライドを選択またはスワイプするために使用されます。 |
| 7 |
ロードに時間がかかるマルチメディアファイルに使用できます。 |
Framework7-フォトブラウザー
説明
フォトブラウザーは、画像グループを表示するためのiOSフォトブラウザーコンポーネントに似ており、ズームやパンが可能です。 画像間をスライドするために、写真ブラウザはlink：/framework7/framework7_swiper_slider [Swiper Slider]を使用します。
次の表は、framework7で使用される写真ブラウザの種類を示しています-
| S.No | Photo browser types & Description |
|---|---|
| 1 |
写真ブラウザは、JavaScriptのみを使用して作成および初期化できます。 |
| 2 |
Framework7は、フォトブラウザーで使用されるパラメーターのリストを提供します。 |
| 3 |
Photo Browser Methods & Properties フォトブラウザーを初期化すると、初期化されたインスタンス変数を取得して、フォトブラウザーのメソッドとプロパティを使用します。 |
| 4 |
写真ブラウザーの初期化中に、_photos_パラメーターで写真/ビデオを含む配列を渡す必要があります。 |
| 5 |
Framework7には、多くのフォトブラウザーテンプレートが用意されており、フォトブラウザーの初期化を渡すことができます。 |
Framework7-オートコンプリート
説明
オートコンプリートは、Framework7のモバイルフレンドリーでタッチに最適化されたコンポーネントであり、ドロップダウンとして、またはスタンドアロンで使用できます。 JavaScriptメソッドを使用して、オートコンプリートインスタンスを作成および初期化できます-
myApp.autocomplete(parameters)_parameters_は、オートコンプリートインスタンスの初期化に使用される必須オブジェクトです。
オートコンプリートパラメーター
次の表に、Framework7で使用可能なオートコンプリートパラメーターを示します-
| S.No | Parameters & Description | Type | Default |
|---|---|---|---|
| 1 |
openIn ドロップダウン、ポップアップ、またはページとして使用できるオートコンプリートを開く方法を定義します。 |
string | page |
| 2 |
source オートコンプリートインスタンス、検索クエリ、レンダリング関数を使用して、一致したアイテムを配列で渡します。 |
function (autocomplete, query, render) | - |
| 3 |
valueProperty 一致したアイテムオブジェクトのキーのアイテム値を指定します。 |
string | id |
| 4 |
limit クエリごとにオートコンプリートの限られた数のアイテムが表示されます。 |
number | - |
| 5 |
preloader プリローダーを使用して、オートコンプリートレイアウトをtrueに設定することで指定できます。 |
boolean | false |
| 6 |
preloaderColor プリローダーの色を指定します。 デフォルトでは、色は「黒」です。 |
string | - |
| 7 |
value デフォルトの選択値で配列を定義します。 |
array | - |
| 8 |
textProperty 一致するアイテムオブジェクトのキーのアイテム値を指定します。これは、表示されるオプションのタイトルとして使用できます。 |
string | text |
スタンドアロンのオートコンプリートパラメーター
次の表に、Framework7で使用可能なスタンドアロンオートコンプリートパラメーターを示します-
| S.No | Parameters & Description | Type | Default |
|---|---|---|---|
| 1 |
opener これは、文字列またはHTML要素のパラメーターであり、スタンドアロンのオートコンプリートページを開きます。 |
string or HTMLElement | - |
| 2 |
popupCloseText オートコンプリートポップアップを閉じるために使用されます。 |
string | 'Close' |
| 3 |
backText オートコンプリートがページとして開かれたときに戻るリンクを提供します。 |
string | 'Back' |
| 4 |
pageTitle オートコンプリートページのタイトルを指定します。 |
string | - |
| 5 |
searchbarPlaceholderText 検索バーのプレースホルダーテキストを指定します。 |
string | 'Search' |
| 6 |
searchbarCancelText 検索バーのキャンセルボタンのテキストを定義します。 |
string | 'cancel' |
| 7 |
notFoundText 一致する要素が見つからない場合にテキストを表示します。 |
string | 'Nothing found' |
| 8 |
multiple trueに設定することにより、複数選択を選択できます。 |
boolean | false |
| 9 |
navbarTheme navbarのカラーテーマを指定します。 |
string | - |
| 10 |
backOnSelect ユーザーが値を選択すると、オートコンプリートはtrueに設定されて閉じられます。 |
boolean | false |
| 11 |
formTheme フォームのカラーテーマを指定します。 |
string | - |
ドロップダウンオートコンプリートパラメーター
次の表に、Framework7で使用可能なドロップダウンオートコンプリートパラメーターを示します-
| S.No | Parameters & Description | Type | Default |
|---|---|---|---|
| 1 |
input テキスト入力に使用される文字列またはHTML要素です。 |
string or HTMLElement | - |
| 2 |
dropdownPlaceholderText ドロップダウンプレースホルダーテキストを指定します。 |
string | - |
| 3 |
updateInputValueOnSelect trueに設定することにより、selectの入力値を更新できます。 |
boolean | true |
| 4 |
expandInput item-input itをtrueに設定すると、リストビューでテキスト入力を展開して、ドロップダウン中に全画面を表示できます。 |
boolean | false |
オートコンプリートコールバック関数
以下の表は、Framework7で使用可能なドロップダウンオートコンプリートパラメーターを示しています-
| S.No | Parameters & Description | Type | Default |
|---|---|---|---|
| 1 |
onChange オートコンプリートの値が変更されるたびに、このコールバック関数が実行されます。 |
function (autocomplete, value) | - |
| 2 |
onOpen オートコンプリートが開かれるたびに、このコールバック関数が実行されます。 |
function (autocomplete) | - |
| 3 |
onClose オートコンプリートが閉じられるたびに、このコールバック関数が実行されます。 |
function (autocomplete) | - |
オートコンプリートテンプレート
次の表に、Framework7で使用可能なドロップダウンオートコンプリートパラメーターを示します-
| S.No | Parameters & Description | Type | Default |
|---|---|---|---|
| 1 |
navbarTemplate スタンドアロンのオートコンプリートnavbarテンプレートです。 |
string | - |
| 2 |
itemTemplate スタンドアロンtemplate7フォームアイテムです。 |
string | - |
| 3 |
dropdownTemplate template7ドロップダウンテンプレートです。 |
string | - |
| 4 |
dropdownItemTemplate template7ドロップダウンリスト項目です。 |
string | - |
| 5 |
dropdownPlaceholderTemplate template7ドロップダウンプレースホルダーアイテムです。 |
string | - |
デフォルトのテンプレート
以下は、上記で定義されたテンプレートパラメータのデフォルトのテンプレートコードスニペットです-
<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*Autocompleteドロップダウンのインスタンスを指定します。
5
*myAutocomplete.popup*Autocompleteポップアップのインスタンスを指定します。
6
*myAutocomplete.page*オートコンプリートページのインスタンスを指定します。
7
*myAutocomplete.pageData*オートコンプリートページデータを定義します。
8
*myAutocomplete.searchbar*Autocomplete検索バーインスタンスを定義します。
オートコンプリートプロパティ
次の表は、Framework7で利用可能なオートコンプリートメソッドを示しています-
| S.No | Properties & Description |
|---|---|
| 1 |
myAutocomplete.open() ドロップダウン、ポップアップ、またはページとして使用できるオートコンプリートを開きます。 |
| 2 |
myAutocomplete.close() オートコンプリートを閉じます。 |
| 3 |
myAutocomplete.showPreloader() オートコンプリートプリローダーを示しています。 |
| 4 |
myAutocomplete.hidePreloader() Autocompleteプリローダーを非表示にします。 |
| 5 |
myAutocomplete.destroy() Autocompleteプリローダーインスタンスを破壊し、すべてのイベントを削除します。 |
例
次の例は、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コードを autocompletel ファイルとしてサーバーのルートフォルダーに保存します。
- このHTMLファイルをhttp：//localhost/autocompletelとして開くと、出力は以下のように表示されます。
- この例は、単純なドロップダウン、すべての値を含むドロップダウン、プレースホルダーを含むドロップダウン、スタンドアロンのオートコンプリートなどで値のオートコンプリートを提供します。
Framework7-ピッカー
説明
ピッカーはiOSネイティブピッカーのように見え、リストから任意の値を選択できる強力なコンポーネントであり、カスタムオーバーレイピッカーの作成にも使用されます。 ピッカーをインラインコンポーネントまたはオーバーレイとして使用できます。 オーバーレイピッカーは、タブレット（iPad）のPopoverに自動的に変換されます。
次のアプリのメソッドを使用して、JavaScriptメソッドを作成および初期化できます-
myApp.picker(parameters)_parameters_は必須オブジェクトであり、ピッカーインスタンスの初期化に使用され、必須メソッドです。
ピッカーパラメータ
次の表は、ピッカーで利用可能なパラメータを指定します-
| S.No | Parameters & Description | Type | Default |
|---|---|---|---|
| 1 |
container インラインピッカーのピッカーHTMLを生成するために使用されるCSSセレクターまたはHTMLElementを含む文字列。 |
string or HTMLElement | - |
| 2 |
input CSSセレクターまたはHTMLElementを使用して文字列と共に配置された関連する入力要素。 |
string or HTMLElement | - |
| 3 |
scrollToInput ピッカーが開かれるたびに、入力のビューポート（ページコンテンツ）をスクロールするために使用されます。 |
boolean | true |
| 4 |
inputReadOnly 指定された入力で「読み取り専用」属性を設定するために使用されます。 |
boolean | true |
| 5 |
convertToPopover iPadのような大画面でピッカーモーダルをポップオーバーに変換するために使用されます。 |
boolean | true |
| 6 |
onlyOnPopover 有効にすると、Popoverでピッカーを開くことができます。 |
boolean | true |
| 7 |
cssClass モーダルを選択するには、追加のCSSクラス名を使用できます。 |
string | - |
| 8 |
closeByOutsideClick メソッドを有効にしてピッカーまたは入力要素の外側をクリックして、ピッカーを閉じることができます。 |
boolean | false |
| 9 |
toolbar ピッカーモーダルツールバーを有効にするために使用されます。 |
boolean | true |
| 10 |
toolbarCloseText 完了/閉じるツールバーボタンに使用されます。 |
string | 'Done' |
| 11 |
toolbarTemplate それはツールバーのHTMLテンプレートであり、デフォルトでは次のテンプレートを持つHTML文字列です- |
string | - |
特定のピッカーパラメーター
次の表は、利用可能な特定のピッカーパラメータを示しています-
S.No
パラメータと説明
Type
デフォルト
1
*rotateEffect*ピッカーで3D回転効果を有効にします。
ブール値
偽
2
*momentumRatio*高速タッチと移動後にピッカーを離すと、より勢いが増します。
数
7
3
*updateValuesOnMomentum*勢いの間にピッカーと入力値を更新するために使用されます。
ブール値
偽
4
*updateValuesOnTouchmove*タッチ移動中にピッカーと入力値を更新するために使用されます。
ブール値
true
5
値
配列には初期値があり、各配列項目は関連する列の値を表します。
アレイ
-
6
*formatValue*この関数は入力値をフォーマットするために使用され、新しい/フォーマットされた文字列値を返す必要があります。 _values_および_displayValues_は、関連する列の配列です。
関数（p、値、displayValues）
-
7
*cols*すべての配列項目は、列パラメーターを持つオブジェクトを表します。
アレイ
-
ピッカーパラメーターコールバック
次の表は、ピッカーで利用可能なコールバック関数のリストを示しています-
| S.No | Callbacks & Description | Type | Default |
|---|---|---|---|
| 1 |
onChange コールバック関数は、ピッカーの値が変更され、_valuesとdisplayValues_が関連列の配列である場合に実行されます。 |
function (p, values, displayValues) | - |
| 2 |
onOpen ピッカーが開かれるたびにコールバック関数が実行されます。 |
function (p) | - |
| 3 |
onClose コールバック関数は、ピッカーが閉じられるたびに実行されます。 |
function (p) | - |
列パラメーター
Pickerの設定の時点で、_cols_パラメーターを渡す必要があります。 それは、各項目が列パラメータを持つオブジェクトである配列として表されます-
S.No
パラメータと説明
Type
デフォルト
1
値
文字列の列の値は配列で指定できます。
アレイ
-
2
*displayValues*文字列列の値を持つ配列があり、指定されていない場合は、_values_パラメーターの値が表示されます。
アレイ
-
3
*cssClass*列HTMLコンテナーに設定するために使用される_CSSクラス_名。
ひも
-
4
*textAlign*列値のテキスト配置を設定するために使用され、_ "left"、 "center"、または "right" _になります。
ひも
-
5
幅
デフォルトでは、幅は自動的に計算されます。 _px_にあるべき依存列を持つピッカーで列幅を修正する必要がある場合。
数
-
6
ディバイダー
視覚的な区切り線である必要がある列に使用され、値はありません。
ブール値
偽
7
- コンテンツ *
列のコンテンツで指定されたdivider-column _（divider：true）_に使用されます。
ひも
-
列コールバックパラメーター
| S.No | Callbacks & Description | Type | Default |
|---|---|---|---|
| 1 |
その時点で列の値が変更されるたびに、コールバック関数が実行されます。 _valueおよびdisplayValue_は、現在の列_valueおよびdisplayValue_を表します。 |
function (p, value, displayValue) | - |
ピッカーのプロパティ
Picker変数には、次の表に示す多くのプロパティがあります-
| S.No | Properties & Description |
|---|---|
| 1 |
myPicker.params 渡されたパラメーターをオブジェクトで初期化できます。 |
| 2 |
myPicker.value 各列で選択された値は、アイテムの配列で表されます。 |
| 3 |
myPicker.displayValue 各列に対して選択された表示値は、アイテムの配列で表されます。 |
| 4 |
myPicker.opened ピッカーを開くと、_true_値に設定されます。 |
| 5 |
myPicker.inline ピッカーがインラインの場合、_true_値に設定されます。 |
| 6 |
myPicker.cols ピッカー列には独自のメソッドとプロパティがあります。 |
| 7 |
myPicker.container Dom7インスタンスはHTMLコンテナに使用されます。 |
ピッカーメソッド
ピッカー変数には、次の表に示す便利なメソッドがあります-
| S.No | Methods & Description |
|---|---|
| 1 |
myPicker.setValue(values, duration) 新しいピッカー値を設定するために使用します。 値は配列にあり、各項目は各列の_value_を表します。 duration-ミリ秒単位の移行期間です。 |
| 2 |
myPicker.open() ピッカーを開くために使用します。 |
| 3 |
myPicker.close() ピッカーを閉じるために使用します。 |
| 4 |
myPicker.destroy() Pickerインスタンスを破棄し、すべてのイベントを削除するために使用します。 |
列のプロパティ
_myPicker.cols_配列の各列には、次の表に示す独自の便利なプロパティもあります-
//Get first column
var col = myPicker.cols[0];| S.No | Properties & Description |
|---|---|
| 1 |
col.container 列HTMLコンテナを使用してインスタンスを作成できます。 |
| 2 |
col.items 列項目のHTML要素を持つインスタンスを作成できます。 |
| 3 |
col.value 現在の列の値を選択するために使用されます。 |
| 4 |
col.displayValue 表示の現在の列値を選択するために使用されます。 |
| 5 |
col.activeIndex 現在のインデックス番号を指定します。これは、選択/アクティブなアイテムです。 |
列メソッド
便利な列メソッドは、次の表に記載されています-
| S.No | Methods & Description |
|---|---|
| 1 |
col.setValue(value, duration) 現在の列に新しい値を設定するために使用されます。 _value_は新しい値である必要があり、_duration_はミリ秒単位で指定される遷移期間です。 |
| 2 |
col.replaceValues(values, displayValues) 列の値とdisplayValuesを新しい値に置き換えるために使用されます。 |
PickerをインラインPickerとして初期化するたびに、HTMLコンテナからPickerのインスタンスにアクセスするために使用されます。
var myPicker = $$('.picker-inline')[0].f7Picker;次の表に指定されているピッカーにはさまざまなタイプがあります-
| S.No | Tabs Types & Description |
|---|---|
| 1 |
リストから任意の値を選択できる強力なコンポーネントです。 |
| 2 |
Two Values and 3D-Rotate Effect ピッカーでは、3D回転効果に使用できます。 |
| 3 |
指定された要素の値は互いに依存しています。 |
| 4 |
単一のページで1つ以上のピッカーを使用してカスタマイズできます。 |
| 5 |
インラインピッカーで値の数を選択できます。日付には_date、month、year_があり、timeには_hours、minutes、seconds._があります。 |
Framework7-カレンダー
説明
Calendarコンポーネントを使用すると、日付を簡単に処理でき、インラインコンポーネントまたはオーバーレイコンポーネントとして使用できます。 オーバーレイカレンダーは、タブレット上のポップオーバーに自動的に変換されます。
カレンダーは、JavaScriptを使用してのみ作成および初期化できます。 以下に示すように、関連するアプリのメソッドを使用する必要があります-
- * myApp.calendar（parameters）*-このメソッドは、初期化されたカレンダーインスタンスを返します。 _object_をパラメーターとして受け入れます。
次の表は、Framework7でのカレンダーの使用を示しています-
| S.No | Calendar Usage & Description |
|---|---|
| 1 |
Framework7は、カレンダーで使用されるパラメーターのリストを提供します。 |
| 2 |
カレンダーを初期化すると、初期化されたインスタンス変数を取得して、カレンダーのメソッドとプロパティを使用します。 |
| 3 |
カレンダーをインラインとして初期化すると、そのHTMLコンテナーからカレンダーインスタンスにアクセスできます。 |
Framework7-更新
説明
これは、ページコンテンツをプルして更新（リロード）するために使用される特別なコンポーネントです。
次のコードは、ページのコンテンツを更新する方法を示しています-
<div class = "page">
<!-- Page content should have additional "pull-to-refresh-content" class -->
<div class = "page-content pull-to-refresh-content" data-ptr-distance = "55">
<!-- Default pull to refresh layer-->
<div class = "pull-to-refresh-layer">
<div class = "preloader"></div>
<div class = "pull-to-refresh-arrow"></div>
</div>
<!-- usual content below -->
<div class = "list-block">
...
</div>
</div>次のクラスはリフレッシュで使用されます-
- page-content -追加の_pull-to-refresh-content_クラスがあり、プルによるリフレッシュを可能にするために必要です。
- pull-to-refresh-layer -これは、視覚要素を_pull to refresh_するために使用される隠しレイヤーであり、単なるプリローダーと矢印です。
- data-ptr-distance = "55" -これは追加の属性で、カスタムの「プルして更新」トリガー距離を設定できます。デフォルト値は44pxです。
プルして更新イベント
「更新するプル」では、いくつかのJavaScriptイベントがあります。次の表に示します-
| S.No | Event & Description | Target |
|---|---|---|
| 1 |
pullstart コンテンツを更新するためにプルを開始するたびにトリガーされます。 a |
プルしてコンテンツを更新します。 [source,prettyprint,notranslate] ---- <div class = "pull-to-refresh-content"> ---- |
| 2 |
pullmove コンテンツを更新するためにプルしているときにトリガーされます。 a |
プルしてコンテンツを更新します。 [source,prettyprint,notranslate] ---- <div class="pull-to-refresh-content"> ---- |
| 3 |
pullend プルを解除してコンテンツを更新するたびにトリガーされます。 a |
プルしてコンテンツを更新します。 [source,prettyprint,notranslate] ---- <div class="pull-to-refresh-content"> ---- |
| 4 |
refresh このイベントは、更新するプルが_ "refreshing" _状態になるとトリガーされます。 a |
プルしてコンテンツを更新します。 [source,prettyprint,notranslate] ---- <div class="pull-to-refresh-content"> ---- |
| 5 |
refreshdone 更新後にトリガーされ、初期状態に戻ります。 これは、_pullToRefreshDone_メソッドを呼び出した後に行われます。 a |
プルしてコンテンツを更新します。 [source,prettyprint,notranslate] ---- <div class="pull-to-refresh-content"> ---- |
Pull to Refreshで使用できるアプリのメソッドがあります。
S.No
アプリのメソッドと説明
1
- myApp.pullToRefreshDone（ptrContent）*
_pull-to-refresh_コンテンツをリセットするために使用されます。
2
- myApp.pullToRefreshTrigger（ptrContent）*
これは、指定された_pullでリフレッシュしてコンテンツをリフレッシュするトリガーに使用されます_。
3
- myApp.destroyPullToRefresh（ptrContent）*
destroy/disable pullを使用して、指定された_pullを更新してcontent_を更新します。
4
- myApp.initPullToRefresh（ptrContent） *
initialize/enable pullを使用してコンテンツを更新します。
_ptrContent_を使用して_HTMLElement_または_string_を使用して、コンテンツをプルして更新/トリガーまたは無効化/有効化します。
例
次の例は、ページコンテンツの更新を開始する更新コンポーネントの使用を示しています-
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>Pull To Refresh</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css">
</head>
<div class="views">
<div class="view view-main">
<div class="pages">
<div data-page="home" class="page navbar-fixed">
<div class="navbar">
<div class="navbar-inner">
<div class="left"> </div>
<div class="center">Pull To Refresh</div>
<div class="right"> </div>
</div>
</div>
<div class="page-content pull-to-refresh-content">
<div class="pull-to-refresh-layer">
<div class="preloader"></div>
<div class="pull-to-refresh-arrow"></div>
</div>
<div class="list-block media-list">
<ul>
<li class="item-content">
<div class="item-media"><img src="/framework7/images/apple.png" width="44"></div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">apple</div>
</div>
</div>
</li>
<li class="item-content">
<div class="item-media"><img src="/framework7/images/froots_img.jpg" width="44"></div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">strawberry</div>
</div>
</div>
</li>
<li class="item-content">
<div class="item-media"><img src="/framework7/images/mango.jpg" width="44"></div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">Mango</div>
</div>
</div>
</li>
</ul>
<div class="list-block-label">
<p>Just pull page down to let the magic happen.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
var myApp = new Framework7();
var $$ = Dom7;
//Dummy Content
var fruits = ['mango', 'orange', 'watermelon', 'banana'];
//Pull to refresh content
var ptrContent = $$('.pull-to-refresh-content');
//Add 'refresh' listener on it
ptrContent.on('refresh', function (e) {
//Emulate 2s loading
setTimeout(function () {
var picURL = 'images/Fruit.jpg' + Math.round(Math.random()* 100);
var fruit = fruits[Math.floor(Math.random() * fruits.length)];
var itemHTML = '<li class="item-content">' +
'<div class="item-media"><img src="/framework7/images/Fruit.jpg" width="44"/></div>' +
'<div class="item-inner">' +
'<div class="item-title-row">' +
'<div class="item-title">' + fruit + '</div>' +
'</div>' + '</div>' + '</li>';
//Prepend new list element
ptrContent.find('ul').prepend(itemHTML);
//When loading done, we need to reset it
myApp.pullToRefreshDone();
}, 2000);
});
</script>
</html>出力
上記のコードがどのように機能するかを確認するために次の手順を実行してみましょう-
- 上記のHTMLコードを pull_to_refreshl ファイルとしてサーバーのルートフォルダーに保存します。
- このHTMLファイルをhttp：//localhost/pull_to_refreshlとして開くと、出力は以下のように表示されます。
- ユーザーがプルダウンすると、ページがコンテンツで更新されます。
Framework7-無限スクロール
説明
Infinite Scrollを使用すると、ページが最下部に近づいたときに追加のコンテンツをロードして必要なアクションを実行できます。
次のHTMLレイアウトは、無限スクロールを示しています-
<div class = "page">
<div class = "page-content infinite-scroll" data-distance = "100">
...
</div>
</div>上記のレイアウトには、次のクラスが含まれています-
- page-content infinite-scroll -無限スクロールコンテナに使用されます。
- data-distance -この属性により、ページの下部からの距離（px）を設定して、無限スクロールイベントをトリガーできます。デフォルト値は* 50 * pxです。
ページの上部で無限スクロールを使用する場合は、_ "page-content" に "infinite-scroll-top" _クラスを追加する必要があります-
<div class = "page">
<div class = "page-content infinite-scroll infinite-scroll-top">
...
</div>
</div>無限スクロールイベント
無限-ページのスクロールが指定された最下部までの距離に達したときにトリガーするために使用されます。 _div class = "page-content infinite-scroll" _のターゲットになります。
無限スクロールコンテナで使用できる2つのアプリの方法があります-
指定されたHTMLコンテナに無限スクロールイベントリスナーを追加するには、次の方法を使用します-
myApp.attachInfiniteScroll(container)あなたは、次の方法を使用して、指定されたHTMLコンテナから無限スクロールイベントリスナーを削除することができます-
myApp.detachInfiniteScroll(container)_parameters_は、無限スクロールコンテナの_HTMLElement_または_string_として使用される必須オプションです。
例
次の例は、ページのスクロールが下部に近いときに追加のコンテンツをロードする無限スクロールを示しています-
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name = "apple-mobile-web-app-status-bar-style" content = "black"/>
<title>infinite_scroll</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css"/>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css"/>
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left"> </div>
<div class = "center sliding">Infinite Scroll</div>
<div class = "right"> </div>
</div>
</div>
<div class = "pages navbar-through">
<div data-page = "home" class = "page">
<div class = "page-content infinite-scroll">
<div class = "list-block">
<ul>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 1</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 2</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 3</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 4</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 5</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 6</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 7</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 8</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 9</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 10</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 11</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 12</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 13</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 14</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 15</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 16</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 17</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 18</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 19</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 20</div>
</div>
</li>
</ul>
</div>
<div class = "infinite-scroll-preloader">
<div class = "preloader"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<style>
.infinite-scroll-preloader {
margin-top:-20px;
margin-bottom:10px;
text-align:center;
}
.infinite-scroll-preloader .preloader {
width:34px;
height:34px;
}
</style>
<script>
var myApp = new Framework7();
var $$ = Dom7;
//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_scrolll ファイルとしてサーバーのルートフォルダーに保存します。
- このHTMLファイルをhttp：//localhost/infinite_scrolllとして開くと、出力は以下のように表示されます。
- この例では、ページのスクロールが指定された最下部までの距離に達したときに追加のコンテンツをロードできます。
Framework7-メッセージ
説明
メッセージはFramework7のコンポーネントであり、アプリケーションのコメントとメッセージングシステムを視覚化します。
メッセージのレイアウト
framework7には、次のメッセージレイアウト構造があります-
<div class = "page">
<div class = "page-content messages-content">
<div class = "messages">
<!-- Defines the date stamp -->
<div class = "messages-date">Monday, Apr 26 <span>10:30</span></div>
<!-- Displays the sent message and by default, it will be in green color on right side -->
<div class = "message message-sent">
<!-- Define the text with bubble type -->
<div class = "message-text">Hello</div>
</div>
<!-- Displays the another sent message -->
<div class = "message message-sent">
<!-- Define the text with bubble type -->
<div class = "message-text">How are you?</div>
</div>
<!-- Displays the received message and by default, it will be in grey color on left side -->
<div class = "message message-with-avatar message-received">
<!-- Provides sender name -->
<div class = "message-name">Smith</div>
<!-- Define the text with bubble type -->
<div class = "message-text">I am fine, thanks</div>
<!-- Defines the another date stamp -->
<div class = "messages-date">Tuesday, April 28 <span>11:16</span></div>
</div>
</div>
</div>レイアウトには、さまざまな領域に次のクラスが含まれています-
メッセージページのレイアウト
次の表は、メッセージページレイアウトのクラスと説明を示しています。
| S.No | Classes & Description |
|---|---|
| 1 |
messages-content これは、「ページコンテンツ」に追加され、メッセージラッパーに使用される必須の追加クラスです。 |
| 2 |
messages これは、メッセージバブルの必須要素です。 |
| 3 |
messages-date 日付スタンプコンテナを使用して、送受信されたメッセージの日付と時刻を表示します。 |
| 4 |
message 表示されるのは単一のメッセージです。 |
単一メッセージの内部部品
次の表に、簡単なメッセージの内部部分のクラスと説明を示します。
| S.No | Classes & Description |
|---|---|
| 1 |
message-name 送信者名を提供します。 |
| 2 |
message-text バブルタイプでテキストを定義します。 |
| 3 |
message-avatar 送信者のアバターを指定します。 |
| 4 |
message-label バブルの下のテキストラベルを指定します。 |
シングルメッセージコンテナの追加クラス
次の表は、単一のメッセージコンテナ記述の追加クラスを示しています。
| S.No | Classes & Description |
|---|---|
| 1 |
message-sent これは、メッセージがユーザーによって送信され、右側に緑色の背景色で表示されることを指定します。 |
| 2 |
message-received これは、メッセージがユーザーによって受信され、灰色の背景色で左側に留まっていることを示す単一のメッセージを表示するために使用されます。 |
| 3 |
message-pic これは、単一のメッセージで画像を表示するための追加のクラスです。 |
| 4 |
message-with-avatar これは、アバターで単一のメッセージ（受信または送信）を表示するための追加のクラスです。 |
| 5 |
message-with-tail 単一のメッセージ（受信または送信）にバブルテールを追加できます。 |
単一メッセージの追加の利用可能なクラス
次の表は、単一のメッセージで使用可能なクラスと説明を示しています。
| S.No | Classes & Description |
|---|---|
| 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要素または文字列です。
- パラメータ-メッセージのパラメータを持つオブジェクトを指定します。
メッセージパラメータ
次の表に、メッセージのパラメーターと説明を示します。
| S.No | Parameter & Description | Type | Default |
|---|---|---|---|
| 1 |
autoLayout 有効にすることで、各メッセージに必要なクラスを追加します。 |
boolean | true |
| 2 |
newMessagesFirst 有効にすると、メッセージを下部に表示する代わりに上部に表示できます。 |
boolean | false |
| 3 |
messages 各メッセージがメッセージパラメータを持つオブジェクトとして表されるメッセージの配列を表示します。 |
array | - |
| 4 |
messageTemplate 単一のメッセージテンプレートが表示されます。 |
string | - |
メッセージのプロパティ
次の表に、メッセージのプロパティと説明を示します。
| S.No | Property & Description |
|---|---|
| 1 |
myMessages.params 渡されたパラメーターをオブジェクトで初期化できます。 |
| 2 |
myMessages.container メッセージバーHTMLコンテナでDOM7要素を定義します。 |
メッセージメソッド
次の表に、メッセージのメソッドと説明を示します。
以下に説明付きのメッセージのメソッドのリストを示します。
| S.No | Method & Description |
|---|---|
| 1 |
myMessages.addMessage(messageParameters, method, animate); methodパラメーターを使用して、メッセージを先頭または末尾に追加できます。 次のパラメータがあります-
|
| 2 |
myMessages.appendMessage(messageParameters, animate); メッセージコンテナの最後にメッセージを追加します。 |
| 3 |
myMessages.prependMessage(messageParameters, animate); メッセージコンテナの先頭にメッセージを追加します。 |
| 4 |
myMessages.addMessages(messages, method, animate); 一度に複数のメッセージを追加できます。 それは次のパラメータを持っています-
|
| 5 |
myMessages.removeMessage(message); メッセージを削除するために使用されます。 それは次のパラメータを持っています-
|
| 6 |
myMessages.removeMessages(messages); 複数のメッセージを削除できます。 それは次のパラメータを持っています-
|
| 7 |
myMessages.scrollMessages(); 新しいメッセージの最初のパラメーターに応じて、メッセージを上から下へ、またはその逆にスクロールできます。 |
| 8 |
myMessages.layout(); 自動レイアウトはメッセージに適用できます。 |
| 9 |
myMessages.clean(); メッセージをきれいにするために使用されます。 |
| 10 |
myMessages.destroy(); メッセージを破棄するために使用されます。 |
単一メッセージパラメータ
次の表は、単一のメッセージのパラメーターと説明を示しています。
| S.No | Parameter & Description | Type | Default |
|---|---|---|---|
| 1 |
text メッセージテキストを定義します。これはHTML文字列にすることもできます。 |
string | - |
| 2 |
name 送信者名を指定します。 |
string | - |
| 3 |
avatar 送信者のアバターURL文字列を指定します。 |
string | - |
| 4 |
time 「9:45 AM」、「18:35」などのメッセージの時間文字列を指定します。 |
string | - |
| 5 |
type メッセージを送信できるか受信したかに関係なく、メッセージのタイプを提供します。 |
string | sent |
| 6 |
label メッセージのラベルを定義します。 |
string | - |
| 7 |
day 「日曜日」、「月曜日」、「昨日」などのメッセージの曜日文字列を提供します。 |
string | - |
HTMLを使用したメッセージの初期化
追加の_messages-init_クラスを_messages_に使用して、JavaScriptを使用せずにHTMLでメッセージを初期化し、以下のコードスニペットに示すように、_data-_属性を使用して必要なパラメーターを渡すことができます-
...
<div class = "page-content messages-content">
<!-- Initialize the messages using additional "messages-init" class-->
<div class = "messages messages-init" data-auto-layout = "true" data-new-messages-first = "false">
...
</div>
</div>
...例
次の例は、Framework7でのメッセージの使用を示しています-
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui"/>
<meta name = "apple-mobile-web-app-capable" content = "yes"/>
<meta name = "apple-mobile-web-app-status-bar-style" content = "black"/>
<title>Messages</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css"/>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css"/>
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "pages">
<div data-page = "home" class = "page navbar-fixed toolbar-fixed">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left"> </div>
<div class = "center">Messages</div>
<div class = "right"> </div>
</div>
</div>
<div class = "toolbar messagebar">
<div class = "toolbar-inner">
<textarea placeholder = "Message"></textarea><a href = "#" class = "link">Send</a>
</div>
</div>
<div class = "page-content messages-content">
<div class = "messages">
<div class = "messages-date">Friday, Apr 26 <span>10:30</span></div>
<div class = "message message-sent">
<div class = "message-text">Hello</div>
</div>
<div class = "message message-sent">
<div class = "message-text">Happy Birthday</div>
</div>
<div class = "message message-received">
<div class = "message-name">Smith</div>
<div class = "message-text">Thank you</div>
<div style = "background-image:url(/framework7/images/person.png)" class = "message-avatar"></div>
</div>
<div class = "messages-date">Saturday, Apr 27 <span>9:30</span></div>
<div class = "message message-sent">
<div class = "message-text">Good Morning...</div>
</div>
<div class = "message message-sent">
<div class = "message-text"><img src = "/framework7/images/gm.jpg"></div>
<div class = "message-label">Delivered</div>
</div>
<div class = "message message-received">
<div class = "message-name">Smith</div>
<div class = "message-text">Very Good Morning...</div>
<div style = "background-image:url(/framework7/images/person.png)" class = "message-avatar"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
var myApp = new Framework7();
var $$ = Dom7;
//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コードを messagesl ファイルとしてサーバーのルートフォルダーに保存します。
- このHTMLファイルをhttp：//localhost/messageslとして開くと、出力は以下のように表示されます。
- メッセージボックスにメッセージを入力して[送信]ボタンをクリックすると、メッセージが送信され、右側に緑色の背景色で表示されることが指定されます。
- 受信したメッセージは、送信者名とともに灰色の背景とともに左側に表示されます。
Framework7-メッセージバー
説明
Framework7は、アプリケーションのメッセージングシステムで動作する特別なサイズ変更可能なツールバーを提供します。
次のコードは、メッセージバーのレイアウトを示しています-
<div clas = "toolbar messagebar">
<div clas = "toolbar-inner">
<textarea placeholder = "Message"></textarea>
<a href = "#" clas = "link">Send</a>
</div>
</div>メッセージバーでは、「ページ」の内側は非常に重要であり、「メッセージコンテンツ」の右側にあります-
<div class = "page toolbar-fixed">
<!-- messagebar -->
<div class = "toolbar messagebar">
<div class = "toolbar-inner">
<textarea placeholder = "Message"></textarea>
<a href = "#" class = "link">Send</a>
</div>
</div>
<!-- messages-content -->
<div class = "page-content messages-content">
<div class = "messages">
... messages
</div>
</div>
</div>JavaScriptでメッセージバーを初期化するために次の方法を使用できます-
myApp.messagesbar(messagesbarContainer, parameters)メソッドには2つのオプションがあります-
- messagesbarContainer -メッセージバーコンテナHTML要素を含む必須のHTML要素または文字列です。
- パラメータ-メッセージバーのパラメータを持つオブジェクトを指定します。
たとえば-
var myMessagebar = app.messagebar('.messagebar', {
maxHeight: 200
});メッセージバーパラメータ
*maxHeight* -textareaの最大の高さを設定するために使用され、そのテキストの量に応じてサイズが変更されます。 パラメーターのタイプは_number_で、デフォルト値は_null_です。メッセージバーのプロパティ
次の表は、メッセージバーのプロパティを示しています-
| S.No | Properties & Description |
|---|---|
| 1 |
myMessagebar.params 渡された初期化パラメーターでオブジェクトを指定できます。 |
| 2 |
myMessagebar.container dom7要素は、messagebarコンテナのHTML要素で指定できます。 |
| 3 |
myMessagebar.textarea messagebar textarea HTML要素でdom7要素を指定できます。 |
メッセージバーのメソッド
次の表は、メッセージバーのメソッドを示しています-
| S.No | Methods & Description |
|---|---|
| 1 |
myMessagebar.value(newValue);
|
| 2 |
myMessagebar.clear(); テキストエリアをクリアし、サイズを更新/リセットします。 |
| 3 |
myMessagebar.destroy(); メッセージバーのインスタンスを破壊します。 |
HTMLでメッセージバーを初期化する
.messagebar_init_クラスを.messagebar_に追加することにより、JavaScriptメソッドとプロパティなしでHTMLを使用してメッセージバーを初期化でき、_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メッセージbar_プロパティを使用して実現されます。
var myMessagebar = $$('.messagebar')[0].f7Messagebar;
//Now you can use it
myMessagebar.value('Hello world');このリンクで説明されているメッセージバーの例を見ることができます：/framework7/framework7_messages [link]
Framework7-通知
説明
通知は、プッシュ（またはローカル）iOS通知のように表示される必要なメッセージを表示するために使用されます。
次の表は、通知の使用の詳細を示しています-
| S.No | Notifications usage & Description |
|---|---|
| 1 |
関連するアプリメソッドを使用して、JavaScriptで通知を追加または閉じることもできます。 |
| 2 |
Framework7通知は、JavaScriptを使用して追加されます。 |
| 3 |
Framework7では、iOSレイアウトでさまざまな種類の通知を使用できます。 |
| 4 |
Framework7通知は、マテリアルレイアウトでも使用できます。 |
Framework7-遅延ロード
説明
遅延読み込みは、特定のページでの画像読み込みプロセスを遅らせます。 遅延読み込みは、スクロールのパフォーマンスを向上させ、ページの読み込みを高速化し、トラフィックを節約します。
'_遅延読み込みの要素と画像は、適切に機能するためにスクロール可能な<div class = "page-content">内になければなりません。_
次の表は、遅延ロードの使用を示しています-
| S.No | Lazy load usage & Description |
|---|---|
| 1 |
遅延ロードは、画像、背景画像、およびフェードイン効果に適用できます。 |
| 2 |
ページを初期化した後、レイジーロードイメージを手動で追加した場合、レイジーロードは機能せず、メソッドを使用して初期化する必要があります。 |
以下に示すように、遅延イメージ/要素で_lazy_イベントを使用することにより、手動でイメージのロードをトリガーすることが可能です-
$$('img.lazy').trigger('lazy');
$$('div.lazy').trigger('lazy');例
次の例は、Framework7での遅延読み込みの使用を示しています-
<!DOCTYPE html>
<html class = "with-statusbar-overlay">
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui"/>
<meta name = "apple-mobile-web-app-capable" content = "yes"/>
<meta name = "apple-mobile-web-app-status-bar-style" content = "black"/>
<title>Lazy Load</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css"/>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css"/>
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "pages">
<div data-page = "home" class = "page navbar-fixed">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left"> </div>
<div class = "center">Lazy Load</div>
<div class = "right"> </div>
</div>
</div>
<div class = "page-content">
<div class = "content-block">
<div class = "content-block-inner">
<p> <img data-src = "/framework7/images/pic4.jpg"
width = "100%" class = "lazy lazy-fadeIn"></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur.</p>
<p> <img data-src = "/framework7/images/pic5.jpg"
width = "100%" class = "lazy lazy-fadeIn"></p>
<p>Sed ut perspiciatis unde omnis iste natus error sit
voluptatem accusantium doloremque laudantium, totam rem aperiam,
eaque ipsa quae ab illo inventore veritatis et quasi architecto
beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur
magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
<p> <img data-src = "/framework7/images/background.jpg"
width = "100%" class = "lazy lazy-fadeIn"></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur.</p>
<p> <img data-src = "/framework7/images/pic6.jpg"
width = "100%" class = "lazy lazy-fadeIn"></p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab
illo inventore veritatis et quasi architecto beatae vitae dicta sunt
explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut
odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt.</p>
<p> <img data-src = "/framework7/images/pic7.jpg"
width = "100%" class = "lazy lazy-fadeIn"></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur.</p>
<p> <img data-src = "/framework7/images/pic8.jpg"
width = "100%" class = "lazy lazy-fadeIn"></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Praesent laoreet nisl eget neque blandit lobortis. Sed sagittis risus
id vestibulum finibus. Cras vestibulum sem et massa hendrerit maximus.
Vestibulum suscipit tristique iaculis. Nam vitae risus non eros auctor
tincidunt quis vel nulla. Sed volutpat, libero ac blandit vehicula, est
sem gravida lectus, sed imperdiet sapien risus ut neque.</p>
<p><b>Using as background image:</b></p>
<div data-background = "/framework7/images/pic7.jpg"
style = "background: #aaa; height:60vw; background-size-cover"
class = "lazy lazy-fadeIn">
</div>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab
illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
sed quia consequuntur magni dolores eos qui ratione voluptatem sequi
nesciunt.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>var myApp = new Framework7();</script>
</body>
</html>出力
上記のコードがどのように機能するかを確認するために次の手順を実行してみましょう-
- 上記のHTMLコードを framework7_lazy_loadl ファイルとしてサーバーのルートフォルダーに保存します。
- このHTMLファイルをhttp：//localhost/framework7_lazy_loadlとして開くと、出力は以下のように表示されます。
- この例では、画像の遅延読み込みを指定します。画像をスクロールダウンすると、ページに画像が読み込まれます。
Framework7-カラーテーマ
説明
Framework7は、アプリケーションにさまざまなカラーテーマを提供します。
カラーテーマは、以下の表に指定されているように、アプリケーションでスムーズに動作するために使用されるさまざまな種類のテーマカラーを提供します-
| S.No | Theme Type & Description |
|---|---|
| 1 |
アプリケーションには、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つのテーマ_white_と_dark_を使用して、アプリケーションにデフォルトのレイアウトテーマを使用できます。 テーマは、_layout- [theme] _クラスを使用して親要素に適用できます。
例
...
</body>
<div class = "navbar layout-white">
...
</div>
<div class = "buttons-row layout-dark">
...
</div>ヘルパークラス
Framework7は追加のヘルパークラスを提供します。これは、以下にリストされているように、テーマの外で、またはテーマなしで使用できます-
- color- [color] -ブロックのテキスト色またはボタン、リンク、アイコンなどの色を変更するために使用できます。
- bg- [color] -ブロックまたは要素に事前定義された背景色を設定します。
- border- [color] -ブロックまたは要素に事前定義された境界線の色を設定します。
Framework7-ヘアライン
説明
ヘアラインは、境界線クラスを使用して画像の周囲に1pxの境界線を追加するクラスです。 1.xのリリースで、ヘアラインはCSSボーダーを使用する代わりに_：after_および_：before_疑似要素の動作を修正しました。
ヘアラインには、次のルールが含まれています-
- *：after *-この擬似要素は、_bottom_および_right_ヘアラインに使用されます。
- *：before *-この擬似要素は、_top_および_left_ヘアラインに使用されます。
次のコードスニペットは、_：after_要素の使用方法を示しています。
.navbar:after {
background-color: red;
}次のコードスニペットは、下部のヘアラインツールバーを削除します-
.navbar:after {
display:none;
}
.toolbar:before {
display:none;
}「ノーボーダー」クラス
ヘアラインは_no-border_クラスを使用して削除され、_Navbar、ツールバー、card_およびその要素でサポートされます。
次のコードはnavbarからヘアラインを削除するために使用されます-
<div class = "navbar no-border">
...
</div>Framework7-テンプレートの概要
説明
Template7は軽量のモバイルファーストJavaScriptエンジンです。これは、指定されたコンテキストを持つTemplate7テンプレートとしてAjaxおよび動的ページを表し、追加のスクリプトを必要としません。 Template7は、デフォルトの軽量テンプレートエンジンとしてFramework7に関連付けられており、アプリケーションでより高速に動作します。
パフォーマンス
文字列をJS関数にコンパイルするプロセスは、template7の最も遅いセグメントです。 したがって、テンプレートを複数回コンパイルする必要はなく、1回で十分です。
//Here initialize the app
var myApp = new Framework7();
//After initializing compile templates on app
var searchTemplate = $('script#search-template')l();
var compiledSearchTemplate = Template7.compile(searchTemplate);
var listTemplate = $('script#list-template')l();
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つの方法を使用してインストールできます-
- Template7 github repositoryからダウンロードできます。
- 次のコマンドを使用してBowerからインストールできます-
bower install template7Framework7-自動コンパイル
説明
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_はアプリの初期化されたインスタンスです。
あなたのインデックスファイルで次のテンプレートを使用することができます-
<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 _after_アプリの初期化でテンプレートにアクセスすることもできます-
var myApp = new Framework7 ({
//Tell Framework7 to compile templates on app init
precompileTemplates: true
});
//Render person template to HTML, its template is already compiled and accessible as
//Template7.templates.personTemplate
var personHTML = Template7.templates.personTemplate ({
name: 'King Amit',
age: 27,
position: 'Developer',
company: 'AngularJs'
});
//Compile car template to HTML, its template is already compiled and accessible as
//Template7.templates.carTemplate
var carHTML = Template7.templates.carTemplate({
vendor: 'Honda',
model: 'city',
power: 1200hp,
speed: 300
});Framework7-Template7ページ
説明
Template7は、http：//handlebarsjs.com/[handlebars.js]のような構文を持つモバイルファーストのJavaScriptテンプレートエンジンです。 これは、Framework7の超軽量で非常に高速なデフォルトのテンプレートエンジンです。
まず、すべてのAjaxおよび動的ページをTemplate7テンプレートとしてレンダリングするアプリの初期化で次のパラメーターを渡す必要があります-
var myApp = new Framework7 ({
template7Pages: true//enable Template7 rendering for Ajax and Dynamic pages
});| S.No | Template7 Pages Usage & Description |
|---|---|
| 1 |
アプリの初期化時に送信される_template7Data_パラメーターですべてのページデータを指定することにより、特定のページに必要なデータ/コンテキストを渡すことができます。 |
| 2 |
Framework7では、カスタムコンテキストを任意の動的ページまたは読み込まれたAjaxに渡すことができます。 |
| 3 |
テンプレートを動的ページとしてオンザフライでレンダリングおよびロードできます。 |
| 4 |
AjaxページのレンダリングにTemplate7を使用している場合、そのコンテキストは常に特別なプロパティ_url_query_で拡張されます。 |
例
次の例では、ユーザーの詳細、いいね！などのユーザー情報を表示するリンクを提供します。 それらのリンクをクリックすると。
インデックス
<!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/likesl" 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:likesl': {
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
});いいね
<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コードを indexl ファイルとしてサーバーのルートフォルダーに保存します。
- このHTMLファイルをhttp：//localhost/indexlとして開くと、出力は以下のように表示されます。
- この例では、ユーザーの詳細などのユーザー情報を表示するリンクを提供します。ユーザーがそれらのリンクをクリックすると、ユーザーのお気に入りが表示されます。
Framework7-アクティブ状態
説明
リンクとボタンをタップすると、それらが強調表示されます。 これは、Framework7の_active state_によって行われます。
- Webアプリではなく、ネイティブアプリのように動作します。
- _Fast clicks_ライブラリが組み込まれているため、有効にする必要があります。
- _active-state_クラスは、CSS _：active_セレクターと同じです。
- watch-active-state_クラスを <html> _要素に追加することにより、アクティブ状態が有効になります。
次のコードは、CSSスタイルのアクティブ状態に使用されます-
/*Usual state*/
.my-button {
color: red;
}
/*Active/tapped state*/
.my-button.active-state {
color: blue;
}次のコードは、アクティブ状態または高速クリックが無効になっている場合のフォールバック互換性を示しています-
/*Usual state*/
.my-button {
color: red;
}
/*Active/tapped state*/
.my-button.active-state {
color: blue;
}
/*Fallback, when active state is disabled*/
html:not(.watch-active-state) .my-button:active {
color: blue;
}Framework7-タップホールドイベント
説明
タップホールドイベントは、持続してタッチイベントを完了した後にトリガー（有効化）するために使用されるため、「タップホールドイベント」と呼ばれます。 _Tab Hold_は、組み込みの*高速クリック*ライブラリです。
次のパラメータは、デフォルトで無効または有効にし、構成するために使用されます-
| S.No | Parameter & Description | Type | Default |
|---|---|---|---|
| 1 |
tapHold trueに設定されているときにタップホールドイベントを有効にするには。 |
boolean | false |
| 2 |
tapHoldDelay ターゲット要素でtapholdイベントをトリガーする前にタップを保持する期間を指定します。 |
number | 750 |
| 3 |
tapHoldPreventClicks タップホールドイベントは、イベントをクリックした後に発生しません。 |
boolean | true |
次のコードは、タップホールドイベントを有効にするために使用されます-
var myApp = new Framework7 ({
tapHold: true//enable tap hold events
});
var $$ = Dom7;
$$('.some-link').on('taphold', function () {
myApp.alert('Tap hold fired!');
});Framework7-タッチリップル
説明
タッチリップルは、Framework7マテリアルテーマでのみサポートされる効果です。 デフォルトでは、マテリアルテーマで有効になっていますが、_materialRipple：false_パラメーターを使用して無効にすることができます。
リップル要素
あなたは次のようないくつかのCSSセレクタに一致するようにリップル要素を有効にすることができます-
- 波紋
- リンク
- a.item-link
- 。ボタン
- .tab-link
- .label-radio
- .label-checkboxなど
これらは、_materialRippleElements_パラメーターで指定されます。 _touch_リップルを有効にするか、要素のセレクターを_materialRippleElements_パラメーターに追加してリップル効果を利用するか、単に_ripple_クラスを使用する必要があります。
リップル波色
_ripple- [color] _クラスを要素に追加することにより、要素の波紋の色を変更できます。
例えば-
<a href = "#" class = "button ripple-orange">Ripple Button</a>または、以下に示すようにCSSを使用してリップル波の色を定義することができます-
.button .ripple-wave {
background-color: #FFFF00;
}リップル要素を無効にする
_no-ripple_クラスをそれらの要素に追加することにより、特定の要素のリップルを無効にできます。 例えば-
<a href = "#" class = "button no-ripple">Ripple Button</a>