Framework7 - Ver aplicativo e métodos relacionados
Descrição
A visualização (<div class = "view">) é desconectada da seção visual do aplicativo que consiste em sua própria configuração, navegação e histórico. Cada visualização pode ter um NAVBAR diferente e layouts de barra de ferramentas.
Ele visualiza o contêiner do wrapper para todas as visualizações visuais, exceto modais e painéis . Quando views é definido como um wrapper principal para o corpo do seu aplicativo, apenas um elemento views é permitido. O código a seguir mostra a estrutura HTML para visualizações -
<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>Ao inicializar o View , framework7 permite que você use os métodos disponíveis para NAVBAR conforme mostrado abaixo -
| S.Não | Descrição e métodos |
|---|---|
| 1 | myApp.hideNavbar(navbar) É usado para ocultar um determinado NAVBAR. O NAVBAR pode ser um caminho curvo ou string (com seletor CSS) do NAVBAR necessário e é um parâmetro obrigatório. |
| 2 | myApp.showNavbar(navbar) É usado para mostrar um NAVBAR específico. O NAVBAR pode ser um caminho curvo ou string (com seletor CSS) do NAVBAR necessário e é um parâmetro obrigatório. |
| 3 | view.hideNavbar() Ele oculta o NAVBAR nesta visualização. |
| 4 | view.showNavbar() Mostra NAVBAR nesta vista. |
| 5 | myApp.sizeNavbars(viewContainer) É usado para recalcular estilos posicionais para Navbar. O viewContainer pode ser uma string de seletor CSS ou um caminho curvo e é usado apenas pelo tema iOS. |
exemplo
O exemplo a seguir demonstra o uso dos métodos Framework7 view, que oculta o NAVBAR quando você clica em Ocultar Navbar (NAVBAR usa .hide-class) clicando no botão e mostra NAVBAR Mostrar Navbar (NAVBAR usa .show-class) .
<!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>resultado
Vamos realizar as seguintes etapas fornecidas acima para ver como o código funciona -
Salve o código HTML fornecido acima navbar_app_view.html arquivo na pasta raiz do servidor.
Abra este arquivo HTML como http: as //localhost/navbar_app_view.html e a saída é exibida conforme mostrado abaixo.
Ao executar o código, você pode ocultar o NAVBAR clicando no botão e Ocultar Navbar mostra o NAVBAR clicando no botão Mostrar Navbar.