Framework7 - Kurzanleitung

Framework7 ist ein kostenloses Open Source Framework für mobiles HTML. Es wird zur Entwicklung hybrider mobiler Apps oder Web-Apps für iOS- und Android-Geräte verwendet.

Framework7 wurde im Jahr 2014 eingeführt. Die neueste Version 1.4.2 wurde im Februar 2016 unter der Lizenz des MIT veröffentlicht.

Warum Framework7 verwenden?

  • Es ist einfacher, Apps für iOS und Android zu entwickeln.
  • Die Lernkurve für Framework7 ist sehr einfach.
  • Es hat viele vorgestaltete Widgets / Komponenten.
  • Es verfügt über integrierte Hilfsbibliotheken.

Eigenschaften

  • Framework7 ist ein Open Source und kostenlos zu verwendendes Framework.

  • Framework7 verfügt über eine einfache und vertraute jQuery-Syntax, mit der Sie unverzüglich loslegen können.

  • Um die Klickverzögerung für Touch-Benutzeroberflächen zu steuern, verfügt Framework7 über eine integrierte FastClick- Bibliothek.

  • Framework7 verfügt über ein integriertes Rastersystem-Layout, mit dem Sie Ihre Elemente reaktionsschnell anordnen können.

  • Framework7 lädt dynamisch Seiten aus Vorlagen über die flexible Router-API .

Vorteile

  • Framework7 ist auch bei der DOM-Manipulation nicht von einer Bibliothek eines Drittanbieters abhängig. Stattdessen verfügt es über ein eigenes benutzerdefiniertes DOM7.

  • Framework7 kann auch mit Angular- und React- Frameworks verwendet werden.

  • Sie können mit der Erstellung von Apps beginnen, sobald Sie HTML, CSS und einige grundlegende JavaScript-Kenntnisse kennen.

  • Es unterstützt eine schnellere Entwicklung über Bower .

  • Es ist einfach, Apps für iOS und Android zu entwickeln, ohne sie zu lernen.

Nachteile

  • Framework7 unterstützt nur Plattformen wie iOS und Android.

  • Die Online-Community-Unterstützung für Framework7-Framework ist im Vergleich zu iOS und Andriod geringer.

In diesem Kapitel wird erläutert, wie Sie Framework7 installieren und einrichten.

Sie können das Framework7 auf zwei Arten herunterladen:

Download aus dem Framework7 Github-Repository

Sie können das Framework7 mit Bower wie unten gezeigt installieren -

bower install framework7

Nach erfolgreicher Installation von Framework7 müssen Sie die folgenden Schritte ausführen, um Framework7 in Ihrer Anwendung zu verwenden.

Step 1 - Sie müssen installieren gulp-cli Verwenden Sie den folgenden Befehl, um Entwicklungs- und Dist-Versionen von Framework7 zu erstellen.

npm install gulp-cli

Das CLI steht für Command Line Utility für Gulp.

Step 2 - Der Gulp muss global mit dem folgenden Befehl installiert werden.

npm install --global gulp

Step 3- Installieren Sie als Nächstes den NodeJS-Paketmanager, der die Knotenprogramme installiert, mit denen Abhängigkeiten einfacher angegeben und verknüpft werden können. Der folgende Befehl wird verwendet, um die npm zu installieren.

npm install

Step 4 - Die Entwicklungsversion von Framework7 kann mit dem folgenden Befehl erstellt werden.

npm build

Step 5- Sobald Sie die Entwicklungsversion von Framework7 erstellt haben, starten Sie die App mit dem folgenden Befehl aus dist / folder.

npm dist

Step 6 - Behalten Sie Ihren App-Ordner auf dem Server und führen Sie den folgenden Befehl für die Navigation zwischen den Seiten Ihrer App aus.

gulp server

Laden Sie die Framework7-Bibliothek von CDNs herunter

Ein CDN- oder Content Delivery-Netzwerk ist ein Netzwerk von Servern, die Dateien für Benutzer bereitstellen. Wenn Sie einen CDN-Link auf Ihrer Webseite verwenden, wird die Verantwortung für das Hosten von Dateien von Ihren eigenen Servern auf eine Reihe externer übertragen. Dies bietet auch den Vorteil, dass ein Besucher Ihrer Webseite, der bereits eine Kopie von Framework7 von demselben CDN heruntergeladen hat, diese nicht erneut herunterladen muss. Sie können die folgenden CDN-Dateien in das HTML-Dokument aufnehmen.

Die folgenden CDNs werden in einem verwendet iOS App layout - -

<link rel = "stylesheet" 
   href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />

Es wird verwendet, um die Framework7 iOS CSS-Bibliothek in Ihre Anwendung aufzunehmen.

<link rel = "stylesheet" 
   href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />

Es wird verwendet, um Framework7 iOS-bezogene Farbstile in Ihre Anwendung aufzunehmen.

Die folgenden CDNs werden in verwendet Android/Material App Layout - -

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

Es wird verwendet, um die Framework7 JS-Bibliothek in Ihre Anwendung aufzunehmen.

<script src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.min.css"></script>

Es wird verwendet, um das Framework7-Material-Styling in Ihre Anwendung aufzunehmen.

In diesem Tutorial verwenden wir die CDN-Versionen der Bibliothek. Wir verwenden AMPPS-Server (AMPPS ist ein WAMP-, MAMP- und LAMP-Stapel von Apache-, MySQL-, MongoDB-, PHP-, Perl- und Python-Servern), um alle unsere Beispiele auszuführen.

Beispiel

Das folgende Beispiel zeigt die Verwendung einer einfachen Anwendung in Framework7, bei der das Warnfeld mit der benutzerdefinierten Meldung angezeigt wird, wenn Sie auf die Navigationsleiste klicken.

<!DOCTYPE html>
<html>
   
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, 
         maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
      <meta name = "apple-mobile-web-app-capable" content = "yes" />
      <meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
      <title>My App</title>
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
   </head>
   
   <body>
      //you can control the background color of the Status bar
      <div class = "statusbar-overlay"></div>
      <div class = "panel-overlay"></div>
      
      <div class = "panel panel-right panel-reveal">
         <div class = "content-block">
            <p>Contents goes here...</p>
         </div>
      </div>
      
      <div class = "views">
         <div class = "view view-main">
            <div class = "navbar">
               <div class = "navbar-inner">
                  <div class = "center sliding">My App</div>
                  <div class = "right">
                     <a href = "#" class = "link icon-only open-panel">
                        <i class = "icon icon-bars"></i>
                     </a>
                  </div>
               </div>
            </div>
            
            <div class = "pages navbar-through toolbar-through">
               <div data-page = "index" class = "page">
                  <div class = "page-content">
                     <p>This is simple application...</p>
                     <div class = "list-block">
                        <ul>
                           <li>
                              <a href = "envirmnt_about.html" class = "">
                                 <div class = "item-content">
                                    <div class = "item-inner">
                                       <div class = "item-title">Blog</div>
                                    </div>
                                 </div>
                              </a>
                           </li>
                        </ul>
                     </div>
                  </div>
               </div>
            </div>
            
            <div class = "toolbar">
               <div class = "toolbar-inner">
                  <a href = "#" class = "link">First Link</a>
                  <a href = "#" class = "link">Second Link</a>
               </div>
            </div>
         </div>
      </div>
      
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
      
      <script>
         // here initialize the app
         var myApp = new Framework7();

         // If your using custom DOM library, then save it to $$ variable
         var $$ = Dom7;

         // Add the view
         var mainView = myApp.addView('.view-main', {
            
            // enable the dynamic navbar for this view:
            dynamicNavbar: true
         });

         //use the 'pageInit' event handler for all pages
         $$(document).on('pageInit', function (e) {
         
            //get page data from event data
            var page = e.detail.page;

            if (page.name === 'blog') {
            
               // you will get below message in alert box when page with data-page attribute is equal to "about"
               myApp.alert('Here its your About page');
            }
         })
      </script>
   </body>

</html>

Als nächstes erstellen Sie eine weitere HTML-Seite, dh envirmnt_about.html wie unten gezeigt -

envirmnt_about.html

<div class = "navbar">
   <div class = "navbar-inner">
      <div class = "left">
         <a href = "#" class = "back link">
            <i class = "icon icon-back"></i>
            <span>Back</span>
         </a>
      </div>
      
      <div class = "center sliding">My Blog</div>
      <div class = "right">
         <a href = "#" class = "link icon-only open-panel">
            <i class = "icon icon-bars"></i>
         </a>
      </div>
   </div>
</div>

<div class = "pages">
   <div data-page = "blog" class = "page">
      <div class = "page-content">
         <div class = "content-block">
            <h2>My Blog</h2>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
         </div>
      </div>
   </div>
</div>

Ausgabe

Lassen Sie uns die folgenden Schritte ausführen, um zu sehen, wie der oben angegebene Code funktioniert:

  • Speichern Sie den obigen HTML-Code als framework7_environment.html Datei in Ihrem Server-Stammordner.

  • Öffnen Sie diese HTML-Datei als http: //localhost/framework7_environment.html und die Ausgabe wird wie unten gezeigt angezeigt.

  • Wenn Sie auf die Navigationsleiste klicken, wird das Warnfeld mit der benutzerdefinierten Nachricht angezeigt.

Beschreibung

Framework7 bietet verschiedene Arten von Layouts für Ihre Anwendung. Es werden drei Arten von Navigationsleisten- / Symbolleistenlayouts unterstützt:

S.No. Layouttypen & Beschreibung
1 Statisches Layout

Das statische Layout wird am häufigsten als Layouttyp verwendet und umfasst Navigationsleiste und Symbolleiste. Dies kann ein scrollbarer Seiteninhalt sein, und jede Seite enthält eine eigene Navigationsleiste und Symbolleiste.

2 Festes Layout

Das feste Layout enthält eine eigene Navigationsleiste und Symbolleiste, die auf dem Bildschirm sichtbar und auf der Seite nicht scrollbar sind.

3 Durch Layout

In diesem Layout werden die Navigationsleiste und die Symbolleiste für alle Seiten in einer einzelnen Ansicht fest angezeigt.

4 Gemischtes Layout

Sie können die verschiedenen Arten von Layouts in einer einzigen Ansicht mischen.

Keine Navigationsleiste / Symbolleiste

Wenn Sie die Navigationsleiste und die Symbolleiste nicht verwenden möchten, fügen Sie keine geeigneten Klassen ( Navigationsleiste fest , Navigationsleiste durch , Symbolleiste fest , Symbolleiste durch ) für Seite / Seiten / Ansicht hinzu.

Beschreibung

In diesem Kapitel wollen wir uns mit Navbar befassen . Es wird normalerweise oben auf einem Bildschirm platziert, der den Titel der Seite und Navigationselemente enthält.

Die Navigationsleiste besteht aus drei Teilen, von denen jeder HTML-Inhalt enthalten kann. Es wird jedoch empfohlen, diese auf die unten angegebene Weise zu verwenden.

  • Left- Es dient zum Platzieren von Backlink- Symbolen oder einzelnen Textlinks.

  • Center - Es wird verwendet, um den Titel der Seite oder Registerkartenlinks anzuzeigen.

  • Right- Dieser Teil ähnelt dem linken Teil.

Die folgende Tabelle zeigt die Verwendung der Navigationsleiste im Detail -

S.No. Navbar-Typen & Beschreibung
1 Grundlegende Navigationsleiste

Eine grundlegende Navigationsleiste kann mithilfe der Klassen navbar , navbar-inner , left , center und right erstellt werden.

2 Navbar mit Links

So verwenden Sie Links in linken und rechten Teil Ihrer navbar, fügen Sie einfach <a> Tag mit Klasse Link .

3 Mehrere Links

Um mehrere Links zu verwenden, fügen Sie dem Teil Ihrer Wahl einfach einige weitere <a class = "link"> hinzu .

4 Links mit Text und Symbolen

Die Links können mit Symbolen und Texten versehen werden, indem Klassen für Symbole hinzugefügt und der Linktext mit dem Element <span> umbrochen wird.

5 Links nur mit Symbolen

Navbar Links kann durch Zugabe mit nur Symbole zur Verfügung gestellt werden , nur-Symbol Klasse Links.

6 Verwandte App- und Ansichtsmethoden

Bei der Initialisierung der Ansicht können Sie in Framework7 die für die Navigationsleiste verfügbaren Methoden verwenden.

7 Navigationsleiste automatisch ausblenden

Die Navigationsleiste kann für einige von Ajax geladene Seiten, auf denen keine Navigationsleiste erforderlich ist, automatisch ausgeblendet / angezeigt werden.

Beschreibung

Die Symbolleiste bietet einfachen Zugriff auf andere Seiten mithilfe von Navigationselementen am unteren Bildschirmrand.

Sie können die Symbolleiste auf zwei Arten verwenden, wie in der Tabelle angegeben:

S.No. Symbolleistentypen & Beschreibung
1 Werkzeugleiste verstecken

Sie können die Symbolleiste automatisch ausblenden, wenn Sie die Seiten mit der Taste laden no-toolbar Klasse zur geladenen Seite.

2 Untere Symbolleiste

Platzieren Sie die Symbolleiste mit der Taste am unteren Rand der Seite toolbar-bottom Klasse.

Methoden der Symbolleiste

Die folgenden verfügbaren Methoden können mit Symbolleisten verwendet werden:

S.No. Symbolleistenmethoden und Beschreibung
1

myApp.hideToolbar(toolbar)

Die angegebene Symbolleiste wird ausgeblendet.

2

myApp.showToolbar(toolbar)

Es zeigt die angegebene Symbolleiste.

3

view.hideToolbar()

Die angegebene Symbolleiste wird in der Ansicht ausgeblendet.

4

view.showToolbar()

Es zeigt die angegebene Symbolleiste in der Ansicht.

Beispiel

Das folgende Beispiel zeigt die Verwendung des Symbolleistenlayouts in Framework7.

Zuerst erstellen wir eine HTML-Seite mit dem Namen toolbar.html wie unten gezeigt -

<!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>

Initialisieren Sie jetzt Ihre App und Ansichten in der benutzerdefinierten JS-Datei toolbar.js.

