Framework7-quick-guide

提供：Dev Guides
移動先:案内、検索

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 framework7

Framework7のインストールが正常に完了したら、アプリケーションで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 server

CDNから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

Static Layout

静的レイアウトは最もよく使用されるレイアウトタイプで、スクロール可能なページコンテンツであるnavbarとtoolbarが含まれ、各ページには独自のnavbarとtoolbarが含まれます。

2

Fixed Layout

固定レイアウトには、画面上に表示でき、ページ上でスクロールできない独自のナビゲーションバーとツールバーが含まれます。

3

Through Layout

このレイアウトでは、単一ビュー内のすべてのページのnavbarとツールバーが固定されて表示されます。

4

Mixed Layout

単一のビューにさまざまなタイプのレイアウトを混在させることができます。

ナビゲーションバー/ツールバーなし

navbarとtoolbarを使用したくない場合、ページ/ページ/ビューに適切なクラス（navbar-fixed _、 navbar-through 、 toolbar-fixed 、 toolbar-through_）を含めないでください。

Framework7-Navbars

説明

この章では、_navbar_について学習しましょう。 通常、ページのタイトルとナビゲーション要素を含む画面の上部に配置されます。

Navbarは3つの部分で構成されており、それぞれにHTMLコンテンツが含まれている場合がありますが、以下に示す方法でこれらを使用することをお勧めします-

  • 左-_link_アイコンまたは単一のテキストリンクを戻すように設計されています。
  • センター-ページまたはタブのリンクのタイトルを表示するために使用されます。
  • 右-この部分は_left_部分に似ています。

次の表は、_navbar_の使用の詳細を示しています-

S.No Navbar Types & Description
1

Basic navbar

navbar _、 navbar-inner 、 left 、 center_、および_right_クラスを使用して、基本的なnavbarを作成できます。

2

Navbar with links

ナビゲーションバーの_left_および_right_部分でリンクを使用するには、クラス_link_で_ <a> _タグを追加するだけです。

3

Multiple links

複数のリンクを使用するには、選択した部分に_ <a class = "link"> _をいくつか追加するだけです。

4

Links with text and icons

アイコンのクラスを追加し、リンクテキストを_ <span> _要素でラップすることにより、リンクにアイコンとテキストを提供できます。

5

Links with only icons

_icon-only_クラスをリンクに追加することにより、アイコンのみでNavbarリンクを提供できます。

6

Related app and view methods

_View_の初期化時に、framework7ではnavbarで利用可能なメソッドを使用できます。

7

Hide navbar automatically

navbarは、navbarが必要ない一部のAjaxロードページに対して自動的に非表示/表示できます。

Framework7-ツールバー

説明

ツールバーを使用すると、画面下部のナビゲーション要素を使用して他のページに簡単にアクセスできます。

あなたは、表に指定されているように2つの方法でツールバーを使用することができます-

S.No Toolbar types & Description
1

Hide Toolbar

  • no-toolbar* クラスを使用してページをロードすることにより、ページをロードするときにツールバーを自動的に非表示にできます。
2

Bottom Toolbar

  • toolbar-bottom* クラスを使用して、ページの下部にツールバーを配置します。

ツールバーのメソッド

次の利用可能な方法は、ツールバーで使用することができます-

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 and Close Panels

パネルとエフェクトを追加したら、パネルを_open_および_close_する機能を追加する必要があります。

2

Panel Events

ユーザーがパネルと対話する方法を検出するには、パネルイベントを使用できます。

3

Open Panels With Swipe

Framework7は、_swipeジェスチャー_でパネルを開く機能を提供します。

4

Panel is Opened?

  • with-panel [position]-[effect]* ルールを使用して、パネルが開いているかどうかを判断できます。

Framework7-コンテンツブロック

説明

コンテンツブロックを使用して、異なる形式のコンテンツを追加できます。

例

次の例は、Framework7でコンテンツブロックを使用する方法を示しています- 

