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 framework7Nach 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-cliDas 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 gulpStep 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 installStep 4 - Die Entwicklungsversion von Framework7 kann mit dem folgenden Befehl erstellt werden.
npm buildStep 5- Sobald Sie die Entwicklungsversion von Framework7 erstellt haben, starten Sie die App mit dem folgenden Befehl aus dist / folder.
npm distStep 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 serverLaden 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.
|
| 2 | myApp.hideProgressbar (contain er) | Der Fortschrittsbalken wird ausgeblendet.
|
| 3 | myApp.showProgressbar (contai ner, progress, color) | Es zeigt den Fortschrittsbalken 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: |
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. |
| 2 | pullmove Es wird ausgelöst, wenn Sie ziehen, um Inhalte zu aktualisieren. |
Zum Aktualisieren von Inhalten ziehen. |
| 3 | pullend Es wird ausgelöst, wenn Sie Pull loslassen, um Inhalte zu aktualisieren. |
Zum Aktualisieren von Inhalten ziehen. |
| 4 | refresh Dieses Ereignis wird ausgelöst, wenn der Pull-to-Refresh in den Status "Refreshing" wechselt . |
Zum Aktualisieren von Inhalten ziehen. |
| 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. |
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 -
|
| 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 -
|
| 5 | myMessages.removeMessage(message); Es wird verwendet, um die Nachricht zu entfernen. Es hat den folgenden Parameter -
|
| 6 | myMessages.removeMessages(messages); Sie können die mehreren Nachrichten entfernen. Es hat den folgenden Parameter -
|
| 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 .
Sie können es mit dem folgenden Befehl über Bower installieren -
Oder
bower install template7Beschreibung
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>