Framework7 - Diseño fijo
Descripción
En este diseño, la barra de navegación y la barra de herramientas serán fijas y no pueden ser páginas desplazables. Cada página también puede tener su propia barra de navegación y la barra de herramientas.
ejemplo
El siguiente ejemplo demuestra el uso de un diseño fijo en Framework7. La barra de navegación y la barra de herramientas en el siguiente ejemplo parecen estar arregladas.
Primero, crearemos nuestro fixed_layout.html archivo.
<!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>Fixed 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">
<div data-page = "home" class = "page navbar-fixed toolbar-fixed">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left"></div>
<div class = "center">Fixed Navbar</div>
<div class = "right"></div>
</div>
</div>
<div class = "page-content">
<div class = "content-block">
<p><a href = "fixed_layout-services.html">Services page</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>
</div>
</div>
<div class = "toolbar">
<div class = "toolbar-inner">
<a href = "#" class = "link">Link 1</a>
<a href="#" class="link">Link 1</a>
</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');
</script>
</body>
</html>A continuación, cree las páginas HTML, es decir fixed_layout-services.html Como se muestra abajo -
<div class = "views">
<div class = "view view-main">
<div class = "pages">
<div data-page = "services" class = "page navbar-fixed toolbar-fixed">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "center">Services Page</div>
</div>
</div>
<div class = "page-content">
<div class = "content-block">
<p><a href = "bars-fixed-index.html" class = "back">Go back to Home page</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 class = "toolbar">
<div class = "toolbar-inner">
<a href = "#" class = "link">Service link 1</a>
<a href = "#" class = "link">Service link 2</a>
</div>
</div>
</div>
</div>
</div>
</div>salida
Realicemos los siguientes pasos dados anteriormente para ver cómo funciona el código:
Guarde el código HTML proporcionado anteriormente como fixed_layout.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/fixed_layout.html y el resultado se muestra como se muestra a continuación.
Cuando se desplaza por la página, la barra de navegación de la barra de herramientas se fijará y estarán visibles en la pantalla.
Puede crear páginas independientes para todos los enlaces de pie de página.