Framework7 - Mise en page fixe
La description
Dans cette mise en page, la barre de navigation et la barre d'outils seront fixes et ne peuvent pas être défilables. Chaque page peut également avoir sa propre barre de navigation et sa propre barre d'outils.
exemple
L'exemple suivant illustre l'utilisation de la disposition fixe dans Framework7. La barre de navigation et la barre d'outils dans l'exemple suivant semblent être fixes.
Tout d'abord, nous allons créer notre fixed_layout.html fichier.
<!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>Ensuite, créez les pages HTML ie fixed_layout-services.html comme indiqué ci-dessous -
<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>production
Exécutons les étapes suivantes données ci-dessus pour voir comment le code fonctionne -
Enregistrez le code HTML ci-dessus sous fixed_layout.html fichier dans le dossier racine de votre serveur.
Ouvrez ce fichier HTML en tant que http: //localhost/fixed_layout.html et la sortie s'affiche comme indiqué ci-dessous.
Lorsque vous faites défiler la page, la barre de navigation de la barre d'outils sera fixe et elle sera visible à l'écran.
Vous pouvez créer des pages distinctes pour tous les liens de pied de page.