| 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>ScrollableView demo</title> |
|---|
| 8 | |
|---|
| 9 | <script type="text/javascript" src="../deviceTheme.js" data-dojo-config="mblThemeFiles: ['base','TabBar']"></script> |
|---|
| 10 | <script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true, mblAlwaysHideAddressBar: true"></script> |
|---|
| 11 | |
|---|
| 12 | <script type="text/javascript"> |
|---|
| 13 | require([ |
|---|
| 14 | "dojo/ready", |
|---|
| 15 | "dijit/registry", |
|---|
| 16 | "dojox/mobile/ListItem", |
|---|
| 17 | "dojox/mobile/parser", |
|---|
| 18 | "dojox/mobile", |
|---|
| 19 | "dojox/mobile/compat", |
|---|
| 20 | "dojox/mobile/ScrollableView", |
|---|
| 21 | "dojox/mobile/TabBar" |
|---|
| 22 | ], function(ready, registry, ListItem){ |
|---|
| 23 | ready(function(){ |
|---|
| 24 | var w = registry.byId("categ1"); |
|---|
| 25 | for(var i = 1; i <= 300; i++){ |
|---|
| 26 | var item = new ListItem({label:"Category "+i, variableHeight: true}); |
|---|
| 27 | w.addChild(item); |
|---|
| 28 | } |
|---|
| 29 | }); |
|---|
| 30 | }); |
|---|
| 31 | </script> |
|---|
| 32 | |
|---|
| 33 | <style> |
|---|
| 34 | html,body{ |
|---|
| 35 | height: 100%; |
|---|
| 36 | overflow: hidden; |
|---|
| 37 | } |
|---|
| 38 | .list1 li{ |
|---|
| 39 | border-style: solid; |
|---|
| 40 | border-width: 1px 0px 1px 0px; |
|---|
| 41 | border-top-color: #BABABC; |
|---|
| 42 | border-bottom-color: #89898C; |
|---|
| 43 | background-color: #ACACAF; |
|---|
| 44 | line-height: 0px; |
|---|
| 45 | } |
|---|
| 46 | .list1 li table{ |
|---|
| 47 | line-height: normal; |
|---|
| 48 | } |
|---|
| 49 | .list1 li:nth-child(even){ |
|---|
| 50 | background-color: #97979B; |
|---|
| 51 | } |
|---|
| 52 | #list2 li:nth-child(even){ |
|---|
| 53 | background-color: #eeeeee; |
|---|
| 54 | } |
|---|
| 55 | #categ1 { |
|---|
| 56 | font-size: 18px; |
|---|
| 57 | } |
|---|
| 58 | #categ1 li{ |
|---|
| 59 | line-height: 70px; |
|---|
| 60 | } |
|---|
| 61 | .lnk { |
|---|
| 62 | font-size: 14px; |
|---|
| 63 | color: #0B5199; |
|---|
| 64 | text-decoration: none; |
|---|
| 65 | } |
|---|
| 66 | .content { |
|---|
| 67 | padding:0px 10px; |
|---|
| 68 | background-color: white; |
|---|
| 69 | } |
|---|
| 70 | p { |
|---|
| 71 | font-family: Helvetica; |
|---|
| 72 | font-size: 12px; |
|---|
| 73 | } |
|---|
| 74 | .title { |
|---|
| 75 | color: blue; |
|---|
| 76 | margin-bottom: 4px; |
|---|
| 77 | } |
|---|
| 78 | .subtitle { |
|---|
| 79 | font-style: italic; |
|---|
| 80 | color: gray; |
|---|
| 81 | margin: 0px; |
|---|
| 82 | margin-bottom: 4px; |
|---|
| 83 | } |
|---|
| 84 | .subsubtitle { |
|---|
| 85 | margin: 16px 0px 0px 0px; |
|---|
| 86 | } |
|---|
| 87 | .lst { |
|---|
| 88 | margin: 0px; |
|---|
| 89 | padding: 0px 14px; |
|---|
| 90 | } |
|---|
| 91 | .lst li { |
|---|
| 92 | font-family: Helvetica; |
|---|
| 93 | font-size: 12px; |
|---|
| 94 | margin: 0px; |
|---|
| 95 | list-style-type: square; |
|---|
| 96 | } |
|---|
| 97 | .iphone_theme .mblTabBarSegmentedControl .mblTabBarButtonIconArea { |
|---|
| 98 | display: none; |
|---|
| 99 | } |
|---|
| 100 | </style> |
|---|
| 101 | </head> |
|---|
| 102 | <body style="visibility:hidden;"> |
|---|
| 103 | <div id="group1" data-dojo-type="dojox.mobile.View" data-dojo-props='keepScrollPos:false'><!-- keepScrollPos=false is to improve performance --> |
|---|
| 104 | <ul data-dojo-type="dojox.mobile.TabBar" data-dojo-props='barType:{"iphone_theme":"segmentedControl","*":"tallTab"}, fixed:"top"'> |
|---|
| 105 | <li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props='icon1:"images/tab-icon-16.png", icon2:"images/tab-icon-16h.png", moveTo:"view1", selected:true'>New</li> |
|---|
| 106 | <li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props='icon1:"images/tab-icon-15.png", icon2:"images/tab-icon-15h.png", moveTo:"view2"'>What's Hot</li> |
|---|
| 107 | <li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props='icon1:"images/tab-icon-10.png", icon2:"images/tab-icon-10h.png", moveTo:"view3"'>Genius</li> |
|---|
| 108 | </ul> |
|---|
| 109 | |
|---|
| 110 | <div id="view1" data-dojo-type="dojox.mobile.ScrollableView"> |
|---|
| 111 | <ul data-dojo-type="dojox.mobile.EdgeToEdgeList" class="list1"> |
|---|
| 112 | <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='variableHeight:true' style="font-size:10px"> |
|---|
| 113 | <table> |
|---|
| 114 | <tbody> |
|---|
| 115 | <tr> |
|---|
| 116 | <td> |
|---|
| 117 | <img alt="" src="images/icon-1.png"> |
|---|
| 118 | </td> |
|---|
| 119 | <td> |
|---|
| 120 | <a class="lnk" href="#">Dojo: Traditional Karate-do Spirit</a><br> |
|---|
| 121 | Sarah Connor Hardcover<br> |
|---|
| 122 | Eligible for FREE Super Saver Shipping |
|---|
| 123 | </td> |
|---|
| 124 | </tr> |
|---|
| 125 | </tbody> |
|---|
| 126 | </table> |
|---|
| 127 | </li> |
|---|
| 128 | <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='variableHeight:true' style="font-size:10px"> |
|---|
| 129 | <table> |
|---|
| 130 | <tbody> |
|---|
| 131 | <tr> |
|---|
| 132 | <td> |
|---|
| 133 | <img alt="" src="images/icon-1.png"> |
|---|
| 134 | </td> |
|---|
| 135 | <td> |
|---|
| 136 | <a class="lnk" href="#">Japanese Martial Arts Dojo</a><br> |
|---|
| 137 | Martin Parker Hardcover<br> |
|---|
| 138 | Eligible for FREE Super Saver Shipping<br> |
|---|
| 139 | </td> |
|---|
| 140 | </tr> |
|---|
| 141 | </tbody> |
|---|
| 142 | </table> |
|---|
| 143 | </li> |
|---|
| 144 | <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='variableHeight:true' style="font-size:10px"> |
|---|
| 145 | <table> |
|---|
| 146 | <tbody> |
|---|
| 147 | <tr> |
|---|
| 148 | <td> |
|---|
| 149 | <img alt="" src="images/icon-1.png"> |
|---|
| 150 | </td> |
|---|
| 151 | <td> |
|---|
| 152 | <a class="lnk" href="#">Total Solar Eclipse</a><br> |
|---|
| 153 | Steven Young Hardcover<br> |
|---|
| 154 | Eligible for FREE Super Saver Shipping<br> |
|---|
| 155 | </td> |
|---|
| 156 | </tr> |
|---|
| 157 | </tbody> |
|---|
| 158 | </table> |
|---|
| 159 | </li> |
|---|
| 160 | <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='variableHeight:true' style="font-size:10px"> |
|---|
| 161 | <table> |
|---|
| 162 | <tbody> |
|---|
| 163 | <tr> |
|---|
| 164 | <td> |
|---|
| 165 | <img alt="" src="images/icon-1.png"> |
|---|
| 166 | </td> |
|---|
| 167 | <td> |
|---|
| 168 | <a class="lnk" href="#">The History of Java Coffee</a><br> |
|---|
| 169 | Marco Rodriguez Hardcover<br> |
|---|
| 170 | Eligible for FREE Super Saver Shipping<br> |
|---|
| 171 | </td> |
|---|
| 172 | </tr> |
|---|
| 173 | </tbody> |
|---|
| 174 | </table> |
|---|
| 175 | </li> |
|---|
| 176 | <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='variableHeight:true' style="font-size:10px"> |
|---|
| 177 | <table> |
|---|
| 178 | <tbody> |
|---|
| 179 | <tr> |
|---|
| 180 | <td> |
|---|
| 181 | <img alt="" src="images/icon-1.png"> |
|---|
| 182 | </td> |
|---|
| 183 | <td> |
|---|
| 184 | <a class="lnk" href="#">The Principles of Spider's Web</a><br> |
|---|
| 185 | Melissa Morgan Hardcover<br> |
|---|
| 186 | Eligible for FREE Super Saver Shipping<br> |
|---|
| 187 | </td> |
|---|
| 188 | </tr> |
|---|
| 189 | </tbody> |
|---|
| 190 | </table> |
|---|
| 191 | </li> |
|---|
| 192 | </ul> |
|---|
| 193 | </div> |
|---|
| 194 | |
|---|
| 195 | <div id="view2" data-dojo-type="dojox.mobile.ScrollableView"> |
|---|
| 196 | <ul data-dojo-type="dojox.mobile.EdgeToEdgeList" id="list2"> |
|---|
| 197 | <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='variableHeight:true' style="font-size:10px"> |
|---|
| 198 | <table> |
|---|
| 199 | <tbody> |
|---|
| 200 | <tr> |
|---|
| 201 | <td> |
|---|
| 202 | <img alt="" src="images/a-icon-2-41x41.png"> |
|---|
| 203 | </td> |
|---|
| 204 | <td> |
|---|
| 205 | <a class="lnk" href="#">The Principles of Spider's Web</a><br> |
|---|
| 206 | Melissa Morgan Hardcover<br> |
|---|
| 207 | Eligible for FREE Super Saver Shipping<br> |
|---|
| 208 | </td> |
|---|
| 209 | </tr> |
|---|
| 210 | </tbody> |
|---|
| 211 | </table> |
|---|
| 212 | </li> |
|---|
| 213 | <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='variableHeight:true' style="font-size:10px"> |
|---|
| 214 | <table> |
|---|
| 215 | <tbody> |
|---|
| 216 | <tr> |
|---|
| 217 | <td> |
|---|
| 218 | <img alt="" src="images/a-icon-2-41x41.png"> |
|---|
| 219 | </td> |
|---|
| 220 | <td> |
|---|
| 221 | <a class="lnk" href="#">The History of Java Coffee</a><br> |
|---|
| 222 | Marco Rodriguez Hardcover<br> |
|---|
| 223 | Eligible for FREE Super Saver Shipping<br> |
|---|
| 224 | </td> |
|---|
| 225 | </tr> |
|---|
| 226 | </tbody> |
|---|
| 227 | </table> |
|---|
| 228 | </li> |
|---|
| 229 | <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='variableHeight:true' style="font-size:10px"> |
|---|
| 230 | <table> |
|---|
| 231 | <tbody> |
|---|
| 232 | <tr> |
|---|
| 233 | <td> |
|---|
| 234 | <img alt="" src="images/a-icon-2-41x41.png"> |
|---|
| 235 | </td> |
|---|
| 236 | <td> |
|---|
| 237 | <a class="lnk" href="#">Dojo: Traditional Karate-do Spirit</a><br> |
|---|
| 238 | Sarah Connor Hardcover<br> |
|---|
| 239 | Eligible for FREE Super Saver Shipping |
|---|
| 240 | </td> |
|---|
| 241 | </tr> |
|---|
| 242 | </tbody> |
|---|
| 243 | </table> |
|---|
| 244 | </li> |
|---|
| 245 | <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='variableHeight:true' style="font-size:10px"> |
|---|
| 246 | <table> |
|---|
| 247 | <tbody> |
|---|
| 248 | <tr> |
|---|
| 249 | <td> |
|---|
| 250 | <img alt="" src="images/a-icon-2-41x41.png"> |
|---|
| 251 | </td> |
|---|
| 252 | <td> |
|---|
| 253 | <a class="lnk" href="#">Total Solar Eclipse</a><br> |
|---|
| 254 | Steven Young Hardcover<br> |
|---|
| 255 | Eligible for FREE Super Saver Shipping<br> |
|---|
| 256 | </td> |
|---|
| 257 | </tr> |
|---|
| 258 | </tbody> |
|---|
| 259 | </table> |
|---|
| 260 | </li> |
|---|
| 261 | </ul> |
|---|
| 262 | </div> |
|---|
| 263 | |
|---|
| 264 | <div id="view3" data-dojo-type="dojox.mobile.ScrollableView"> |
|---|
| 265 | <h2 data-dojo-type="dojox.mobile.RoundRectCategory">Generic Mobile Device</h2> |
|---|
| 266 | <ul data-dojo-type="dojox.mobile.RoundRectList"> |
|---|
| 267 | <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='rightText:"AcmePhone"'> |
|---|
| 268 | Network |
|---|
| 269 | </li> |
|---|
| 270 | <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='rightText:"AcmePhone"'> |
|---|
| 271 | Line |
|---|
| 272 | </li> |
|---|
| 273 | <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='rightText:"1024"'> |
|---|
| 274 | Songs |
|---|
| 275 | </li> |
|---|
| 276 | <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='rightText:"10"'> |
|---|
| 277 | Videos |
|---|
| 278 | </li> |
|---|
| 279 | <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='rightText:"96"'> |
|---|
| 280 | Photos |
|---|
| 281 | </li> |
|---|
| 282 | <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='rightText:"2"'> |
|---|
| 283 | Applications |
|---|
| 284 | </li> |
|---|
| 285 | <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='rightText:"29.3 BG"'> |
|---|
| 286 | Capacity |
|---|
| 287 | </li> |
|---|
| 288 | <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='rightText:"28.0 BG"'> |
|---|
| 289 | Available |
|---|
| 290 | </li> |
|---|
| 291 | <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='rightText:"3.0 (7A341)"'> |
|---|
| 292 | Version |
|---|
| 293 | </li> |
|---|
| 294 | </ul> |
|---|
| 295 | </div> |
|---|
| 296 | </div> |
|---|
| 297 | |
|---|
| 298 | <div id="categ" data-dojo-type="dojox.mobile.ScrollableView"> |
|---|
| 299 | <h1 data-dojo-type="dojox.mobile.Heading" data-dojo-props='fixed:"top"'>Categories</h1> |
|---|
| 300 | <ul data-dojo-type="dojox.mobile.EdgeToEdgeList" class="list1" id="categ1"> |
|---|
| 301 | </ul> |
|---|
| 302 | </div> |
|---|
| 303 | |
|---|
| 304 | <div id="top25" data-dojo-type="dojox.mobile.ScrollableView"> |
|---|
| 305 | <h1 data-dojo-type="dojox.mobile.Heading" data-dojo-props='fixed:"top"'>News</h1> |
|---|
| 306 | <h2 data-dojo-type="dojox.mobile.RoundRectCategory">Top Stories</h2> |
|---|
| 307 | <ul data-dojo-type="dojox.mobile.RoundRectList"> |
|---|
| 308 | <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='variableHeight:true'> |
|---|
| 309 | Top 10 news stories of the decade |
|---|
| 310 | </li> |
|---|
| 311 | <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='variableHeight:true'> |
|---|
| 312 | Create client-side diagrammatic interaction in Web applications with GFX |
|---|
| 313 | </li> |
|---|
| 314 | <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='variableHeight:true'> |
|---|
| 315 | Explores advanced topics in the new Java framework for implementing and consuming REST-based Web services, Part 3 |
|---|
| 316 | </li> |
|---|
| 317 | </ul> |
|---|
| 318 | </div> |
|---|
| 319 | |
|---|
| 320 | <div id="search" data-dojo-type="dojox.mobile.ScrollableView"> |
|---|
| 321 | <h1 data-dojo-type="dojox.mobile.Heading" data-dojo-props='fixed:"top"'>Search Result</h1> |
|---|
| 322 | <ul data-dojo-type="dojox.mobile.RoundRectList"> |
|---|
| 323 | <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='variableHeight:true' style="font-size:10px"> |
|---|
| 324 | 1. <a href="#" class="lnk">Dojo: Traditional Karate-do Spirit</a><br> |
|---|
| 325 | Sarah Connor Hardcover<br> |
|---|
| 326 | Eligible for FREE Super Saver Shipping<br> |
|---|
| 327 | <span style="color:red">$14.50 (50%)</span> In Stock<br> |
|---|
| 328 | # (531) |
|---|
| 329 | </li> |
|---|
| 330 | <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='variableHeight:true' style="font-size:10px"> |
|---|
| 331 | 2. <a href="#" class="lnk">Japanese Martial Arts Dojo</a><br> |
|---|
| 332 | Martin Parker Hardcover<br> |
|---|
| 333 | <span style="color:red">$14.00 (60%)</span> In Stock<br> |
|---|
| 334 | # (173) |
|---|
| 335 | </li> |
|---|
| 336 | <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='variableHeight:true' style="font-size:10px"> |
|---|
| 337 | 3. <a href="#" class="lnk">Total Solar Eclipse</a><br> |
|---|
| 338 | Steven Young Hardcover<br> |
|---|
| 339 | Get it by Mar. 2 if you order in the next <span style="color:green"><b>16 hours</b></span><br> |
|---|
| 340 | Eligible for FREE Super Saver Shipping<br> |
|---|
| 341 | <span style="color:red">$9.50 (62%)</span> In Stock<br> |
|---|
| 342 | # (1199) |
|---|
| 343 | </li> |
|---|
| 344 | <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='variableHeight:true' style="font-size:10px"> |
|---|
| 345 | 4. <a href="#" class="lnk">The History of Java Coffee</a><br> |
|---|
| 346 | Marco Rodriguez Hardcover<br> |
|---|
| 347 | <span style="color:blue">Not Available</span> |
|---|
| 348 | </li> |
|---|
| 349 | <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='variableHeight:true' style="font-size:10px"> |
|---|
| 350 | 5. <a href="#" class="lnk">The Principles of Spider's Web</a><br> |
|---|
| 351 | Melissa Morgan Hardcover<br> |
|---|
| 352 | Eligible for FREE Super Saver Shipping<br> |
|---|
| 353 | <span style="color:red">$12.00 (60%)</span> In Stock<br> |
|---|
| 354 | # (1847) |
|---|
| 355 | </li> |
|---|
| 356 | </ul> |
|---|
| 357 | </div> |
|---|
| 358 | |
|---|
| 359 | <div id="article" data-dojo-type="dojox.mobile.ScrollableView" style="color:black;background-color:white;height:100%"> |
|---|
| 360 | <h1 data-dojo-type="dojox.mobile.Heading" data-dojo-props='fixed:"top"'>Article</h1> |
|---|
| 361 | <div class="content"> |
|---|
| 362 | <h3 class="title">Did you know?</h3> |
|---|
| 363 | <h4 class="subtitle">Features of dojox.mobile</h4> |
|---|
| 364 | <h5 class="subsubtitle">No images are used</h5> |
|---|
| 365 | <ul class="lst"> |
|---|
| 366 | <li>UI parts consist of DOM and CSS3.</li> |
|---|
| 367 | <li>Only application icons are images.</li> |
|---|
| 368 | </ul> |
|---|
| 369 | |
|---|
| 370 | <h5 class="subsubtitle">Removed dependencies on the dojo modules as much as possible</h5> |
|---|
| 371 | <ul class="lst"> |
|---|
| 372 | <li>No dependencies even on some of the essential core modules like Templated, Container, Contained, dojo.query, or dojo.parser.</li> |
|---|
| 373 | </ul> |
|---|
| 374 | |
|---|
| 375 | <h5 class="subsubtitle">Support for CSS sprite</h5> |
|---|
| 376 | <ul class="lst"> |
|---|
| 377 | <li>Application icon images can be aggregated into a single file to reduce the number of http requests.</li> |
|---|
| 378 | </ul> |
|---|
| 379 | |
|---|
| 380 | <h5 class="subsubtitle">Possible to use the webkitMobile build option (when PC browser support is unnecessary)</h5> |
|---|
| 381 | <ul class="lst"> |
|---|
| 382 | <li>Drops IE and Firefox-specific code at build time, and thus reduces the dojo core size</li> |
|---|
| 383 | </ul> |
|---|
| 384 | </div> |
|---|
| 385 | </div> |
|---|
| 386 | |
|---|
| 387 | <ul data-dojo-type="dojox.mobile.TabBar" data-dojo-props='fixed:"bottom"' style="border-bottom:none;"> |
|---|
| 388 | <li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props='icon1:"images/tab-icon-16.png", icon2:"images/tab-icon-16h.png", selected:true, moveTo:"group1"'>Featured</li> |
|---|
| 389 | <li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props='icon1:"images/tab-icon-15.png", icon2:"images/tab-icon-15h.png", moveTo:"categ"'>Categories</li> |
|---|
| 390 | <li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props='icon1:"images/tab-icon-10.png", icon2:"images/tab-icon-10h.png", moveTo:"top25"'>Top 25</li> |
|---|
| 391 | <li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props='icon1:"images/tab-icon-11.png", icon2:"images/tab-icon-11h.png", moveTo:"search"'>Search</li> |
|---|
| 392 | <li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props='icon1:"images/tab-icon-13.png", icon2:"images/tab-icon-13h.png", moveTo:"article"'>Updates</li> |
|---|
| 393 | </ul> |
|---|
| 394 | </body> |
|---|
| 395 | </html> |
|---|