Ausgabe

Lassen Sie uns die folgenden Schritte ausführen, um zu sehen, wie der oben angegebene Code funktioniert:

  • Speichern Sie den oben angegebenen HTML-Code als toolbar.html Datei in Ihrem Server-Stammordner.

  • Öffnen Sie diese HTML-Datei als http: //localhost/toolbar.html und die Ausgabe wird wie unten gezeigt angezeigt.

Beschreibung

Framework 7 ermöglicht das Durchsuchen der Elemente mithilfe der Suchleistenklasse .

Suchleistenparameter

S.No. Parameter & Beschreibung Art Standard
1

searchList

Es durchsucht den CSS-Selektor oder das HTML-Element der Liste.

Zeichenfolge oder HTML-Element - -
2

searchIn

Sie können die Listenansichtselemente von CSS-Selektoren durchsuchen und die Elemente durchsuchen , indem Sie die Klassen .item-title und .item-text übergeben .

Zeichenfolge '.item-title'
3

found

Es durchsucht den CSS-Selektor oder das HTML-Element mit dem Element "found". Außerdem wird das Element .searchbar-found verwendet, wenn kein Element angegeben ist.

Zeichenfolge oder HTML-Element - -
4

notfound

Es durchsucht den CSS-Selektor oder das HTML-Element mit dem Element "nicht gefunden". Außerdem wird das Element .searchbar-not-found verwendet, wenn kein Element angegeben ist.

Zeichenfolge oder HTML-Element - -
5

overlay

Es durchsucht das CSS - Selektor oder HTML - Element „searchbar Overlay“ Element und Anwendungen mit .searchbar-Overlay - Elemente, wenn es kein Element angegeben.

Zeichenfolge oder HTML-Element - -
6

ignore

Sie können die CSS-Auswahl für Elemente mithilfe der Suchleiste ignorieren.

Zeichenfolge '.searchbar-ignore'
7

customSearch

Wenn diese Option aktiviert ist, durchsucht die Suchleiste keinen der in searchList angegebenen Listenblöcke und Sie können benutzerdefinierte Suchfunktionen verwenden.

Boolescher Wert falsch
8

removeDiacritics

Entfernen Sie bei der Suche nach einem Element die diakritischen Zeichen, indem Sie diesen Parameter aktivieren.

Boolescher Wert falsch
9

hideDividers

Dieser Parameter blendet Elementteiler und Gruppentitel aus, wenn keine Elemente vorhanden sind.

Boolescher Wert wahr
10

hideGroups

Dieser Parameter blendet die Gruppen aus, wenn in den Listenansichtsgruppen keine Elemente gefunden wurden.

Boolescher Wert wahr

Rückrufe in der Suchleiste

S.No. Rückrufe & Beschreibung Art Standard
1

onSearch

Diese Methode löst während der Suche die Rückruffunktion aus.

Funktion (en) - -
2

onEnable

Diese Methode löst die Rückruffunktion aus, wenn die Suchleiste aktiv wird.

Funktion (en) - -
3

onDisable

Diese Methode löst die Rückruffunktion aus, wenn die Suchleiste inaktiv wird.

Funktion (en) - -
4

onClear

Diese Methode löst die Rückruffunktion aus, wenn Sie auf das Element "Löschen" klicken.

Funktion (en) - -

Eigenschaften der Suchleiste

S.No. Eigenschaften & Beschreibung
1

mySearchbar.params

Stellt die initialisierten Parameter dar, die mit dem Objekt übergeben wurden.

2

mySearchbar.query

Durchsucht die aktuelle Abfrage.

3

mySearchbar.searchList

Definiert den Suchlistenblock.

4

mySearchbar.container

Definiert den Suchleistencontainer mit HTML-Element.

5

mySearchbar.input

Definiert die Eingabe in die Suchleiste mit dem HTML-Element.

6

mySearchbar.active

Es definiert, ob die Suchleiste aktiviert oder deaktiviert ist.

Suchleistenmethoden

S.No. Methoden & Beschreibung
1

mySearchbar.search(query);

Diese Methode durchsucht die übergebene Abfrage.

2

mySearchbar.enable();

Es aktiviert die Suchleiste.

3

mySearchbar.disable();

Es deaktiviert die Suchleiste.

4

mySearchbar.clear();

Sie können die Abfrage- und Suchergebnisse löschen.

5

mySearchbar.destroy();

Es zerstört die Suchleisteninstanz.

Suchleiste JavaScript-Ereignisse

S.No. Eventbeschreibung Ziel
1

search

Sie können dieses Ereignis auslösen, während Sie nach Elementen suchen.

<div class = "list-block">
2

clearSearch

Dieses Ereignis wird ausgelöst, wenn der Benutzer auf das clearSearch-Element klickt.

<div class = "list-block">
3

enableSearch

Wenn die Suchleiste aktiviert wird, wird dieses Ereignis ausgelöst.

<div class = "list-block">
4

disableSearch

Wenn die Suchleiste deaktiviert wird und der Benutzer auf die Schaltfläche "Abbrechen" oder das Element "Suchleistenüberlagerung" klickt, wird dieses Ereignis ausgelöst.

<div class = "list-block">

Beispiel

Das folgende Beispiel zeigt die Verwendung der Suchleiste beim Scrollen in 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>

Ausgabe

Lassen Sie uns die folgenden Schritte ausführen, um zu sehen, wie der oben angegebene Code funktioniert:

  • Speichern Sie den oben angegebenen HTML-Code search_bar.html Datei in Ihrem Server-Stammordner.

  • Öffnen Sie diese HTML-Datei als http: //localhost/search_bar.html und die Ausgabe wird wie unten gezeigt angezeigt.

  • Wenn das in der Liste enthaltene Element in die Suchleiste eingegeben wird, wird dieses bestimmte Element aus der Liste angezeigt.

  • Wenn das andere Element als die in der Liste enthaltenen Elemente eingegeben wird, wird kein gefundenes Element angezeigt.

Beschreibung

Mit iOS 7+ können Sie Vollbild-Apps erstellen, die ein Problem verursachen können, wenn sich Ihre Statusleiste mit Ihrer App überschneidet. Framework7 löst dieses Problem, indem festgestellt wird, ob sich Ihre App im Vollbildmodus befindet oder nicht. Wenn sich Ihre App im Vollbildmodus befindet, fügt Framework7 <html> automatisch eine With-Statusbar-Overlay- Klasse hinzu (oder wird entfernt, wenn sich die App nicht im Vollbildmodus befindet), und Sie müssen in <body> eine Statusbar-Overlay- Klasse hinzufügen wie im folgenden Code gezeigt -

<html class = "with-statusbar-overlay">
...
   <body>
      <div class = "statusbar-overlay"></div>
      ...

Standardmäßig wird <div> immer oben auf Ihrem Bildschirm ausgeblendet und fixiert. Es ist nur sichtbar, wenn sich die App im Vollbildmodus befindet und <html> eine With-Statusbar-Overlay- Klasse hinzugefügt wurde .

Beispiel

Das folgende Beispiel zeigt die Verwendung der Statusleiste in 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>

Ausgabe

Lassen Sie uns die folgenden Schritte ausführen, um zu sehen, wie der oben angegebene Code funktioniert:

  • Speichern Sie den oben angegebenen HTML-Code als status_bar.html Datei in Ihrem Server-Stammordner.

  • Öffnen Sie diese HTML-Datei als http: //localhost/status_bar.html und die Ausgabe wird wie unten gezeigt angezeigt.

Das Beispiel zeigt die Verwendung der statusbar-overlayHiermit können Sie Vollbild-Apps erstellen, wenn sich Ihre Statusleiste mit der App überschneidet.

Beschreibung

Das Seitenfenster bewegt sich zur linken oder rechten Seite des Bildschirms, um den Inhalt anzuzeigen. Mit Framework7 können Sie Ihrer App bis zu 2 Bedienfelder (rechtes und linkes Bedienfeld) hinzufügen. Sie müssen am Anfang des <Körpers> Bedienfelder hinzufügen und dann den Eröffnungseffekt auswählen, indem Sie die folgenden aufgelisteten Klassen anwenden:

  • panel-reveal - Dadurch wird der gesamte Inhalt der App verschoben.

  • panel-cover - Dadurch überlagert das Bedienfeld den Inhalt der App.

Der folgende Code zeigt beispielsweise, wie die oben genannten Klassen verwendet werden:

<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>

Die folgende Tabelle zeigt die von Framework77 unterstützten Panel-Typen -

S.No. Typ & Beschreibung
1 Panels öffnen und schließen

Sobald Sie Bedienfelder und Effekte hinzugefügt haben, müssen Sie Funktionen zum Öffnen und Schließen der Bedienfelder hinzufügen .

2 Panel-Ereignisse

Um festzustellen, wie ein Benutzer mit dem Panel interagiert, können Sie Panel-Ereignisse verwenden.

3 Öffnen Sie die Bedienfelder mit Swipe

Framework7 bietet Ihnen die Möglichkeit, das Bedienfeld mit einer Wischgeste zu öffnen .

4 Panel ist geöffnet?

Mit dem können wir feststellen, ob das Panel geöffnet ist oder nicht with-panel[position]-[effect] Regel.

Beschreibung

Inhaltsblöcke können verwendet werden, um zusätzlichen Inhalt mit unterschiedlichem Format hinzuzufügen.

Beispiel

Das folgende Beispiel zeigt die Verwendung des Inhaltsblocks in 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>

Ausgabe

Lassen Sie uns die folgenden Schritte ausführen, um zu sehen, wie der oben angegebene Code funktioniert:

  • Speichern Sie den oben angegebenen HTML-Code als content_block.html Datei in Ihrem Server-Stammordner.

  • Öffnen Sie diese HTML-Datei als http: //localhost/content_block.html und die Ausgabe wird wie unten gezeigt angezeigt.

  • Der Code fügt zusätzliche Formatierung und den erforderlichen Abstand für den Textinhalt hinzu.

Beschreibung

Framework7 bietet verschiedene Arten von Rastertypen, um den Inhalt je nach Benutzerbedarf zu platzieren.

Das Layoutraster bietet verschiedene Arten von Spaltengrößen, wie in der folgenden Tabelle beschrieben -

S.No. Klasse Tabellenklasse Breite
1 col-5 Tablette-5 5%
2 col-10 Tablette-10 10%
3 col-15 Tablette-15 15%
4 col-20 Tablette-20 20%
5 col-25 Tablette-25 25%
6 col-30 Tablette-30 30%
7 col-33 Tablette-33 33,3%
8 col-35 Tablette-35 35%
9 col-40 Tablette-40 40%
10 col-45 Tablette-45 45%
11 col-50 Tablette-50 50%
12 col-55 Tablette-55 55%
13 col-60 Tablette-60 60%
14 col-65 Tablette-65 65%
15 col-66 Tablette-66 66,6%
16 col-70 Tablette-70 70%
17 col-75 Tablette-75 75%
18 col-80 Tablette-80 80%
19 col-85 Tablette-85 85%
20 col-90 Tablette-90 90%
21 col-95 Tablette-95 95%
21 col-100 Tablette-100 100%
22 col-auto Tablet-Auto Gleiche Breite

Beispiel

Das folgende Beispiel enthält das Rasterlayout zum Platzieren Ihrer Inhalte nach Bedarf in 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>

Ausgabe

Lassen Sie uns die folgenden Schritte ausführen, um zu sehen, wie der oben angegebene Code funktioniert:

  • Speichern Sie den oben angegebenen HTML-Code als layout_grid.html Datei in Ihrem Server-Stammordner.

  • Öffnen Sie diese HTML-Datei als http: //localhost/layout_grid.html. Die Ausgabe wird wie unten gezeigt angezeigt.

  • Dieser Code bietet verschiedene Arten von Rastertypen, um den Inhalt gemäß den Anforderungen des Benutzers zu platzieren.

Beschreibung

Framework7 bietet verschiedene Arten von Overlays, um reibungslos mit den Anwendungen arbeiten zu können. In der folgenden Tabelle sind einige der Framework7-Overlays aufgeführt:

S.No. Überlagerungstyp und Beschreibung
1 Modal

Modal ist ein kleines Fenster, in dem der Inhalt aus verschiedenen Quellen angezeigt wird, ohne das übergeordnete Fenster zu verlassen.

2 Aufpoppen

Popup ist ein Popup-Feld, in dem der Inhalt angezeigt wird, wenn der Benutzer auf das Element klickt.

3 Popover

Um die Präsentation von temporären Inhalten zu verwalten, kann die Popover-Komponente verwendet werden.

4 Aktionsblatt

Das Aktionsblatt wird verwendet, um dem Benutzer eine Reihe von Möglichkeiten zur Bearbeitung einer bestimmten Aufgabe zu präsentieren.

5 Anmeldebildschirm

Der Überlagerungs-Anmeldebildschirm wird zum Anzeigen des Anmeldebildschirmformats verwendet, das in Seiten oder Popups oder als eigenständige Überlagerung verwendet werden kann.

6 Picker Modal

Das Picker-Modal wird verwendet, um benutzerdefinierte Inhalte auszuwählen, die dem Kalender-Picker ähnlich sind.

Beschreibung

Preloader in Framework7 wird mit skalierbarer Vektorgrafik (SVG) erstellt und mit CSS animiert, wodurch die Größe leicht geändert werden kann. Preloader ist in zwei Farben erhältlich -

  • Die Standardeinstellung ist heller Hintergrund
  • Ein anderer ist dunkler Hintergrund

Sie können die Preloader- Klasse in Ihrem HTML wie unten gezeigt verwenden -

Beispiel

Das folgende Beispiel zeigt die Verwendung des Preloaders im 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>

Ausgabe

Lassen Sie uns die folgenden Schritte ausführen, um zu sehen, wie der oben angegebene Code funktioniert:

  • Speichern Sie den oben angegebenen HTML-Code als preloader.html Datei in Ihrem Server-Stammordner.

  • Öffnen Sie diese HTML-Datei als http: //localhost/preloader.html und die Ausgabe wird wie unten gezeigt angezeigt.

  • Dieser Code zeigt den Preloader-Indikator an, der mit SVG erstellt und mit CSS animiert wurde.