<!DOCTYPE html>
<html>

   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1,
         maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui"/>
      <meta name = "apple-mobile-web-app-capable" content = "yes"/>
      <meta name = "apple-mobile-web-app-status-bar-style" content = "black"/>
      <title>Content Block</title>
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css"/>
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css"/>
   </head>

   <body>
      <div class = "views">
         <div class = "view view-main">
            <div class = "pages">
               <div data-page = "home" class = "page navbar-fixed">

                  <div class = "navbar">
                     <div class = "navbar-inner">
                        <div class = "left"> </div>
                        <div class = "center">Content Block</div>
                        <div class = "right"> </div>
                     </div>
                  </div>

                  <div class = "page-content">
                     <p>This is out side of content block!!!</p>

                     <div class = "content-block">
                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
                        doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis
                        et quasi architecto beatae vitae dicta sunt explicabo.</p>
                     </div>

                     <div class = "content-block">
                        <div class = "content-block-inner">This is another text block wrapped with "content-block-inner"</div>
                     </div>

                     <div class = "content-block-title">Content Block Title</div>

                     <div class = "content-block">
                        <p>Praesent nec imperdiet diam. Maecenas vel lectus porttitor, consectetur
                        magna nec, viverra sem. Aliquam sed risus dolor. Morbi tincidunt ut libero id sodales.
                        Integer blandit varius nisi quis consectetur.</p>
                     </div>

                     <div class = "content-block-title">This is another long content block title</div>

                     <div class = "content-block">
                        <div class = "content-block-inner">
                           <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
                           accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo
                           inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
                        </div>
                     </div>

                     <div class = "content-block-title">Content Block Inset</div>

                     <div class = "content-block inset">
                        <div class = "content-block-inner">
                           <p>Donec et nulla auctor massa pharetra adipiscing ut sit amet sem.
                           Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis,
                           vulputate turpis vel, sagittis felis. </p>
                        </div>
                     </div>

                     <div class = "content-block-title">Content Block Tablet Inset</div>

                     <div class = "content-block tablet-inset">
                        <div class = "content-block-inner">
                           <p>Donec et nulla auctor massa pharetra adipiscing ut sit amet sem.
                           Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis,
                           vulputate turpis vel, sagittis felis. </p>
                        </div>
                     </div>

                  </div>
               </div>
            </div>
         </div>
      </div>

      <script type = "text/javascript"
         src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>

      <script>
         var myApp = new Framework7();
         var mainView = myApp.addView('.view-main');
      </script>
   </body>

</html>

出力

上記のコードがどのように機能するかを確認するために次の手順を実行してみましょう-

  • 上記のHTMLコードを content_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

Modal

モーダルは、親ウィンドウを離れることなく、別々のソースからコンテンツを表示する小さなウィンドウです。

2

Popup

ポップアップは、ユーザーが要素をクリックしたときにコンテンツを表示するポップアップボックスです。

3

Popover

一時的なコンテンツのプレゼンテーションを管理するには、ポップオーバーコンポーネントを使用できます。

4

Action Sheet

_Action Sheet_は、特定のタスクを処理する方法の可能性のセットをユーザーに提示するために使用されます。

5

Login Screen

オーバーレイログイン画面は、ページまたはポップアップで、またはスタンドアロンオーバーレイとして使用できるログイン画面形式を表示するために使用されます。

6

Picker Modal

ピッカーモーダルは、カレンダーピッカーに似たカスタムコンテンツを選択するために使用されます。

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.

  • container -プログレスバー要素のコンテナを定義する文字列またはHTML要素です。
  • progress -整数形式で表され、タスクの進行状況を定義します。
  • 速度-整数形式で表され、タスクの進行時間を指定します。
2 myApp.hideProgressbar (contain er)

It hides the progress bar.

  • container -プログレスバー要素のコンテナを定義する文字列またはHTML要素です。
3 myApp.showProgressbar (contai ner, progress, color)

It displays the progress bar.

  • container -プログレスバー要素のコンテナを定義する文字列またはHTML要素です。
  • progress -整数形式で表され、タスクの進行状況を定義します。
  • 速度-整数形式で表され、タスクの進行時間を指定します。

例

次の例は、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&gt

                  <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

_list-block_クラスを使用するのは、リストビュー要素ラッパーです。

2

Link Elements

リストビューの要素は、他のページやデータへの_リンク_として使用できます。

3

List Divider

これは、リスト項目とタイトルを視覚的に分割するタイトルを持つリスト要素です。

4

Grouped Lists

単一のリストブロック内でリストビュー要素をラップできます。

5

Inset List Block

_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

Card HTML Layout

基本的なカードHTMLレイアウトでは、カードクラスを使用してアイテムを配置します。

2

List View With Cards

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

iOS Theme Buttons

