Framework7 - Visualizza app e metodi correlati
Descrizione
La vista (<div class = "view">) viene scollegata dalla sezione visiva dell'app composta da impostazioni, navigazione e cronologia proprie. Ogni vista può avere una diversa NAVBAR e layout della barra degli strumenti.
Visualizza il contenitore wrapper per tutte le viste visive eccetto modali e pannelli . Quando le visualizzazioni sono impostate come wrapper principale per il corpo dell'app, è consentito un solo elemento visualizzazioni . Il codice seguente mostra la struttura HTML per le visualizzazioni:
<body>
...
<div class = "panel panel-left panel-cover">
<div class = "view panel-view"> .... </div>
</div>
<!-- Views -->
<div class = "views">
<!-- Your main view -->
<div class = "view view-main">
<!-- Navbar-->
<!-- Pages -->
<!-- Toolbar-->
</div>
<!-- Another view -->
<div class = "view another-view">
<!-- Navbar-->
<!-- Pages -->
<!-- Toolbar-->
</div>
</div>
<div class = "popup">
<div class = "view popup-view"> .... </div>
</div>
....
</body>All'inizializzazione della vista , framework7 consente di utilizzare i metodi disponibili per NAVBAR come mostrato di seguito:
| S.No | Descrizione e metodi |
|---|---|
| 1 | myApp.hideNavbar(navbar) È usato per nascondere un particolare NAVBAR. Il NAVBAR può essere un percorso curvo o una stringa (con selettore CSS) del NAVBAR richiesto ed è un parametro obbligatorio. |
| 2 | myApp.showNavbar(navbar) È usato per mostrare un particolare NAVBAR. Il NAVBAR può essere un percorso curvo o una stringa (con selettore CSS) del NAVBAR richiesto ed è un parametro obbligatorio. |
| 3 | view.hideNavbar() Nasconde NAVBAR in questa visualizzazione. |
| 4 | view.showNavbar() Mostra NAVBAR in questa vista. |
| 5 | myApp.sizeNavbars(viewContainer) Viene utilizzato per ricalcolare gli stili di posizione per Navbar. Il viewContainer può essere una stringa del selettore CSS o un percorso curvo e viene utilizzato solo dal tema iOS. |
esempio
L'esempio seguente mostra l'uso dei metodi Framework7 view, che nasconde la NAVBAR quando si fa clic su Hide Navbar (NAVBAR utilizza .hide-class) facendo clic sul pulsante e mostra NAVBAR Mostra Navbar (NAVBAR utilizza .show-class) pulsante .
<!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>Navbar View Methods</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">
<a href = "#" class = "link"> <i class = "icon icon-back"></i><span>Previous</span></a>
</div>
<div class = "center">Center Part</div>
<div class = "right">
<a href = "#" class = "link icon-only"> <i class = "icon icon-bars"></i></a>
</div>
</div>
</div>
<div class = "page-content">
<div class = "content-block">
<p><a href = "#" class = "button hide-navbar">Hide Navbar</a></p>
<p> <a href = "#" class = "button show-navbar">Show Navbar</a></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. Integer
sit amet lacus eget ipsum pulvinar interdum. Proin semper turpis sed placerat
dapibus. Sed iaculis id nibh a viverra. Sed vitae tellus sed purus lacinia
dignissim. 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. Integer
sit amet lacus eget ipsum pulvinar interdum. Proin semper turpis sed placerat
dapibus. Sed iaculis id nibh a viverra. Sed vitae tellus sed purus lacinia
dignissim. 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. Integer
sit amet lacus eget ipsum pulvinar interdum. Proin semper turpis sed placerat
dapibus. Sed iaculis id nibh a viverra. Sed vitae tellus sed purus lacinia
dignissim. 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. Integer
sit amet lacus eget ipsum pulvinar interdum. Proin semper turpis sed placerat
dapibus. Sed iaculis id nibh a viverra. Sed vitae tellus sed purus lacinia
dignissim. Aenean sagittis interdum leo in molestie. Aliquam sodales in diam
eu consectetur. Sed posuere a orci id imperdiet.</p>
</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 $ = Framework7.$;
var mainView = myApp.addView('.view-main');
$('.hide-navbar').on('click', function () {
mainView.hideNavbar();
});
$('.show-navbar').on('click', function () {
mainView.showNavbar();
});
</script>
</body>
</html>produzione
Eseguiamo i seguenti passaggi sopra indicati per vedere come funziona il codice:
Salva il codice HTML indicato sopra navbar_app_view.html file nella cartella principale del server.
Apri questo file HTML come http: as //localhost/navbar_app_view.html e l'output viene visualizzato come mostrato di seguito.
Quando esegui il codice, puoi nascondere la NAVBAR facendo clic sul pulsante e Nascondi Navbar mostra NAVBAR facendo clic sul pulsante Mostra Navbar.