Beschreibung

Die Fortschrittsbalken können verwendet werden, um den Benutzern das Laden von Assets oder den Fortschritt einer Aufgabe anzuzeigen. Sie können den Fortschrittsbalken mithilfe der Fortschrittsbalkenklasse angeben . Wenn der Benutzer nicht weiß, wie lange der Ladevorgang für die Anforderung dauert, können Sie die Klasse progressbar-infinite verwenden .

Fortschrittsbalken JavaScript-API

Der Fortschrittsbalken kann zusammen mit der JavaScript-API verwendet werden, um die Eigenschaften zum Anzeigen , Ausblenden und Fortschreiten mithilfe der folgenden Methoden anzugeben :

S.No. Methoden Beschreibung & Parameter
1 myApp.setProgressbar (container , progress, speed)

Es legt den Fortschrittsbalken für den Fortschritt einer Aufgabe fest.

  • container - Es ist eine Zeichenfolge oder ein HTML-Element, das den Container des Fortschrittsbalkenelements definiert.

  • progress - Es wird im Ganzzahlformat dargestellt und definiert den Fortschritt einer Aufgabe.

  • speed - Es wird im Ganzzahlformat dargestellt und gibt die Dauer des Fortschritts einer Aufgabe an.

2 myApp.hideProgressbar (contain er)

Der Fortschrittsbalken wird ausgeblendet.

  • container - Es ist eine Zeichenfolge oder ein HTML-Element, das den Container des Fortschrittsbalkenelements definiert.

3 myApp.showProgressbar (contai ner, progress, color)

Es zeigt den Fortschrittsbalken an.

  • container - Es ist eine Zeichenfolge oder ein HTML-Element, das den Container des Fortschrittsbalkenelements definiert.

  • progress - Es wird im Ganzzahlformat dargestellt und definiert den Fortschritt einer Aufgabe.

  • speed - Es wird im Ganzzahlformat dargestellt und gibt die Dauer des Fortschritts einer Aufgabe an.

Beispiel

Das folgende Beispiel zeigt einen animierten bestimmten und unbestimmten Fortschrittsbalken an, um die Aktivität in Framework7 anzuzeigen.

<!DOCTYPE html>
<html>

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

   <body>
      <div class = "views">
         <div class = "view view-main">
            <div class = "pages">
               <div data-page = "home" class = "page navbar-fixed">
               
                  <div class = "navbar">
                     <div class = "navbar-inner">
                        <div class = "center">Progress Bar</div>
                     </div>
                  </div>
                  
                  <div class = "page-content">
                     <div class = "content-block-title">Determinate Progress Bar</div>
                     <div class = "content-block">
                        <div class = "content-block-inner">
                           <p>Inline determinate progress bar:</p>
                           
                           <div class = "progressbar-inline">
                              <p><span data-progress = "10" class = "progressbar"></span></p>
                              
                              <p class = "buttons-row">
                                 <a href = "#" data-progress = "25" class = "button button-raised">25%</a>
                                 <a href = "#" data-progress = "50" class = "button button-raised">50%</a>
                                 <a href = "#" data-progress = "75" class = "button button-raised">75%</a>
                                 <a href = "#" data-progress = "100" class = "button button-raised">100%</a>
                              </p>
                           </div>
                           
                           <p>Loads and hides the determinate progress bar:</p>
                           <div class = "progressbar-load-hide">
                              <p><a href = "#" class = "button button-raised">Start Loading</a></p>
                           </div>
                           
                           <p>Displays the determinate progress bar on top:</p>
                           <p class = "progressbar-overlay"><a href = "#" class = "button button-raised">Start Loading</a></p>
                        </div>
                     </div>
                     
                     <div class = "content-block-title">Infinite Progress Bar</div>
                     <div class = "content-block">
                        <div class = "content-block-inner">
                           <p>Inline infinite progress bar:</p>
                           
                           <p><span class = "progressbar-infinite"></span></p>
                           
                           <p>Displays the infinite progress bar in multiple colors:</p>
                           
                           <p><span class = "progressbar-infinite color-multi"></span></p>
                           
                           <p>Displays the infinite progress bar on top:</p>
                           
                           <p class = "progressbar-infinite-overlay"><a href = "#" class = "button button-raised">Start Loading</a></p>
                           
                           <p>Displays the infinite progress bar in multiple colors on top:</p>
                           
                           <p class = "progressbar-infinite-multi-overlay"><a href = "#" class = "button button-raised">Start Loading</a></p>
                        </div>
                     </div>
                     
                     <div class = "content-block-title">Different types of colored progress bars:</div>
                     <div class = "list-block">
                        <ul>
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div data-progress = "5" class = "progressbar color-red"></div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div data-progress = "10" class = "progressbar color-pink"></div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div data-progress = "20" class = "progressbar color-deeppurple"></div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div data-progress = "30" class = "progressbar color-blue"></div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div data-progress = "40" class = "progressbar color-cyan"></div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div data-progress = "50" class = "progressbar color-green"></div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div data-progress = "60" class = "progressbar color-lime"></div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div data-progress = "70" class = "progressbar color-amber"></div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div data-progress = "80" class = "progressbar color-deeporange"></div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div data-progress = "90" class = "progressbar color-gray"></div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div data-progress = "100" class = "progressbar color-black"></div>
                              </div>
                           </li>
                        </ul>
                     </div>
                     
                  </div>
               </div>
            </div>
         </div>
      </div>
      
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
         
      <script>
         var myApp = new Framework7({
            material: true
         });
         
         var $$ = Dom7;

         $$('.progressbar-inline .button').on('click', function () {
            var progress = $$(this).attr('data-progress');
            var progressbar = $$('.progressbar-inline .progressbar');
            myApp.setProgressbar(progressbar, progress);
         });
         
         $$('.progressbar-load-hide .button').on('click', function () {
            var container = $$('.progressbar-load-hide p:first-child');
            
            //it doesn't load if another progresbar is loading
            if (container.children('.progressbar').length) return;

            myApp.showProgressbar(container, 0);

            var progress = 0;
            function simulateLoading() {
               setTimeout(function () {
                  var progressBefore = progress;
                  progress += Math.random() * 20;
                  myApp.setProgressbar(container, progress);
                  if (progressBefore < 100) {
                     simulateLoading();
                  }
                  else myApp.hideProgressbar(container);
               }, Math.random() * 200 + 200);
            }
            simulateLoading();
         });
         
         $$('.progressbar-overlay .button').on('click', function () {
            var container = $$('body');
            if (container.children('.progressbar, .progressbar-infinite').length) return;
            myApp.showProgressbar(container, 0, 'orange');
            var progress = 0;
            
            function simulateLoading() {
               setTimeout(function () {
                  var progressBefore = progress;
                  progress += Math.random() * 20;
                  myApp.setProgressbar(container, progress);
                  if (progressBefore < 100) {
                     simulateLoading();
                  }
                  //hides the progressbar
                  else myApp.hideProgressbar(container);
               }, Math.random() * 200 + 200);
            }
            simulateLoading();
         });
         
         $$('.progressbar-infinite-overlay .button').on('click', function () {
            var container = $$('body');
            if (container.children('.progressbar, .progressbar-infinite').length) return;
            myApp.showProgressbar(container, 'yellow');
            setTimeout(function () {
               myApp.hideProgressbar();
            }, 3000);
         });
         
         $$('.progressbar-infinite-multi-overlay .button').on('click', function () {
            var container = $$('body');
            if (container.children('.progressbar, .progressbar-infinite').length) return;
               myApp.showProgressbar(container, 'multi');
               setTimeout(function () {
               myApp.hideProgressbar();
            }, 3000);
         });
      </script>
   </body>

</html>

Ausgabe

Lassen Sie uns die folgenden Schritte ausführen, um zu sehen, wie der oben angegebene Code funktioniert:

  • Speichern Sie den oben angegebenen HTML-Code als progress_bar.html Datei in Ihrem Server-Stammordner.

  • Öffnen Sie diese HTML-Datei als http: //localhost/progress_bar.html und die Ausgabe wird wie unten gezeigt angezeigt.

  • Das Beispiel zeigt den Fortschrittsbalken an, der angibt, wie lange ein Vorgang dauert, um den Vorgang abzuschließen, und die verschiedenen Arten von Fortschrittsbalken anzeigt, um die Aktivität anzuzeigen.

Beschreibung

Listenansichten sind leistungsstarke UI-Komponenten, die Daten in einer scrollbaren Liste mit mehreren Zeilen darstellen. Das Framework7 bietet verschiedene Arten der Listenansicht für die Arbeit mit Ihrer Anwendung. Die folgende Tabelle enthält einige der Framework7 Listenansicht -

S.No. Typen & Beschreibung
1 Listenansicht

Listenansichten sind leistungsstarke Komponenten der Benutzeroberfläche, die Daten in einer scrollbaren Liste mit mehreren Zeilen darstellen.

2 Kontaktliste

Die Kontaktliste ist eine Art Listenansicht, mit der die Liste der Personenkontakte angezeigt werden kann.

3 Medienlistenansicht

In der Medienlistenansicht werden komplizierte Datenstrukturen wie Produkte, Dienstleistungen und Benutzerinformationen angezeigt.

4 Swipeout

Mit dem Swipeout können Sie versteckte Menüaktionen anzeigen, indem Sie über die Listenelemente wischen.

5 Sortierbare Liste

Die sortierbare Liste ist eine Art Listenansicht, die die Elemente der Listenansicht sortiert.

6 Virtuelle Liste

Virtuelle Liste Eine Art Listenansicht, die Listen mit einer großen Anzahl von Datenelementen enthält, ohne deren Leistung zu beeinträchtigen.

Beschreibung

Das Akkordeon ist ein grafisches Steuerelement, das als gestapelte Liste von Elementen angezeigt wird. Jedes Akkordeon kann erweitert oder gedehnt werden , um den mit diesem Akkordeon verbundenen Inhalt anzuzeigen.

Zusammenklappbares Layout

Wenn Sie ein einzelnes, zusammenklappbares Element verwenden, müssen Sie das Wrapper-Element für die Akkordeonliste weglassen .

Es folgt eine Struktur des zusammenklappbaren Layouts -

<!-- 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>

Die folgenden Klassen werden in Framework7 für Akkordeon verwendet -

S.No. Klassen & Beschreibung
1

accordion-list

Es ist eine optionale Klasse, die eine Gruppe von Akkordeonelementen enthält.

2

accordion-item

Es ist eine erforderliche Klasse für einzelne Akkordeongegenstände.

3

accordion-item-toggle

Es ist eine erforderliche Klasse, die zum Erweitern des Inhalts von Akkordeonelementen verwendet wird.

4

accordion-item-content

Es ist eine erforderliche Klasse, die für den Inhalt versteckter Akkordeongegenstände verwendet wird.

5

accordion-item-expanded

Es ist ein einzelnes erweitertes Akkordeonelement.

Akkordeon JavaScript API

JavaScript-API-Methoden werden verwendet, um das Akkordeon programmgesteuert zu öffnen und zu schließen.

Es enthält die folgenden JavaScript-API-Methoden:

  • myApp.accordionOpen(item) - Zum Öffnen des Akkordeons.

  • myApp.accordionClose(item) - Zum Schließen des Akkordeons.

  • myApp.accordionToggle(item) - Zum Umschalten des Akkordeons.

Alle Methoden enthalten den Parameter item, der HTML- oder String-Element des Akkordeon-Elements ist.

Akkordeon Ereignisse

Akkordeon enthält vier Ereignisse, wie in der folgenden Tabelle aufgeführt -

S.No. Veranstaltung Ziel & Beschreibung
1 öffnen

Accordion item

Wenn Sie eine Animation öffnen, wird dieses Ereignis ausgelöst.

2 geöffnet

Accordion item

Wenn das Öffnen einer Animation abgeschlossen ist, wird dieses Ereignis ausgelöst.

3 schließen

Accordion item

Wenn Sie eine Animation schließen, wird dieses Ereignis ausgelöst.

4 geschlossen

Accordion item

Wenn das Schließen einer Animation abgeschlossen ist, wird dieses Ereignis ausgelöst.

Akkordeon Listenansicht

In der Akkordeonlistenansicht können Sie das Element-Link- Element anstelle des Akkordeon-Umschalters verwenden .

<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>

Beispiel

Das folgende Beispiel zeigt die Verwendung von Akkordeon im 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>

Ausgabe

Lassen Sie uns die folgenden Schritte ausführen, um zu sehen, wie der oben angegebene Code funktioniert:

  • Speichern Sie den oben angegebenen HTML-Code als accordion.html Datei in Ihrem Server-Stammordner.

  • Öffnen Sie diese HTML-Datei als http: //localhost/accordion.html und die Ausgabe wird wie unten gezeigt angezeigt.

  • Das Beispiel bietet ein zusammenklappbares Layout, das erweitert werden kann, um den mit dem Akkordeon verknüpften Inhalt anzuzeigen.

Beschreibung

Karten enthalten organisierte Informationen zu einem einzelnen Thema wie Foto, Link und Text. Die folgende Tabelle zeigt die Framework7-Kartentypen -

S.No. Typen & Beschreibung
1 Karten-HTML-Layout

Das grundlegende Karten-HTML-Layout verwendet Kartenklassen, um die Elemente anzuordnen.

2 Listenansicht mit Karten

Sie können mit Karten als Listview - Elemente durch Hinzufügen von Karten-Liste Klasse <div class = "list-block"> .

Beschreibung

Chip ist ein kleiner Block von Entitäten, der ein Foto, eine kleine Titelfolge und kurze Informationen enthalten kann.

Chips HTML-Layout

Der folgende Code zeigt das grundlegende Framework-HTML-Layout, das in Framework7 verwendet wird -

<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>

Das obige HTML-Layout enthält viele Klassen wie unten aufgeführt -

  • chips - Es ist der Chipbehälter.

  • chip-media- Dies ist das Chip-Medienelement, das Bilder, Avatare oder Symbole enthalten kann. Es ist optional.

  • card-label - Es ist das Chip-Textetikett.

  • card-delete - Dies ist der optionale Löschsymbol-Link eines Chips.