Framework7は、適切なクラスを適用することで使用できる多くのiOSテーマボタンを提供します。

2

Material Theme Buttons

マテリアルテーマには、適切なクラスを使用して、アプリケーションで使用する多くのボタンが用意されています。

Framework7-アクションボタン

説明

Framework7は、昇格されたアクションに_フローティングアクションボタン_を提供します。 これらは、UI上に浮いた丸いアイコンとして表示されます。 morphing _、 launching_、および_アンカーポイントの転送_を含むモーションビヘイビアがあります。

'_フローティングアクションボタンは、マテリアルテーマでのみサポートされています。_

次の表は、Framework7で使用されるアクションボタンの種類を示しています-

S.No Types & Description
1

Floating Action Button Layout

とても簡単です。 _page_または_view_の子として配置する必要があります。

2

Morph To Popover

フローティングアクションボタンをクリックしてポップオーバーを開きたい場合は、_floating-button-to-popover_クラスを使用できます。

3

Speed Dial

_speed dial_を使用して、フローティングアクションボタンをクリックすると、関連するアクションを呼び出すことができます。

Framework7-フォーム

説明

フォームはユーザーとのやり取りに使用され、テキストフィールド、チェックボックス、ラジオボタンなどを使用してWebユーザーからデータを収集します。

Framework7は、以下の表に指定されているように、アプリケーションでスムーズに動作するためのさまざまなタイプのフォーム要素を提供します-

S.No Overlay Type & Description
1

Form Elements

フォーム要素は、見栄えの良いフォームレイアウトを作成するために使用されます。

2

Checkboxes and Radios

list view extentionを使用すると、Framework7でチェックボックスとラジオ入力を作成できます。

3

Smart Select

スマート選択は、チェックボックスとラジオ入力のグループを使用して、フォーム選択を動的ページに変更する簡単な方法です。

4

Disabled Elements

_disabled_クラスを要素に適用するか、フォーム要素の_disabled_属性を追加することにより、要素を無効にできます。

5

Form Data

Framework7には、フォームの操作を簡単にする便利なメソッドがほとんどありません。

6

Form Storage

フォームストレージを使用すると、Ajaxで読み込まれたページにフォームデータを自動的に保存および解析できます。

7

Ajax Form Submit

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

Inline Tabs

インラインタブは、インラインでグループ化されたセットで、すばやく切り替えることができます。

2

Switch Tabs From Navbar

ナビゲーションバーにタブを配置して、タブを切り替えることができます。

3

Switch Views From Tab Bar

単一のタブを使用して、独自のナビゲーションとレイアウトでビューを切り替えることができます。

4

Animated Tabs

単純なトランジション（アニメーション）を使用してタブを切り替えることができます。

5

Swipeable Tabs

タブに_tabs-swipeable-wrap_クラスを使用すると、単純な遷移でスワイプ可能なタブを作成できます。

6

Tabs JavaScript Events

JavaScriptイベントは、タブのJavaScriptコードで作業しているときに使用できます。

7

Show Tab Using JavaScript

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

Vertical Swiper

これはデフォルトのスワイパーとしても機能しますが、垂直にスワイプします。

3

With Space Between Slides

このスワイパーは、2つのスライド間にスペースを与えるために使用されます。

4

Multiple Swipers

このスワイパーは、1ページで複数のスワイパーを使用します。

5

Nested Swipers

これは、垂直スライドと水平スライドの組み合わせです。

6

Custom Controls

カスタムコントロールがスライドを選択またはスワイプするために使用されます。

7

Lazy Loading

ロードに時間がかかるマルチメディアファイルに使用できます。

Framework7-フォトブラウザー

説明

フォトブラウザーは、画像グループを表示するためのiOSフォトブラウザーコンポーネントに似ており、ズームやパンが可能です。 画像間をスライドするために、写真ブラウザはlink：/framework7/framework7_swiper_slider [Swiper Slider]を使用します。

次の表は、framework7で使用される写真ブラウザの種類を示しています-

S.No Photo browser types & Description
1

Create Photo Browser Instance

写真ブラウザは、JavaScriptのみを使用して作成および初期化できます。

2

Photo Browser Parameters

Framework7は、フォトブラウザーで使用されるパラメーターのリストを提供します。

3

Photo Browser Methods & Properties

フォトブラウザーを初期化すると、初期化されたインスタンス変数を取得して、フォトブラウザーのメソッドとプロパティを使用します。

