Framework7 - Guida rapida
Framework7 è un framework gratuito e open source per HTML mobile. Viene utilizzato per lo sviluppo di app mobili ibride o app Web per dispositivi iOS e Android.
Framework7 è stato introdotto nell'anno 2014. L'ultima versione 1.4.2 è stata rilasciata nel febbraio 2016 con licenza MIT.
Perché utilizzare Framework7?
- È più facile sviluppare app per iOS e Android.
- La curva di apprendimento per Framework7 è molto semplice.
- Ha molti widget / componenti predefiniti.
- Ha librerie di supporto integrate.
Caratteristiche
Framework7 è un framework open source e gratuito.
Framework7 ha una sintassi jQuery semplice e familiare per iniziare senza alcun ritardo.
Per controllare il ritardo del clic per le interfacce utente touch, Framework7 dispone della libreria FastClick incorporata .
Framework7 ha un layout di sistema a griglia integrato per organizzare i tuoi elementi in modo reattivo.
Framework7 carica dinamicamente le pagine dai modelli tramite l'API del router flessibile .
Vantaggi
Framework7 non dipende da alcuna libreria di terze parti anche per la manipolazione del DOM. Invece, ha il proprio DOM7 personalizzato.
Framework7 può essere utilizzato anche con framework Angular e React .
Puoi iniziare a creare app una volta che conosci HTML, CSS e alcuni JavaScript di base.
Supporta uno sviluppo più rapido tramite Bower .
È facile sviluppare app per iOS e Android senza impararlo.
Svantaggi
Framework7 supporta solo piattaforme come iOS e Android.
Il supporto della comunità online per il framework Framework7 è inferiore rispetto a iOS e Andriod.
In questo capitolo, discuteremo su come installare e configurare Framework7.
Puoi scaricare Framework7 in due modi:
Scarica dal repository Github Framework7
È possibile installare Framework7, utilizzando Bower come mostrato di seguito -
bower install framework7Dopo aver installato correttamente Framework7, è necessario seguire i passaggi indicati di seguito per utilizzare Framework7 nella propria applicazione:
Step 1 - Devi installare gulp-cli per creare versioni di sviluppo e dist di Framework7 utilizzando il comando seguente.
npm install gulp-cliIl cli sta per Command Line Utility per Gulp.
Step 2 - Il Gulp deve essere installato globalmente utilizzando il seguente comando.
npm install --global gulpStep 3- Successivamente, installa il gestore di pacchetti NodeJS, che installa i programmi del nodo che semplificano la specifica e il collegamento delle dipendenze. Il seguente comando viene utilizzato per installare npm.
npm installStep 4 - La versione di sviluppo di Framework7 può essere compilata utilizzando il seguente comando.
npm buildStep 5- Dopo aver creato la versione di sviluppo di Framework7, inizia a creare l'app dalla cartella dist / utilizzando il comando seguente.
npm distStep 6 - Mantieni la cartella della tua app nel server ed esegui il seguente comando per navigare tra le pagine della tua app.
gulp serverScarica la libreria Framework7 da CDN
Un CDN o Content Delivery Network è una rete di server progettati per fornire file agli utenti. Se si utilizza un collegamento CDN nella propria pagina Web, si sposta la responsabilità di ospitare i file dai propri server a una serie di quelli esterni. Questo offre anche un vantaggio che se un visitatore della tua pagina web ha già scaricato una copia di Framework7 dalla stessa CDN, non dovrà essere scaricata nuovamente. È possibile includere i seguenti file CDN nel documento HTML.
I seguenti CDN vengono utilizzati in un file iOS App layout -
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />Viene utilizzato per includere la libreria CSS iOS di Framework7 nella tua applicazione.
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />Viene utilizzato per includere gli stili di colore relativi a Framework7 iOS nell'applicazione.
I seguenti CDN vengono utilizzati in Android/Material App Layout -
<script src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>Viene utilizzato per includere la libreria JS Framework7 nell'applicazione.
<script src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.min.css"></script>Viene utilizzato per includere lo stile dei materiali Framework7 nella propria applicazione.
Stiamo utilizzando le versioni CDN della libreria durante questo tutorial. Usiamo il server AMPPS (AMPPS è uno stack WAMP, MAMP e LAMP di Apache, MySQL, MongoDB, PHP, Perl e Python) per eseguire tutti i nostri esempi.
Esempio
L'esempio seguente mostra l'uso di una semplice applicazione in Framework7, che visualizzerà la casella di avviso con il messaggio personalizzato quando si fa clic sulla barra di navigazione.
<!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>Quindi, crea un'altra pagina HTML, ad es envirmnt_about.html come mostrato di seguito -
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>Produzione
Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra indicato:
Salva il codice HTML sopra come framework7_environment.html file nella cartella principale del server.
Apri questo file HTML come http: //localhost/framework7_environment.html e l'output viene visualizzato come mostrato di seguito.
Quando si fa clic sulla barra di navigazione, verrà visualizzata la casella di avviso con il messaggio personalizzato.
Descrizione
Framework7 fornisce diversi tipi di layout per la tua applicazione. Supporta tre tipi di layout Navbar / Toolbar:
| S.No | Tipi di layout e descrizione |
|---|---|
| 1 | Layout statico Il layout statico è il tipo di layout utilizzato più spesso e include barra di navigazione e barra degli strumenti, che può essere un contenuto di pagina scorrevole e ogni pagina contiene la propria barra di navigazione e barra degli strumenti. |
| 2 | Layout fisso Il layout fisso include la propria barra di navigazione e barra degli strumenti, che possono essere visibili sullo schermo e non possono essere scorrevoli sulla pagina. |
| 3 | Attraverso il layout In questo layout, la barra di navigazione e la barra degli strumenti appaiono fisse per tutte le pagine all'interno di un'unica vista. |
| 4 | Layout misto È possibile combinare i diversi tipi di layout in un'unica visualizzazione. |
Nessuna barra di navigazione / barra degli strumenti
Se non si desidera utilizzare la barra di navigazione e la barra degli strumenti, non includere le classi appropriate ( fissata con la barra di navigazione , con la barra di navigazione , fissata con la barra degli strumenti , con la barra degli strumenti ) a pagina / pagine / visualizzazione.
Descrizione
In questo capitolo, studiamo la barra di navigazione . Di solito è posizionato nella parte superiore di una schermata contenente il titolo della pagina e gli elementi di navigazione.
La barra di navigazione è composta da tre parti, ciascuna delle quali può contenere qualsiasi contenuto HTML, ma si consiglia di utilizzarle nel modo indicato di seguito:
Left- È progettato per posizionare icone di collegamento a ritroso o collegamento di testo singolo.
Center - Viene utilizzato per visualizzare il titolo della pagina o i collegamenti delle schede.
Right- Questa parte è simile alla parte sinistra .
La tabella seguente mostra in dettaglio l'uso della barra di navigazione :
| S.No | Tipi e descrizione della barra di navigazione |
|---|---|
| 1 | Barra di navigazione di base È possibile creare una navbar di base utilizzando le classi navbar , navbar-inner , left , center e right . |
| 2 | Navbar con collegamenti Per utilizzare i collegamenti nella parte sinistra e destra della barra di navigazione, aggiungi semplicemente il tag <a> con il collegamento alla classe . |
| 3 | Collegamenti multipli Per utilizzare più link, aggiungine semplicemente altri <a class = "link"> alla parte di tua scelta. |
| 4 | Collegamenti con testo e icone I collegamenti possono essere forniti con icone e testi aggiungendo classi per icone e avvolgendo il testo del collegamento con l' elemento <span> . |
| 5 | Collegamenti con sole icone I collegamenti della barra di navigazione possono essere forniti solo con icone aggiungendo una classe di sole icone ai collegamenti. |
| 6 | App e metodi di visualizzazione correlati All'inizializzazione della vista , framework7 consente di utilizzare i metodi disponibili per la barra di navigazione. |
| 7 | Nascondi automaticamente la barra di navigazione La barra di navigazione può essere nascosta / mostrata automaticamente per alcune pagine caricate con Ajax in cui la barra di navigazione non è richiesta. |
Descrizione
La barra degli strumenti fornisce un facile accesso ad altre pagine utilizzando gli elementi di navigazione nella parte inferiore dello schermo.
È possibile utilizzare la barra degli strumenti in due modi, come specificato nella tabella:
| S.No | Tipi di barra degli strumenti e descrizione |
|---|---|
| 1 | Nascondi barra degli strumenti È possibile nascondere automaticamente la barra degli strumenti quando si caricano le pagine utilizzando il file no-toolbar classe alla pagina caricata. |
| 2 | Barra degli strumenti inferiore Posiziona la barra degli strumenti nella parte inferiore della pagina utilizzando il toolbar-bottom classe. |
Metodi di barra degli strumenti
I seguenti metodi disponibili possono essere utilizzati con le barre degli strumenti:
| S.No | Metodi e descrizione della barra degli strumenti |
|---|---|
| 1 | myApp.hideToolbar(toolbar) Nasconde la barra degli strumenti specificata. |
| 2 | myApp.showToolbar(toolbar) Mostra la barra degli strumenti specificata. |
| 3 | view.hideToolbar() Nasconde la barra degli strumenti specificata nella vista. |
| 4 | view.showToolbar() Mostra la barra degli strumenti specificata nella vista. |
Esempio
L'esempio seguente mostra l'uso del layout della barra degli strumenti in Framework7.
Innanzitutto, creeremo una pagina HTML chiamata toolbar.html come mostrato di seguito -
<!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>Ora inizializza la tua app e le viste nel file JS personalizzato toolbar.js.
Produzione
Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra indicato:
Salva il codice HTML sopra indicato come toolbar.html file nella cartella principale del server.
Apri questo file HTML come http: //localhost/toolbar.html e l'output viene visualizzato come mostrato di seguito.
Descrizione
Framework 7 consente la ricerca degli elementi utilizzando la classe searchbar .
Parametri della barra di ricerca
| S.No | Parametri e descrizione | genere | Predefinito |
|---|---|---|---|
| 1 | searchList Cerca nel selettore CSS o nell'elemento HTML dell'elenco. |
stringa o elemento HTML | - |
| 2 | searchIn Puoi cercare gli elementi della vista elenco dei selettori CSS, anche cercare gli elementi passando le classi .item-title , .item-text . |
corda | '.Titolo dell'oggetto' |
| 3 | found Cerca nel selettore CSS o nell'elemento HTML utilizzando l'elemento "trovato". Inoltre, utilizza l' elemento .searchbar-found se non è specificato alcun elemento. |
stringa o elemento HTML | - |
| 4 | notfound Cerca nel selettore CSS o nell'elemento HTML utilizzando l'elemento "non trovato". Inoltre, utilizza l' elemento .searchbar-not-found se non è specificato alcun elemento. |
stringa o elemento HTML | - |
| 5 | overlay Cerca nel selettore CSS o nell'elemento HTML utilizzando l'elemento "searchbar overlay" e utilizza l'elemento .searchbar-overlay , se non è specificato alcun elemento. |
stringa o elemento HTML | - |
| 6 | ignore Puoi ignorare il selettore CSS per gli elementi utilizzando la barra di ricerca. |
corda | ".searchbar-ignore" |
| 7 | customSearch Quando è abilitata, la barra di ricerca non cercherà in nessuno dei blocchi di elenchi specificati da searchList e ti sarà consentito utilizzare la funzionalità di ricerca personalizzata. |
booleano | falso |
| 8 | removeDiacritics Durante la ricerca di un elemento, rimuovere i segni diacritici abilitando questo parametro. |
booleano | falso |
| 9 | hideDividers Questo parametro nasconderà i divisori degli elementi e il titolo del gruppo, se non ci sono elementi. |
booleano | vero |
| 10 | hideGroups Questo parametro nasconderà i gruppi, se non ci sono elementi trovati nei gruppi di visualizzazione elenco. |
booleano | vero |
Callback della barra di ricerca
| S.No | Richiami e descrizione | genere | Predefinito |
|---|---|---|---|
| 1 | onSearch Questo metodo attiverà la funzione di callback durante la ricerca. |
funzione (i) | - |
| 2 | onEnable Questo metodo attiverà la funzione di callback quando la barra di ricerca diventa attiva. |
funzione (i) | - |
| 3 | onDisable Questo metodo attiverà la funzione di callback quando la barra di ricerca diventa inattiva. |
funzione (i) | - |
| 4 | onClear Questo metodo attiverà la funzione di callback quando fai clic sull'elemento "cancella". |
funzione (i) | - |
Proprietà della barra di ricerca
| S.No | Proprietà e descrizione |
|---|---|
| 1 | mySearchbar.params Rappresenta i parametri inizializzati passati con object. |
| 2 | mySearchbar.query Cerca la query corrente. |
| 3 | mySearchbar.searchList Definisce il blocco dell'elenco di ricerca. |
| 4 | mySearchbar.container Definisce il contenitore della barra di ricerca con l'elemento HTML. |
| 5 | mySearchbar.input Definisce l'input della barra di ricerca con l'elemento HTML. |
| 6 | mySearchbar.active Definisce se la barra di ricerca è abilitata o disabilitata. |
Metodi della barra di ricerca
| S.No | Metodi e descrizione |
|---|---|
| 1 | mySearchbar.search(query); Questo metodo ricerca la query passata. |
| 2 | mySearchbar.enable(); Abilita la barra di ricerca. |
| 3 | mySearchbar.disable(); Disabilita la barra di ricerca. |
| 4 | mySearchbar.clear(); Puoi cancellare la query e i risultati della ricerca. |
| 5 | mySearchbar.destroy(); Distrugge l'istanza della barra di ricerca. |
Eventi JavaScript nella barra di ricerca
| S.No | Descrizione dell'evento | Bersaglio |
|---|---|---|
| 1 | search Puoi attivare questo evento durante la ricerca di elementi. |
<div class = "list-block"> |
| 2 | clearSearch Questo evento verrà generato quando l'utente fa clic sull'elemento clearSearch. |
<div class = "list-block"> |
| 3 | enableSearch Quando la barra di ricerca diventa abilitata, questo evento verrà attivato. |
<div class = "list-block"> |
| 4 | disableSearch Quando la barra di ricerca viene disattivata e l'utente fa clic sul pulsante Annulla o sull'elemento "barra di ricerca in sovrapposizione", questo evento viene attivato. |
<div class = "list-block"> |
Esempio
L'esempio seguente mostra l'uso della barra di ricerca durante lo scorrimento nel 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>Produzione
Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra indicato:
Salva il codice HTML sopra indicato search_bar.html file nella cartella principale del server.
Apri questo file HTML come http: //localhost/search_bar.html e l'output viene visualizzato come mostrato di seguito.
Se l'elemento contenuto nell'elenco viene inserito nella barra di ricerca, visualizza quel particolare elemento dall'elenco.
Se viene inserito un elemento diverso dagli elementi contenuti nell'elenco, non viene visualizzato alcun elemento trovato.
Descrizione
IOS 7+ ti consente di creare app a schermo intero che potrebbero creare un problema quando la barra di stato si sovrappone alla tua app. Framework7 risolve questo problema rilevando se la tua app è in modalità a schermo intero o meno. Se l'app è in modalità a schermo intero, Framework7 aggiungerà automaticamente la classe with-statusbar-overlay a <html> (o rimuoverà se l'app non è in modalità a schermo intero) e sarà necessario aggiungere la classe di overlay della barra di stato in <body> come mostrato nel codice seguente -
<html class = "with-statusbar-overlay">
...
<body>
<div class = "statusbar-overlay"></div>
...Per impostazione predefinita, <div> sarà sempre nascosto e fissato nella parte superiore dello schermo. Sarà visibile solo quando l'app è in modalità a schermo intero e la classe with-statusbar-overlay viene aggiunta a <html> .
Esempio
L'esempio seguente mostra l'uso della barra di stato nel 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>Produzione
Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra indicato:
Salva il codice html sopra indicato come status_bar.html file nella cartella principale del server.
Apri questo file HTML come http: //localhost/status_bar.html e l'output viene visualizzato come mostrato di seguito.
L'esempio mostra l'uso di statusbar-overlay, che ti consente di creare app a schermo intero quando la barra di stato si sovrappone all'app.
Descrizione
Il pannello laterale si sposta sul lato sinistro o destro dello schermo per visualizzare il contenuto. Framework7 ti consente di includere fino a 2 pannelli (pannello laterale destro e pannello laterale sinistro) nella tua app. È necessario aggiungere pannelli all'inizio del <body> e quindi scegliere l'effetto di apertura applicando le seguenti classi elencate:
panel-reveal - Questo farà spostare l'intero contenuto dell'app.
panel-cover - Questo farà sì che il pannello si sovrapponga al contenuto dell'app.
Ad esempio, il codice seguente mostra come utilizzare le classi precedenti:
<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>La tabella seguente mostra i tipi di pannello supportati da Framework77 -
| S.No | Tipo e descrizione |
|---|---|
| 1 | Apri e chiudi i pannelli Dopo aver aggiunto il pannello e gli effetti, è necessario aggiungere funzionalità per aprire e chiudere i pannelli. |
| 2 | Eventi del pannello Per rilevare come un utente interagisce con il pannello, puoi utilizzare gli eventi del pannello. |
| 3 | Pannelli aperti con scorrimento Framework7 fornisce la funzionalità per aprire il pannello con il gesto di scorrimento . |
| 4 | Il pannello è aperto? Possiamo determinare se il pannello è aperto o meno utilizzando il file with-panel[position]-[effect] regola. |
Descrizione
I blocchi di contenuto possono essere utilizzati per aggiungere contenuto extra con formato diverso.
Esempio
L'esempio seguente mostra l'uso del blocco di contenuto 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>Produzione
Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra indicato:
Salva il codice HTML sopra indicato come content_block.html file nella cartella principale del server.
Apri questo file HTML come http: //localhost/content_block.html e l'output viene visualizzato come mostrato di seguito.
Il codice aggiunge una formattazione extra e la spaziatura richiesta per il contenuto del testo.
Descrizione
Framework7 fornisce diversi tipi di tipi di griglia per posizionare il contenuto secondo le necessità dell'utente.
La griglia di layout fornisce diversi tipi di dimensioni delle colonne come descritto nella tabella seguente:
| S.No | Classe | Classe del tavolo | Larghezza |
|---|---|---|---|
| 1 | col-5 | tablet-5 | 5% |
| 2 | col-10 | tablet-10 | 10% |
| 3 | col-15 | tablet-15 | 15% |
| 4 | col-20 | tablet-20 | 20% |
| 5 | col-25 | tablet-25 | 25% |
| 6 | col-30 | tablet-30 | 30% |
| 7 | col-33 | tablet-33 | 33,3% |
| 8 | col-35 | tablet-35 | 35% |
| 9 | col-40 | tablet-40 | 40% |
| 10 | col-45 | tablet-45 | 45% |
| 11 | col-50 | tablet-50 | 50% |
| 12 | col-55 | tablet-55 | 55% |
| 13 | col-60 | tablet-60 | 60% |
| 14 | col-65 | tablet-65 | 65% |
| 15 | col-66 | tablet-66 | 66,6% |
| 16 | col-70 | tablet-70 | 70% |
| 17 | col-75 | tablet-75 | 75% |
| 18 | col-80 | tablet-80 | 80% |
| 19 | col-85 | tablet-85 | 85% |
| 20 | col-90 | tablet-90 | 90% |
| 21 | col-95 | tablet-95 | 95% |
| 21 | col-100 | tablet-100 | 100% |
| 22 | col-auto | tablet-auto | Larghezza uguale |
Esempio
L'esempio seguente fornisce il layout della griglia per posizionare il contenuto di cui hai bisogno 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>Produzione
Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra indicato:
Salva il codice HTML sopra indicato come layout_grid.html file nella cartella principale del server.
Apri questo file HTML come http: //localhost/layout_grid.html l'output viene visualizzato come mostrato di seguito.
Questo codice fornisce diversi tipi di tipi di griglia per posizionare il contenuto secondo le necessità dell'utente.
Descrizione
Framework7 fornisce diversi tipi di sovrapposizioni per lavorare senza problemi con le applicazioni. La tabella seguente elenca alcune delle sovrapposizioni di Framework7:
| S.No | Tipo e descrizione dell'overlay |
|---|---|
| 1 | Modale Modal è una piccola finestra che mostra il contenuto da fonti separate senza lasciare la finestra principale. |
| 2 | Apparire Popup è una finestra popup che mostra il contenuto quando l'utente fa clic sull'elemento. |
| 3 | Popover Per gestire la presentazione del contenuto temporaneo, è possibile utilizzare il componente popover. |
| 4 | Foglio di azione Il foglio delle azioni viene utilizzato per presentare all'utente una serie di possibilità su come gestire una determinata attività. |
| 5 | Schermata di accesso La schermata di accesso in sovrimpressione viene utilizzata per visualizzare il formato della schermata di accesso che può essere utilizzata nella pagina o nel popup o come overlay autonomo. |
| 6 | Picker Modal Il selettore modale viene utilizzato per selezionare alcuni contenuti personalizzati che sono simili al selettore del calendario. |
Descrizione
Il preloader in Framework7 è realizzato con Scalable Vector Graphic (SVG) e animato con CSS, che lo rende facilmente ridimensionabile. Preloader è disponibile in due colori:
- l'impostazione predefinita è lo sfondo chiaro
- un altro è di sfondo scuro
Puoi utilizzare la classe preloader nel tuo codice HTML come mostrato di seguito:
Esempio
Il seguente esempio dimostra l'uso del preloader nel 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>Produzione
Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra indicato:
Salva il codice HTML sopra indicato come preloader.html file nella cartella principale del server.
Apri questo file HTML come http: //localhost/preloader.html e l'output viene visualizzato come mostrato di seguito.
Questo codice mostra l'indicatore del preloader, realizzato con SVG e animato con CSS.
Descrizione
Le barre di avanzamento possono essere utilizzate per mostrare agli utenti il caricamento di risorse o l'avanzamento di un'attività. È possibile specificare la barra di avanzamento utilizzando la classe progressbar . Quando l'utente non sa per quanto tempo ci sarà il processo di caricamento della richiesta, è possibile utilizzare la classe progressbar-infinite .
API JavaScript della barra di avanzamento
La barra di avanzamento può essere utilizzata insieme all'API JavaScript per specificare le proprietà di visualizzazione , nascondi e avanzamento utilizzando i seguenti metodi:
| S.No | Metodi | Descrizione e parametri |
|---|---|---|
| 1 | myApp.setProgressbar (container , progress, speed) | Imposta la barra di avanzamento per l'avanzamento di un'attività.
|
| 2 | myApp.hideProgressbar (contain er) | Nasconde la barra di avanzamento.
|
| 3 | myApp.showProgressbar (contai ner, progress, color) | Visualizza la barra di avanzamento.
|
Esempio
L'esempio seguente mostra una barra di avanzamento determinata e indeterminata animata per indicare l'attività 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>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>Produzione
Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra indicato:
Salva il codice HTML sopra indicato come progress_bar.html file nella cartella principale del server.
Apri questo file HTML come http: //localhost/progress_bar.html e l'output viene visualizzato come mostrato di seguito.
L'esempio mostra la barra di avanzamento, che indica quanto tempo impiegherà un'operazione per completare il processo e visualizza i diversi tipi di barre di avanzamento per indicare l'attività.
Descrizione
Le visualizzazioni elenco sono potenti componenti dell'interfaccia utente che presentano i dati in un elenco scorrevole di più righe. Framework7 fornisce diversi tipi di visualizzazione elenco da utilizzare con l'applicazione. La tabella seguente elenca alcune delle visualizzazioni elenco di Framework7 :
| S.No | Tipi e descrizione |
|---|---|
| 1 | Visualizzazione elenco Le visualizzazioni elenco sono potenti componenti dell'interfaccia utente, che presentano i dati in un elenco scorrevole contenente più righe. |
| 2 | Elenco contatti L'elenco dei contatti è un tipo di visualizzazione elenco, che può essere utilizzato per visualizzare l'elenco dei contatti delle persone. |
| 3 | Visualizzazione elenco media La visualizzazione elenco Media viene utilizzata per visualizzare strutture di dati complesse come prodotti, servizi, informazioni sugli utenti. |
| 4 | Swipeout Lo swipeout ti consente di rivelare le azioni di menu nascoste scorrendo sugli elementi dell'elenco. |
| 5 | Elenco ordinabile L'elenco ordinabile è un tipo di visualizzazione elenco, che ordina gli elementi della visualizzazione elenco. |
| 6 | Elenco virtuale Elenco virtuale un tipo di visualizzazione elenco, che include elenchi di un numero elevato di elementi di dati senza comprometterne le prestazioni. |
Descrizione
La fisarmonica è un elemento di controllo grafico visualizzato come un elenco di elementi in pila. Ogni fisarmonica può essere espansa o allungata per rivelare il contenuto associato a quella fisarmonica.
Layout pieghevole
Quando si utilizza un singolo elemento comprimibile separato, è necessario omettere l' elemento wrapper dell'elenco a fisarmonica .
Di seguito è riportata una struttura di layout pieghevole:
<!-- 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>Le seguenti classi sono utilizzate per la fisarmonica in Framework7:
| S.No | Classi e descrizione |
|---|---|
| 1 | accordion-list È una classe opzionale, che contiene un gruppo di elenchi di elementi di fisarmonica. |
| 2 | accordion-item È una classe richiesta per un articolo a fisarmonica singola. |
| 3 | accordion-item-toggle È una classe richiesta utilizzata per espandere il contenuto degli elementi della fisarmonica. |
| 4 | accordion-item-content È una classe richiesta utilizzata per il contenuto di elementi di fisarmonica nascosti. |
| 5 | accordion-item-expanded Si tratta di un unico elemento di fisarmonica espanso. |
API JavaScript per fisarmonica
I metodi API JavaScript vengono utilizzati per aprire e chiudere la fisarmonica a livello di programmazione.
Contiene i seguenti metodi API JavaScript:
myApp.accordionOpen(item) - Usato per aprire la fisarmonica.
myApp.accordionClose(item) - Usato per chiudere la fisarmonica.
myApp.accordionToggle(item) - Usato per attivare la fisarmonica.
Tutti i metodi contengono un parametro chiamato elemento che è HTML o elemento stringa di accordion-item.
Eventi di fisarmonica
La fisarmonica contiene quattro eventi come elencato nella tabella seguente:
| S.No | Evento | Target e descrizione |
|---|---|---|
| 1 | Aperto | Accordion item Quando apri un'animazione, questo evento verrà attivato. |
| 2 | ha aperto | Accordion item Quando l'apertura di un'animazione è completata, questo evento verrà attivato. |
| 3 | vicino | Accordion item Quando chiudi un'animazione, questo evento verrà attivato. |
| 4 | chiuso | Accordion item Quando la chiusura di un'animazione è completata, questo evento verrà attivato. |
Visualizzazione elenco fisarmonica
Nella visualizzazione elenco a fisarmonica, puoi utilizzare l' elemento link elemento invece di accordion-toggle .
<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>Esempio
L'esempio seguente mostra l'uso della fisarmonica nel 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>Produzione
Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra indicato:
Salva il codice HTML sopra indicato come accordion.html file nella cartella principale del server.
Apri questo file HTML come http: //localhost/accordion.html e l'output viene visualizzato come mostrato di seguito.
L'esempio fornisce un layout comprimibile, che può essere espanso per visualizzare il contenuto associato alla fisarmonica.
Descrizione
Le schede contengono informazioni organizzate relative a un singolo argomento come foto, link e testo. La tabella seguente mostra i tipi di schede Framework7:
| S.No | Tipi e descrizione |
|---|---|
| 1 | Layout HTML della scheda Il layout HTML delle carte di base utilizza le classi delle carte per organizzare i suoi elementi. |
| 2 | Visualizzazione elenco con schede Puoi utilizzare le carte come elementi della visualizzazione elenco aggiungendo la classe cards-list a <div class = "list-block"> . |
Descrizione
Chip è un piccolo blocco di entità, che può contenere una foto, una piccola stringa di titolo e brevi informazioni.
Layout HTML dei chip
Il codice seguente mostra il layout HTML del chip di base utilizzato in Framework7:
<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>Il layout HTML sopra contiene molte classi come elencato di seguito:
chips - È il contenitore dei trucioli.
chip-media- Questo è l'elemento multimediale del chip che può contenere immagini, avatar o icone. È opzionale.
card-label - È l'etichetta di testo del chip.
card-delete - È il collegamento opzionale dell'icona di eliminazione di un chip.
Esempio
Il seguente esempio rappresenta le entità come album, elementi di carte ecc. Insieme a una foto e brevi informazioni -
<!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>Produzione
Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra indicato:
Salva il codice HTML sopra indicato come cards_html_layout.html file nella cartella principale del server.
Apri questo file HTML come http: //localhost/cards_html_layout.html e l'output viene visualizzato come mostrato di seguito.
L'esempio rappresenta le entità complesse in piccoli blocchi come album, elementi di biglietti, immagine pubblicata, che contiene foto, stringa del titolo e brevi informazioni.
Descrizione
Framework7 fornisce un gruppo di pulsanti pronti per l'uso semplicemente aggiungendo classi appropriate ai collegamenti o ai pulsanti di input.
| S.No | Tipi e descrizione |
|---|---|
| 1 | Pulsanti del tema iOS Framework7 fornisce molti pulsanti del tema iOS, che possono essere utilizzati applicando classi appropriate. |
| 2 | Pulsanti del tema del materiale Il tema del materiale fornisce molti pulsanti da utilizzare nell'applicazione utilizzando classi appropriate. |
Descrizione
Framework7 fornisce un pulsante di azione mobile per un'azione promossa. Appaiono come un'icona cerchiata fluttuante sull'interfaccia utente. Ha i comportamenti di movimento che contengono morphing , lancio e trasferimento di un punto di ancoraggio .
Il pulsante di azione mobile è supportato solo nel tema Materiale.
La tabella seguente elenca i tipi di pulsanti di azione utilizzati in Framework7:
| S.No | Tipi e descrizione |
|---|---|
| 1 | Layout del pulsante di azione fluttuante È molto semplice; devi solo posizionarlo come figlio della pagina o della vista . |
| 2 | Morph To Popover Se si desidera aprire il popover facendo clic sul pulsante di azione mobile, è possibile utilizzare la classe da pulsante mobile a popover . |
| 3 | Chiamata rapida È possibile richiamare azioni correlate facendo clic sul pulsante di azione mobile utilizzando la composizione rapida . |
Descrizione
I moduli vengono utilizzati per interagire con gli utenti e raccolgono dati dagli utenti web utilizzando campi di testo, caselle di controllo, pulsanti di opzione ecc.
Framework7 fornisce diversi tipi di elementi del modulo per lavorare senza problemi con le applicazioni come specificato nella tabella seguente:
| S.No | Tipo e descrizione dell'overlay |
|---|---|
| 1 | Elementi del modulo Gli elementi del modulo vengono utilizzati per creare layout di modulo di bell'aspetto. |
| 2 | Caselle di controllo e radio L' estensione della visualizzazione elenco consente di creare caselle di controllo e ingressi radio in Framework7. |
| 3 | Selezione intelligente La selezione intelligente è un modo semplice per modificare le selezioni del modulo in pagine dinamiche utilizzando gruppi di caselle di controllo e ingressi radio. |
| 4 | Elementi disabili Gli elementi possono essere disabilitati applicando la classe disabled all'elemento o aggiungendo attributi disabilitati per l'elemento del modulo. |
| 5 | Dati del modulo Framework7 ha pochissimi metodi utili, il che semplifica il lavoro con i moduli. |
| 6 | Archiviazione dei moduli È facile con l'archiviazione dei moduli memorizzare e analizzare automaticamente i dati dei moduli sulle pagine caricate da Ajax. |
| 7 | Invia modulo Ajax Framework7 ti consente di inviare dati automaticamente utilizzando Ajax. |
Descrizione
Le schede sono insiemi di contenuti raggruppati logicamente che ci consentono di spostarci rapidamente da uno all'altro e di risparmiare spazio come le fisarmoniche.
Layout a schede
Il codice seguente definisce il layout per le schede:
<!-- 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>Dove -
<div class = "tabs">- È un wrapper obbligatorio per tutte le schede. Se ci manca questo, le schede non funzioneranno affatto.
-
<div class = "tab"> - È una singola scheda, che dovrebbe avere unique id attributo.
-
<div class = "tab active">- È una singola scheda attiva, che utilizza una classe attiva aggiuntiva per rendere la scheda visibile (attiva).
Passaggio da una scheda all'altra
È possibile utilizzare alcuni controller nel layout a schede, in modo che l'utente possa passare da uno all'altro.
Per questo, è necessario creare collegamenti (tag <a>) con la classe tab-link e l' attributo href uguale all'attributo id della scheda di destinazione -
<!-- 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>Cambia più schede
Se utilizzi il collegamento a scheda singola per passare da una scheda all'altra, puoi utilizzare le classi invece di utilizzare gli ID e l' attributo della scheda dati .
<!-- 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>L' attributo data-tab di tab-link contiene il selettore CSS di schede / schede di destinazione.
Possiamo utilizzare diversi modi di schede, questi sono specificati nella tabella seguente:
| S.No | Tipi di schede e descrizione |
|---|---|
| 1 | Schede in linea Le schede in linea sono gruppi di schede raggruppate in linea che consentono di spostarsi rapidamente tra di loro. |
| 2 | Cambia scheda dalla barra di navigazione Possiamo posizionare delle schede nella barra di navigazione che ti consentono di spostarti tra di loro. |
| 3 | Cambia visualizzazioni dalla barra delle schede La scheda singola può essere utilizzata per passare da una visualizzazione all'altra con la propria navigazione e layout. |
| 4 | Schede animate Puoi usare la transizione semplice (animazione) per cambiare scheda. |
| 5 | Schede a scorrimento È possibile creare schede scorrevoli con una transizione semplice utilizzando la classe tabs-swipeable-wrap per le schede. |
| 6 | Schede Eventi JavaScript Gli eventi JavaScript possono essere utilizzati quando si lavora con il codice JavaScript per le schede. |
| 7 | Mostra scheda utilizzando JavaScript È possibile cambiare o visualizzare la scheda utilizzando i metodi JavaScript. |
Descrizione
Il cursore a scorrimento è il dispositivo di scorrimento tattile più potente e moderno e viene fornito in Framework7 con molte funzionalità.
Il seguente layout HTML mostra il cursore di scorrimento:
<!-- 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>Le seguenti classi vengono utilizzate per il cursore di scorrimento:
swiper-container - È un elemento obbligatorio per il contenitore dello slider principale e viene utilizzato per diapositive e impaginazioni.
Swiper-wrapper - È un elemento obbligatorio per diapositive wrapper aggiuntive.
swiper-slide - È un singolo elemento della diapositiva e potrebbe contenere qualsiasi HTML all'interno.
swiper-pagination - È facoltativo per i punti elenco di impaginazione e questi vengono creati automaticamente.
Puoi inizializzare lo swiper con JavaScript usando i suoi metodi correlati -
myApp.swiper(swiperContainer,parameters)O
new Swiper(swiperContainer, parameters)Entrambi i metodi vengono utilizzati per inizializzare il dispositivo di scorrimento con le opzioni.
I metodi sopra indicati contengono i seguenti parametri:
swiperContainer- È HTMLElement o stringa di un contenitore di swiper ed è obbligatorio.
parameters - Questi sono elementi opzionali contenenti oggetti con parametri di scorrimento.
Ad esempio:
var mySwiper = app.swiper('.swiper-container', {
speed: 400,
spaceBetween: 100
});È possibile accedere all'istanza di uno swiper e la proprietà swiper del contenitore dello slider ha il seguente elemento HTML:
var mySwiper = $$('.swiper-container')[0].swiper;
// Here you can use all slider methods like:
mySwiper.slideNext();Puoi vedere i diversi modi e tipi di swiper nella seguente tabella:
| S.No | Tipi e descrizione di Swiper |
|---|---|
| 1 | Swiper predefinito con impaginazione È un moderno dispositivo di scorrimento tattile e il cursore scorre orizzontalmente, per impostazione predefinita. |
| 2 | Swiper verticale Questo funziona anche come uno swiper predefinito ma scorre verticalmente. |
| 3 | Con spazio tra le diapositive Questo swiper viene utilizzato per lasciare spazio tra due diapositive. |
| 4 | Swipers multipli Questo swiper utilizza più di uno swiper su una singola pagina. |
| 5 | Swipers annidati È la combinazione di diapositive verticali e orizzontali. |
| 6 | Controlli personalizzati Viene utilizzato per i controlli personalizzati per scegliere o scorrere qualsiasi diapositiva. |
| 7 | Caricamento pigro Può essere utilizzato per file multimediali, il cui caricamento richiede tempo. |
Descrizione
Il browser foto è simile al componente browser foto iOS per visualizzare un gruppo di immagini, che possono essere ingrandite e spostate. Per scorrere tra le immagini, il browser delle foto utilizza Swiper Slider .
La tabella seguente mostra i tipi di browser di foto utilizzati in framework7 -
| S.No | Tipi di browser delle foto e descrizione |
|---|---|
| 1 | Crea istanza del browser di foto Il browser delle foto può essere creato e inizializzato utilizzando solo JavaScript. |
| 2 | Parametri del browser delle foto Framework7 fornisce un elenco di parametri, che vengono utilizzati con il browser di foto. |
| 3 | Metodi e proprietà del browser di foto Otterrai una variabile di istanza inizializzata per utilizzare i metodi e le proprietà del browser delle foto una volta inizializzato il browser delle foto. |
| 4 | Foto Array Durante l'inizializzazione del browser delle foto, è necessario passare un array con foto / video nel parametro foto . |
| 5 | Modelli per browser di foto Framework7 fornisce molti modelli di browser di foto, che puoi trasmettere all'inizializzazione del browser di foto. |
Descrizione
Il completamento automatico è un componente ottimizzato per il tocco e ottimizzato per i dispositivi mobili di Framework7, che può essere a discesa o in modalità standalone. È possibile creare e inizializzare l'istanza di completamento automatico utilizzando il metodo JavaScript:
myApp.autocomplete(parameters)Dove i parametri sono oggetti obbligatori utilizzati per inizializzare l'istanza di completamento automatico.
Parametri di completamento automatico
La tabella seguente elenca i parametri di completamento automatico disponibili in Framework7 -
| S.No | Parametri e descrizione | genere | Predefinito |
|---|---|---|---|
| 1 | openIn Definisce come aprire un completamento automatico che potrebbe essere utilizzato come menu a discesa, popup o pagina. |
corda | pagina |
| 2 | source Utilizza l'istanza di completamento automatico, la query di ricerca e la funzione di rendering per passare gli elementi corrispondenti con l'array. |
funzione (completamento automatico, query, rendering) | - |
| 3 | valueProperty Specifica il valore dell'elemento della chiave dell'oggetto dell'elemento corrispondente. |
corda | id |
| 4 | limit Visualizza il numero limitato di elementi nel completamento automatico per query. |
numero | - |
| 5 | preloader Il preloader può essere utilizzato per specificare il layout del completamento automatico impostandolo su true. |
booleano | falso |
| 6 | preloaderColor Specifica il colore del precaricatore. Per impostazione predefinita, il colore è "nero". |
corda | - |
| 7 | value Definisce la matrice con i valori selezionati di default. |
Vettore | - |
| 8 | textProperty Specifica il valore dell'elemento della chiave dell'oggetto dell'elemento corrispondente, che può essere utilizzato come titolo delle opzioni visualizzate. |
corda | testo |
Parametri di completamento automatico autonomo
La tabella seguente elenca i parametri di completamento automatico autonomo disponibili in Framework7:
| S.No | Parametri e descrizione | genere | Predefinito |
|---|---|---|---|
| 1 | opener È un parametro stringa o elemento HTML, che aprirà la pagina di completamento automatico autonomo. |
stringa o HTMLElement | - |
| 2 | popupCloseText Viene utilizzato per chiudere il popup di completamento automatico. |
corda | 'Vicino' |
| 3 | backText Fornisce il collegamento a ritroso quando il completamento automatico viene aperto come pagina. |
corda | 'Indietro' |
| 4 | pageTitle Specifica il titolo della pagina di completamento automatico. |
corda | - |
| 5 | searchbarPlaceholderText Specifica il testo segnaposto della barra di ricerca. |
corda | 'Ricerca' |
| 6 | searchbarCancelText Definisce il testo del pulsante di annullamento della barra di ricerca. |
corda | 'Annulla' |
| 7 | notFoundText Visualizza il testo quando non è stato trovato alcun elemento corrispondente. |
corda | 'Non abbiamo trovato nulla' |
| 8 | multiple Consente di selezionare più selezioni impostandola su true. |
booleano | falso |
| 9 | navbarTheme Specifica il tema del colore per la barra di navigazione. |
corda | - |
| 10 | backOnSelect Quando l'utente sceglie un valore, il completamento automatico verrà chiuso impostandolo su true. |
booleano | falso |
| 11 | formTheme Specifica il tema del colore per il modulo. |
corda | - |
Parametri di completamento automatico a discesa
La tabella seguente elenca i parametri di completamento automatico a discesa disponibili in Framework7:
| S.No | Parametri e descrizione | genere | Predefinito |
|---|---|---|---|
| 1 | input È una stringa o un elemento HTML utilizzato per l'immissione di testo. |
stringa o HTMLElement | - |
| 2 | dropdownPlaceholderText Specifica il testo segnaposto a discesa. |
corda | - |
| 3 | updateInputValueOnSelect È possibile aggiornare il valore di input sulla selezione impostandolo su true. |
booleano | vero |
| 4 | expandInput È possibile espandere l'input di testo nella visualizzazione elenco per rendere visibile l'intero schermo durante il menu a discesa impostando l' input dell'elemento su true. |
booleano | falso |
Funzioni di callback di completamento automatico
La tabella seguente elenca i parametri di completamento automatico a discesa disponibili in Framework7 -
| S.No | Parametri e descrizione | genere | Predefinito |
|---|---|---|---|
| 1 | onChange Ogni volta che il valore di completamento automatico viene modificato, verrà eseguita questa funzione di callback. |
funzione (completamento automatico, valore) | - |
| 2 | onOpen Ogni volta che viene aperto il completamento automatico, verrà eseguita questa funzione di callback. |
funzione (completamento automatico) | - |
| 3 | onClose Ogni volta che il completamento automatico viene chiuso, verrà eseguita questa funzione di callback. |
funzione (completamento automatico) | - |
Modelli a completamento automatico
La tabella seguente elenca i parametri di completamento automatico a discesa disponibili in Framework7:
| S.No | Parametri e descrizione | genere | Predefinito |
|---|---|---|---|
| 1 | navbarTemplate È un modello di barra di navigazione autonomo a completamento automatico. |
corda | - |
| 2 | itemTemplate È un elemento del modulo template7 autonomo. |
corda | - |
| 3 | dropdownTemplate È il modello a discesa template7. |
corda | - |
| 4 | dropdownItemTemplate È l'elemento dell'elenco a discesa template7. |
corda | - |
| 5 | dropdownPlaceholderTemplate È l'elemento segnaposto a discesa template7. |
corda | - |
Modelli predefiniti
Di seguito sono riportati gli snippet di codice del modello predefinito per i parametri dei modelli sopra definiti:
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>Metodi di completamento automatico
La tabella seguente specifica i metodi di completamento automatico disponibili in Framework7:
| S.No | Metodi e descrizione |
|---|---|
| 1 | myAutocomplete.params Definisce i parametri di inizializzazione che vengono passati con object. |
| 2 | myAutocomplete.value Definisce l'array con i valori selezionati. |
| 3 | myAutocomplete.opened Apre il completamento automatico se è impostato su true. |
| 4 | myAutocomplete.dropdown Specifica un'istanza dell'elenco a discesa Completamento automatico. |
| 5 | myAutocomplete.popup Specifica un'istanza del popup di completamento automatico. |
| 6 | myAutocomplete.page Specifica un'istanza della pagina di completamento automatico. |
| 7 | myAutocomplete.pageData Definisce i dati della pagina di completamento automatico. |
| 8 | myAutocomplete.searchbar Definisce l'istanza della barra di ricerca del completamento automatico. |
Proprietà di completamento automatico
La tabella seguente specifica i metodi di completamento automatico disponibili in Framework7:
| S.No | Proprietà e descrizione |
|---|---|
| 1 | myAutocomplete.open() Apre il completamento automatico, che può essere utilizzato come menu a discesa, popup o pagina. |
| 2 | myAutocomplete.close() Chiude il completamento automatico. |
| 3 | myAutocomplete.showPreloader() Mostra il precaricatore di completamento automatico. |
| 4 | myAutocomplete.hidePreloader() Nasconde il precaricatore di completamento automatico. |
| 5 | myAutocomplete.destroy() Rovina l'istanza del preloader di completamento automatico e rimuove tutti gli eventi. |
Esempio
L'esempio seguente mostra l'uso di parametri di completamento automatico nascosti nel Framework7:
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>Autocomplete</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "pages">
<div data-page = "home" class = "page navbar-fixed">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left"> </div>
<div class = "center">Autcomplete</div>
<div class = "right"> </div>
</div>
</div>
<div class = "page-content">
<div class = "content-block-title">Simple Dropdown Autocomplete</div>
<div class = "list-block">
<ul>
<li class = "item-content">
<div class = "item-title label">Country</div>
<div class = "item-input">
<input type = "text" placeholder = "Country" id = "autocomplete-dropdown">
</div>
</li>
</ul>
</div>
<div class = "content-block-title">Dropdown With Input Expand</div>
<div class = "list-block">
<ul>
<li class = "item-content">
<div class = "item-title label">Country</div>
<div class = "item-input">
<input type = "text" placeholder = "Country" id = "autocomplete-dropdown-expand">
</div>
</li>
</ul>
</div>
<div class = "content-block-title">Dropdown With All Values</div>
<div class = "list-block">
<ul>
<li class = "item-content">
<div class = "item-title label">Country</div>
<div class = "item-input">
<input type = "text" placeholder = "Country" id = "autocomplete-dropdown-all">
</div>
</li>
</ul>
</div>
<div class = "content-block-title">Dropdown With Placeholder</div>
<div class = "list-block">
<ul>
<li class = "item-content">
<div class = "item-title label">Country</div>
<div class = "item-input">
<input type = "text" placeholder = "Country" id = "autocomplete-dropdown-placeholder">
</div>
</li>
</ul>
</div>
<div class = "content-block-title">Simple Standalone Autocomplete</div>
<div class = "list-block">
<ul>
<li>
<a href = "#" id = "autocomplete-standalone" class = "item-link item-content autocomplete-opener">
<input type = "hidden">
<div class = "item-inner">
<div class = "item-title">Favorite Country</div>
<div class = "item-after"></div>
</div>
</a>
</li>
</ul>
</div>
<div class = "content-block-title">Popup Standalone Autocomplete</div>
<div class = "list-block">
<ul>
<li>
<a href = "#" id = "autocomplete-standalone-popup" class = "item-link item-content autocomplete-opener">
<input type = "hidden">
<div class = "item-inner">
<div class = "item-title">Favorite Country</div>
<div class = "item-after"></div>
</div>
</a>
</li>
</ul>
</div>
<div class = "content-block-title">Multiple Values Standalone Autocomplete</div>
<div class = "list-block">
<ul>
<li>
<a href = "#" id = "autocomplete-standalone-multiple" class = "item-link item-content autocomplete-opener">
<input type = "hidden">
<div class = "item-inner">
<div class = "item-title">Favorite Countries</div>
<div class = "item-after"></div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
var myApp = new Framework7();
var $$ = Dom7; var mainView = myApp.addView('.view-main'); // Countries data array var countries = ('India Africa Australia NewZealand England WestIndies Scotland Zimbabwe Srilanka Bangladesh').split(' '); // Simple Dropdown var autocompleteDropdownSimple = myApp.autocomplete ({ input: '#autocomplete-dropdown', openIn: 'dropdown', source: function (autocomplete, query, render) { var results = []; if (query.length === 0) { render(results); return; } // You can find matched items for (var i = 0; i < countries.length; i++) { if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(countries[i]); } // Display the items by passing array with result items render(results); } }); // Dropdown with input expand var autocompleteDropdownExpand = myApp.autocomplete ({ input: '#autocomplete-dropdown-expand', openIn: 'dropdown', expandInput: true, // expandInput used as item-input in List View will be expanded to full screen wide //during dropdown source: function (autocomplete, query, render) { var results = []; if (query.length === 0) { render(results); return; } // Find matched items for (var i = 0; i < countries.length; i++) { if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(countries[i]); } // Display the items by passing array with result items render(results); } }); // Dropdown with all values var autocompleteDropdownAll = myApp.autocomplete ({ input: '#autocomplete-dropdown-all', openIn: 'dropdown', source: function (autocomplete, query, render) { var results = []; // You can find matched items for (var i = 0; i < countries.length; i++) { if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(countries[i]); } // Display the items by passing array with result items render(results); } }); // Dropdown with placeholder var autocompleteDropdownPlaceholder = myApp.autocomplete ({ input: '#autocomplete-dropdown-placeholder', openIn: 'dropdown', dropdownPlaceholderText: 'Type as "India"', source: function (autocomplete, query, render) { var results = []; if (query.length === 0) { render(results); return; } // You can find matched items for (var i = 0; i < countries.length; i++) { if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(countries[i]); } // Display the items by passing array with result items render(results); } }); // Simple Standalone var autocompleteStandaloneSimple = myApp.autocomplete ({ openIn: 'page', //open in page opener: $$('#autocomplete-standalone'), //link that opens autocomplete
backOnSelect: true, //go back after we select something
source: function (autocomplete, query, render) {
var results = [];
if (query.length === 0) {
render(results);
return;
}
// You can find matched items
for (var i = 0; i < countries.length; i++) {
if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0)
results.push(countries[i]);
}
// Display the items by passing array with result items
render(results);
},
onChange: function (autocomplete, value) {
// Here add the item text value to item-after
$$('#autocomplete-standalone').find('.item-after').text(value[0]); // You can add item value to input value $$('#autocomplete-standalone').find('input').val(value[0]);
}
});
// Standalone Popup
var autocompleteStandalonePopup = myApp.autocomplete ({
openIn: 'popup', // Opens the Autocomplete in page
opener: $$('#autocomplete-standalone-popup'), // It will open standalone autocomplete popup backOnSelect: true, //After selecting item, then go back to page source: function (autocomplete, query, render) { var results = []; if (query.length === 0) { render(results); return; } // You can find matched items for (var i = 0; i < countries.length; i++) { if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(countries[i]); } // Display the items by passing array with result items render(results); }, onChange: function (autocomplete, value) { // Here add the item text value to item-after $$('#autocomplete-standalone-popup').find('.item-after').text(value[0]);
// You can add item value to input value
$$('#autocomplete-standalone-popup').find('input').val(value[0]); } }); // Multiple Standalone var autocompleteStandaloneMultiple = myApp.autocomplete ({ openIn: 'page', //Opens the Autocomplete in page opener: $$('#autocomplete-standalone-multiple'), //link that opens autocomplete
multiple: true, //Allow multiple values
source: function (autocomplete, query, render) {
var results = [];
if (query.length === 0) {
render(results);
return;
}
// You can find matched items
for (var i = 0; i < countries.length; i++) {
if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(countries[i]);
}
// Display the items by passing array with result items
render(results);
},
onChange: function (autocomplete, value) {
// Here add the item text value to item-after
$$('#autocomplete-standalone-multiple').find('.item-after').text(value.join(', ')); // You can add item value to input value $$('#autocomplete-standalone-multiple').find('input').val(value.join(', '));
}
});
</script>
</body>
</html>Produzione
Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra indicato:
Salva il codice HTML sopra indicato come autocomplete.html file nella cartella principale del server.
Apri questo file HTML come http: //localhost/autocomplete.html e l'output viene visualizzato come mostrato di seguito.
L'esempio fornisce il completamento automatico dei valori in un semplice menu a discesa, a discesa con tutti i valori, a discesa con segnaposto, completamento automatico autonomo ecc.
Descrizione
Il selettore ha l'aspetto di un selettore nativo di iOS ed è un potente componente che consente di scegliere qualsiasi valore dall'elenco e utilizzato anche per creare selettori di overlay personalizzati. Puoi utilizzare Picker come componente inline o come overlay. Il selettore di overlay verrà automaticamente convertito in Popover su tablet (iPad).
Utilizzando il metodo della seguente app, puoi creare e inizializzare il metodo JavaScript:
myApp.picker(parameters)Dove i parametri sono oggetti obbligatori, utilizzati per inizializzare l'istanza di selezione ed è un metodo obbligatorio.
Parametri del selettore
La tabella seguente specifica i parametri disponibili nei selettori:
| S.No | Parametri e descrizione | genere | Predefinito |
|---|---|---|---|
| 1 | container Stringa con selettore CSS o HTMLElement utilizzato per generare HTML di selezione per un selettore in linea. |
stringa o HTMLElement | - |
| 2 | input L'elemento di input correlato posizionato con la stringa con selettore CSS o HTMLElement. |
stringa o HTMLElement | - |
| 3 | scrollToInput Viene utilizzato per scorrere il viewport (contenuto della pagina) dell'input, ogni volta che viene aperto il selettore. |
booleano | vero |
| 4 | inputReadOnly Utilizzato per impostare l'attributo "readonly" sull'input specificato. |
booleano | vero |
| 5 | convertToPopover Viene utilizzato per convertire il modale del selettore in Popover su schermi di grandi dimensioni come iPad. |
booleano | vero |
| 6 | onlyOnPopover Puoi aprire il selettore in Popover abilitandolo. |
booleano | vero |
| 7 | cssClass Per selezionare modale, puoi utilizzare un nome di classe CSS aggiuntivo. |
corda | - |
| 8 | closeByOutsideClick È possibile chiudere il selettore facendo clic all'esterno del selettore o dell'elemento di input abilitando il metodo. |
booleano | falso |
| 9 | toolbar Viene utilizzato per abilitare la barra degli strumenti modale del selettore. |
booleano | vero |
| 10 | toolbarCloseText Utilizzato per il pulsante Fine / Chiudi della barra degli strumenti. |
corda | 'Fatto' |
| 11 | toolbarTemplate È un modello HTML della barra degli strumenti, per impostazione predefinita è una stringa HTML con il seguente modello: |
corda | - |
Parametri di selezione specifici
La tabella seguente elenca i parametri di selezione specifici disponibili:
| S.No | Parametri e descrizione | genere | Predefinito |
|---|---|---|---|
| 1 | rotateEffect Abilita l'effetto di rotazione 3D nel selettore. |
booleano | falso |
| 2 | momentumRatio Quando rilasci il selettore dopo un tocco e uno spostamento veloci, produce più slancio. |
numero | 7 |
| 3 | updateValuesOnMomentum Utilizzato per aggiornare selettori e valori di input durante lo slancio. |
booleano | falso |
| 4 | updateValuesOnTouchmove Utilizzato per aggiornare i selettori e i valori di input durante lo spostamento al tocco. |
booleano | vero |
| 5 | value L'array ha i suoi valori iniziali e anche ogni elemento dell'array rappresenta il valore della colonna correlata. |
Vettore | - |
| 6 | formatValue La funzione viene utilizzata per formattare il valore di input e dovrebbe restituire un valore di stringa nuovo / formattato. I valori e displayValues sono array della colonna correlata. |
funzione (p, valori, displayValues) | - |
| 7 | cols Ogni elemento dell'array rappresenta un oggetto con parametri di colonna. |
Vettore | - |
Callback dei parametri di selezione
La tabella seguente mostra gli elenchi delle funzioni di richiamata disponibili nei selettori:
| S.No | Richiami e descrizione | genere | Predefinito |
|---|---|---|---|
| 1 | onChange La funzione di callback verrà eseguita ogni volta che il valore del selettore viene modificato ei valori e displayValues sono matrici della colonna correlata. |
funzione (p, valori, displayValues) | - |
| 2 | onOpen La funzione di callback verrà eseguita ogni volta che viene aperto il selettore. |
funzione (p) | - |
| 3 | onClose La funzione di callback verrà eseguita ogni volta che il selettore viene chiuso. |
funzione (p) | - |
Parametri della colonna
Al momento della configurazione di Picker, dobbiamo passare il parametro cols . È rappresentato come array, in cui ogni elemento è un oggetto con parametri di colonna -
| S.No | Parametri e descrizione | genere | Predefinito |
|---|---|---|---|
| 1 | values È possibile specificare i valori delle colonne di stringa con un array. |
Vettore | - |
| 2 | displayValues Ha un array con valori di colonne di stringa e visualizzerà il valore dal parametro values , quando non specificato. |
Vettore | - |
| 3 | cssClass Il nome della classe CSS utilizzato per impostare il contenitore HTML della colonna. |
corda | - |
| 4 | textAlign Viene utilizzato per impostare l'allineamento del testo dei valori delle colonne e può essere "sinistra", "centro" o "destra" . |
corda | - |
| 5 | width La larghezza viene calcolata automaticamente, per impostazione predefinita. Se è necessario correggere le larghezze delle colonne nel selettore con colonne dipendenti che dovrebbero essere in px . |
numero | - |
| 6 | divider Viene utilizzato per la colonna che dovrebbe essere un divisore visivo, non ha alcun valore. |
booleano | falso |
| 7 | content Viene utilizzato per la colonna-divisore specificata (divider: true) con il contenuto della colonna. |
corda | - |
Parametro di callback della colonna
| S.No | Richiami e descrizione | genere | Predefinito |
|---|---|---|---|
| 1 | onChange Ogni volta che il valore della colonna cambierà in quel momento, verrà eseguita la funzione di callback. Il valore e displayValue rappresentano il valore della colonna corrente e displayValue . |
funzione (p, value, displayValue) | - |
Proprietà selettore
La variabile Picker ha molte proprietà, quelle sono fornite nella seguente tabella:
| S.No | Proprietà e descrizione |
|---|---|
| 1 | myPicker.params È possibile inizializzare i parametri passati con object. |
| 2 | myPicker.value Il valore selezionato per ogni colonna è rappresentato da una matrice di elementi. |
| 3 | myPicker.displayValue Il valore di visualizzazione selezionato per ciascuna colonna è rappresentato da un array di elementi. |
| 4 | myPicker.opened Quando il selettore è aperto, viene impostato sul valore vero . |
| 5 | myPicker.inline Quando il selettore è in linea, viene impostato sul valore vero . |
| 6 | myPicker.cols Le colonne Picker hanno i propri metodi e proprietà. |
| 7 | myPicker.container L'istanza Dom7 viene utilizzata per il contenitore HTML. |
Metodi di selezione
La variabile picker ha metodi utili, che sono riportati nella tabella seguente:
| S.No | Metodi e descrizione |
|---|---|
| 1 | myPicker.setValue(values, duration) Utilizzare per impostare un nuovo valore di selezione. I valori sono in matrice in cui ogni elemento rappresenta il valore per ogni colonna. duration - È la durata della transizione in ms. |
| 2 | myPicker.open() Utilizzare per aprire Picker. |
| 3 | myPicker.close() Usa per chiudere Picker. |
| 4 | myPicker.destroy() Utilizzare per distruggere l'istanza di Picker e rimuovere tutti gli eventi. |
Proprietà colonna
Ogni colonna nell'array myPicker.cols ha anche le sue proprietà utili, che sono fornite nella tabella seguente:
//Get first column
var col = myPicker.cols[0];| S.No | Proprietà e descrizione |
|---|---|
| 1 | col.container Puoi creare un'istanza con il contenitore HTML della colonna. |
| 2 | col.items È possibile creare un'istanza con elementi di colonna elementi HTML. |
| 3 | col.value Utilizzato per selezionare il valore della colonna corrente. |
| 4 | col.displayValue Utilizzato per selezionare il valore della colonna corrente del display. |
| 5 | col.activeIndex Fornire il numero di indice corrente, che è l'elemento selezionato / attivo. |
Metodi di colonna
I metodi di colonna utili sono riportati nella tabella seguente:
| S.No | Metodi e descrizione |
|---|---|
| 1 | col.setValue(value, duration) Utilizzato per impostare un nuovo valore per la colonna corrente. Il valore deve essere un nuovo valore e la durata è la durata della transizione espressa in ms. |
| 2 | col.replaceValues(values, displayValues) Utilizzato per sostituire i valori della colonna e displayValues con quelli nuovi. |
Viene utilizzato per accedere all'istanza di Picker dal suo contenitore HTML, ogni volta che si inizializza Picker come Picker inline.
var myPicker = $$('.picker-inline')[0].f7Picker;Esistono diversi tipi di selettori come specificato nella tabella seguente:
| S.No | Tipi di schede e descrizione |
|---|---|
| 1 | Picker con valore singolo È un potente componente che ti consente di scegliere qualsiasi valore dall'elenco. |
| 2 | Due valori ed effetto rotazione 3D Nel selettore puoi usare per l'effetto di rotazione 3D. |
| 3 | Valori dipendenti I valori dipendono l'uno dall'altro per l'elemento specificato. |
| 4 | Barra degli strumenti personalizzata È possibile utilizzare uno o più selettori su una singola pagina per la personalizzazione. |
| 5 | Selettore in linea / data e ora È possibile selezionare il numero di valori nel selettore in linea, come la data ha data, mese, anno e l'ora ha ore, minuti, secondi. |
Descrizione
Il componente Calendar ti consente di gestire facilmente le date e può essere utilizzato come componente inline o overlay. Il calendario in sovrimpressione verrà convertito automaticamente in popover sui tablet.
Il calendario può essere creato e inizializzato solo utilizzando JavaScript. È necessario utilizzare il metodo dell'app correlato come mostrato di seguito:
myApp.calendar(parameters)- Questo metodo restituisce l'istanza del calendario inizializzata. Accetta un oggetto come parametri.
La tabella seguente mostra l'utilizzo del calendario in Framework7:
| S.No | Uso e descrizione del calendario |
|---|---|
| 1 | Parametri del calendario Framework7 fornisce un elenco di parametri, che vengono utilizzati con il calendario. |
| 2 | Metodi e proprietà del calendario Otterrai una variabile di istanza inizializzata per utilizzare i metodi e le proprietà del calendario, una volta inizializzato il calendario. |
| 3 | Accesso all'istanza di Calendar È possibile accedere all'istanza del calendario dal suo contenitore HTML quando si inizializza il calendario come inline. |
Descrizione
È un componente speciale utilizzato per aggiornare (ricaricare) il contenuto della pagina tirandolo.
Il codice seguente mostra come aggiornare il contenuto della pagina:
<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>Le seguenti classi vengono utilizzate nell'aggiornamento:
page-content- Ha una classe di contenuto pull-to-refresh aggiuntiva ed è necessario per abilitare il pull per l'aggiornamento.
pull-to-refresh-layer- È un livello nascosto, che viene utilizzato per aggiornare l'elemento visivo ed è solo un preloader e una freccia.
data-ptr-distance = "55" - Questo è un attributo aggiuntivo che ti consente di impostare la distanza di attivazione "pull to refresh" personalizzata e il suo valore predefinito è 44px.
Trascina per aggiornare gli eventi
In "Pull to Refresh" sono presenti alcuni eventi JavaScript, riportati nella tabella seguente:
| S.No | Descrizione dell'evento | Bersaglio |
|---|---|---|
| 1 | pullstart Verrà attivato ogni volta che inizi a tirare per aggiornare il contenuto. |
Trascina per aggiornare il contenuto. |
| 2 | pullmove Viene attivato quando si esegue il pull per aggiornare il contenuto. |
Trascina per aggiornare il contenuto. |
| 3 | pullend Verrà attivato ogni volta che rilasci pull per aggiornare il contenuto. |
Trascina per aggiornare il contenuto. |
| 4 | refresh Questo evento verrà attivato quando il pull per l'aggiornamento entra nello stato "refreshing" . |
Trascina per aggiornare il contenuto. |
| 5 | refreshdone Verrà attivato dopo essere stato aggiornato e tornerà allo stato iniziale. Questo verrà fatto dopo aver chiamato il metodo pullToRefreshDone . |
Trascina per aggiornare il contenuto. |
Esistono metodi dell'app che possono essere utilizzati con Pull to Refresh.
| S.No | Metodi e descrizione dell'app |
|---|---|
| 1 | myApp.pullToRefreshDone(ptrContent) Viene utilizzato per ripristinare il contenuto pull-to-refresh . |
| 2 | myApp.pullToRefreshTrigger(ptrContent) Viene utilizzato per attivare l'aggiornamento al pull specificato per aggiornare il contenuto . |
| 3 | myApp.destroyPullToRefresh(ptrContent) Viene utilizzato per distruggere / disabilitare il pull per aggiornare il pull specificato per aggiornare il contenuto . |
| 4 | myApp.initPullToRefresh(ptrContent) Viene utilizzato per inizializzare / abilitare il pull per aggiornare il contenuto . |
Dove ptrContent viene utilizzato per HTMLElement o stringa per eseguire il pull-to-refresh-content per reimpostare / attivare o disattivare / abilitare.
Esempio
L'esempio seguente dimostra l'uso del componente di aggiornamento che avvia l'aggiornamento del contenuto di una pagina:
<!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>Produzione
Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra indicato:
Salva il codice HTML sopra indicato come pull_to_refresh.html file nella cartella principale del server.
Apri questo file HTML come http: //localhost/pull_to_refresh.html e l'output viene visualizzato come mostrato di seguito.
Quando l'utente tira giù, la pagina verrà aggiornata con i contenuti.
Descrizione
Lo scorrimento infinito ti consente di caricare contenuti aggiuntivi ed esegue le azioni richieste quando la pagina è vicino al fondo.
Il seguente layout HTML mostra lo scorrimento infinito:
<div class = "page">
<div class = "page-content infinite-scroll" data-distance = "100">
...
</div>
</div>Il layout sopra contiene le seguenti classi:
page-content infinite-scroll - Viene utilizzato per il contenitore di scorrimento infinito.
data-distance - Questo attributo consente di configurare la distanza dalla parte inferiore della pagina (in px) per attivare l'evento di scorrimento infinito e il suo valore predefinito è 50px.
Se desideri utilizzare lo scorrimento infinito nella parte superiore della pagina, devi aggiungere un'ulteriore classe "scorrimento infinito in alto" a "contenuto della pagina" -
<div class = "page">
<div class = "page-content infinite-scroll infinite-scroll-top">
...
</div>
</div>Eventi di scorrimento infinito
infinite- Viene utilizzato per attivare quando lo scorrimento della pagina raggiunge la distanza specificata dal fondo. Sarà scelto come target da div class = "page-content infinite-scroll" .
Esistono due metodi dell'app che possono essere utilizzati con il contenitore a scorrimento infinito:
Per aggiungere un listener di eventi di scorrimento infinito al contenitore HTML specificato, utilizzare il seguente metodo:
myApp.attachInfiniteScroll(container)È possibile rimuovere il listener di eventi di scorrimento infinito dal contenitore HTML specificato utilizzando il metodo seguente:
myApp.detachInfiniteScroll(container)Dove i parametri sono opzioni obbligatorie utilizzate come HTMLElement o stringa per il contenitore a scorrimento infinito.
Esempio
L'esempio seguente mostra lo scorrimento infinito che carica il contenuto aggiuntivo quando lo scorrimento della pagina è vicino al fondo -
<!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>Produzione
Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra indicato:
Salva il codice HTML sopra indicato come infinite_scroll.html file nella cartella principale del server.
Apri questo file HTML come http: //localhost/infinite_scroll.html e l'output viene visualizzato come mostrato di seguito.
L'esempio consente il caricamento di contenuto aggiuntivo quando lo scorrimento della pagina raggiunge la distanza specificata dal fondo.
Descrizione
I messaggi sono componenti di Framework7, che fornisce la visualizzazione dei commenti e del sistema di messaggistica nell'applicazione.
Layout dei messaggi
Il framework7 ha la seguente struttura di layout dei messaggi:
<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>Il layout contiene le seguenti classi in diverse aree:
Layout della pagina dei messaggi
La tabella seguente mostra le classi di layout della pagina dei messaggi con descrizione.
| S.No | Classi e descrizione |
|---|---|
| 1 | messages-content È una classe aggiuntiva richiesta aggiunta a "page-content" e utilizzata per il wrapper dei messaggi. |
| 2 | messages È un elemento obbligatorio per le bolle di messaggi. |
| 3 | messages-date Utilizza il contenitore del timbro della data per visualizzare la data e l'ora del messaggio inviato o ricevuto. |
| 4 | message È un unico messaggio da visualizzare. |
Parti interne a messaggio singolo
La tabella seguente mostra le classi delle parti interne del messaggio semplice con descrizione.
| S.No | Classi e descrizione |
|---|---|
| 1 | message-name Fornisce il nome del mittente. |
| 2 | message-text Definisci il testo con il tipo di bolla. |
| 3 | message-avatar Specifica l'avatar del mittente. |
| 4 | message-label Specifica l'etichetta di testo sotto la bolla. |
Classi aggiuntive per Single Message Container
La tabella seguente mostra classi aggiuntive per la descrizione del contenitore di messaggi singoli.
| S.No | Classi e descrizione |
|---|---|
| 1 | message-sent Specifica che il messaggio è stato inviato dall'utente e viene visualizzato con il colore di sfondo verde sul lato destro. |
| 2 | message-received Serve per visualizzare il singolo messaggio indicante che il messaggio è stato ricevuto dall'utente e rimane sul lato sinistro con colore di sfondo grigio. |
| 3 | message-pic È una classe aggiuntiva per la visualizzazione di immagini con un singolo messaggio. |
| 4 | message-with-avatar È una classe aggiuntiva per la visualizzazione di un singolo messaggio (ricevuto o inviato) con avatar. |
| 5 | message-with-tail È possibile aggiungere una coda di bolla per un singolo messaggio (ricevuto o inviato). |
Classi disponibili aggiuntive per messaggio singolo
La tabella seguente mostra le classi disponibili per un singolo messaggio con descrizione.
| S.No | Classi e descrizione |
|---|---|
| 1 | message-hide-name È una classe aggiuntiva per nascondere il nome del messaggio per un singolo messaggio (ricevuto o inviato). |
| 2 | message-hide-avatar È una classe aggiuntiva per nascondere l'avatar del messaggio per un singolo messaggio (ricevuto o inviato). |
| 3 | message-hide-label È una classe aggiuntiva per nascondere l'etichetta del messaggio per un singolo messaggio (ricevuto o inviato). |
| 4 | message-last È possibile utilizzare questa classe per indicare l'ultimo messaggio ricevuto o inviato nella conversazione corrente da un mittente per un singolo messaggio (ricevuto o inviato). |
| 5 | message-first È possibile utilizzare questa classe per indicare il primo messaggio ricevuto o il primo inviato nella conversazione corrente da un mittente per un singolo messaggio (ricevuto o inviato). |
Inizializzazione dei messaggi con JavaScript
È possibile inizializzare i messaggi con JavaScript utilizzando il seguente metodo:
myApp.messages(messagesContainer, parameters)Il metodo richiede due opzioni:
messagesContainer - È un elemento o una stringa HTML obbligatorio che include l'elemento HTML del contenitore dei messaggi.
parameters - Specifica un oggetto con i parametri dei messaggi.
Parametri dei messaggi
La tabella seguente mostra i parametri dei messaggi con descrizione.
| S.No | Parametro e descrizione | genere | Predefinito |
|---|---|---|---|
| 1 | autoLayout Aggiunge ulteriori classi richieste a ciascun messaggio abilitandolo. |
booleano | vero |
| 2 | newMessagesFirst È possibile visualizzare il messaggio in alto invece di visualizzarlo in basso abilitandolo. |
booleano | falso |
| 3 | messages Visualizza un array di messaggi in cui ogni messaggio deve essere rappresentato come oggetto con parametri di messaggio. |
Vettore | - |
| 4 | messageTemplate Visualizza il modello di messaggio singolo. |
corda | - |
Proprietà dei messaggi
La tabella seguente mostra le proprietà dei messaggi con descrizione.
| S.No | Proprietà e descrizione |
|---|---|
| 1 | myMessages.params È possibile inizializzare i parametri passati con object. |
| 2 | myMessages.container Definisce l'elemento DOM7 con un contenitore HTML della barra dei messaggi. |
Metodi di messaggi
La tabella seguente mostra i metodi dei messaggi con la descrizione.
| S.No | Metodo e descrizione |
|---|---|
| 1 | myMessages.addMessage(messageParameters, method, animate); Il messaggio può essere aggiunto all'inizio o alla fine utilizzando il parametro method. Ha i seguenti parametri:
|
| 2 | myMessages.appendMessage(messageParameters, animate); Aggiunge un messaggio alla fine del contenitore dei messaggi. |
| 3 | myMessages.prependMessage(messageParameters, animate); Aggiunge un messaggio all'inizio del contenitore dei messaggi. |
| 4 | myMessages.addMessages(messages, method, animate); Puoi aggiungere più messaggi contemporaneamente. Ha il seguente parametro:
|
| 5 | myMessages.removeMessage(message); Viene utilizzato per rimuovere il messaggio. Ha il seguente parametro:
|
| 6 | myMessages.removeMessages(messages); Puoi rimuovere più messaggi. Ha il seguente parametro:
|
| 7 | myMessages.scrollMessages(); È possibile scorrere i messaggi dall'alto verso il basso e viceversa a seconda del primo parametro del nuovo messaggio. |
| 8 | myMessages.layout(); Il layout automatico può essere applicato ai messaggi. |
| 9 | myMessages.clean(); Viene utilizzato per pulire i messaggi. |
| 10 | myMessages.destroy(); Viene utilizzato per distruggere i messaggi. |
Parametri messaggio singolo
La tabella seguente mostra i parametri per un singolo messaggio con descrizione.
| S.No | Parametro e descrizione | genere | Predefinito |
|---|---|---|---|
| 1 | text Definisce il testo del messaggio, che potrebbe essere una stringa HTML. |
corda | - |
| 2 | name Specifica il nome del mittente. |
corda | - |
| 3 | avatar Specifica la stringa dell'URL dell'avatar del mittente. |
corda | - |
| 4 | time Specifica la stringa dell'ora del messaggio come "9:45 AM", "18:35". |
corda | - |
| 5 | type Fornisce il tipo di messaggio se può essere inviato o ricevuto. |
corda | inviato |
| 6 | label Definisce l'etichetta del messaggio. |
corda | - |
| 7 | day Fornisce la stringa del giorno del messaggio come "domenica", "lunedì", "ieri" ecc. |
corda | - |
Inizializzazione dei messaggi con HTML
È possibile inizializzare i messaggi con HTML senza JavaScript utilizzando la classe di inizializzazione dei messaggi aggiuntiva per i messaggi e utilizzare gli attributi di dati per passare i parametri richiesti come mostrato nello snippet di codice riportato di seguito -
...
<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>
...Esempio
L'esempio seguente mostra l'uso dei messaggi nel 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>Produzione
Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra indicato:
Salva il codice HTML sopra indicato come messages.html file nella cartella principale del server.
Apri questo file HTML come http: //localhost/messages.html e l'output viene visualizzato come mostrato di seguito.
Quando si digita un messaggio nella casella del messaggio e si fa clic sul pulsante Invia, viene specificato che il messaggio è stato inviato e viene visualizzato con il colore di sfondo verde sul lato destro.
Il messaggio che ricevi, appare sul lato sinistro con lo sfondo grigio insieme al nome del mittente.
Descrizione
Framework7 fornisce una speciale barra degli strumenti ridimensionabile per lavorare con il sistema di messaggistica nell'applicazione.
Il codice seguente mostra il layout della barra dei messaggi:
<div clas = "toolbar messagebar">
<div clas = "toolbar-inner">
<textarea placeholder = "Message"></textarea>
<a href = "#" clas = "link">Send</a>
</div>
</div>Nella barra dei messaggi, l'interno della "pagina" è molto importante ed è a destra di "contenuto dei messaggi" -
<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>È possibile utilizzare il seguente metodo per inizializzare la barra dei messaggi con JavaScript:
myApp.messagesbar(messagesbarContainer, parameters)Il metodo ha due opzioni:
messagesbarContainer - È una stringa o un elemento HTML obbligatorio che include l'elemento HTML del contenitore della barra dei messaggi.
parameters - Specifica un oggetto con i parametri della barra dei messaggi.
Ad esempio:
var myMessagebar = app.messagebar('.messagebar', {
maxHeight: 200
});Parametro della barra dei messaggi
maxHeight- Viene utilizzato per impostare l'altezza massima dell'area di testo e verrà ridimensionato in base alla quantità di testo. Il tipo di parametro è numero e il valore predefinito è null .
Proprietà della barra dei messaggi
La tabella seguente mostra le proprietà della barra dei messaggi:
| S.No | Proprietà e descrizione |
|---|---|
| 1 | myMessagebar.params È possibile specificare un oggetto con parametri di inizializzazione passati. |
| 2 | myMessagebar.container È possibile specificare l'elemento dom7 con l'elemento HTML del contenitore della barra dei messaggi. |
| 3 | myMessagebar.textarea È possibile specificare l'elemento dom7 con l'elemento HTML dell'area di testo della barra dei messaggi. |
Metodi della barra dei messaggi
La tabella seguente mostra i metodi della barra dei messaggi:
| S.No | Metodi e descrizione |
|---|---|
| 1 | myMessagebar.value(newValue); Imposta il valore / testo della textarea della barra dei messaggi e restituisce il valore della textarea della barra dei messaggi, se newValue non è specificato. |
| 2 | myMessagebar.clear(); Cancella l'area di testo e aggiorna / ripristina la dimensione. |
| 3 | myMessagebar.destroy(); Distrugge l'istanza della barra dei messaggi. |
Inizializza la barra dei messaggi con HTML
È possibile inizializzare la barra dei messaggi utilizzando HTML senza proprietà e metodi JavaScript aggiungendo la classe messagebar-init a .messagebar ed è possibile passare i parametri richiesti utilizzando gli attributi dei dati .
Il codice seguente specifica l'inizializzazione della barra dei messaggi con HTML:
<div class = "toolbar messagebar messagebar-init" data-max-height = "200">
<div class = "toolbar-inner">
<textarea placeholder = "Message"></textarea>
<a href = "#" class = "link">Send</a>
</div>
</div>Accesso all'istanza di Messagebar
È possibile accedere all'istanza della barra dei messaggi, se la si inizializza utilizzando HTML; si ottiene utilizzando la proprietà f7 Message bar del suo elemento contenitore.
var myMessagebar = $$('.messagebar')[0].f7Messagebar;
// Now you can use it
myMessagebar.value('Hello world');Puoi vedere l'esempio di Messagebar, che è spiegato in questo link
Descrizione
Le notifiche vengono utilizzate per mostrare i messaggi richiesti, che appaiono come notifiche iOS push (o locali).
La tabella seguente mostra in dettaglio l'utilizzo delle notifiche:
| S.No | Utilizzo e descrizione delle notifiche |
|---|---|
| 1 | Notifiche JavaScript API Le notifiche possono anche essere aggiunte o chiuse con JavaScript utilizzando i metodi dell'app correlati. |
| 2 | Layout delle notifiche Le notifiche di Framework7 verranno aggiunte utilizzando JavaScript. |
| 3 | Esempio iOS Framework7 ti consente di utilizzare diversi tipi di notifiche nel tuo layout iOS. |
| 4 | Materiale di esempio Le notifiche Framework7 possono essere utilizzate anche nel layout dei materiali. |
Descrizione
Il caricamento lento ritarda il processo di caricamento dell'immagine su una determinata pagina. Il caricamento lento migliora le prestazioni di scorrimento, accelera il caricamento della pagina e consente di risparmiare traffico.
Gli elementi e le immagini del caricamento lento devono trovarsi all'interno di <div class = "page-content"> scorrevole per funzionare correttamente.
La tabella seguente mostra l'uso del carico lento:
| S.No | Utilizzo e descrizione del carico lento |
|---|---|
| 1 | Utilizzo Il carico pigro può essere applicato a immagini, immagini di sfondo e con effetto fade-in. |
| 2 | Inizializza manualmente il caricamento lento Dopo aver inizializzato una pagina, se si aggiungono manualmente immagini di caricamento lento, il caricamento lento non funzionerà e sarà necessario utilizzare metodi per inizializzarlo. |
È possibile innesco caricamento dell'immagine manualmente utilizzando pigrizia evento sull'immagine / elemento artificiale come mostrato sotto -
$$('img.lazy').trigger('lazy');
$$('div.lazy').trigger('lazy');Esempio
L'esempio seguente mostra l'uso del caricamento lento 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>Produzione
Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra indicato:
Salva il codice HTML sopra indicato come framework7_lazy_load.html file nella cartella principale del server.
Apri questo file HTML come http: //localhost/framework7_lazy_load.html e l'output viene visualizzato come mostrato di seguito.
L'esempio specifica il caricamento lento delle immagini in cui le immagini verranno caricate sulla pagina quando le scorri verso il basso.
Descrizione
Framework7 fornisce diversi temi di colore per le tue applicazioni.
Un tema colore fornisce diversi tipi di colori del tema utilizzati per lavorare senza problemi con le applicazioni come specificato nella tabella seguente:
| S.No | Tipo e descrizione del tema |
|---|---|
| 1 | Colori del tema iOS È possibile utilizzare 10 diversi temi colore iOS predefiniti per l'applicazione. |
| 2 | Colori tema materiale Framework7 fornisce 22 diversi temi colore dei materiali predefiniti per l'applicazione. |
Applicazione di temi colore
Framework7 consente di applicare temi di colore su diversi elementi come pagina, blocco elenco, barra di navigazione, riga di pulsanti, ecc. Utilizzando la classe theme- [color] all'elemento genitore.
Esempio
...
</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>Temi di layout
È possibile utilizzare il tema del layout predefinito per l'applicazione utilizzando due temi bianco e scuro . I temi possono essere applicati utilizzando la classe layout- [theme] all'elemento genitore.
Esempio
...
</body>
<div class = "navbar layout-white">
...
</div>
<div class = "buttons-row layout-dark">
...
</div>Classi di aiuto
Framework7 fornisce classi di supporto aggiuntive, che possono essere utilizzate all'esterno o senza temi come elencato di seguito:
color-[color] - Può essere utilizzato per modificare il colore del testo del blocco o il colore del pulsante, del collegamento, dell'icona, ecc.
bg-[color] - Imposta il colore di sfondo predefinito sul blocco o elemento.
border-[color] - Imposta il colore del bordo predefinito sul blocco o sull'elemento.
Descrizione
Hairline è una classe che aggiunge un bordo di 1px attorno alle immagini utilizzando la classe border. Con il rilascio di 1.x, le linee sottili hanno rivisto il funzionamento con : after e : before pseudo elementi invece di utilizzare i bordi CSS.
Hairlines contiene le seguenti regole:
:after- Questo pseudo elemento viene utilizzato per le linee sottili in basso e a destra .
:before- Questo pseudo elemento viene utilizzato per le linee sottili in alto e a sinistra .
Il frammento di codice seguente mostra l'uso di : after element.
.navbar:after {
background-color: red;
}Il seguente frammento di codice rimuove la barra degli strumenti della linea sottile inferiore:
.navbar:after {
display:none;
}
.toolbar:before {
display:none;
}classe "no-border"
L'attaccatura dei capelli verrà rimossa utilizzando la classe no-border ed è supportata su Navbar, barra degli strumenti, scheda e suoi elementi.
Il codice seguente viene utilizzato per rimuovere la linea sottile dalla barra di navigazione:
<div class = "navbar no-border">
...
</div>Descrizione
Template7 è un motore JavaScript leggero e mobile-first, che rappresenta Ajax e pagine dinamiche come modelli Template7 con contesto specificato e non richiede script aggiuntivi. Template7 è associato a Framework7 come motore di modelli predefinito e leggero, che funziona più velocemente per le applicazioni.
Prestazione
Il processo di compilazione della stringa nella funzione JS è il segmento più lento di template7. Quindi, non è necessario compilare il modello più volte, solo una volta è sufficiente.
//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 è un motore di modelli leggero utilizzato come libreria standalone senza Framework7. I file Template7 possono essere installati in due modi:
Puoi scaricare dal repository github Template7 .
Puoi installarlo utilizzando il seguente comando tramite Bower:
O
bower install template7Descrizione
In Template7 puoi compilare i tuoi modelli automaticamente specificando attributi speciali in un tag <script>.
Il codice seguente mostra il layout di compilazione automatica:
<script type = "text/template7" id = "myTemplate">
<p>Hello, my name is {{name}} and i am {{age}} years old</p>
</script>È possibile utilizzare i seguenti attributi per inizializzare la compilazione automatica:
type = "text/template7" - Viene utilizzato per indicare a Template7 di compilarsi automaticamente ed è un tipo di script richiesto.
id = "myTemplate" - Il modello è accessibile tramite l'id ed è un ID modello richiesto.
Per la compilazione automatica, è necessario abilitare l'inizializzazione dell'app passando il seguente parametro:
var myApp = new Framework7 ({
//It is used to compile templates on app init in Framework7
precompileTemplates: true,
});Template7.templates / miaApp.templates
È possibile accedere ai modelli compilati automaticamente come proprietà di Template7.templates dopo aver inizializzato l'app. È anche noto come myApp.templates dove myApp è un'istanza inizializzata dell'app.
Puoi utilizzare i seguenti modelli nel nostro file index.html:
<script type = "text/template7" id = "personTemplate">
<p>Hello, my name is {{name}} and i am {{age}} years old</p>
<p>I work as {{position}} at {{company}}</p>
</script>
<script type = "text/template7" id = "carTemplate">
<p>I have a great car, it is {{vendor}} {{model}}, made in {{year}} year.</p>
<p>It has {{power}} hp engine with {{speed}} km/h maximum speed.</p>
</script>Puoi anche accedere ai modelli in JavaScript dopo l' inizializzazione dell'app -
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
});Descrizione
Template7 è un motore di template JavaScript mobile-first con sintassi simile a handlebars.js . È un motore di modelli predefinito ultra leggero e velocissimo in Framework7.
Innanzitutto, dobbiamo passare il seguente parametro sull'inizializzazione dell'app che esegue il rendering di tutte le pagine Ajax e dinamiche come modello Template7:
var myApp = new Framework7 ({
template7Pages: true // enable Template7 rendering for Ajax and Dynamic pages
});| S.No | Uso e descrizione delle pagine di Template7 |
|---|---|
| 1 | Dati modelli / pagine È possibile passare i dati / contesto richiesti per pagine specifiche specificando tutti i dati delle pagine nel parametro template7Data , inviato durante l'inizializzazione di un'app. |
| 2 | Passa contesto personalizzato Framework7 ti consente di passare un contesto personalizzato a qualsiasi pagina dinamica o a qualsiasi Ajax caricato. |
| 3 | Carica modelli direttamente Puoi eseguire il rendering e caricare i modelli al volo come pagine dinamiche. |
| 4 | Query URL Se stai usando Template7 per il rendering delle pagine Ajax, il suo contesto sarà sempre esteso con la proprietà speciale url_query . |
Esempio
Il seguente esempio fornisce i collegamenti, che mostrano le informazioni sull'utente come i dettagli dell'utente, i Mi piace dell'utente, ecc. Quando si fa clic su tali collegamenti.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>Framework7</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "center sliding">Template7 Pages</div>
</div>
</div>
<div class = "pages navbar-through toolbar-through">
<div data-page = "index" class = "page">
<div class = "page-content">
<div class = "list-block">
<ul>
<li>
//plain data objects allow to pass custom context to loaded page using 'data-context-name' attribute
<a href = "#" data-template = "about" data-context-name = "about" class = "item-link item-content">
<div class = "item-inner">
//provides link as 'About'
<div class = "item-title">About</div>
</div>
</a>
</li>
<li>
//a context name for this link we pass context path from template7Data root
<a href = "/framework7/src/likes.html" class = "item-link item-content">
<div class = "item-inner">
//provides link as 'Likes'
<div class = "item-title">Likes</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script type = "text/template7" id = "about">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left sliding">
<a href = "#" class = "back link"> <i class = "icon icon-back"></i><span>Back</span></a>
</div>
<div class = "center sliding">About Me</div>
<div class = "right">
<a href = "#" class = "link icon-only open-panel"> <i class = "icon icon-bars"></i></a>
</div>
</div>
</div>
<div class = "pages">
<div data-page = "about" class = "page">
<div class = "page-content">
<div class = "content-block">
<div class = "content-block-inner">
//displays the details of the user by using the 'my-app.js' file
<p>Hello, i am <b>{{firstname}} {{lastname}}</b>,
<b>{{age}}</b> years old and working as
<b>{{position}}</b> at <b>{{company}}</b>.</p>
</div>
</div>
</div>
</div>
</div>
</script>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script type = "text/javascript"
src = "/framework7/src/js/my-app.js">
</script>
</body>
</html>my-app.js
// Initialize your app
var myApp = new Framework7 ({
animateNavBackIcon: true,
// Enable templates auto precompilation
precompileTemplates: true,
// Enabled rendering pages using Template7
template7Pages: true,
// Specify Template7 data for pages
template7Data: {
//provides the url for different page with data-page = "likes"
'url:likes.html': {
likes: [
{
title: 'Nelson Mandela',
description: 'Champion of Freedom'
},
{
title: 'Srinivasa Ramanujan',
description: 'The Man Who Knew Infinity'
},
{
title: 'James Cameron',
description: 'Famous Filmmaker'
}
]
},
about: {
firstname: 'William ',
lastname: 'Root',
age: 27,
position: 'Developer',
company: 'TechShell',
}
}
});
// Add main View
var mainView = myApp.addView('.view-main', {
// Enable dynamic Navbar
dynamicNavbar: true
});likes.html
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left sliding">
<a href = "#" class = "back link"> <i class = "icon icon-back"></i><span>Back</span></a>
</div>
<div class = "center sliding">Likes</div>
<div class = "right">
<a href = "#" class = "link icon-only open-panel"> <i class = "icon icon-bars"></i></a>
</div>
</div>
</div>
<div class = "pages">
<div data-page = "likes" class = "page">
<div class = "page-content">
<div class = "content-block-title">My Likes</div>
<div class = "list-block media-list">
//iterate through likes
<ul>
{{#each likes}}
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title-row">
//displays the title and description by using the 'my-app.js' file
<div class = "item-title">{{title}}</div>
</div>
<div class = "item-subtitle">{{description}}</div>
</div>
</li>
{{/each}}
</ul>
</div>
</div>
</div>
</div>Produzione
Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra indicato:
Salva il codice HTML sopra indicato come index.html file nella cartella principale del server.
Apri questo file HTML come http: //localhost/index.html e l'output viene visualizzato come mostrato di seguito.
L'esempio fornisce i collegamenti, che visualizzano le informazioni sull'utente come i dettagli dell'utente, i Mi piace all'utente quando si fa clic su tali collegamenti.
Descrizione
Quando si toccano i collegamenti e i pulsanti, vengono evidenziati. Questo viene fatto dallo stato attivo in Framework7.
- Si comporta come un'app nativa, non come un'app web ..
- Ha una libreria di clic rapidi incorporata e dovrebbe essere abilitato.
- La classe stato attivo è la stessa del selettore CSS : active .
- Lo stato attivo viene abilitato aggiungendo la classe watch-active-state all'elemento <html> .
Il codice seguente viene utilizzato per lo stato attivo in stile CSS:
/* Usual state */
.my-button {
color: red;
}
/* Active/tapped state */
.my-button.active-state {
color: blue;
}Il codice seguente mostra la compatibilità di fallback, quando lo stato attivo o i clic rapidi è disabilitato:
/* 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;
}Descrizione
L'evento Tap hold viene utilizzato per attivare (abilitare) dopo un evento di tocco prolungato e completo, quindi solo è chiamato evento tap hold . L' attesa Tab è un built-inFast Clicks biblioteca.
I seguenti parametri vengono utilizzati per disabilitare o abilitare e configurati per impostazione predefinita:
| S.No | Parametro e descrizione | genere | Predefinito |
|---|---|---|---|
| 1 | tapHold Per abilitare gli eventi tap hold quando è impostato su true. |
booleano | falso |
| 2 | tapHoldDelay Specifica la durata della pressione del tocco prima dell'attivazione dell'evento taphold sull'elemento target. |
numero | 750 |
| 3 | tapHoldPreventClicks L'evento tap hold non verrà attivato dopo aver fatto clic sull'evento. |
booleano | vero |
Il codice seguente viene utilizzato per abilitare gli eventi tap hold:
var myApp = new Framework7 ({
tapHold: true //enable tap hold events
});
var $$ = Dom7;
$$('.some-link').on('taphold', function () {
myApp.alert('Tap hold fired!');
});Descrizione
Touch Ripple è un effetto supportato solo nel tema materiale di Framework7. Per impostazione predefinita, è abilitato nel tema del materiale ed è possibile disabilitarlo utilizzando il parametro materialRipple: false .
Elementi di ondulazione
Puoi abilitare gli elementi a catena in modo che corrispondano ad alcuni selettori CSS come:
- ripple
- a.link
- a.item-link
- .button
- .tab-link
- .label-radio
- .label-checkbox ecc.
Questi sono specificati nel parametro materialRippleElements . È necessario abilitare il tocco ripple, aggiungere il selettore dell'elemento al parametro materialRippleElements per utilizzare l'effetto a catena, o semplicemente usare la classe ripple .
Ripple Wave Color
Il colore del ripple può essere modificato sull'elemento aggiungendo la classe ripple- [color] all'elemento.
Ad esempio:
<a href = "#" class = "button ripple-orange">Ripple Button</a>oppure puoi definire il colore dell'onda di increspatura utilizzando il CSS come mostrato di seguito -
.button .ripple-wave {
background-color: #FFFF00;
}Disabilita gli elementi increspati
È possibile disabilitare il ripple per alcuni elementi specificati aggiungendo la classe no-ripple a quegli elementi. Ad esempio:
<a href = "#" class = "button no-ripple">Ripple Button</a>