Beispiel

Das folgende Beispiel zeigt die Entitäten wie Alben, Kartenelemente usw. zusammen mit einem Foto und kurzen Informationen -

<!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>

Ausgabe

Lassen Sie uns die folgenden Schritte ausführen, um zu sehen, wie der oben angegebene Code funktioniert:

  • Speichern Sie den oben angegebenen HTML-Code als cards_html_layout.html Datei in Ihrem Server-Stammordner.

  • Öffnen Sie diese HTML-Datei als http: //localhost/cards_html_layout.html und die Ausgabe wird wie unten gezeigt angezeigt.

  • Das Beispiel zeigt die komplexen Entitäten in kleinen Blöcken wie Alben, Kartenelementen und veröffentlichten Bildern, die Fotos, Titelzeichenfolgen und Kurzinformationen enthalten.

Beschreibung

Framework7 bietet eine Gruppe gebrauchsfertiger Schaltflächen, indem nur Links oder Eingabeschaltflächen entsprechende Klassen hinzugefügt werden.

S.No. Typen & Beschreibung
1 iOS-Themenschaltflächen

Framework7 bietet viele iOS-Themenschaltflächen, die durch Anwenden geeigneter Klassen verwendet werden können.

2 Materialthema-Schaltflächen

Das Materialthema bietet viele Schaltflächen, die Sie in Ihrer Anwendung mithilfe geeigneter Klassen verwenden können.

Beschreibung

Framework7 bietet eine schwebende Aktionsschaltfläche für eine heraufgestufte Aktion. Sie werden als schwebendes eingekreistes Symbol über der Benutzeroberfläche angezeigt. Es hat das Bewegungsverhalten, das das Verwandeln , Starten und Übertragen eines Ankerpunkts umfasst .

Die schwebende Aktionsschaltfläche wird nur im Materialthema unterstützt.

In der folgenden Tabelle sind die in Framework7 verwendeten Aktionsschaltflächentypen aufgeführt.

S.No. Typen & Beschreibung
1 Floating Action Button Layout

Es ist sehr einfach; Sie müssen es nur als untergeordnetes Element einer Seite oder Ansicht platzieren .

2 Morph To Popover

Wenn Sie Popover beim Klicken auf die schwebende Aktionsschaltfläche öffnen möchten, können Sie die Floating-Button-to-Popover- Klasse verwenden.

3 Kurzwahl

Sie können verwandte Aktionen aufrufen, indem Sie auf die schwebende Aktionsschaltfläche klicken, indem Sie die Kurzwahl verwenden .

Beschreibung

Formulare werden für die Interaktion mit den Benutzern verwendet und sammeln Daten von den Webbenutzern mithilfe von Textfeldern, Kontrollkästchen, Optionsfeldern usw.

Framework7 bietet verschiedene Arten von Formularelementen, um reibungslos mit den Anwendungen zu arbeiten, wie in der folgenden Tabelle angegeben.

S.No. Überlagerungstyp und Beschreibung
1 Formularelemente

Formularelemente werden verwendet, um gut aussehende Formularlayouts zu erstellen.

2 Kontrollkästchen und Radios

Die Listenansicht Erweiterung ermöglicht es Ihnen , Kontrollkästchen und Radio - Eingänge in Framework7 zu erstellen.

3 Smart Select

Smart Select ist eine einfache Möglichkeit, die Formularauswahl mithilfe von Gruppen von Kontrollkästchen und Funkeingängen in dynamische Seiten umzuwandeln.

4 Deaktivierte Elemente

Die Elemente können deaktiviert werden, indem die deaktivierte Klasse auf das Element angewendet oder deaktivierte Attribute für das Formularelement hinzugefügt werden.

5 Formulardaten

Framework7 verfügt nur über sehr wenige nützliche Methoden, die das Arbeiten mit Formularen vereinfachen.

6 Formularspeicherung

Mit dem Formularspeicher ist es einfach, Formulardaten automatisch auf von Ajax geladenen Seiten zu speichern und zu analysieren.

7 Ajax Form Submit

Mit Framework7 können Sie Daten automatisch mit Ajax senden.

Beschreibung

Tabs sind Sätze von logisch gruppierten Inhalten, mit denen wir schnell zwischen ihnen wechseln und den Platz wie Akkordeons sparen können.

Registerkartenlayout

Der folgende Code definiert das Layout für die Registerkarten -

<!-- 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>

Wo -

  • <div class = "tabs">- Es ist ein erforderlicher Wrapper für alle Registerkarten. Wenn wir dies verpassen, funktionieren die Registerkarten überhaupt nicht.

  • <div class = "tab"> - Es ist eine einzelne Registerkarte, die haben sollte unique id Attribut.

  • <div class = "tab active">- Es handelt sich um eine einzelne aktive Registerkarte, die eine zusätzliche aktive Klasse verwendet, um die Registerkarte sichtbar (aktiv) zu machen.

Zwischen Registerkarten wechseln

Sie können einige Controller im Registerkartenlayout verwenden, damit der Benutzer zwischen ihnen wechseln kann.

Dazu müssen Sie Links (<a> -Tags) mit einer Tab-Link- Klasse und einem href- Attribut erstellen , die dem id- Attribut der Zielregisterkarte entsprechen.

<!-- 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>

Wechseln Sie mehrere Registerkarten

Wenn Sie einen Link mit einer einzelnen Registerkarte verwenden, um zwischen mehreren Registerkarten zu wechseln, können Sie Klassen verwenden, anstatt IDs und Datenregisterattribute zu verwenden .

<!-- 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>

Das Daten-Tab- Attribut von Tab-Link enthält die CSS-Auswahl von Ziel-Tab / Tabs.

Wir können verschiedene Arten von Registerkarten verwenden. Diese sind in der folgenden Tabelle angegeben.

S.No. Registerkarten Typen & Beschreibung
1 Inline-Registerkarten

Inline-Registerkarten sind Gruppen von Inline-Registerkarten, mit denen Sie schnell zwischen ihnen wechseln können.

2 Tabs von Navbar wechseln

Wir können Registerkarten in der Navigationsleiste platzieren, mit denen Sie zwischen ihnen wechseln können.

3 Wechseln Sie die Ansichten von der Registerkartenleiste

Mit einer einzelnen Registerkarte können Sie zwischen Ansichten mit eigener Navigation und eigenem Layout wechseln.

4 Animierte Registerkarten

Sie können einen einfachen Übergang (Animation) verwenden, um die Registerkarten zu wechseln.

5 Wischbare Tabs

Sie können wischbare Registerkarten mit einfachem Übergang erstellen, indem Sie die Klasse tabs-swipeable-wrap für die Registerkarten verwenden.

6 Registerkarten JavaScript-Ereignisse

JavaScript-Ereignisse können verwendet werden, wenn Sie mit JavaScript-Code für die Registerkarten arbeiten.

7 Registerkarte mit JavaScript anzeigen

Sie können die Registerkarte mithilfe von JavaScript-Methoden wechseln oder anzeigen.

Beschreibung

Der Swiper-Schieberegler ist der leistungsstärkste und modernste Touch-Schieberegler und wird in Framework7 mit vielen Funktionen geliefert.

Das folgende HTML-Layout zeigt den Swiper-Schieberegler -

<!-- 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>

Die folgenden Klassen werden für Swiper Slider verwendet -

  • swiper-container - Es ist ein erforderliches Element für den Hauptschieberbehälter und wird für Folien und Paginierungen verwendet.

  • Swiper-wrapper - Es ist ein erforderliches Element für zusätzliche Wrapper-Folien.

  • swiper-slide - Es ist ein einzelnes Folienelement und kann HTML enthalten.

  • swiper-pagination - Es ist optional für Paginierungsaufzählungszeichen und diese werden automatisch erstellt.

Sie können den Swiper mit JavaScript mithilfe der zugehörigen Methoden initialisieren.

myApp.swiper(swiperContainer,parameters)

ODER

new Swiper(swiperContainer, parameters)

Beide Methoden werden verwendet, um den Schieberegler mit Optionen zu initialisieren.

Die oben angegebenen Methoden enthalten die folgenden Parameter:

  • swiperContainer- Es ist HTMLElement oder eine Zeichenfolge eines Swiper-Containers und erforderlich.

  • parameters - Dies sind optionale Elemente, die Objekte mit Swiper-Parametern enthalten.

Zum Beispiel -

var mySwiper = app.swiper('.swiper-container', {
   speed: 400,
   spaceBetween: 100
});

Es ist möglich, auf die Instanz eines Swipers zuzugreifen, und die Swiper- Eigenschaft des Containers des Schiebereglers enthält das folgende HTML-Element:

var mySwiper = $$('.swiper-container')[0].swiper;

// Here you can use all slider methods like:
mySwiper.slideNext();

Sie können die verschiedenen Arten und Arten von Swiper in der folgenden Tabelle sehen -

S.No. Swiper-Typen und Beschreibung
1 Standard-Swiper mit Paginierung

Es ist ein moderner Touch-Schieberegler und der Swiper wischt standardmäßig horizontal.

2 Vertikaler Swiper

Dieser funktioniert auch als Standard-Swiper, wischt jedoch vertikal.

3 Mit Abstand zwischen den Folien

Dieser Swiper wird verwendet, um Platz zwischen zwei Folien zu schaffen.

4 Mehrere Swiper

Dieser Swiper verwendet mehr als einen Swiper auf einer Seite.

5 Verschachtelte Swiper

Es ist die Kombination von vertikalen und horizontalen Folien.

6 Benutzerdefinierte Steuerelemente

Es wird für benutzerdefinierte Steuerelemente verwendet, um eine Folie auszuwählen oder zu streichen.

7 Faules Laden

Es kann für Multimediadateien verwendet werden, deren Laden einige Zeit in Anspruch nimmt.

Beschreibung

Der Fotobrowser ähnelt der iOS-Fotobrowser-Komponente, um eine Gruppe von Bildern anzuzeigen, die gezoomt und geschwenkt werden können. Um zwischen Bildern zu wechseln, verwendet der Fotobrowser den Swiper Slider .

Die folgende Tabelle zeigt die in Framework7 verwendeten Fotobrowsertypen -

S.No. Fotobrowsertypen & Beschreibung
1 Erstellen Sie eine Foto-Browser-Instanz

Der Fotobrowser kann nur mit JavaScript erstellt und initialisiert werden.

2 Fotobrowser-Parameter

Framework7 bietet eine Liste von Parametern, die mit dem Fotobrowser verwendet werden.

3 Methoden und Eigenschaften des Fotobrowsers

Sie erhalten eine initialisierte Instanzvariable, um die Methoden und Eigenschaften des Fotobrowsers zu verwenden, sobald Sie den Fotobrowser initialisiert haben.

4 Fotos Array

Während der Initialisierung des Foto-Browsers müssen Sie ein Array mit Fotos / Videos im Parameter " Fotos" übergeben .

5 Fotobrowser-Vorlagen

Framework7 bietet Ihnen viele Fotobrowser-Vorlagen, die Sie an die Initialisierung des Fotobrowsers weitergeben können.

Beschreibung

Autocomplete ist die mobile und berührungsoptimierte Komponente von Framework7, die als Dropdown oder eigenständig ausgeführt werden kann. Sie können die Autocomplete-Instanz mithilfe der JavaScript-Methode erstellen und initialisieren.

myApp.autocomplete(parameters)

Wo Parameter erforderlich sind Objekte, die zum Initialisieren der Autocomplete-Instanz verwendet werden.

Autocomplete-Parameter

In der folgenden Tabelle sind die verfügbaren Autocomplete-Parameter in Framework7 aufgeführt.

S.No. Parameter & Beschreibung Art Standard
1

openIn

Es definiert, wie eine automatische Vervollständigung geöffnet wird, die als Dropdown, Popup oder Seite verwendet werden kann.

Zeichenfolge Seite
2

source

Es verwendet die Autocomplete-Instanz, die Suchabfrage und die Renderfunktion, um übereinstimmende Elemente mit Array zu übergeben.

Funktion (Autocomplete, Abfrage, Rendering) - -
3

valueProperty

Es gibt den Artikelwert des Schlüssels des übereinstimmenden Artikelobjekts an.

Zeichenfolge Ich würde
4

limit

Es zeigt die begrenzte Anzahl von Elementen an, die pro Abfrage automatisch vervollständigt werden.

Nummer - -
5

preloader

Mit Preloader können Sie das Layout für die automatische Vervollständigung festlegen, indem Sie es auf true setzen.

Boolescher Wert falsch
6

preloaderColor

Es gibt die Farbe des Preloaders an. Standardmäßig ist die Farbe "schwarz".

Zeichenfolge - -
7

value

Definiert das Array mit den standardmäßig ausgewählten Werten.

Array - -
8

textProperty

Es gibt den Elementwert des Schlüssels des übereinstimmenden Elementobjekts an, der als Titel der angezeigten Optionen verwendet werden kann.

Zeichenfolge Text

Eigenständige Autocomplete-Parameter

In der folgenden Tabelle sind die verfügbaren eigenständigen Autocomplete-Parameter in Framework7 aufgeführt.

S.No. Parameter & Beschreibung Art Standard
1

opener

Es handelt sich um einen Zeichenfolgen- oder HTML-Elementparameter, der die eigenständige Seite für die automatische Vervollständigung öffnet.

Zeichenfolge oder HTMLElement - -
2

popupCloseText

Es wird verwendet, um das Popup für die automatische Vervollständigung zu schließen.

Zeichenfolge 'Schließen'
3

backText

Es stellt den Backlink bereit, wenn die automatische Vervollständigung als Seite geöffnet wird.

Zeichenfolge 'Zurück'
4

pageTitle

Es gibt den Seitentitel für die automatische Vervollständigung an.

Zeichenfolge - -
5

searchbarPlaceholderText

Es gibt den Platzhaltertext der Suchleiste an.

Zeichenfolge 'Suche'
6

searchbarCancelText

Es definiert den Text der Schaltfläche zum Abbrechen der Suchleiste.

Zeichenfolge 'stornieren'
7

notFoundText

