Skip to content

Instantly share code, notes, and snippets.

@kristiannissen

kristiannissen/about.html

Last active December 23, 2019 07:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kristiannissen/e68a46e1ebd52aa9cecf4dfc15963ecb to your computer and use it in GitHub Desktop.
Save kristiannissen/e68a46e1ebd52aa9cecf4dfc15963ecb to your computer and use it in GitHub Desktop.
Download ZIP
framework7 list
Raw
about.html
<div class="page">
<div class="page-content">
<div class="block">
<p>This page created dynamically</p>
</div>
</div>
</div>
Raw
console.json
{
app: t {eventsParents: Array(0), eventsListeners: {…}, params: {…}, id: "mobi.grocerymonkey", name: "Grocery Monkey", …}
view: t {eventsParents: Array(1), eventsListeners: {…}, params: {…}, routes: Array(3), app: t, …}
router: t {eventsParents: Array(1), eventsListeners: {…}, params: {…}, isAppRouter: false, app: t, …}
$el: Dom7 {0: div.page.page-current, length: 1}
el: div.page.page-current
$pageEl: Dom7 {0: div.page.page-current, length: 1}
pageEl: div.page.page-current
$navbarEl: Dom7 {length: 0}
navbarEl: undefined
name: "home"
position: "next"
from: "next"
to: "current"
direction: "forward"
route: {query: {…}, hash: undefined, params: {…}, url: "/about/", path: "/about/", …}
pageFrom: {app: t, view: t, router: t, $el: Dom7, el: div.page.page-previous, …}
swipeBack: false
__proto__: Object
}
Raw
list.html
<!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, viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- Color theme for statusbar (Android only) -->
<meta name="theme-color" content="#2196f3">
<!-- Your app title -->
<title>Grocery Monkey App</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/4.5.2/css/framework7.bundle.min.css">
<link rel="stylesheet" type="text/css" href="/css/app.css">
</head>
<body>
<!-- App root element -->
<div id="app">
<!-- Your main view, should have "view-main" class -->
<div class="view view-main">
<!-- Initial Page, "data-name" contains page name -->
<div data-name="home" class="page">
<!-- Top Navbar -->
<div class="navbar">
<div class="navbar-bg"></div>
<div class="navbar-inner">
<div class="title">Grocery List</div>
</div>
</div>
<!-- Bottom Toolbar -->
<div class="toolbar toolbar-bottom">
<div class="toolbar-inner">
<!-- Toolbar links -->
<a href="/my-list/" class="link">My List</a>
<a href="#" class="link">Link 2</a>
</div>
</div>
<!-- Scrollable page content -->
<div class="page-content">
<p>Page content goes here</p>
<!-- Link to another page -->
<a href="/about/">About app</a>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/framework7/4.5.2/js/framework7.bundle.min.js"></script>
<script async src="/js/main.js"></script>
</body>
</html>
Raw
main.js
/* Main JS Main JS */
var app = new Framework7({
root: '#app',
name: 'Grocery Monkey',
id: 'mobi.grocerymonkey',
serviceWorker: {
path: './../sw.js',
scope: '/'
},
on: {
init: () => console.log('Hello'),
pageInit: () => console.log('Kitty')
},
routes: [
{
name: 'about',
path: '/about/',
url: '/pages/about.html',
on: {
pageInit: (e, page) => console.log(page),
pageAfterIn: (e, page) => console.log(page)
}
},
{
name: 'My list',
path: '/my-list/',
async: (routeTo, routeFrom, resolve, reject) => {
app.request.json('/somewhere', (data) => {
resolve({
template: '<div class="page">Hello Kitty</div>'
}),
reject({
template: '<div class="page">Oh no!</div>'
})
})
},
on: {
pageInit: (e, page) => console.log(page),
pageAfterIn: (e, page) => console.log(page)
}
},
{
name: '404',
path: '(.*)',
url: './pages/404.html'
}
]
});
var mainView = app.views.create('.view-main');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment