Framework7 - Afficher l'application et les méthodes associées
La description
La vue (<div class = "view">) est déconnectée de la section visuelle de l'application composée de ses propres paramètres, navigation et historique. Chaque vue peut avoir une NAVBAR et une disposition de barre d'outils différentes.
Il affiche le conteneur de wrapper pour toutes les vues visuelles à l'exception des modaux et des panneaux . Lorsque views est défini comme wrapper principal pour le corps de votre application, un seul élément views est autorisé. Le code suivant montre la structure HTML des vues -
<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>Lors de l'initialisation de la vue , framework7 vous permet d'utiliser les méthodes disponibles pour NAVBAR comme indiqué ci-dessous -
| S. Non | Description et méthodes |
|---|---|
| 1 | myApp.hideNavbar(navbar) Il est utilisé pour masquer une NAVBAR particulière. La NAVBAR peut être un chemin ou une chaîne courbe (avec sélecteur CSS) de la NAVBAR requise et est un paramètre obligatoire. |
| 2 | myApp.showNavbar(navbar) Il est utilisé pour afficher une NAVBAR particulière. La NAVBAR peut être un chemin ou une chaîne courbe (avec sélecteur CSS) de la NAVBAR requise et est un paramètre obligatoire. |
| 3 | view.hideNavbar() Il masque NAVBAR dans cette vue. |
| 4 | view.showNavbar() Il montre NAVBAR dans cette vue. |
| 5 | myApp.sizeNavbars(viewContainer) Il est utilisé pour recalculer les styles de position pour Navbar. Le viewContainer peut être une chaîne de sélection CSS ou un chemin incurvé et n'est utilisé que par le thème iOS. |
exemple
L'exemple suivant montre l'utilisation des méthodes Framework7 view, qui masque la NAVBAR lorsque vous cliquez sur Hide Navbar (NAVBAR utilise .hide-class) en cliquant sur le bouton et affiche NAVBAR Show Navbar (NAVBAR utilise .show-class) bouton .
<!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>production
Exécutons les étapes suivantes données ci-dessus pour voir comment le code fonctionne -
Enregistrez le code HTML ci-dessus navbar_app_view.html fichier dans le dossier racine de votre serveur.
Ouvrez ce fichier HTML en tant que http: as //localhost/navbar_app_view.html et la sortie s'affiche comme indiqué ci-dessous.
Lorsque vous exécutez le code, vous pouvez masquer la NAVBAR en cliquant sur le bouton et Hide Navbar affiche NAVBAR en cliquant sur le bouton Show Navbar.