forked from coresmart/persistencejs
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
103 lines (95 loc) · 4.24 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!DOCTYPE html>
<html lang='en' >
<head>
<title>jQuery mobile / persistencejs integration</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
<style>
.ui-mobile #jqm-home { background: #e5e5e5 url(assets/jqm-sitebg.png) top center repeat-x; }
.ui-mobile #jqm-homeheader { padding: 55px 25px 0; text-align: center }
.ui-mobile #jqm-homeheader h1 { margin: 0 0 10px; }
.ui-mobile #jqm-homeheader p { margin: 0; }
.ui-mobile #jqm-version { text-indent: -99999px; background: url(assets/version.png) top right no-repeat; width: 119px; height: 122px; overflow: hidden; position: absolute; top: 0; right: 0; }
.ui-mobile .jqm-themeswitcher { clear: both; margin: 20px 0 0; }
h2 { margin-top:1.5em; }
p code { font-size:1.2em; font-weight:bold; }
dt { font-weight: bold; margin: 2em 0 .5em; }
dt code, dd code { font-size:1.3em; line-height:150%; }
</style>
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
<script src="http://code.google.com/apis/gears/gears_init.js"></script>
<script src="../../lib/persistence.js"></script>
<script src="../../lib/persistence.store.sql.js"></script>
<script src="../../lib/persistence.store.websql.js"></script>
<script src="../../lib/persistence.store.memory.js"></script>
<script src="../../lib/persistence.jquery.js"></script>
<script src="../../lib/persistence.jquery.mobile.js"></script>
<script type="text/javascript">
if (location.protocol == "file:") {
alert("Didn't you read the README ? You need to load this page from a server.");
}
if (window.openDatabase) {
persistence.store.websql.config(persistence, "jquerymobile", 'database', 5 * 1024 * 1024);
} else {
persistence.store.memory.config(persistence);
}
persistence.define('Page', {
path: "TEXT",
data: "TEXT",
});
persistence.define('Image', {
path: "TEXT",
data: "TEXT",
});
persistence.define('Order', {
shipping: "TEXT"
});
persistence.schemaSync();
$('#reset').click(function() {
persistence.reset();
persistence.schemaSync();
return false;
});
</script>
</head>
<body>
<div data-role="page" data-theme="b" id="jqm-home">
<div id="jqm-homeheader">
<h1 id="jqm-logo"><img src="assets/jquery-logo.png" alt="jQuery Mobile Framework" width="235" height="61" /></h1>
<p>Touch-Optimized Web Framework for Smartphones & Tablets - now with PersistenceJS integration</p>
<p id="jqm-version">Alpha Release</p>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
<li data-role="list-divider">Local persistence demos</li>
<li><a href="docs/text.html">Text only</a></li>
<li><a href="docs/text_and_images.html">Text and images</a></li>
<li><a href="#form_submission">Form submission</a></li>
</ul>
</div>
<a id="reset" href="#" data-role="button" data-theme="c" class="ui-btn-right">Reset DB</a>
</div>
<div data-role="page" id="form_submission">
<div data-role="header">
<h1>Form submission</h1>
</div><!-- /header -->
<div data-role="content">
<form action="order/form-fake-response.html" method="post">
<fieldset>
<div data-role="fieldcontain">
<label for="shipping" class="select">Formsubmission (GET):</label>
<select name="shipping" id="shipping">
<option value="Standard shipping">Standard: 7 day</option>
<option value="Rush shipping">Rush: 3 days</option>
<option value="Express shipping">Express: next day</option>
<option value="Overnight shipping">Overnight</option>
</select>
</div>
<button type="submit" data-theme="a">Submit</button>
</fieldset>
</form>
</div>
</div>
</body>
</html>