/
dev.html
96 lines (91 loc) · 4.79 KB
/
dev.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
<!DOCTYPE html>
<html lang="en">
<head>
<!--meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>jQueryMobile - DateBox Demo</title>
<!--link href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.css" rel="stylesheet" type="text/css" /-->
<link href="http://code.jquery.com/mobile/latest/jquery.mobile.css" rel="stylesheet" type="text/css" />
<link type="text/css" href="../css/jqm-datebox.css" rel="stylesheet" />
<!-- NOTE: Script load order is significant! -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<!--script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script-->
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="../demos/extras.js"></script>
<script type="text/javascript" src="../js/jqm-datebox.core.js"></script>
<script type="text/javascript" src="../js/jqm-datebox.mode.calbox.js"></script>
<script type="text/javascript" src="../js/jqm-datebox.mode.datebox.js"></script>
<script type="text/javascript" src="../js/jqm-datebox.mode.flipbox.js"></script>
<script type="text/javascript" src="../js/jqm-datebox.mode.durationbox.js"></script>
<script type="text/javascript" src="../js/jqm-datebox.mode.slidebox.js"></script>
<script type="text/javascript" src="../js/jqm-datebox.mode.customflip.js"></script>
<script type="text/javascript" src="../js/jqm-datebox.mode.custombox.js"></script>
<script type="text/javascript" src="./jquery.mobile.datebox.i18n.en_US.utf8.js"></script>
<script type="text/javascript">
jQuery.extend(jQuery.mobile.datebox.prototype.options, {
'usePlaceholder': true,
'useNewStyle': false
});
</script>
<style>
.ui-icon-dice { background-image: url('img/dice.png') !important; background-repeat: no-repeat; background-position: 99% 50%; }
</style>
</head>
<body>
<div data-role="page" data-theme="b" id="main">
<div data-role="header" data-position="fixed">
<h1>jQueryMobile - Dev Page</h1>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<label for="l1">l1</label>
<input name="l1" type="text" value="" data-role="datebox" data-options='{"mode": "timeflipbox", "useFocus": true, "centerHoriz":true, "themeHeader":"b", "themeDatePick":"b", "overrideTimeOutput": "%-I:%M %p"}' id="l1" />
</div>
<div data-role="fieldcontain">
<label for="lang1">calbox</label>
<input name="lang1" type="text" data-role="datebox" data-options='{"calShowWeek":true, "calUsePickers":true, "mode": "calbox"}' id="lang1" />
</div>
<div data-role="fieldcontain">
<label for="c2">custom box</label>
<input name="c2" type="text" data-role="datebox" data-options='{"mode": "custombox", "overrideStyleClass":"ui-icon-dice"}' id="c2" />
</div>
<div data-role="fieldcontain">
<label for="c1">custom flip</label>
<input name="c1" type="text" data-role="datebox" data-options='{"mode": "customflip", "overrideStyleClass":"ui-icon-dice"}' id="c1" />
</div>
<div data-role="fieldcontain">
<label for="aa1">text comparison</label>
<input name="aa1" type="text" id="aa1"/>
</div>
<div data-role="fieldcontain">
<label for="lang2">datebox</label>
<input name="lang2" type="text" data-role="datebox" data-options='{"mode": "datebox"}' id="lang2" />
</div>
<div data-role="fieldcontain">
<label for="lang3">flipbox</label>
<input name="lang3" type="text" data-role="datebox" data-options='{"mode": "flipbox"}' id="lang3" />
</div>
<div data-role="fieldcontain">
<label for="lang4">slidebox</label>
<input name="lang4" type="text" data-role="datebox" data-options='{"mode": "slidebox", "overrideSlideFieldOrder":["y","m","d","h","i"], "minuteStep": 10}' id="lang4" />
</div>
<div data-role="fieldcontain">
<label for="lang5">timebox</label>
<input name="lang5" type="text" data-role="datebox" data-options='{"mode": "timebox", "overrideTimeFieldOrder":["y","m","d","h","i","a"], "minuteStep": 10, "minuteStepRound": 0}' id="lang5" />
</div>
<div data-role="fieldcontain">
<label for="lang6">timeflipbox</label>
<input name="lang6" type="text" data-role="datebox" data-options='{"mode": "timeflipbox", "minuteStep": 10, "minuteStepRound": 0}' id="lang6" />
</div>
<div data-role="fieldcontain">
<label for="lang7">durationbox</label>
<input name="lang7" type="text" data-role="datebox" data-options='{"defaultValue":10232, "mode": "durationbox"}' id="lang7" />
</div>
</div>
<div data-role="footer" data-position="fixed">
<h1>Some Footer Information or Something.</h1>
</div>
</div>
</html>