Framework7 - Ver aplicación y métodos relacionados
Descripción
La vista (<div class = "vista">) está desconectada de la sección visual de la aplicación que consta de su propia configuración, navegación e historial. Cada vista puede tener diferentes diseños de barra de herramientas y NAVBAR.
Visualiza el contenedor contenedor para todas las vistas visuales excepto modales y paneles . Cuando las vistas se configuran como un contenedor principal para el cuerpo de su aplicación, solo se permite un elemento de vistas . El siguiente código muestra la estructura HTML para las vistas:
<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>Al inicializar la Vista , framework7 le permite utilizar los métodos disponibles para NAVBAR como se muestra a continuación:
| S. No | Descripción y métodos |
|---|---|
| 1 | myApp.hideNavbar(navbar) Se utiliza para ocultar una NAVBAR en particular. La barra de navegación puede ser trayectoria curva o cadena (con selector CSS) de barra de navegación requerida y es un parámetro necesario. |
| 2 | myApp.showNavbar(navbar) Se utiliza para mostrar una NAVBAR en particular. La barra de navegación puede ser trayectoria curva o cadena (con selector CSS) de barra de navegación requerida y es un parámetro necesario. |
| 3 | view.hideNavbar() Oculta NAVBAR en esta vista. |
| 4 | view.showNavbar() Muestra NAVBAR en esta vista. |
| 5 | myApp.sizeNavbars(viewContainer) Se utiliza para recalcular estilos posicionales para Navbar. El viewContainer puede ser una cadena de selección CSS o una ruta curva y solo lo usa el tema de iOS. |
ejemplo
El siguiente ejemplo demuestra el uso de los métodos Framework7 view, que oculta NAVBAR cuando hace clic en Hide Navbar (NAVBAR usa .hide-class) haciendo clic en el botón y muestra NAVBAR Show Navbar (NAVBAR usa .show-class) botón .
<!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>salida
Realicemos los siguientes pasos dados anteriormente para ver cómo funciona el código:
Guarde el código HTML proporcionado anteriormente navbar_app_view.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: as //localhost/navbar_app_view.html y el resultado se muestra como se muestra a continuación.
Cuando ejecuta el código, puede ocultar NAVBAR haciendo clic en el botón y Hide Navbar muestra NAVBAR haciendo clic en el botón Show Navbar.