framework7-without-localstorage
Version:
Full featured mobile HTML framework for building iOS & Android apps
134 lines • 5.9 kB
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>My App</title>
<!-- Path to Framework7 Library CSS-->
<link rel="stylesheet" href="../../dist/css/framework7.ios.min.css">
<!-- Path to your custom app styles-->
<link rel="stylesheet" href="css/my-app.css">
</head>
<body>
<!-- Status bar overlay for fullscreen mode-->
<div class="statusbar-overlay"></div>
<!-- Panels overlay-->
<div class="panel-overlay"></div>
<!-- Left panel with reveal effect-->
<div class="panel panel-left panel-cover">
<!-- Left view-->
<div class="view view-left navbar-through">
<div class="navbar">
<div class="navbar-inner">
<div class="left"></div>
<div class="center sliding">Left View</div>
<div class="right"></div>
</div>
</div>
<div class="pages">
<div data-page="index-left" class="page">
<div class="page-content">
<div class="content-block-title">Left View Links</div>
<div class="list-block">
<ul>
<li><a href="left-page-1.html" class="item-link">
<div class="item-content">
<div class="item-inner">
<div class="item-title">Left Page 1</div>
</div>
</div></a></li>
<li><a href="left-page-2.html" class="item-link">
<div class="item-content">
<div class="item-inner">
<div class="item-title">Left Page 2</div>
</div>
</div></a></li>
</ul>
</div>
<div class="content-block-title">Control Main View</div>
<div class="list-block">
<ul>
<li><a href="about.html" data-view=".view-main" class="item-link close-panel">
<div class="item-content">
<div class="item-inner">
<div class="item-title">About</div>
</div>
</div></a></li>
<li><a href="services.html" data-view=".view-main" class="item-link close-panel">
<div class="item-content">
<div class="item-inner">
<div class="item-title">Services</div>
</div>
</div></a></li>
<li><a href="#" data-view=".view-main" class="back item-link close-panel">
<div class="item-content">
<div class="item-inner">
<div class="item-title">Back in history</div>
</div>
</div></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Right panel with cover effect-->
<div class="panel panel-right panel-reveal">
<div class="content-block">
<p>Right panel content goes here</p>
</div>
</div>
<!-- Views-->
<div class="views">
<!-- Right view, it is main view-->
<div class="view view-main navbar-through">
<div class="navbar">
<div class="navbar-inner">
<div class="center sliding">Main View</div>
<div class="right"><a href="#" data-panel="left" class="link open-panel icon-only"><i class="icon icon-bars"></i></a></div>
</div>
</div>
<!-- Pages-->
<div class="pages">
<!-- Page, data-page contains page name-->
<div data-page="index-1" class="page">
<!-- Scrollable page content-->
<div class="page-content">
<div class="content-block-title">Hello</div>
<div class="content-block">
<div class="content-block-inner">
<p>This is an example of split view application layout where left view degrades to panel on narrow screens (iPad portrait and iPhone). It behaves like default Mail app on iOS 7.</p>
<p>Each view may have different layout, different navbar type (dynamic, fixed or static) or without navbar. You can easily control one view from another without any line of JavaScript just using "data-view" attribute on links.</p>
<p>Additional right panel is also available: <a href="#" data-panel="right" class="open-panel">right panel</a></p>
</div>
</div>
<div class="list-block">
<ul>
<li><a href="about.html" class="item-link">
<div class="item-content">
<div class="item-inner">
<div class="item-title">About</div>
</div>
</div></a></li>
<li><a href="services.html" class="item-link">
<div class="item-content">
<div class="item-inner">
<div class="item-title">Services</div>
</div>
</div></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Path to Framework7 Library JS-->
<script type="text/javascript" src="../../dist/js/framework7.min.js"></script>
<!-- Path to your app js-->
<script type="text/javascript" src="js/my-app.js"></script>
</body>
</html>