Add localstorage management
This commit is contained in:
dario-cfpt
@ -1,19 +0,0 @@
|
||||
<div class="page">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner sliding">
|
||||
<div class="left">
|
||||
<a href="#" class="link back">
|
||||
<i class="icon icon-back"></i>
|
||||
<span class="ios-only">Back</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="title">Not found</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-content">
|
||||
<div class="block block-strong">
|
||||
<p>Sorry</p>
|
||||
<p>Requested content not found.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,25 +0,0 @@
|
||||
<div class="page" data-name="about">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner sliding">
|
||||
<div class="left">
|
||||
<a href="#" class="link back">
|
||||
<i class="icon icon-back"></i>
|
||||
<span class="ios-only">Back</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="title">About</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-content">
|
||||
<div class="block-title">About My App</div>
|
||||
<div class="block block-strong">
|
||||
<p>Fugiat perspiciatis excepturi, soluta quod non ullam deleniti. Nobis sint nemo consequuntur, fugiat. Eius perferendis animi autem incidunt vel quod tenetur nostrum, voluptate omnis quasi quidem illum consequuntur, a, quisquam.</p>
|
||||
<p>Laudantium neque magnam vitae nemo quam commodi, in cum dolore obcaecati laborum, excepturi harum, optio qui, consequuntur? Obcaecati dolor sequi nesciunt culpa quia perspiciatis, reiciendis ex debitis, ut tenetur alias.</p>
|
||||
</div>
|
||||
<div class="block">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni molestiae laudantium dignissimos est nobis delectus nemo ea alias voluptatum architecto, amet similique, saepe iste consectetur in repellat ut minus quibusdam!</p>
|
||||
<p>Molestias et distinctio porro nesciunt ratione similique, magni doloribus, rerum nobis, aliquam quae reiciendis quasi modi. Nam a recusandae, fugiat in ea voluptates fuga eius, velit corrupti reprehenderit dignissimos consequatur!</p>
|
||||
<p>Blanditiis, cumque quo adipisci. Molestiae, dolores dolorum quos doloremque ipsa ullam eligendi commodi deserunt doloribus inventore magni? Ea mollitia veniam nostrum nihil, iusto doloribus a at! Ea molestiae ullam delectus!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,257 +0,0 @@
|
||||
<div class="page" data-name="form">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner sliding">
|
||||
<div class="left">
|
||||
<a href="#" class="link back">
|
||||
<i class="icon icon-back"></i>
|
||||
<span class="ios-only">Back</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="title">Form</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-content">
|
||||
<div class="block-title">Form Example</div>
|
||||
<div class="list no-hairlines-md">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="item-content item-input">
|
||||
<div class="item-inner">
|
||||
<div class="item-title item-label">Name</div>
|
||||
<div class="item-input-wrap">
|
||||
<input type="text" placeholder="Your name"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="item-content item-input">
|
||||
<div class="item-inner">
|
||||
<div class="item-title item-label">E-mail</div>
|
||||
<div class="item-input-wrap">
|
||||
<input type="email" placeholder="E-mail"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="item-content item-input">
|
||||
<div class="item-inner">
|
||||
<div class="item-title item-label">URL</div>
|
||||
<div class="item-input-wrap">
|
||||
<input type="url" placeholder="URL"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="item-content item-input">
|
||||
<div class="item-inner">
|
||||
<div class="item-title item-label">Password</div>
|
||||
<div class="item-input-wrap">
|
||||
<input type="password" placeholder="Password"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="item-content item-input">
|
||||
<div class="item-inner">
|
||||
<div class="item-title item-label">Phone</div>
|
||||
<div class="item-input-wrap">
|
||||
<input type="tel" placeholder="Phone"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="item-content item-input">
|
||||
<div class="item-inner">
|
||||
<div class="item-title item-label">Gender</div>
|
||||
<div class="item-input-wrap">
|
||||
<select>
|
||||
<option>Male</option>
|
||||
<option>Female</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="item-content item-input">
|
||||
<div class="item-inner">
|
||||
<div class="item-title item-label">Birth date</div>
|
||||
<div class="item-input-wrap">
|
||||
<input type="date" placeholder="Birth day" value="2014-04-30"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Toggle</div>
|
||||
<div class="item-after">
|
||||
<label class="toggle toggle-init">
|
||||
<input type="checkbox">
|
||||
<span class="toggle-icon"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="item-content item-input">
|
||||
<div class="item-inner">
|
||||
<div class="item-title item-label">Slider</div>
|
||||
<div class="item-input-wrap">
|
||||
<div class="range-slider range-slider-init" data-label="true">
|
||||
<input type="range" value="50" min="0" max="100" step="1">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="align-top">
|
||||
<div class="item-content item-input">
|
||||
<div class="item-inner">
|
||||
<div class="item-title item-label">Textarea</div>
|
||||
<div class="item-input-wrap">
|
||||
<textarea placeholder="Bio"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="align-top">
|
||||
<div class="item-content item-input">
|
||||
<div class="item-inner">
|
||||
<div class="item-title item-label">Resizable</div>
|
||||
<div class="item-input-wrap">
|
||||
<textarea placeholder="Bio" class="resizable"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="block-title">Buttons</div>
|
||||
<div class="block block-strong">
|
||||
<p class="row">
|
||||
<a href="#" class="col button">Button</a>
|
||||
<a href="#" class="col button button-fill">Fill</a>
|
||||
</p>
|
||||
<p class="row">
|
||||
<a href="#" class="col button button-raised">Raised</a>
|
||||
<a href="#" class="col button button-raised button-fill">Raised Fill</a>
|
||||
</p>
|
||||
<p class="row">
|
||||
<a href="#" class="col button button-round">Round</a>
|
||||
<a href="#" class="col button button-round button-fill">Round Fill</a>
|
||||
</p>
|
||||
<p class="row">
|
||||
<a href="#" class="col button button-outline">Outline</a>
|
||||
<a href="#" class="col button button-round button-outline">Outline Round</a>
|
||||
</p>
|
||||
<p class="row">
|
||||
<a href="#" class="col button button-small button-outline">Small</a>
|
||||
<a href="#" class="col button button-small button-round button-outline">Small Round</a>
|
||||
</p>
|
||||
<p class="row">
|
||||
<a href="#" class="col button button-small button-fill">Small</a>
|
||||
<a href="#" class="col button button-small button-round button-fill">Small Round</a>
|
||||
</p>
|
||||
<p class="row">
|
||||
<a href="#" class="col button button-large button-raised">Large</a>
|
||||
<a href="#" class="col button button-large button-fill button-raised">Large Fill</a>
|
||||
</p>
|
||||
|
||||
<p class="row">
|
||||
<a href="#" class="col button button-large button-fill button-raised color-red">Large Red</a>
|
||||
<a href="#" class="col button button-large button-fill button-raised color-green">Large Green</a>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="block-title">Checkbox group</div>
|
||||
<div class="list">
|
||||
<ul>
|
||||
<li>
|
||||
<label class="item-checkbox item-content">
|
||||
<input type="checkbox" name="checkbox" value="Books" checked="checked"/>
|
||||
<i class="icon icon-checkbox"></i>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Books</div>
|
||||
</div>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label class="item-checkbox item-content">
|
||||
<input type="checkbox" name="checkbox" value="Movies"/>
|
||||
<i class="icon icon-checkbox"></i>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Movies</div>
|
||||
</div>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label class="item-checkbox item-content">
|
||||
<input type="checkbox" name="checkbox" value="Food"/>
|
||||
<i class="icon icon-checkbox"></i>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Food</div>
|
||||
</div>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label class="item-checkbox item-content">
|
||||
<input type="checkbox" name="checkbox" value="Drinks"/>
|
||||
<i class="icon icon-checkbox"></i>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Drinks</div>
|
||||
</div>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="block-title">Radio buttons group</div>
|
||||
<div class="list">
|
||||
<ul>
|
||||
<li>
|
||||
<label class="item-radio item-content">
|
||||
<input type="radio" name="radio" value="Books" checked="checked"/>
|
||||
<i class="icon icon-radio"></i>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Books</div>
|
||||
</div>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label class="item-radio item-content">
|
||||
<input type="radio" name="radio" value="Movies"/>
|
||||
<i class="icon icon-radio"></i>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Movies</div>
|
||||
</div>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label class="item-radio item-content">
|
||||
<input type="radio" name="radio" value="Food"/>
|
||||
<i class="icon icon-radio"></i>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Food</div>
|
||||
</div>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label class="item-radio item-content">
|
||||
<input type="radio" name="radio" value="Drinks"/>
|
||||
<i class="icon icon-radio"></i>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Drinks</div>
|
||||
</div>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,131 +0,0 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner sliding">
|
||||
<div class="left">
|
||||
<a href="#" class="link back">
|
||||
<i class="icon icon-back"></i>
|
||||
<span class="ios-only">Back</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="title">Component Page</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-content">
|
||||
<div class="block block-strong">
|
||||
<p>Component page is alos compiled with Template7, but it has much more functionality. In addition to Template7 page it has lifecycle hooks, events handling and data managment.</p>
|
||||
<p>It is useful to use Component page when you need page-specific logic.</p>
|
||||
</div>
|
||||
<div class="block-title">Events Handling</div>
|
||||
<div class="block block-strong">
|
||||
<a href="#" class="button button-raised" @click="openAlert">Open Alert</a>
|
||||
</div>
|
||||
<div class="block-title">Page Component Data</div>
|
||||
<div class="block block-strong">
|
||||
<p>Hello! My name is {{name}}. I am {{age}} years old.</p>
|
||||
<p>I like to play:</p>
|
||||
<ul>
|
||||
{{#each like}}
|
||||
<li>{{this}}</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
</div>
|
||||
<div class="block-title">Extended Context</div>
|
||||
<div class="block block-strong">
|
||||
<p>Component page context as Template7 page context is also extended with some additional variables.</p>
|
||||
<h4>$route</h4>
|
||||
<p>Contains properties of the current route:</p>
|
||||
<ul style="padding-left:25px">
|
||||
<li><b>$route.url</b>: {{$route.url}}</li>
|
||||
<li><b>$route.path</b>: {{$route.path}}</li>
|
||||
<li><b>$route.params</b>: {{js 'return JSON.stringify(this.$route.params)'}}</li>
|
||||
<li><b>$route.hash</b>: {{$route.hash}}</li>
|
||||
<li><b>$route.query</b>: {{js 'return JSON.stringify(this.$route.query)'}}</li>
|
||||
</ul>
|
||||
|
||||
<h4>$root</h4>
|
||||
<p>Root data & methods:</p>
|
||||
<ul style="padding-left:25px">
|
||||
<li><b>$root.user.firstName</b>: {{$root.user.firstName}}</li>
|
||||
<li><b>$root.user.lastName</b>: {{$root.user.lastName}}</li>
|
||||
<li><a @click="$root.helloWorld()">$root.helloWorld()</a></li>
|
||||
</ul>
|
||||
|
||||
<h4>$theme</h4>
|
||||
<p>Currently active theme:</p>
|
||||
<ul style="padding-left:25px">
|
||||
<li><b>$theme.ios</b>: {{$theme.ios}}</li>
|
||||
<li><b>$theme.md</b>: {{$theme.md}}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style>
|
||||
p {
|
||||
margin: 10px 0;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
return {
|
||||
// Lifecycle Hooks
|
||||
beforeCreate() {
|
||||
console.log('componentBeforeCreate', this)
|
||||
},
|
||||
created() {
|
||||
console.log('componentCreated', this)
|
||||
},
|
||||
beforeMount() {
|
||||
console.log('componentBeforeMount', this)
|
||||
},
|
||||
mounted() {
|
||||
console.log('componentMounted', this);
|
||||
},
|
||||
beforeDestroy() {
|
||||
console.log('componentBeforeDestroy', this);
|
||||
},
|
||||
destroyed() {
|
||||
console.log('componentDestroyed', this);
|
||||
},
|
||||
// Component Data
|
||||
data: function () {
|
||||
// Must return an object
|
||||
return {
|
||||
name: 'Jimmy',
|
||||
age: 25,
|
||||
like: ['Tennis', 'Chess', 'Football'],
|
||||
}
|
||||
},
|
||||
// Component Methods
|
||||
methods: {
|
||||
openAlert: function () {
|
||||
var self = this;
|
||||
self.$app.dialog.alert('Hello World');
|
||||
},
|
||||
},
|
||||
// Page Events
|
||||
on: {
|
||||
pageMounted: function(e, page) {
|
||||
console.log('pageMounted', page);
|
||||
},
|
||||
pageInit: function(e, page) {
|
||||
console.log('pageInit', page);
|
||||
},
|
||||
pageBeforeIn: function(e, page) {
|
||||
console.log('pageBeforeIn', page);
|
||||
},
|
||||
pageAfterIn: function(e, page) {
|
||||
console.log('pageAfterIn', page);
|
||||
},
|
||||
pageBeforeOut: function(e, page) {
|
||||
console.log('pageBeforeOut', page);
|
||||
},
|
||||
pageAfterOut: function(e, page) {
|
||||
console.log('pageAfterOut', page);
|
||||
},
|
||||
pageBeforeRemove: function(e, page) {
|
||||
console.log('pageBeforeRemove', page);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,46 +0,0 @@
|
||||
<div class="page">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner sliding">
|
||||
<div class="left">
|
||||
<a href="#" class="link back">
|
||||
<i class="icon icon-back"></i>
|
||||
<span class="ios-only">Back</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="title">Template7 Page</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-content">
|
||||
<div class="block block-strong">
|
||||
<p>This page was loaded and compiled with Template7 template engine.</p>
|
||||
</div>
|
||||
<div class="block-title">Extended Context</div>
|
||||
<div class="block block-strong">
|
||||
<p>Template7 page context is extended with some additional variables.</p>
|
||||
|
||||
<h4>$route</h4>
|
||||
<p>Contains properties of the current route:</p>
|
||||
<ul style="padding-left:25px">
|
||||
<li><b>$route.url</b>: {{$route.url}}</li>
|
||||
<li><b>$route.path</b>: {{$route.path}}</li>
|
||||
<li><b>$route.params</b>: {{js 'return JSON.stringify(this.$route.params)'}}</li>
|
||||
<li><b>$route.hash</b>: {{$route.hash}}</li>
|
||||
<li><b>$route.query</b>: {{js 'return JSON.stringify(this.$route.query)'}}</li>
|
||||
</ul>
|
||||
|
||||
<h4>$root</h4>
|
||||
<p>Root app data:</p>
|
||||
<ul style="padding-left:25px">
|
||||
<li><b>$root.user.firstName</b>: {{$root.user.firstName}}</li>
|
||||
<li><b>$root.user.lastName</b>: {{$root.user.lastName}}</li>
|
||||
</ul>
|
||||
|
||||
<h4>$theme</h4>
|
||||
<p>Currently active theme:</p>
|
||||
<ul style="padding-left:25px">
|
||||
<li><b>$theme.ios</b>: {{$theme.ios}}</li>
|
||||
<li><b>$theme.md</b>: {{$theme.md}}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,30 +0,0 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner sliding">
|
||||
<div class="left">
|
||||
<a href="#" class="back link">
|
||||
<i class="icon icon-back"></i>
|
||||
<span class="ios-only">Back</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="title">{{user.firstName}} {{user.lastName}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-content">
|
||||
<div class="block block-strong">
|
||||
{{user.about}}
|
||||
</div>
|
||||
<div class="list links-list">
|
||||
<ul>
|
||||
{{#each user.links}}
|
||||
<li><a class="external" target="_blank" href="{{url}}">{{title}}</a></li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
return {}
|
||||
</script>
|
||||
Reference in New Issue
Block a user