Es zeigt den Text an, wenn kein übereinstimmendes Element gefunden wurde.

Zeichenfolge 'Nichts gefunden'
8

multiple

Sie können mehrere Auswahlen auswählen, indem Sie sie auf true setzen.

Boolescher Wert falsch
9

navbarTheme

Es gibt das Farbthema für die Navigationsleiste an.

Zeichenfolge - -
10

backOnSelect

Wenn der Benutzer einen Wert auswählt, wird die automatische Vervollständigung geschlossen, indem er auf true gesetzt wird.

Boolescher Wert falsch
11

formTheme

Es gibt das Farbthema für die Form an.

Zeichenfolge - -

Dropdown-Parameter für die automatische Vervollständigung

In der folgenden Tabelle sind die verfügbaren Dropdown-Parameter für die automatische Vervollständigung in Framework7 aufgeführt.

S.No. Parameter & Beschreibung Art Standard
1

input

Es ist eine Zeichenfolge oder ein HTML-Element, das für die Texteingabe verwendet wird.

Zeichenfolge oder HTMLElement - -
2

dropdownPlaceholderText

Es gibt den Dropdown-Platzhaltertext an.

Zeichenfolge - -
3

updateInputValueOnSelect

Sie können den Eingabewert bei Auswahl aktualisieren, indem Sie ihn auf true setzen.

Boolescher Wert wahr
4

expandInput

Sie können die Texteingabe in der Listenansicht erweitern während Drop - Down sichtbar , indem Sie Vollbild breit machen item-Eingang auf true.

Boolescher Wert falsch

Rückruffunktionen automatisch vervollständigen

In der folgenden Tabelle sind die verfügbaren Dropdown-Autovervollständigungsparameter in Framework7 aufgeführt.

S.No. Parameter & Beschreibung Art Standard
1

onChange

Immer wenn der Wert für die automatische Vervollständigung geändert wird, wird diese Rückruffunktion ausgeführt.

Funktion (Autocomplete, Wert) - -
2

onOpen

Immer wenn die automatische Vervollständigung geöffnet wird, wird diese Rückruffunktion ausgeführt.

Funktion (Autocomplete) - -
3

onClose

Immer wenn die automatische Vervollständigung geschlossen ist, wird diese Rückruffunktion ausgeführt.

Funktion (Autocomplete) - -

Vorlagen für die automatische Vervollständigung

In der folgenden Tabelle sind die verfügbaren Dropdown-Parameter für die automatische Vervollständigung in Framework7 aufgeführt.

S.No. Parameter & Beschreibung Art Standard
1

navbarTemplate

Es handelt sich um eine eigenständige Vorlage für die automatische Vervollständigung der Navigationsleiste.

Zeichenfolge - -
2

itemTemplate

Es ist ein eigenständiges Template7-Formularelement.

Zeichenfolge - -
3

dropdownTemplate

Es ist die Dropdown-Vorlage template7.

Zeichenfolge - -
4

dropdownItemTemplate

Es ist das Dropdown-Listenelement template7.

Zeichenfolge - -
5

dropdownPlaceholderTemplate

Es ist das Dropdown-Platzhalterelement template7.

Zeichenfolge - -

Standardvorlagen

Im Folgenden finden Sie die Standardvorlagen-Codefragmente für die oben definierten Vorlagenparameter:

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>

Autocomplete-Methoden

In der folgenden Tabelle sind die in Framework7 verfügbaren Autocomplete-Methoden aufgeführt.

S.No. Methoden & Beschreibung
1

myAutocomplete.params

Definiert die Initialisierungsparameter, die mit dem Objekt übergeben werden.

2

myAutocomplete.value

Es definiert das Array mit ausgewählten Werten.

3

myAutocomplete.opened

Es öffnet die automatische Vervollständigung, wenn sie auf true gesetzt ist.

4

myAutocomplete.dropdown

Es gibt eine Instanz der Dropdown-Liste für die automatische Vervollständigung an.

5

myAutocomplete.popup

Es gibt eine Instanz des Autocomplete-Popups an.

6

myAutocomplete.page

Es gibt eine Instanz der Autocomplete-Seite an.

7

myAutocomplete.pageData

Es definiert Autocomplete-Seitendaten.

8

myAutocomplete.searchbar

Es definiert die Instanz der Autocomplete-Suchleiste.

Eigenschaften für die automatische Vervollständigung

In der folgenden Tabelle sind die in Framework7 verfügbaren Autocomplete-Methoden aufgeführt.

S.No. Eigenschaften & Beschreibung
1

myAutocomplete.open()

Es öffnet sich die automatische Vervollständigung, die als Dropdown, Popup oder Seite verwendet werden kann.

2

myAutocomplete.close()

Es schließt die automatische Vervollständigung.

3

myAutocomplete.showPreloader()

Es zeigt den Autocomplete-Preloader.

4

myAutocomplete.hidePreloader()

Der Autocomplete-Preloader wird ausgeblendet.

5

myAutocomplete.destroy()

Es ruiniert die Autocomplete Preloader-Instanz und entfernt alle Ereignisse.

Beispiel

Das folgende Beispiel zeigt die Verwendung von Autocomplete-Parametern, die im Framework7 versteckt sind.

<!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>

Ausgabe

Lassen Sie uns die folgenden Schritte ausführen, um zu sehen, wie der oben angegebene Code funktioniert:

  • Speichern Sie den oben angegebenen HTML-Code als autocomplete.html Datei in Ihrem Server-Stammordner.

  • Öffnen Sie diese HTML-Datei als http: //localhost/autocomplete.html und die Ausgabe wird wie unten gezeigt angezeigt.

  • Das Beispiel bietet die automatische Vervollständigung von Werten in einfacher Dropdown-Liste, Dropdown-Liste mit allen Werten, Dropdown-Liste mit Platzhalter, eigenständige automatische Vervollständigung usw.

Beschreibung

Picker sieht aus wie ein nativer iOS-Picker und ist eine leistungsstarke Komponente, mit der Sie beliebige Werte aus der Liste auswählen und benutzerdefinierte Overlay-Picker erstellen können. Sie können Picker als Inline-Komponente oder als Overlay verwenden. Die Überlagerungsauswahl wird auf Tablets (iPad) automatisch in Popover konvertiert.

Mit der folgenden App-Methode können Sie die JavaScript-Methode erstellen und initialisieren:

myApp.picker(parameters)

Wenn Parameter erforderliche Objekte sind, werden sie zum Initialisieren der Auswahlinstanz verwendet und sind eine erforderliche Methode.

Auswahlparameter

Die folgende Tabelle gibt die verfügbaren Parameter in den Pickern an -

S.No. Parameter & Beschreibung Art Standard
1

container

Zeichenfolge mit CSS-Selektor oder HTMLElement zum Generieren von Picker-HTML für Inline-Picker.

Zeichenfolge oder HTMLElement - -
2

input

Das zugehörige Eingabeelement, das mit der Zeichenfolge mit CSS-Selektor oder HTMLElement platziert wird.

Zeichenfolge oder HTMLElement - -
3

scrollToInput

Es wird verwendet, um das Ansichtsfenster (Seiteninhalt) der Eingabe zu scrollen, wenn die Auswahl geöffnet wird.

Boolescher Wert wahr
4

inputReadOnly

Wird verwendet, um das Attribut "readonly" für die angegebene Eingabe festzulegen.

Boolescher Wert wahr
5

convertToPopover

Es wird verwendet, um das Picker-Modal auf großen Bildschirmen wie dem iPad in Popover umzuwandeln.

Boolescher Wert wahr
6

onlyOnPopover

Sie können die Auswahl in Popover öffnen, indem Sie sie aktivieren.

Boolescher Wert wahr
7

cssClass

Um modal auszuwählen, können Sie einen zusätzlichen CSS-Klassennamen verwenden.

Zeichenfolge - -
8

closeByOutsideClick

Sie können die Auswahl schließen, indem Sie außerhalb der Auswahl oder des Eingabeelements klicken, indem Sie die Methode aktivieren.

Boolescher Wert falsch
9

toolbar

Es wird verwendet, um die modale Auswahlsymbolleiste zu aktivieren.

Boolescher Wert wahr
10

toolbarCloseText

Wird für die Symbolleistenschaltfläche Fertig / Schließen verwendet.

Zeichenfolge 'Getan'
11

toolbarTemplate

Es handelt sich um eine HTML-Vorlage in der Symbolleiste. Standardmäßig handelt es sich um eine HTML-Zeichenfolge mit der folgenden Vorlage:

<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>
Zeichenfolge - -

Spezifische Picker-Parameter

In der folgenden Tabelle sind die verfügbaren spezifischen Auswahlparameter aufgeführt.

S.No. Parameter & Beschreibung Art Standard
1

rotateEffect

Es aktiviert den 3D-Dreheffekt im Picker.

Boolescher Wert falsch
2

momentumRatio

Wenn Sie den Picker nach schnellem Berühren und Bewegen loslassen, wird mehr Schwung erzeugt.

Nummer 7
3

updateValuesOnMomentum

Dient zum Aktualisieren von Pickern und Eingabewerten während des Impulses.

Boolescher Wert falsch
4

updateValuesOnTouchmove

Dient zum Aktualisieren von Pickern und Eingabewerten während der Berührungsbewegung.

Boolescher Wert wahr
5

value

Das Array hat seine Anfangswerte und außerdem repräsentiert jedes Array-Element den Wert der zugehörigen Spalte.

Array - -
6

formatValue

Die Funktion wird zum Formatieren des Eingabewerts verwendet und sollte einen neuen / formatierten Zeichenfolgenwert zurückgeben. Die Werte und displayValues sind Arrays verwandter Spalten.

Funktion (p, Werte, displayValues) - -
7

cols

Jedes Array-Element repräsentiert ein Objekt mit Spaltenparametern.

Array - -

Picker-Parameter-Rückrufe

Die folgende Tabelle zeigt die Liste der in Pickern verfügbaren Rückruffunktionen -

S.No. Rückrufe & Beschreibung Art Standard
1

onChange

Die Rückruffunktion wird immer dann ausgeführt, wenn sich der Auswahlwert ändert und die Werte und Anzeigewerte Arrays der zugehörigen Spalte sind.

Funktion (p, Werte, displayValues) - -
2

onOpen

Die Rückruffunktion wird ausgeführt, wenn der Picker geöffnet wird.

Funktion (p) - -
3

onClose

Die Rückruffunktion wird ausgeführt, wenn der Picker geschlossen wird.

Funktion (p) - -

Spaltenparameter

Zum Zeitpunkt der Konfiguration von Picker müssen wir den Parameter cols übergeben . Es wird als Array dargestellt, wobei jedes Element ein Objekt mit Spaltenparametern ist.

S.No. Parameter & Beschreibung Art Standard
1

values

Sie können die Werte der Zeichenfolgenspalten mit einem Array angeben.

Array - -
2

displayValues

Es verfügt über ein Array mit Zeichenfolgenspaltenwerten und zeigt den Wert aus dem Parameter values ​​an , wenn dieser nicht angegeben ist.

Array - -
3

cssClass

Der CSS-Klassenname, der zum Festlegen des Spalten-HTML-Containers verwendet wird.

Zeichenfolge - -
4

textAlign

Es wird verwendet, um die Textausrichtung von Spaltenwerten festzulegen, und es kann "links", "Mitte" oder "rechts" sein .

Zeichenfolge - -
5

width

Die Breite wird standardmäßig automatisch berechnet. Wenn Sie die Spaltenbreite in der Auswahl mit abhängigen Spalten festlegen müssen, die in px angegeben werden sollen .

Nummer - -
6

divider

Es wird für Spalten verwendet, die visuelle Teiler sein sollen, es hat keine Werte.

Boolescher Wert falsch
7

content

Es wird verwendet, um eine Teilerspalte (Teiler: true) mit dem Inhalt der Spalte anzugeben .

Zeichenfolge - -

Parameter für Spaltenrückrufe

S.No. Rückrufe & Beschreibung Art Standard
1

onChange

Immer wenn sich der Spaltenwert zu diesem Zeitpunkt ändert, wird die Rückruffunktion ausgeführt. Der Wert und der Anzeigewert repräsentieren den aktuellen Spaltenwert und den Anzeigewert .

Funktion (p, Wert, displayValue) - -

Picker-Eigenschaften

Die Picker-Variable hat viele Eigenschaften, die in der folgenden Tabelle angegeben sind:

S.No. Eigenschaften & Beschreibung
1

myPicker.params

Sie können übergebene Parameter mit Objekt initialisieren.

2

myPicker.value

Der ausgewählte Wert für jede Spalte wird durch ein Array von Elementen dargestellt.

3

myPicker.displayValue

Der ausgewählte Anzeigewert für jede Spalte wird durch ein Array von Elementen dargestellt.

4

myPicker.opened

Wenn der Picker geöffnet wird, wird er auf den wahren Wert gesetzt.

5

myPicker.inline

Wenn die Auswahl inline ist, wird der wahre Wert festgelegt.

6

myPicker.cols

Die Picker-Spalten haben ihre eigenen Methoden und Eigenschaften.

7

myPicker.container

Die Dom7-Instanz wird für den HTML-Container verwendet.

Auswahlmethoden

Die Auswahlvariable verfügt über hilfreiche Methoden, die in der folgenden Tabelle aufgeführt sind:

S.No. Methoden & Beschreibung
1

myPicker.setValue(values, duration)

Verwenden Sie diese Option, um einen neuen Auswahlwert festzulegen. Die Werte befinden sich in einem Array, in dem jedes Element den Wert für jede Spalte darstellt. Dauer - Dies ist die Übergangsdauer in ms.

2

myPicker.open()

Zum Öffnen des Pickers.

3

myPicker.close()

Verwenden Sie diese Option, um die Auswahl zu schließen.

4

myPicker.destroy()

Verwenden Sie diese Option, um die Picker-Instanz zu zerstören und alle Ereignisse zu entfernen.

Spalteneigenschaften

Jede Spalte im Array myPicker.cols hat auch ihre eigenen nützlichen Eigenschaften, die in der folgenden Tabelle aufgeführt sind:

