framework7-without-localstorage
Version:
Full featured mobile HTML framework for building iOS & Android apps
108 lines (103 loc) • 4.2 kB
text/jade
doctype
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
// 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")
body
// Status bar overlay for fullscreen mode
.statusbar-overlay
// Panels overlay
.panel-overlay
// Left panel with reveal effect
.panel.panel-left.panel-reveal
.content-block
p Left panel content goes here
// Right panel with cover effect
.panel.panel-right.panel-cover
.content-block
p Right panel content goes here
// Views
.views
// Left view
.view.view-left.navbar-through
.navbar
.navbar-inner
.center.sliding Left View
.pages
.page(data-page="index-left")
.page-content
.content-block-title Left View Links
.list-block
ul
li
a(href="left-page-1.html").item-link
.item-content
.item-inner
.item-title Left Page 1
li
a(href="left-page-2.html").item-link
.item-content
.item-inner
.item-title Left Page 2
.content-block-title Control Main View
.list-block
ul
li
a(href="about.html", data-view=".view-main").item-link
.item-content
.item-inner
.item-title About
li
a(href="services.html", data-view=".view-main").item-link
.item-content
.item-inner
.item-title Services
li
a(href="#", data-view=".view-main").back.item-link
.item-content
.item-inner
.item-title Back in history
// Right view, it is main view
.view.view-main.navbar-through
.navbar
.navbar-inner
.center.sliding Main View
// Pages
.pages
// Page, data-page contains page name
.page(data-page="index-1")
// Scrollable page content
.page-content
.content-block-title Hello
.content-block
.content-block-inner
p This is an example of split view application layout, commonly used on iPad apps. The main approach of such kind of layout is that you can see different views at the same time.
p Each view may have different layout, different navbar type (dynamic, fixed or static) or without navbar.
p The fun thing is that you can easily control one view from another without any line of JavaScript just using "data-view" attribute on links.
p And of course, your favorite panels are still here:
a(href="#").open-panel left
| and
a(href="#", data-panel="right").open-panel right
.list-block
ul
li
a(href="about.html").item-link
.item-content
.item-inner
.item-title About
li
a(href="services.html").item-link
.item-content
.item-inner
.item-title Services
// Path to Framework7 Library JS
script(type="text/javascript", src="../../dist/js/framework7.min.js")
// Path to your app js
script(type="text/javascript", src="js/my-app.js")