source: Dev/trunk/src/client/dojox/mobile/tests/test_TextBox-in-ScrollableView.html

Last change on this file was 483, checked in by hendrikvanantwerpen, 11 years ago

Added Dojo 1.9.3 release.
File size: 10.4 KB
Line 
1<!DOCTYPE html>
2<html>
3<head>
4        <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
5        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
6        <meta name="apple-mobile-web-app-capable" content="yes"/>
7        <title>TextBox inside ScrollableView</title>
8
9        <script type="text/javascript" src="../deviceTheme.js"></script>
10        <script type="text/javascript" src="../../../dojo/dojo.js"
11                data-dojo-config="async: true, parseOnLoad: true, mblHideAddressBar: true, mblAlwaysHideAddressBar: false"></script>
12
13        <!-- The purpose of this test is to allow testing the behavior of ScrollableView when
14                it contains TextBoxes and fixed headers and footers. -->
15               
16        <script type="text/javascript">
17                require([
18                        "dojox/mobile/parser",
19                        "dojox/mobile",
20                        "dojox/mobile/compat",
21                        "dojox/mobile/ScrollableView",
22                        "dojox/mobile/TabBar",
23                        "dojox/mobile/TabBarButton",
24                        "dojox/mobile/TextBox"
25                ]);
26        </script>
27
28        <style>
29        html,body{
30                height: 100%;
31                overflow: hidden;
32        }
33        </style>
34</head>
35<body style="visibility:hidden;">
36        <div id="group1" data-dojo-type="dojox.mobile.View">
37                <ul data-dojo-type="dojox.mobile.TabBar" data-dojo-props='barType:{"iphone_theme":"segmentedControl","*":"tallTab"}, fixed:"top"'>
38                        <li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props='icon1:"images/tab-icon-16.png", icon2:"images/tab-icon-16h.png", selected:true'>New</li>
39
40                        <li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props='icon1:"images/tab-icon-15.png", icon2:"images/tab-icon-15h.png"'>What's Hot</li>
41                        <li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props='icon1:"images/tab-icon-10.png", icon2:"images/tab-icon-10h.png"'>Genius</li>
42                </ul>
43                <div id="view1" data-dojo-type="dojox.mobile.ScrollableView">
44                        <ul data-dojo-type="dojox.mobile.EdgeToEdgeList" class="list1">
45                                <li>
46                                <input data-dojo-type="dojox.mobile.TextBox" type="text" data-dojo-props='scrollOnFocus:true, selectOnClick:true, placeHolder:"field1"' style="margin-bottom: 0;" required>
47                                </li>
48
49                                <li>
50                                <input data-dojo-type="dojox.mobile.TextBox" type="password" data-dojo-props='scrollOnFocus:true, selectOnClick:true, placeHolder:"field2"' style="margin-top: 0;" required>
51                                </li>
52                                <li>
53                                <input data-dojo-type="dojox.mobile.TextBox" type="text" data-dojo-props='scrollOnFocus:true, selectOnClick:true, placeHolder:"field3"' style="margin-bottom: 0;" required>
54                                </li>
55                                <li>
56                                <input data-dojo-type="dojox.mobile.TextBox" type="password" data-dojo-props='scrollOnFocus:true, selectOnClick:true, placeHolder:"field4"' style="margin-top: 0;" required>
57                                </li>
58
59                                <li>
60                                <input data-dojo-type="dojox.mobile.TextBox" type="text" data-dojo-props='scrollOnFocus:true, selectOnClick:true, placeHolder:"field5"' style="margin-bottom: 0;" required>
61                                </li>
62                                <li>
63                                <input data-dojo-type="dojox.mobile.TextBox" type="password" data-dojo-props='scrollOnFocus:true, selectOnClick:true, placeHolder:"field6"' style="margin-top: 0;" required>
64                                </li>
65                                <li>
66                                <input data-dojo-type="dojox.mobile.TextBox" type="text" data-dojo-props='scrollOnFocus:true, selectOnClick:true, placeHolder:"field7"' style="margin-bottom: 0;" required>
67                                </li>
68
69                                <li>
70                                <input data-dojo-type="dojox.mobile.TextBox" type="password" data-dojo-props='scrollOnFocus:true, selectOnClick:true, placeHolder:"field8"' style="margin-top: 0;" required>
71                                </li>
72                                <li>
73                                <input data-dojo-type="dojox.mobile.TextBox" type="text" data-dojo-props='scrollOnFocus:true, selectOnClick:true, placeHolder:"field9"' style="margin-bottom: 0;" required>
74                                </li>
75                                <li>
76                                <input data-dojo-type="dojox.mobile.TextBox" type="password" data-dojo-props='scrollOnFocus:true, selectOnClick:true, placeHolder:"field10"' style="margin-top: 0;" required>
77                                </li>
78
79                                <li>
80                                <input data-dojo-type="dojox.mobile.TextBox" type="text" data-dojo-props='scrollOnFocus:true, selectOnClick:true, placeHolder:"field11"' style="margin-bottom: 0;" required>
81                                </li>
82                                <li>
83                                <input data-dojo-type="dojox.mobile.TextBox" type="password" data-dojo-props='scrollOnFocus:true, selectOnClick:true, placeHolder:"field12"' style="margin-top: 0;" required>
84                                </li>
85                                <li>
86                                <input data-dojo-type="dojox.mobile.TextBox" type="text" data-dojo-props='scrollOnFocus:true, selectOnClick:true, placeHolder:"field13"' style="margin-bottom: 0;" required>
87                                </li>
88
89                                <li>
90                                <input data-dojo-type="dojox.mobile.TextBox" type="password" data-dojo-props='scrollOnFocus:true, selectOnClick:true, placeHolder:"field14"' style="margin-top: 0;" required>
91                                </li>
92                                <li>
93                                <input data-dojo-type="dojox.mobile.TextBox" type="text" data-dojo-props='scrollOnFocus:true, selectOnClick:true, placeHolder:"field15"' style="margin-bottom: 0;" required>
94                                </li>
95                                <li>
96                                <input data-dojo-type="dojox.mobile.TextBox" type="password" data-dojo-props='scrollOnFocus:true, selectOnClick:true, placeHolder:"field16"' style="margin-top: 0;" required>
97                                </li>
98
99                                <li>
100                                <input data-dojo-type="dojox.mobile.TextBox" type="text" data-dojo-props='scrollOnFocus:true, selectOnClick:true, placeHolder:"field17"' style="margin-bottom: 0;" required>
101                                </li>
102                                <li>
103                                <input data-dojo-type="dojox.mobile.TextBox" type="password" data-dojo-props='scrollOnFocus:true, selectOnClick:true, placeHolder:"field18"' style="margin-top: 0;" required>
104                                </li>
105                                <li>
106                                <input data-dojo-type="dojox.mobile.TextBox" type="text" data-dojo-props='scrollOnFocus:true, selectOnClick:true, placeHolder:"field19"' style="margin-bottom: 0;" required>
107                                </li>
108
109                                <li>
110                                <input data-dojo-type="dojox.mobile.TextBox" type="password" data-dojo-props='scrollOnFocus:true, selectOnClick:true, placeHolder:"field20"' style="margin-top: 0;" required>
111                                </li>
112                                <li>
113                                <input data-dojo-type="dojox.mobile.TextBox" type="text" data-dojo-props='scrollOnFocus:true, selectOnClick:true, placeHolder:"field21"' style="margin-bottom: 0;" required>
114                                </li>
115                                <li>
116                                <input data-dojo-type="dojox.mobile.TextBox" type="password" data-dojo-props='scrollOnFocus:true, selectOnClick:true, placeHolder:"field22"' style="margin-top: 0;" required>
117                                </li>
118
119                                <li>
120                                <input data-dojo-type="dojox.mobile.TextBox" type="text" data-dojo-props='scrollOnFocus:true, selectOnClick:true, placeHolder:"field23"' style="margin-bottom: 0;" required>
121                                </li>
122                                <li>
123                                <input data-dojo-type="dojox.mobile.TextBox" type="password" data-dojo-props='scrollOnFocus:true, selectOnClick:true, placeHolder:"field24"' style="margin-top: 0;" required>
124                                </li>
125                                <li>
126                                <input data-dojo-type="dojox.mobile.TextBox" type="text" data-dojo-props='scrollOnFocus:true, selectOnClick:true, placeHolder:"field25"' style="margin-bottom: 0;" required>
127                                </li>
128
129                                <li>
130                                <input data-dojo-type="dojox.mobile.TextBox" type="password" data-dojo-props='scrollOnFocus:true, selectOnClick:true, placeHolder:"field26"' style="margin-top: 0;" required>
131                                </li>
132                                <li>
133                                <input data-dojo-type="dojox.mobile.TextBox" type="text" data-dojo-props='scrollOnFocus:true, selectOnClick:true, placeHolder:"field27"' style="margin-bottom: 0;" required>
134                                </li>
135                                <li>
136                                <input data-dojo-type="dojox.mobile.TextBox" type="password" data-dojo-props='scrollOnFocus:true, selectOnClick:true, placeHolder:"field28"' style="margin-top: 0;" required>
137                                </li>
138
139                                <li>
140                                <input data-dojo-type="dojox.mobile.TextBox" type="text" data-dojo-props='scrollOnFocus:true, selectOnClick:true, placeHolder:"field29"' style="margin-bottom: 0;" required>
141                                </li>
142                                <li>
143                                <input data-dojo-type="dojox.mobile.TextBox" type="password" data-dojo-props='scrollOnFocus:true, selectOnClick:true, placeHolder:"field30"' style="margin-top: 0;" required>
144                                </li>
145                                <li>
146                                <input data-dojo-type="dojox.mobile.TextBox" type="text" data-dojo-props='scrollOnFocus:true, selectOnClick:true, placeHolder:"field31"' style="margin-bottom: 0;" required>
147                                </li>
148
149                                <li>
150                                <input data-dojo-type="dojox.mobile.TextBox" type="password" data-dojo-props='scrollOnFocus:true, selectOnClick:true, placeHolder:"field32"' style="margin-top: 0;" required>
151                                </li>
152                                <li>
153                                <input data-dojo-type="dojox.mobile.TextBox" type="text" data-dojo-props='scrollOnFocus:true, selectOnClick:true, placeHolder:"field33"' style="margin-bottom: 0;" required>
154                                </li>
155                                <li>
156                                <input data-dojo-type="dojox.mobile.TextBox" type="password" data-dojo-props='scrollOnFocus:true, selectOnClick:true, placeHolder:"field34"' style="margin-top: 0;" required>
157                                </li>
158
159                                <li>
160                                <input data-dojo-type="dojox.mobile.TextBox" type="text" data-dojo-props='scrollOnFocus:true, selectOnClick:true, placeHolder:"field35"' style="margin-bottom: 0;" required>
161                                </li>
162                                <li>
163                                <input data-dojo-type="dojox.mobile.TextBox" type="password" data-dojo-props='scrollOnFocus:true, selectOnClick:true, placeHolder:"field36"' style="margin-top: 0;" required>
164                                </li>
165                                <li>
166                                <input data-dojo-type="dojox.mobile.TextBox" type="text" data-dojo-props='scrollOnFocus:true, selectOnClick:true, placeHolder:"field37"' style="margin-bottom: 0;" required>
167                                </li>
168
169                                <li>
170                                <input data-dojo-type="dojox.mobile.TextBox" type="password" data-dojo-props='scrollOnFocus:true, selectOnClick:true, placeHolder:"field38"' style="margin-top: 0;" required>
171                                </li>
172                                <li>
173                                <input data-dojo-type="dojox.mobile.TextBox" type="text" data-dojo-props='scrollOnFocus:true, selectOnClick:true, placeHolder:"field39"' style="margin-bottom: 0;" required>
174                                </li>
175                                <li>
176                                <input data-dojo-type="dojox.mobile.TextBox" type="password" data-dojo-props='scrollOnFocus:true, selectOnClick:true, placeHolder:"field40"' style="margin-top: 0;" required>
177                                </li>
178
179                        </ul>
180                </div>
181
182        </div>
183
184        <ul data-dojo-type="dojox.mobile.TabBar" data-dojo-props='fixed:"bottom"' style="border-bottom:none;">
185                <li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props='icon1:"images/tab-icon-16.png", icon2:"images/tab-icon-16h.png", selected:true'>Featured</li>
186                <li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props='icon1:"images/tab-icon-15.png", icon2:"images/tab-icon-15h.png"'>Categories</li>
187                <li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props='icon1:"images/tab-icon-10.png", icon2:"images/tab-icon-10h.png"'>Top 25</li>
188
189                <li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props='icon1:"images/tab-icon-11.png", icon2:"images/tab-icon-11h.png"'>Search</li>
190                <li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props='icon1:"images/tab-icon-13.png", icon2:"images/tab-icon-13h.png"'>Updates</li>
191        </ul>
192</body>
193</html>
Note: See TracBrowser for help on using the repository browser.