//Get first column
var col = myPicker.cols[0];
S.No. Eigenschaften & Beschreibung
1

col.container

Sie können eine Instanz mit einem Spalten-HTML-Container erstellen.

2

col.items

Sie können eine Instanz mit HTML-Elementen für Spaltenelemente erstellen.

3

col.value

Dient zur Auswahl des aktuellen Spaltenwerts.

4

col.displayValue

Dient zur Auswahl des aktuellen Spaltenwerts der Anzeige.

5

col.activeIndex

Geben Sie die aktuelle Indexnummer an, die ausgewählt / aktiv ist.

Spaltenmethoden

Die nützlichen Spaltenmethoden sind in der folgenden Tabelle aufgeführt:

S.No. Methoden & Beschreibung
1

col.setValue(value, duration)

Wird verwendet, um einen neuen Wert für die aktuelle Spalte festzulegen. Der Wert muss ein neuer Wert sein, und die Dauer ist die in ms angegebene Übergangsdauer.

2

col.replaceValues(values, displayValues)

Wird verwendet, um die Spaltenwerte und Anzeigewerte durch neue zu ersetzen.

Es wird verwendet, um über den HTML-Container auf die Instanz von Picker zuzugreifen, wenn Sie Picker als Inline-Picker initialisieren.

var myPicker = $$('.picker-inline')[0].f7Picker;

Es gibt verschiedene Arten von Kommissionierern, wie in der folgenden Tabelle angegeben -

S.No. Registerkarten Typen & Beschreibung
1 Kommissionierer mit Einzelwert

Es ist eine leistungsstarke Komponente, mit der Sie beliebige Werte aus der Liste auswählen können.

2 Zwei Werte und 3D-Rotationseffekt

In der Auswahl können Sie für 3D-Dreheffekt verwenden.

3 Abhängige Werte

Die Werte für das angegebene Element sind voneinander abhängig.

4 Benutzerdefinierte Symbolleiste

Sie können eine oder mehrere Auswahlmöglichkeiten auf einer Seite zum Anpassen verwenden.

5 Inline Picker / Datum / Uhrzeit

Sie können die Anzahl der Werte in der Inline-Auswahl auswählen. Das gleiche Datum hat Datum, Monat, Jahr und die Uhrzeit Stunden, Minuten, Sekunden.

Beschreibung

Mit der Kalenderkomponente können Sie Datumsangaben einfach verarbeiten und als Inline- oder Overlay-Komponente verwenden. Der Overlay-Kalender wird auf Tablets automatisch in Popover konvertiert.

Der Kalender kann nur mit JavaScript erstellt und initialisiert werden. Sie müssen die Methode der zugehörigen App wie unten gezeigt verwenden -

  • myApp.calendar(parameters)- Diese Methode gibt die initialisierte Kalenderinstanz zurück. Es akzeptiert ein Objekt als Parameter.

Die folgende Tabelle zeigt die Kalenderverwendung in Framework7 -

S.No. Verwendung und Beschreibung des Kalenders
1 Kalenderparameter

Framework7 bietet eine Liste von Parametern, die mit dem Kalender verwendet werden.

2 Kalendermethoden und -eigenschaften

Sobald Sie den Kalender initialisiert haben, erhalten Sie eine initialisierte Instanzvariable zur Verwendung der Kalendermethoden und -eigenschaften.

3 Zugriff auf die Kalenderinstanz

Sie können von ihrem HTML-Container aus auf die Kalenderinstanz zugreifen, wenn Sie den Kalender als Inline initialisieren.

Beschreibung

Es ist eine spezielle Komponente, mit der der Seiteninhalt durch Ziehen aktualisiert (neu geladen) wird.

Der folgende Code zeigt, wie der Seiteninhalt aktualisiert wird:

<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>

Die folgenden Klassen werden beim Aktualisieren verwendet -

  • page-content- Es verfügt über eine zusätzliche Pull-to-Refresh-Inhaltsklasse , die erforderlich ist, damit das Pull aktualisiert werden kann.

  • pull-to-refresh-layer- Es handelt sich um eine verborgene Ebene, die zum Aktualisieren des visuellen Elements verwendet wird. Es handelt sich lediglich um einen Preloader und einen Pfeil.

  • data-ptr-distance = "55" - Dies ist ein zusätzliches Attribut, mit dem Sie die benutzerdefinierte Triggerentfernung "Pull to Refresh" festlegen können. Der Standardwert ist 44px.

Zum Aktualisieren von Ereignissen ziehen

In 'Zum Aktualisieren ziehen' gibt es einige JavaScript-Ereignisse, die in der folgenden Tabelle aufgeführt sind:

S.No. Eventbeschreibung Ziel
1

pullstart

Es wird ausgelöst, wenn Sie mit dem Ziehen beginnen, um Inhalte zu aktualisieren.

Zum Aktualisieren von Inhalten ziehen.

<div class = "pull-to-refresh-content">
2

pullmove

Es wird ausgelöst, wenn Sie ziehen, um Inhalte zu aktualisieren.

Zum Aktualisieren von Inhalten ziehen.

<div class="pull-to-refresh-content">
3

pullend

Es wird ausgelöst, wenn Sie Pull loslassen, um Inhalte zu aktualisieren.

Zum Aktualisieren von Inhalten ziehen.

<div class="pull-to-refresh-content">
4

refresh

Dieses Ereignis wird ausgelöst, wenn der Pull-to-Refresh in den Status "Refreshing" wechselt .

Zum Aktualisieren von Inhalten ziehen.

<div class="pull-to-refresh-content">
5

refreshdone

Es wird ausgelöst, nachdem es aktualisiert wurde und in den Ausgangszustand zurückkehrt. Dies erfolgt nach dem Aufruf der pullToRefreshDone- Methode.

Zum Aktualisieren von Inhalten ziehen.

<div class="pull-to-refresh-content">

Es gibt App-Methoden, die mit Pull to Refresh verwendet werden können.

S.No. Methoden und Beschreibung der App
1

myApp.pullToRefreshDone(ptrContent)

Es wird verwendet, um Pull-to-Refresh- Inhalte zurückzusetzen.

2

myApp.pullToRefreshTrigger(ptrContent)

Es wird zum Auslösen einer Aktualisierung bei angegebenem Pull ausgelöst , um den Inhalt zu aktualisieren .

3

myApp.destroyPullToRefresh(ptrContent)

Es wird verwendet, um Pull zu zerstören / zu deaktivieren , um bei angegebenem Pull zu aktualisieren, um Inhalte zu aktualisieren .

4

myApp.initPullToRefresh(ptrContent)

Es wird verwendet, um Pull zu initialisieren / zu aktivieren , um Inhalte zu aktualisieren .

Wobei ptrContent für HTMLElement oder String verwendet wird , um Inhalte zum Zurücksetzen / Auslösen oder Deaktivieren / Aktivieren abzurufen .

Beispiel

Das folgende Beispiel zeigt die Verwendung einer Aktualisierungskomponente, die die Aktualisierung eines Seiteninhalts initiiert.

<!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>

Ausgabe

Lassen Sie uns die folgenden Schritte ausführen, um zu sehen, wie der oben angegebene Code funktioniert:

  • Speichern Sie den oben angegebenen HTML-Code als pull_to_refresh.html Datei in Ihrem Server-Stammordner.

  • Öffnen Sie diese HTML-Datei als http: //localhost/pull_to_refresh.html und die Ausgabe wird wie unten gezeigt angezeigt.

  • Wenn der Benutzer nach unten zieht, wird die Seite mit dem Inhalt aktualisiert.

Beschreibung

Mit der unendlichen Schriftrolle können Sie zusätzlichen Inhalt laden und die erforderlichen Aktionen ausführen, wenn sich die Seite ganz unten befindet.

Das folgende HTML-Layout zeigt die unendliche Schriftrolle -

<div class = "page">
   <div class = "page-content infinite-scroll" data-distance = "100">
      ...
   </div>
</div>

Das obige Layout enthält die folgenden Klassen:

  • page-content infinite-scroll - Es wird für unendliche Bildlaufcontainer verwendet.

  • data-distance - Mit diesem Attribut können Sie den Abstand vom Ende der Seite (in px) konfigurieren, um ein unendliches Bildlaufereignis auszulösen. Der Standardwert ist 50px.

Wenn Sie die Seite unendliche Scroll oben verwenden möchten, müssen Sie zusätzliche hinzufügen „unendlich-Scroll-top“ Klasse „page-content“ -

<div class = "page">
   <div class = "page-content infinite-scroll infinite-scroll-top">
      ...
   </div>
</div>

Unendliche Bildlaufereignisse

infinite- Wird zum Auslösen verwendet, wenn der Seitenlauf den angegebenen Abstand nach unten erreicht. Es wird von div class = "Seiteninhalt Infinite-Scroll" als Ziel ausgewählt .

Es gibt zwei Methoden der App, die mit einem unendlichen Bildlaufcontainer verwendet werden können:

Verwenden Sie die folgende Methode, um dem angegebenen HTML-Container einen Listener für unendliche Bildlaufereignisse hinzuzufügen:

myApp.attachInfiniteScroll(container)

Sie können den Listener für unendliche Bildlaufereignisse mithilfe der folgenden Methode aus dem angegebenen HTML-Container entfernen:

myApp.detachInfiniteScroll(container)

Wo Parameter erforderlich sind, werden Optionen als HTMLElement oder Zeichenfolge für einen unendlichen Bildlaufcontainer verwendet .

Beispiel

Das folgende Beispiel zeigt den unendlichen Bildlauf, der den zusätzlichen Inhalt lädt, wenn sich der Seitenlauf nahe am unteren Rand befindet.

<!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>

Ausgabe

Lassen Sie uns die folgenden Schritte ausführen, um zu sehen, wie der oben angegebene Code funktioniert:

  • Speichern Sie den oben angegebenen HTML-Code als infinite_scroll.html Datei in Ihrem Server-Stammordner.

  • Öffnen Sie diese HTML-Datei als http: //localhost/infinite_scroll.html und die Ausgabe wird wie unten gezeigt angezeigt.

  • In diesem Beispiel können Sie zusätzlichen Inhalt laden, wenn Ihr Bildlauf den angegebenen Abstand zum unteren Rand erreicht.

Beschreibung

Nachrichten sind Bestandteil von Framework7, mit dem Kommentare und das Nachrichtensystem in der Anwendung visualisiert werden können.

Nachrichtenlayout

Das Framework7 hat die folgende Nachrichtenlayoutstruktur:

<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>

Das Layout enthält die folgenden Klassen in verschiedenen Bereichen -

Seitenlayout für Nachrichten

Die folgende Tabelle zeigt das Seitenlayout der Klassen von Nachrichten mit Beschreibung.

S.No. Klassen & Beschreibung
1

messages-content

Es ist eine erforderliche zusätzliche Klasse, die zu "Seiteninhalt" hinzugefügt und für den Nachrichten-Wrapper verwendet wird.

2

messages

Es ist ein erforderliches Element für Nachrichtenblasen.

3

messages-date

Es verwendet einen Datumsstempelcontainer, um Datum und Uhrzeit der gesendeten oder empfangenen Nachricht anzuzeigen.

4

message

Es ist eine einzelne Nachricht, die angezeigt werden soll.

Innenteile für einzelne Nachrichten

Die folgende Tabelle zeigt die Klassen der inneren Teile einfacher Nachrichten mit Beschreibung.

S.No. Klassen & Beschreibung
1

message-name

Es gibt den Absendernamen an.

2

message-text

Definieren Sie den Text mit dem Blasentyp.

3

message-avatar

Es gibt den Absender-Avatar an.

4

message-label

Es gibt die Textbezeichnung unter der Blase an.

Zusätzliche Klassen für Single Message Container

Die folgende Tabelle zeigt zusätzliche Klassen für die Beschreibung eines einzelnen Nachrichtencontainers.

S.No. Klassen & Beschreibung
1

message-sent

Es gibt an, dass die Nachricht vom Benutzer gesendet wurde und auf der rechten Seite mit grüner Hintergrundfarbe angezeigt wird.

2

message-received

Es wird zum Anzeigen der einzelnen Nachricht verwendet, die angibt, dass die Nachricht vom Benutzer empfangen wurde und auf der linken Seite mit grauer Hintergrundfarbe bleibt.

3

message-pic

Es ist eine zusätzliche Klasse zum Anzeigen von Bildern mit einer einzelnen Nachricht.

4

message-with-avatar

Es ist eine zusätzliche Klasse zum Anzeigen einer einzelnen Nachricht (empfangen oder gesendet) mit Avatar.

5

message-with-tail

Sie können einen Bubble Tail für eine einzelne Nachricht (empfangen oder gesendet) hinzufügen.

Zusätzliche verfügbare Klassen für einzelne Nachrichten

Die folgende Tabelle zeigt die verfügbaren Klassen für eine einzelne Nachricht mit Beschreibung.

S.No. Klassen & Beschreibung
1

message-hide-name

Es ist eine zusätzliche Klasse zum Ausblenden des Nachrichtennamens für eine einzelne Nachricht (empfangen oder gesendet).

2

message-hide-avatar

Es ist eine zusätzliche Klasse zum Ausblenden des Nachrichtenavatars für eine einzelne Nachricht (empfangen oder gesendet).

3

message-hide-label

Es ist eine zusätzliche Klasse zum Ausblenden der Nachrichtenbezeichnung für eine einzelne Nachricht (empfangen oder gesendet).

4

message-last

Mit dieser Klasse können Sie die zuletzt empfangene oder gesendete Nachricht in der aktuellen Konversation eines Absenders für eine einzelne Nachricht (empfangen oder gesendet) angeben.

5

message-first

Mit dieser Klasse können Sie die erste empfangene oder zuerst gesendete Nachricht in der aktuellen Konversation eines Absenders für eine einzelne Nachricht (empfangen oder gesendet) angeben.

Nachrichten mit JavaScript initialisieren

Sie können die Nachrichten mit JavaScript mithilfe der folgenden Methode initialisieren:

myApp.messages(messagesContainer, parameters)