4

Photos Array

写真ブラウザーの初期化中に、_photos_パラメーターで写真/ビデオを含む配列を渡す必要があります。

5

Photo Browser Templates

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 -

デフォルトのテンプレート

以下は、上記で定義されたテンプレートパラメータのデフォルトのテンプレートコードスニペットです-

navbarTemplate

<div class = "navbar {{#if navbarTheme}}theme-{{navbarTheme}}{{/if}}">
   <div class = "navbar-inner">
      <div class = "left sliding">
         {{#if material}}
            <a href = "#" class = "link {{#if inPopup}}close-popup{{else}}back{{/if}} icon-only">
               <i class = "icon icon-back"></i>
            </a>
         {{else}}
            <a href = "#" class = "link {{#if inPopup}}close-popup{{else}}back{{/if}}">
               <i class = "icon icon-back"></i>
               {{#if inPopup}}
                  <span>{{popupCloseText}}</span>
               {{else}}
                  <span>{{backText}}</span>
               {{/if}}
            </a>
         {{/if}}
      </div>

      <div class = "center sliding">{{pageTitle}}</div>
      {{#if preloader}}
         <div class = "right">
            <div class = "autocomplete-preloader preloader
               {{#if preloaderColor}}
                  preloader-{{preloaderColor}}
               {{/if}}">
            </div>
         </div>
      {{/if}}
   </div>
</div>

itemTemplate

<li>
   <label class = "label-{{inputType}} item-content">
      <input type = "{{inputType}}" name = "{{inputName}}" value = "{{value}}" {{#if selected}}checked{{/if}}>
      {{#if material}}
         <div class = "item-media">
            <i class = "icon icon-form-{{inputType}}"></i>
         </div>

         <div class = "item-inner">
            <div class = "item-title">{{text}}</div>
         </div>
      {{else}}
         {{#if checkbox}}
            <div class = "item-media">
               <i class = "icon icon-form-checkbox"></i>
            </div>
         {{/if}}

         <div class = "item-inner">
            <div class = "item-title">{{text}}</div>
         </div>
      {{/if}}
   </label>
</li>

dropdownTemplate

<div class = "autocomplete-dropdown">
   <div class = "autocomplete-dropdown-inner">
      <div class = "list-block">
         <ul></ul>
      </div>
   </div>

   {{#if preloader}}
      <div class = "autocomplete-preloader preloader
         {{#if preloaderColor}}
            preloader-{{preloaderColor}}
         {{/if}}">
         {{#if material}}
            {{materialPreloaderHtml}}
         {{/if}}
      </div>
   {{/if}}
</div>

dropdownItemTemplate

<li>
   <label class = "{{#unless placeholder}}label-radio{{/unless}} item-content" data-value = "{{value}}">
      <div class = "item-inner">
         <div class = "item-title">{{text}}</div>
      </div>
   </label>
</li>

dropdownPlaceholderTemplate

<li class = "autocomplete-dropdown-placeholder">
   <div class = "item-content">
      <div class = "item-inner">
         <div class = "item-title">{{text}}</div>
      </div>
   </label>
</li>

オートコンプリートメソッド

次の表は、Framework7で利用可能なオートコンプリートメソッドを示しています-

S.No

方法と説明

1 

*myAutocomplete.params*

オブジェクトとともに渡される初期化パラメーターを定義します。

2 

*myAutocomplete.value*

選択した値で配列を定義します。

3 

*myAutocomplete.opened*

trueに設定されている場合、オートコンプリートが開きます。

4 

*myAutocomplete.dropdown*

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文字列です- 

<div class = "toolbar">
  <div class = "toolbar-inner">
    <div class = "left"></div>
    <div class = "right">
      <a href = "#" class = "link close-picker">
         {{closeText}}
      </a>
    </div>
  </div>
</div>
 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
  • onChange*

その時点で列の値が変更されるたびに、コールバック関数が実行されます。 _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

Picker With Single Value

リストから任意の値を選択できる強力なコンポーネントです。

2

Two Values and 3D-Rotate Effect

ピッカーでは、3D回転効果に使用できます。

3

Dependent Values

指定された要素の値は互いに依存しています。

4

Custom Toolbar

単一のページで1つ以上のピッカーを使用してカスタマイズできます。

5

Inline Picker/Date-time

インラインピッカーで値の数を選択できます。日付には_date、month、year_があり、timeには_hours、minutes、seconds._があります。

Framework7-カレンダー

説明

Calendarコンポーネントを使用すると、日付を簡単に処理でき、インラインコンポーネントまたはオーバーレイコンポーネントとして使用できます。 オーバーレイカレンダーは、タブレット上のポップオーバーに自動的に変換されます。

カレンダーは、JavaScriptを使用してのみ作成および初期化できます。 以下に示すように、関連するアプリのメソッドを使用する必要があります-

  • * myApp.calendar（parameters）*-このメソッドは、初期化されたカレンダーインスタンスを返します。 _object_をパラメーターとして受け入れます。

次の表は、Framework7でのカレンダーの使用を示しています-

S.No Calendar Usage & Description
1

Calendar Parameters

Framework7は、カレンダーで使用されるパラメーターのリストを提供します。

2

Calendar Methods & Properties

カレンダーを初期化すると、初期化されたインスタンス変数を取得して、カレンダーのメソッドとプロパティを使用します。

3

Access to Calendar’s Instance

カレンダーをインラインとして初期化すると、その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パラメーターを使用して、メッセージを先頭または末尾に追加できます。

次のパラメータがあります-

  • messageParameters -追加するメッセージパラメータを提供します。
  • method -メッセージコンテナの先頭または末尾にメッセージを追加する文字列型です。
  • animate -これはブール型であり、falseに設定することにより、トランジションまたはスクロールアニメーションなしでメッセージを追加します。 デフォルトでは、trueになります。
2

myMessages.appendMessage(messageParameters, animate);

メッセージコンテナの最後にメッセージを追加します。

3

myMessages.prependMessage(messageParameters, animate);

メッセージコンテナの先頭にメッセージを追加します。

4

myMessages.addMessages(messages, method, animate);

一度に複数のメッセージを追加できます。

それは次のパラメータを持っています-

  • messages -追加するメッセージの配列を提供します。これは、メッセージパラメーターを持つオブジェクトとして表す必要があります。
5

myMessages.removeMessage(message);

メッセージを削除するために使用されます。

それは次のパラメータを持っています-

  • message -メッセージ要素を削除するのに必要なHTML要素または文字列です。
6

myMessages.removeMessages(messages);

複数のメッセージを削除できます。

それは次のパラメータを持っています-

  • messages -メッセージを削除するHTML要素または文字列を含む必須配列です。
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);

  • 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

Notifications JavaScript API

関連するアプリメソッドを使用して、JavaScriptで通知を追加または閉じることもできます。

2

Notifications Layout

Framework7通知は、JavaScriptを使用して追加されます。

3

Example iOS

Framework7では、iOSレイアウトでさまざまな種類の通知を使用できます。

4

Example Material

Framework7通知は、マテリアルレイアウトでも使用できます。

Framework7-遅延ロー​​ド

説明

遅延読み込みは、特定のページでの画像読み込みプロセスを遅らせます。 遅延読み込みは、スクロールのパフォーマンスを向上させ、ページの読み込みを高速化し、トラフィックを節約します。

'_遅延読み込みの要素と画像は、適切に機能するためにスクロール可能な<div class = "page-content">内になければなりません。_

次の表は、遅延ロードの使用を示しています-

S.No Lazy load usage & Description
1

Usage

遅延ロードは、画像、背景画像、およびフェードイン効果に適用できます。

2

Init Lazy Load Manually

ページを初期化した後、レイジーロードイメージを手動で追加した場合、レイジーロードは機能せず、メソッドを使用して初期化する必要があります。

以下に示すように、遅延イメージ/要素で_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

iOS Theme Colors

アプリケーションには、10種類のデフォルトのiOSカラーテーマを使用できます。

2

Material Theme Colors

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 template7

Framework7-自動コンパイル

説明

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

Templates/Pages Data

アプリの初期化時に送信される_template7Data_パラメーターですべてのページデータを指定することにより、特定のページに必要なデータ/コンテキストを渡すことができます。

2

Pass Custom Context

Framework7では、カスタムコンテキストを任意の動的ページまたは読み込まれたAjaxに渡すことができます。

3

Load Templates Directly

テンプレートを動的ページとしてオンザフライでレンダリングおよびロードできます。

4

URL Query

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>
「https://www.finddevguides.com/index.php?title=Framework7-quick-guide&oldid=78932」から取得
Powered by MediaWiki