Framework7 - Changer de vue depuis la barre d'onglets
La description
Un seul onglet peut être utilisé pour basculer entre les vues avec sa propre navigation et mise en page.
Exemple
L'exemple suivant montre l'utilisation de changer de vue à partir de la barre d'onglets dans Framework7 -
<!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>Switch views from Tab bar </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>
<style>
i.demo-icon-1 {
width:30px;
height:30px;
backgroundimage:url("data:image/svg+xml;charset=utf-8,
<svg xmlns = 'http://www.w3.org/2000/svg' viewBox = '0 0 30 30' fill = '%23929292'>
<g><circle cx = '15.2' cy = '8.8' r = '1.5'/>
<polygon points = '16.7,12.3 16.7,11.7 16.7,11.3 13.7,11.3 13.7,
12.3 14.7,12.3 14.7,20.3 13.7,20.3 13.7,21.3 17.7,21.3 17.7,20.3 16.7,20.3'/>
<path d = 'M15.2,2.3C8.3,2.3,2.7,7.9,2.7,14.8s5.6,12.5,12.5,12.5c6.9,0,12.5-5.6,
12.512.5S22.1,2.3,15.2,2.3z M15.2,26.3 c-6.3,0-11.5-5.2-11.511.5S8.8,3.3,15.2,3.3s11.5,
5.2,11.5,11.5S21.5,26.3,15.2,26.3z'/>
</g>
</svg>"
);
}
. active i.demo-icon-1 {
background-image:url("data:image/svg+xml;charset = utf8,
<svg xmlns = 'http://www.w3.org/2000/svg' x = '0px' y = '0px' viewBox = '0 0 30 30' fill = '%23007aff'>
<path d = 'M15,2.6C8.1,2.6,2.5,8.2,2.5,15.1C2.5,22,8.1,27.6,15,27.6S27.5,22,27.5,
15.1C2 7.5,8.2,21.9,2.6,15,2.6z M15,7.6 c0.8,0,1.5,0.7,1.5,1.5c0,0.8-0.7,1.5-1.5,1.5c0.8,
0-1.5-0.7-1.5-1.5C13.5,8.3,14.2,7.6,15,7.6z M17.5,21.6h-4v-1h1v-8h-1v1h3V12 v0.6v8h1V21.6z'/>
</svg>"
);
}
i.demo-icon2 {
width:25px;
height:30px;
background-image:url("data:image/svg+xml;charset = utf8,
<svg xmlns = 'http://www.w3.org/2000/svg' x = '0px' y = '0px' viewBox = '0 0 25 17' fill = '%23929292'>
<path d = 'M19.5,0h-14L0,6v11h25V6L19.5,0z M5.9,1h13.2l4.5,5H16c0,1.9-1.6,3.4-3.5,3.4C10.6,
9.4,9,7.9,9,6H1.4L5.9,1z M24,16H1V7h7.1 c0.5,1.9,2.3,3.4,4.4,3.4s3.9-1.5,4.43.4H24V16z'/>
</svg>"
);
}
.active i.demo-icon-2 {
backgroundimage:url("data:image/svg+xml;charset = utf-8,
<svg xmlns = 'http://www.w3.org/2000/svg' x = '0px' y = '0px' viewBox = '0 0 25 17' fill = '%23007aff'>
<path d = 'M19.5,0h-14L0,6v11h25V6L19.5,0z M5.9,1h13.2l4.5,5H16c0,1.9-1.6,3.43.5,3.4C10.6,
9.4,9,7.9,9,6H1.3L5.9,1z'/>
</svg>"
);
}
i.demo-icon3 {
width:30px;
height:30px;
background-image:url("data:image/svg+xml;charset = utf8,
<svg xmlns = 'http://www.w3.org/2000/svg' x = '0px' y = '0px' viewBox = '0 0 30 19' fill = '%23929292'>
<path d = 'M16.8,1c3.7,0,6.8,3,6.8,6.8l0,0.1c0,0,0,0.1,0,0.1l0,1l1,0C27,9,29,11,29,13.5 c0,
2.5-2,4.5-4.5,4.5H6c-2.8,0-5-2.2-5-5 c0-2.1,1.4-4,3.4-4.7L5,8.1l0.10.6C5.3,6,6.5,5,8,5c0.4,0,
0.9,0.1,1.3,0.3l0.9,0.5l0.40.9C11.8,2.5,14.2,1,16.8,1 M16.8,0 c-3.1,0-5.7,1.87,4.4C9.2,4.2,8.6,
4,8,4C6,4,4.4,5.4,4.1,7.3C1.7,8.1,0,10.4,0,13c0,3.3,2.7,6,6,6 h18.5v0c3,0,
5.5-2.5,5.5-5.5 c0-3-2.5-5.5-5.5-5.5c0-0.1,0-0.2,00.2C24.5,3.5,21.1,0,16.8,0L16.8,0z'/>
</svg>"
);
}
.active i.demo-icon3 {
background-image:url("data:image/svg+xml;charset = utf-8,
<svg xmlns = 'http://www.w3.org/2000/svg' x = '0px' y = '0px' viewBox = '0 0 30 19' fill = '%23007aff'>
<path d = 'M24.5,8c0-0.1,0-0.2,0-0.2C24.5,3.5,21,0,16.8,0c3.1,0-5.7,1.8-7,4.4C9.2,4.2,8.6,4,8,4C6,4,4.4,
5.4,4,7.3 C1.7,8.1,0,10.4,0,13c0,3.3,2.7,6,6,6h18.5v0c3,0,5.5-2.5,5.55.5C30,10.5,27.5,8,24.5,8z'/>
</svg>"
);
}
</style>
<div class = "views tabs toolbar-fixed">
<div id = "tab1" class = "view tab active">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "center">View 1</div>
</div>
</div>
<div class = "pages navbar-fixed">
<div data-page = "home-1" class = "page">
<div class = "page-content">
<div class = "content-block">
<p>This is view 1</p>
</div>
</div>
</div>
</div>
</div>
<div id = "tab2" class = "view tab">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "center">View 2</div>
</div>
</div>
<div class = "pages navbar-fixed">
<div data-page = "home-2" class = "page">
<div class = "page-content">
<div class = "content-block">
<p>This is view 2</p>
</div>
</div>
</div>
</div>
</div>
<div id = "tab3" class = "view tab">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "center">View 3</div>
</div>
</div>
<div class = "pages navbar-fixed">
<div data-page = "home-3" class = "page">
<div class = "page-content">
<div class = "content-block">
<p>This is view 3</p>
</div>
</div>
</div>
</div>
</div>
<div class = "toolbar tabbar">
<div class = "toolbar-inner">
<a href = "#tab1" class = "tab-link active"> <i class = "icon demo-icon-1"></i></a>
<a href = "#tab2" class = "tab-link"><i class = "icon demo-icon-2"></i></a>
<a href = "#tab3" class = "tab-link"><i class = "icon demo-icon-3"></i></a>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
// here initialize the app
var myApp = new Framework7();
// If your using custom DOM library, then save it to $$ variable
var $$ = Dom7;
// Add the view
var mainView = myApp.addView('.view-main', {
// enable the dynamic navbar for this view:
dynamicNavbar: true
});
</script>
</body>
</html>Production
Exécutons les étapes suivantes pour voir comment fonctionne le code donné ci-dessus -
Enregistrez le code HTML ci-dessus sous switch_views_from_tab_bar.html fichier dans le dossier racine de votre serveur.
Ouvrez ce fichier HTML en tant que http: //localhost/switch_views_from_tab_bar.html et la sortie s'affiche comme indiqué ci-dessous.
L'exemple fournit un seul onglet qui peut être utilisé pour basculer entre les vues avec sa propre navigation et mise en page.