Die Methode hat zwei Möglichkeiten -

  • messagesContainer - Es ist ein erforderliches HTML-Element oder eine Zeichenfolge, die das HTML-Element des Nachrichtencontainers enthält.

  • parameters - Es gibt ein Objekt mit Nachrichtenparametern an.

Nachrichtenparameter

Die folgende Tabelle zeigt die Parameter von Nachrichten mit Beschreibung.

S.No. Parameter & Beschreibung Art Standard
1

autoLayout

Durch Aktivieren werden jeder Nachricht zusätzliche erforderliche Klassen hinzugefügt.

Boolescher Wert wahr
2

newMessagesFirst

Sie können die Nachricht oben anstatt unten anzeigen, indem Sie sie aktivieren.

Boolescher Wert falsch
3

messages

Es zeigt ein Array von Nachrichten an, in denen jede Nachricht als Objekt mit Nachrichtenparametern dargestellt werden soll.

Array - -
4

messageTemplate

Es zeigt die einzelne Nachrichtenvorlage an.

Zeichenfolge - -

Nachrichteneigenschaften

Die folgende Tabelle zeigt die Eigenschaften von Nachrichten mit Beschreibung.

S.No. Objektbeschreibung
1

myMessages.params

Sie können die übergebenen Parameter mit object initialisieren.

2

myMessages.container

Definiert das DOM7-Element mit einem HTML-Container in der Nachrichtenleiste.

Nachrichten Methoden

Die folgende Tabelle zeigt die Methoden von Nachrichten mit Beschreibung.

S.No. Methode & Beschreibung
1

myMessages.addMessage(messageParameters, method, animate);

Die Nachricht kann mithilfe des Methodenparameters am Anfang oder am Ende hinzugefügt werden.

Es hat die folgenden Parameter -

  • messageParameters - Es bietet Nachrichtenparameter zum Hinzufügen.

  • method - Es handelt sich um einen Zeichenfolgentyp, der Nachrichten am Anfang oder am Ende des Nachrichtencontainers hinzufügt.

  • animate- Es handelt sich um einen booleschen Typ, der eine Nachricht ohne Übergang oder Bildlaufanimation hinzufügt, indem sie auf false gesetzt wird. Standardmäßig ist dies der Fall.

2

myMessages.appendMessage(messageParameters, animate);

Es wird eine Nachricht am Ende des Nachrichtencontainers hinzugefügt.

3

myMessages.prependMessage(messageParameters, animate);

Es wird eine Nachricht am Anfang des Nachrichtencontainers hinzugefügt.

4

myMessages.addMessages(messages, method, animate);

Sie können mehrere Nachrichten gleichzeitig hinzufügen.

Es hat den folgenden Parameter -

  • messages - Es bietet eine Reihe von hinzuzufügenden Nachrichten, die als Objekt mit Nachrichtenparametern dargestellt werden sollen.

5

myMessages.removeMessage(message);

Es wird verwendet, um die Nachricht zu entfernen.

Es hat den folgenden Parameter -

  • message - Es ist ein erforderliches HTML-Element oder eine Zeichenfolge, die das Nachrichtenelement entfernt.

6

myMessages.removeMessages(messages);

Sie können die mehreren Nachrichten entfernen.

Es hat den folgenden Parameter -

  • messages - Es ist ein erforderliches Array mit HTML-Elementen oder Zeichenfolgen, das die Nachrichten entfernt.

7

myMessages.scrollMessages();

Sie können Nachrichten je nach dem ersten Parameter der neuen Nachricht von oben nach unten und umgekehrt scrollen.

8

myMessages.layout();

Das automatische Layout kann auf die Nachrichten angewendet werden.

9

myMessages.clean();

Es wird verwendet, um die Nachrichten zu bereinigen.

10

myMessages.destroy();

Es wird verwendet, um die Nachrichten zu zerstören.

Einzelne Nachrichtenparameter

Die folgende Tabelle zeigt die Parameter für eine einzelne Nachricht mit Beschreibung.

S.No. Parameter & Beschreibung Art Standard
1

text

Es definiert den Nachrichtentext, bei dem es sich um eine HTML-Zeichenfolge handeln kann.

Zeichenfolge - -
2

name

Es gibt den Absendernamen an.

Zeichenfolge - -
3

avatar

Es gibt die URL-Zeichenfolge des Absender-Avatars an.

Zeichenfolge - -
4

time

Es gibt die Zeitzeichenfolge der Nachricht wie "9:45 Uhr", "18: 35" an.

Zeichenfolge - -
5

type

Es gibt einen Nachrichtentyp an, unabhängig davon, ob eine Nachricht gesendet oder empfangen werden kann.

Zeichenfolge geschickt
6

label

Es definiert die Bezeichnung der Nachricht.

Zeichenfolge - -
7

day

Es gibt die Tageszeichenfolge der Nachricht wie "Sonntag", "Montag", "Gestern" usw. an.

Zeichenfolge - -

Nachrichten mit HTML initialisieren

Sie können die Nachrichten mit HTML ohne JavaScript initialisieren, indem Sie die zusätzliche Klasse messages-init für Nachrichten verwenden und die erforderlichen Datenattribute verwenden , um die erforderlichen Parameter zu übergeben, wie im unten angegebenen Codeausschnitt gezeigt.

...
   <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>
...

Beispiel

Das folgende Beispiel zeigt die Verwendung von Nachrichten in 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>

Ausgabe

Lassen Sie uns die folgenden Schritte ausführen, um zu sehen, wie der oben angegebene Code funktioniert:

  • Speichern Sie den oben angegebenen HTML-Code als messages.html Datei in Ihrem Server-Stammordner.

  • Öffnen Sie diese HTML-Datei als http: //localhost/messages.html und die Ausgabe wird wie unten gezeigt angezeigt.

  • Wenn Sie eine Nachricht in das Nachrichtenfeld eingeben und auf die Schaltfläche Senden klicken, wird angegeben, dass Ihre Nachricht gesendet wurde und auf der rechten Seite mit grüner Hintergrundfarbe angezeigt wird.

  • Die Nachricht, die Sie erhalten, wird auf der linken Seite mit dem grauen Hintergrund zusammen mit dem Absendernamen angezeigt.

Beschreibung

Framework7 bietet eine spezielle Symbolleiste mit veränderbarer Größe, um mit dem Messagingsystem in der Anwendung zu arbeiten.

Der folgende Code zeigt das Layout der Nachrichtenleiste -

<div clas = "toolbar messagebar">
   <div clas = "toolbar-inner">
      <textarea placeholder = "Message"></textarea>
      <a href = "#" clas = "link">Send</a>
   </div>
</div>

In der Nachrichtenleiste ist das Innere der "Seite" sehr wichtig und befindet sich rechts neben "Nachrichteninhalt" -

<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>

Mit der folgenden Methode können Sie die Nachrichtenleiste mit JavaScript initialisieren:

myApp.messagesbar(messagesbarContainer, parameters)

Die Methode hat zwei Möglichkeiten -

  • messagesbarContainer - Es ist ein erforderliches HTML-Element oder eine Zeichenfolge, die das HTML-Element des Nachrichtenleistencontainers enthält.

  • parameters - Es gibt ein Objekt mit Nachrichtenleistenparametern an.

Zum Beispiel -

var myMessagebar = app.messagebar('.messagebar', {
   maxHeight: 200
});

Messagebar-Parameter

maxHeight- Es wird verwendet, um die maximale Höhe des Textbereichs festzulegen. Die Größe wird abhängig von der Textmenge geändert. Der Parametertyp ist number und der Standardwert ist null .

Eigenschaften der Nachrichtenleiste

Die folgende Tabelle zeigt die Eigenschaften der Nachrichtenleiste -

S.No. Eigenschaften & Beschreibung
1

myMessagebar.params

Sie können ein Objekt mit übergebenen Initialisierungsparametern angeben.

2

myMessagebar.container

Sie können das dom7-Element mit dem HTML-Element des Nachrichtenleistencontainers angeben.

3

myMessagebar.textarea

Sie können das dom7-Element mit dem HTML-Element textbarea der Nachrichtenleiste angeben.

Messagebar-Methoden

Die folgende Tabelle zeigt die Messagebar-Methoden -

S.No. Methoden & Beschreibung
1

myMessagebar.value(newValue);

Es legt den Textbereichswert / den Text der Nachrichtenleiste fest und gibt den Textbereichswert der Nachrichtenleiste zurück, wenn newValue ist nicht angegeben.

2

myMessagebar.clear();

Es löscht den Textbereich und aktualisiert / setzt die Größe zurück.

3

myMessagebar.destroy();

Es zerstört die Instanz der Nachrichtenleiste.

Nachrichtenleiste mit HTML initialisieren

Sie können die Nachrichtenleiste mithilfe von HTML ohne JavaScript-Methoden und -Eigenschaften initialisieren, indem Sie die Klasse messagebar -init zur Nachrichtenleiste hinzufügen, und Sie können die erforderlichen Parameter mithilfe von Datenattributen übergeben .

Der folgende Code gibt die Initialisierung der Nachrichtenleiste mit HTML an -

<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>

Zugriff auf die Instanz der Nachrichtenleiste

Sie können auf die Nachrichtenleisteninstanz zugreifen, wenn Sie sie mithilfe von HTML initialisieren. Dies wird erreicht, indem die Eigenschaft f7 Message Bar des Containerelements verwendet wird.

var myMessagebar = $$('.messagebar')[0].f7Messagebar;
// Now you can use it
myMessagebar.value('Hello world');

Sie können das Beispiel der Nachrichtenleiste sehen, das in diesem Link erläutert wird

Beschreibung

Benachrichtigungen werden verwendet, um die erforderlichen Nachrichten anzuzeigen, die wie Push- (oder lokale) iOS-Benachrichtigungen angezeigt werden.

Die folgende Tabelle zeigt die Verwendung von Benachrichtigungen im Detail -

S.No. Verwendung und Beschreibung von Benachrichtigungen
1 Benachrichtigungen JavaScript API

Die Benachrichtigungen können auch mit JavaScript mithilfe der zugehörigen App-Methoden hinzugefügt oder geschlossen werden.

2 Benachrichtigungslayout

Framework7-Benachrichtigungen werden mithilfe von JavaScript hinzugefügt.

3 Beispiel iOS

Mit Framework7 können Sie verschiedene Arten von Benachrichtigungen in Ihrem iOS-Layout verwenden.

4 Beispielmaterial

Framework7-Benachrichtigungen können auch im Materiallayout verwendet werden.

Beschreibung

Das verzögerte Laden verzögert das Laden von Bildern auf einer bestimmten Seite. Das verzögerte Laden verbessert die Bildlaufleistung, beschleunigt das Laden von Seiten und spart Datenverkehr.

Lazy Load-Elemente und Bilder müssen sich innerhalb des scrollbaren <div class = "page-content"> befinden, damit sie ordnungsgemäß funktionieren.

Die folgende Tabelle zeigt die Verwendung von Lazy Load -

S.No. Lazy Load Use & Beschreibung
1 Verwendung

Die verzögerte Last kann auf Bilder, Hintergrundbilder und mit Einblendeffekt angewendet werden.

2 Manuelles Laden von Lazy Load

Wenn Sie nach dem Initialisieren einer Seite Bilder zum verzögerten Laden manuell hinzufügen, funktioniert das verzögerte Laden nicht und Sie müssen Methoden zum Initialisieren verwenden.

Es ist möglich, das Laden von Bildern manuell auszulösen, indem Sie ein verzögertes Ereignis für ein verzögertes Bild / Element verwenden (siehe unten).

$$('img.lazy').trigger('lazy');

$$('div.lazy').trigger('lazy');

Beispiel

Das folgende Beispiel zeigt die Verwendung des verzögerten Ladens in 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>

Ausgabe

Lassen Sie uns die folgenden Schritte ausführen, um zu sehen, wie der oben angegebene Code funktioniert:

  • Speichern Sie den oben angegebenen HTML-Code als framework7_lazy_load.html Datei in Ihrem Server-Stammordner.

  • Öffnen Sie diese HTML-Datei als http: //localhost/framework7_lazy_load.html und die Ausgabe wird wie unten gezeigt angezeigt.

  • Das Beispiel gibt das verzögerte Laden von Bildern an, bei denen Bilder auf die Seite geladen werden, wenn Sie sie nach unten scrollen.

Beschreibung

Framework7 bietet verschiedene Farbthemen für Ihre Anwendungen.

Ein Farbthema bietet verschiedene Arten von Themenfarben, die für die reibungslose Arbeit mit den Anwendungen verwendet werden, wie in der folgenden Tabelle angegeben.

S.No. Thementyp & Beschreibung
1 iOS-Themenfarben

Sie können 10 verschiedene Standard-iOS-Farbthemen für die Anwendung verwenden.

2 Materialthema Farben

Framework7 bietet 22 verschiedene Standardfarben für Materialfarben für die Anwendung.

Anwenden von Farbthemen

Mit Framework7 können Sie Farbthemen auf verschiedene Elemente wie Seite, Listenblock, Navigationsleiste, Schaltflächenzeile usw. anwenden, indem Sie die Klasse theme- [color] auf das übergeordnete Element anwenden .

Beispiel

...
</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>

Layout-Themen

Sie können das Standardlayout-Design für Ihre Anwendung verwenden, indem Sie zwei Themen verwenden: Weiß und Dunkel . Die Themen können mithilfe der Klasse layout- [theme] auf das übergeordnete Element angewendet werden .

Beispiel

...
</body>

<div class = "navbar layout-white">
   ...
</div>

<div class = "buttons-row layout-dark">
   ...
</div>

Helferklassen

Framework7 bietet zusätzliche Hilfsklassen, die außerhalb oder ohne Themen verwendet werden können, wie unten aufgeführt -

  • color-[color] - Es kann verwendet werden, um die Textfarbe des Blocks oder die Farbe der Schaltfläche, des Links, des Symbols usw. zu ändern.

  • bg-[color] - Legt die vordefinierte Hintergrundfarbe für den Block oder das Element fest.

  • border-[color] - Legt die vordefinierte Rahmenfarbe für den Block oder das Element fest.

Beschreibung

Hairline ist eine Klasse, die mithilfe der Rahmenklasse einen 1-Pixel-Rand um die Bilder hinzufügt. Mit der Veröffentlichung von 1.x haben die Fluggesellschaften die Arbeit mit : nach und : vor Pseudoelementen überarbeitet, anstatt CSS-Rahmen zu verwenden.

Haarlinien enthält die folgenden Regeln -

  • :after- Dieses Pseudoelement wird für untere und rechte Haarlinien verwendet.

  • :before- Dieses Pseudoelement wird für obere und linke Haarlinien verwendet.

Das folgende Code-Snippet zeigt die Verwendung von : after- Element.

.navbar:after {
   background-color: red;
}

Das folgende Codefragment entfernt die untere Haarlinien-Symbolleiste -

.navbar:after {
   display:none;
}

.toolbar:before {
   display:none;
}

"No-Border" -Klasse

Der Haaransatz wird mithilfe der No-Border- Klasse entfernt und auf der Navigationsleiste, der Symbolleiste, der Karte und ihren Elementen unterstützt.

Der folgende Code wird verwendet, um den Haaransatz von der Navigationsleiste zu entfernen:

<div class = "navbar no-border">
   ...
</div>

Beschreibung

Template7 ist eine leichtgewichtige JavaScript-Engine für Mobilgeräte, die Ajax und dynamische Seiten als Template7-Vorlagen mit angegebenem Kontext darstellt und keine zusätzlichen Skripts erfordert. Template7 ist Framework7 als standardmäßige, leichtgewichtige Template-Engine zugeordnet, die für Anwendungen schneller funktioniert.

Performance

Das Kompilieren der Zeichenfolge in die JS-Funktion ist das langsamste Segment von template7. Daher müssen Sie die Vorlage nicht mehrmals kompilieren, nur einmal ist ausreichend.

//Here initialize the app
var myApp = new Framework7();

// After initializing compile templates on app
var searchTemplate = $('script#search-template').html();
var compiledSearchTemplate = Template7.compile(searchTemplate);

var listTemplate = $('script#list-template').html();
var compiledListTemplate = Template7.compile(listTemplate);

// Execute the compiled templates with required context using onPageInit() method
myApp.onPageInit('search', function (page) {

   // Execute the compiled templates with required content
   var html = compiledSearchTemplate({/*...some data...*/});

   // Do stuff with html
});

Template7 ist eine einfache Template-Engine, die als eigenständige Bibliothek ohne Framework7 verwendet wird. Die Template7-Dateien können auf zwei Arten installiert werden:

  • Sie können aus dem Template7- Github-Repository herunterladen .

  • Oder

  • Sie können es mit dem folgenden Befehl über Bower installieren -

bower install template7

Beschreibung

In Template7 können Sie Ihre Vorlagen automatisch kompilieren, indem Sie spezielle Attribute in einem <script> -Tag angeben.

Der folgende Code zeigt das Layout der automatischen Kompilierung -

<script type = "text/template7" id = "myTemplate">
   <p>Hello, my name is {{name}} and i am {{age}} years old</p>
</script>

Sie können die folgenden Attribute zum Initialisieren der automatischen Kompilierung verwenden:

  • type = "text/template7" - Es wird verwendet, um Template7 anzuweisen, automatisch zu kompilieren, und es ist ein erforderlicher Skripttyp.

  • id = "myTemplate" - Auf die Vorlage kann über die ID zugegriffen werden, und es handelt sich um eine erforderliche Vorlagen-ID.

Für die automatische Kompilierung müssen Sie die App-Initialisierung aktivieren, indem Sie den folgenden Parameter übergeben:

var myApp = new Framework7 ({
   //It is used to compile templates on app init in Framework7
   precompileTemplates: true,
});

Template7.templates / myApp.templates

Auf die automatisch kompilierten Vorlagen kann nach der Initialisierung der App als Eigenschaften von Template7.templates zugegriffen werden . Es wird auch als myApp.templates bezeichnet, wobei myApp eine initialisierte Instanz der App ist.

Sie können die folgenden Vorlagen in unserer Datei index.html verwenden:

<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>

Sie können auch nach der App-Initialisierung auf Vorlagen in JavaScript zugreifen.

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
});

Beschreibung

Vorlage7 ist eine mobile-first JavaScript Template - Engine mit handlebars.js wie Syntax. Es ist eine ultraleichte und blitzschnelle Standardvorlagen-Engine in Framework7.

Zuerst müssen wir den folgenden Parameter bei der App-Initialisierung übergeben, der alle Ajax- und dynamischen Seiten als Template7-Vorlage rendert:

var myApp = new Framework7 ({
   template7Pages: true // enable Template7 rendering for Ajax and Dynamic pages
});
S.No. Template7 Pages Verwendung & Beschreibung
1 Vorlagen / Seitendaten

Sie können die erforderlichen Daten / den Kontext für bestimmte Seiten übergeben, indem Sie alle Seitendaten im Parameter template7Data angeben, der beim Initialisieren einer App gesendet wird.

2 Benutzerdefinierten Kontext übergeben

Mit Framework7 können Sie benutzerdefinierten Kontext an jede dynamische Seite oder jedes geladene Ajax übergeben.

3 Vorlagen direkt laden

Sie können Vorlagen im laufenden Betrieb als dynamische Seiten rendern und laden.

4 URL-Abfrage

Wenn Sie Template7 zum Rendern von Ajax-Seiten verwenden, wird der Kontext immer um die spezielle Eigenschaft url_query erweitert .

Beispiel

Das folgende Beispiel enthält die Links, in denen die Benutzerinformationen wie Benutzerdetails, Benutzerwünsche usw. angezeigt werden, wenn Sie auf diese Links klicken.

index.html

<!DOCTYPE html>
<html>

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

   <body>
      <div class = "views">
         <div class = "view view-main">
            
            <div class = "navbar">
               <div class = "navbar-inner">
                  <div class = "center sliding">Template7 Pages</div>
               </div>
            </div>
            
            <div class = "pages navbar-through toolbar-through">
               <div data-page = "index" class = "page">
                  <div class = "page-content">
                     <div class = "list-block">
                        <ul>
                           <li>
                              //plain data objects allow to pass custom context to loaded page using 'data-context-name' attribute
                              <a href = "#" data-template = "about" data-context-name = "about" class = "item-link item-content">
                                 <div class = "item-inner">
                                    //provides link as 'About'
                                    <div class = "item-title">About</div>
                                 </div>
                              </a>
                           </li>
                           
                           <li>
                              //a context name for this link we pass context path from template7Data root
                              <a href = "/framework7/src/likes.html" class = "item-link item-content">
                                 <div class = "item-inner">
                                    //provides link as 'Likes'
                                    <div class = "item-title">Likes</div>
                                 </div>
                              </a>
                           </li>
                        </ul>
                     </div>
                  </div>
               </div>
            </div>
            
         </div>
      </div>
      
      <script type = "text/template7" id = "about">
         <div class = "navbar">
            <div class = "navbar-inner">
               <div class = "left sliding">
                  <a href = "#" class = "back link"> <i class = "icon icon-back"></i><span>Back</span></a>
               </div>
            
               <div class = "center sliding">About Me</div>
               <div class = "right">
                  <a href = "#" class = "link icon-only open-panel"> <i class = "icon icon-bars"></i></a>
               </div>
            </div>
         </div>
         
         <div class = "pages">
            <div data-page = "about" class = "page">
               <div class = "page-content">
                  <div class = "content-block">
                     <div class = "content-block-inner">
                        //displays the details of the user by using the 'my-app.js' file
                        <p>Hello, i am <b>{{firstname}} {{lastname}}</b>, 
                           <b>{{age}}</b> years old and working as 
                           <b>{{position}}</b> at <b>{{company}}</b>.</p>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </script>
      
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
         
      <script type = "text/javascript" 
         src = "/framework7/src/js/my-app.js">
      </script>
   </body>

</html>

my-app.js

// Initialize your app
var myApp = new Framework7 ({
   animateNavBackIcon: true,
   
   // Enable templates auto precompilation
   precompileTemplates: true,
   
   // Enabled rendering pages using Template7
   template7Pages: true,
   
   // Specify Template7 data for pages
   template7Data: {
      //provides the url for different page with data-page = "likes"
      'url:likes.html': {
         likes: [
            {
               title: 'Nelson Mandela',
               description: 'Champion of Freedom'
            },
            
            {
               title: 'Srinivasa Ramanujan',
               description: 'The Man Who Knew Infinity'
            },
            
            {
               title: 'James Cameron',
               description: 'Famous Filmmaker'
            }
         ]
      },
      about: {
         firstname: 'William ',
         lastname: 'Root',
         age: 27,
         position: 'Developer',
         company: 'TechShell',
      }
   }
});

// Add main View
var mainView = myApp.addView('.view-main', {
   // Enable dynamic Navbar
   dynamicNavbar: true
});

like.html

<div class = "navbar">
   <div class = "navbar-inner">
      <div class = "left sliding">
         <a href = "#" class = "back link"> <i class = "icon icon-back"></i><span>Back</span></a>
      </div>
      
      <div class = "center sliding">Likes</div>
      <div class = "right">
         <a href = "#" class = "link icon-only open-panel"> <i class = "icon icon-bars"></i></a>
      </div>
   </div>
</div>

<div class = "pages">
   <div data-page = "likes" class = "page">
      <div class = "page-content">
         <div class = "content-block-title">My Likes</div>
         <div class = "list-block media-list">
         
            //iterate through likes
            <ul>
               {{#each likes}}
                  <li class = "item-content">
                     <div class = "item-inner">
                        <div class = "item-title-row">
                           //displays the title and description by using the 'my-app.js' file
                           <div class = "item-title">{{title}}</div>
                        </div>
                        <div class = "item-subtitle">{{description}}</div>
                     </div>
                  </li>
               {{/each}}
            </ul>
         </div>
      </div>
   </div>
</div>

Ausgabe

Lassen Sie uns die folgenden Schritte ausführen, um zu sehen, wie der oben angegebene Code funktioniert:

  • Speichern Sie den oben angegebenen HTML-Code als index.html Datei in Ihrem Server-Stammordner.

  • Öffnen Sie diese HTML-Datei als http: //localhost/index.html und die Ausgabe wird wie unten gezeigt angezeigt.

  • Das Beispiel enthält die Links, in denen die Benutzerinformationen wie Benutzerdetails angezeigt werden, die dem Benutzer gefallen, wenn Sie auf diese Links klicken.

Beschreibung

Wenn Sie auf die Links und Schaltflächen tippen, werden diese hervorgehoben. Dies erfolgt durch den aktiven Status in Framework7.

  • Es verhält sich wie eine native App, nicht wie eine Web-App.
  • Es verfügt über eine integrierte Bibliothek für schnelle Klicks und sollte aktiviert sein.
  • Die Active-State- Klasse ist dieselbe wie der CSS : Active- Selektor.
  • Der aktive Status wird aktiviert, indem dem Element <html> die Klasse watch-active-state hinzugefügt wird .

Der folgende Code wird für den aktiven Status im CSS-Stil verwendet:

/* Usual state */
.my-button {
   color: red;
}

/* Active/tapped state */
.my-button.active-state {
   color: blue;
}

Der folgende Code zeigt die Fallback-Kompatibilität, wenn der Status "Aktiv" oder "Schnelle Klicks" deaktiviert ist.

/* 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;
}

Beschreibung

Das Tap-Hold-Ereignis wird verwendet, um nach einem anhaltenden und abgeschlossenen Touch-Ereignis auszulösen (zu aktivieren). Es wird also nur als Tap-Hold- Ereignis bezeichnet. Der Tab Hold ist ein eingebauterFast Clicks Bibliothek.

Die folgenden Parameter werden zum Deaktivieren oder Aktivieren verwendet und standardmäßig konfiguriert:

S.No. Parameter & Beschreibung Art Standard
1

tapHold

Zum Aktivieren von Tap Hold-Ereignissen, wenn diese auf true gesetzt sind.

Boolescher Wert falsch
2

tapHoldDelay

Es gibt die Dauer des Haltens des Tap an, bevor das Taphold-Ereignis für das Zielelement ausgelöst wird.

Nummer 750
3

tapHoldPreventClicks

Das Tap Hold-Ereignis wird nach dem Klicken auf das Ereignis nicht ausgelöst.

Boolescher Wert wahr

Der folgende Code wird zum Aktivieren von Tap-Hold-Ereignissen verwendet:

var myApp = new Framework7 ({
   tapHold: true //enable tap hold events
});
 
var $$ = Dom7;
 
$$('.some-link').on('taphold', function () {
   myApp.alert('Tap hold fired!');
});

Beschreibung

Touch Ripple ist ein Effekt, der nur im Framework7-Materialthema unterstützt wird. Standardmäßig ist es im Materialthema aktiviert und Sie können es mithilfe des Parameters materialRipple: false deaktivieren .

Welligkeitselemente

Sie können die Ripple-Elemente so aktivieren, dass sie mit einigen CSS-Selektoren übereinstimmen, z.

  • ripple
  • a.link
  • a.item-link
  • .button
  • .tab-link
  • .label-radio
  • .label-checkbox etc.

Diese werden im Parameter materialRippleElements angegeben. Sie müssen die Berührungswelligkeit aktivieren , den Selektor des Elements zum Parameter materialRippleElements hinzufügen , um den Welligkeitseffekt zu nutzen, oder einfach die Welligkeitsklasse verwenden .

Welligkeitsfarbe

Die Farbe der Welligkeit kann am Element geändert werden, indem dem Element die Welligkeitsklasse [Farbe] hinzugefügt wird .

Zum Beispiel -

<a href = "#" class = "button ripple-orange">Ripple Button</a>

oder Sie können die Welligkeitswellenfarbe mithilfe des unten gezeigten CSS definieren -

.button .ripple-wave {
   background-color: #FFFF00;
}

Deaktivieren Sie die Welligkeitselemente

Sie können die Welligkeit für einige angegebene Elemente deaktivieren, indem Sie diesen Elementen die No-Ripple- Klasse hinzufügen . Zum Beispiel -

<a href = "#" class = "button no-ripple">Ripple Button</a>