libs/js/jquery-mobile-1.0.1pre/tests/unit/listview/index.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3 <head>
   4         <meta charset="utf-8">
   5         <meta name="viewport" content="width=device-width, initial-scale=1">
   6         <title>jQuery Mobile Listview Integration Test</title>
   7
   8         <script src="../../../js/jquery.js"></script>
   9         <script src="../jquery.setNameSpace.js"></script>
  10         <script src="../../../js/"></script>
  11         <script src="../../jquery.testHelper.js"></script>
  12         <link rel="stylesheet"  href="../../../css/themes/default/" />
  13         <link rel="stylesheet" href="../../../external/qunit.css"/>
  14         <script src="../../../external/qunit.js"></script>
  15
  16         <script src="listview_core.js"></script>
  17
  18         <script src="../swarminject.js"></script>
  19 </head>
  20 <body>
  21
  22 <h1 id="qunit-header">jQuery Mobile Listview Integration Test</h1>
  23 <h2 id="qunit-banner"></h2>
  24 <h2 id="qunit-userAgent"></h2>
  25 <ol id="qunit-tests">
  26 </ol>
  27
  28 <!-- Basic Linked view test -->
  29 <div data-nstest-role="page" id='basic-linked-test'>
  30         <div data-nstest-role="header" data-nstest-position="inline">
  31                 <h1>Basic List View</h1>
  32         </div>
  33         <div data-nstest-role="content">
  34                 <ul data-nstest-role="listview">
  35                         <li><a href="#basic-link-results">Home</a></li>
  36                         <li><a href="#basic-link-results">Back</a></li>
  37                         <li><a href="#basic-link-results">Return</a></li>
  38                         <li><a href="#nested-list-test" id="nested-list-test-anchor">Nested List Test</a></li>
  39                 </ul>
  40         </div>
  41   <a href="cache-tests/nested.html" id="cached-tests"></a>
  42 </div>
  43
  44 <div data-nstest-role='page' id='basic-link-results'>
  45         <div data-nstest-role="header" data-nstest-position="inline">
  46                 <h1>Results</h1>
  47         </div>
  48 </div>
  49
  50 <!-- Nested List -->
  51 <div data-nstest-role="page" id='nested-list-test'>
  52         <div data-nstest-role="header" data-nstest-position="inline">
  53                 <h1>Basic List View</h1>
  54         </div>
  55         <div data-nstest-role="content">
  56                 <ul data-nstest-role="listview">
  57                         <li>Groups of animals
  58                                 <ul>
  59                                         <li>pod of whales</li>
  60                                         <li>quiver of cobras</li>
  61                                         <li>troop of baboons</li>
  62                                 </ul>
  63                         </li>
  64                         <li class="linebreaknode">
  65
  66                         More animals
  67
  68
  69                                 <ul>
  70                                         <li>Shoal of Bass</li>
  71                                         <li>Rhumba of rattlesnakes</li>
  72                                 </ul>
  73                         </li>
  74                 </ul>
  75         </div>
  76 </div>
  77
  78
  79 <div data-nstest-role="page" id='nested-lists-test'>
  80         <div data-nstest-role="header" data-nstest-position="inline">
  81                 <h1>Basic multiple lists view</h1>
  82         </div>
  83     <div data-nstest-role="content">
  84         <ul data-nstest-role="listview" data-nstest-inset="true">
  85             <li>Item 1</li>
  86             <li>Item 2</li>
  87             <li>Item 3
  88                 <ul data-nstest-role="listview">
  89                     <li>Item A-3-0</li>
  90                     <li>Item A-3-1</li>
  91                     <li>Item A-3-2</li>
  92                 </ul>
  93             </li>
  94         </ul>
  95         <ul data-nstest-role="listview" data-nstest-inset="true">
  96             <li>Item 1</li>
  97             <li>Item 2</li>
  98             <li>Item 3
  99                 <ul data-nstest-role="listview">
 100                     <li>Item B-3-0
 101                         <ul data-nstest-role="listview">
 102                                                         <li>Item B-3-0-0</li>
 103                                                         <li>Item B-3-0-1
 104                                                                 <ul data-nstest-role="listview">
 105                                                                         <li>Item B-3-0-1-0</li>
 106                                                                         <li>Item B-3-0-1-1</li>
 107                                                                         <li>Item B-3-0-1-2</li>
 108                                                                 </ul>
 109                                                         </li>
 110                                                         <li>Item B-3-0-2</li>
 111                                                 </ul>
 112                     </li>
 113                     <li>Item B-3-1
 114                                                 <ul data-nstest-role="listview">
 115                                                         <li>Item B-3-1-0</li>
 116                                                         <li>Item B-3-1-1</li>
 117                                                         <li>Item B-3-1-2</li>
 118                                                 </ul>
 119                     </li>
 120                     <li>Item B-3-2</li>
 121                 </ul>
 122             </li>
 123         </ul>
 124     </div>
 125 </div>
 126
 127 <!-- Numbered List -->
 128 <div data-nstest-role="page" id='numbered-list-test'>
 129         <div data-nstest-role="header" data-nstest-position="inline">
 130                 <h1>Basic List View</h1>
 131         </div>
 132         <div data-nstest-role="content">
 133                         <ol data-nstest-role="listview">
 134                                 <li><a href="#numbered-list-results">Number 1</a></li>
 135                                 <li><a href="#numbered-list-results">Number 2</a></li>
 136                                 <li><a href="#numbered-list-results">Number 3</a></li>
 137                         </ol>
 138         </div>
 139 </div>
 140
 141 <div data-nstest-role='page' id='numbered-list-results'>
 142         <div data-nstest-role="header" data-nstest-position="inline">
 143                 <h1>Numbered List</h1>
 144         </div>
 145 </div>
 146
 147 <!-- Read only List -->
 148 <div data-nstest-role="page" id='read-only-list-test'>
 149         <div data-nstest-role="header" data-nstest-position="inline">
 150                 <h1>Basic List View</h1>
 151         </div>
 152         <div data-nstest-role="content">
 153                 <ul data-nstest-role="listview">
 154                         <li>Read</li>
 155                         <li>Only</li>
 156                         <li>List</li>
 157                         <li>View</li>
 158                 </ul>
 159         </div>
 160 </div>
 161
 162 <!-- Split listview -->
 163 <div data-nstest-role="page" id='split-list-test'>
 164         <div data-nstest-role="header" data-nstest-position="inline">
 165                 <h1>Split List View</h1>
 166         </div>
 167         <div data-nstest-role="content">
 168                 <ul data-nstest-role="listview">
 169                         <li>
 170                                 <a href="#split-list-link1">link one</a>
 171                                 <a href="#split-list-link2">link second</a>
 172                         </li>
 173                         <li>
 174                                 <a href="#split-list-link1">link one</a>
 175                                 <a href="#split-list-link2">link second</a>
 176                         </li>
 177                         <li>
 178                                 <a href="#split-list-link1">link one</a>
 179                                 <a href="#split-list-link2">link second</a>
 180                         </li>
 181                 </ul>
 182         </div>
 183 </div>
 184
 185 <div data-nstest-role="page" id='split-list-link1'>
 186         <div data-nstest-role="header" data-nstest-position="inline">
 187                 <h1>Split List view 1</h1>
 188         </div>
 189 </div>
 190
 191 <div data-nstest-role="page" id='split-list-link2'>
 192         <div data-nstest-role="header" data-nstest-position="inline">
 193                 <h1>Split List view 2</h1>
 194         </div>
 195 </div>
 196
 197 <!-- List divider -->
 198 <div data-nstest-role="page" id='list-divider-test'>
 199         <div data-nstest-role="header" data-nstest-position="inline">
 200                 <h1>List Divider Test</h1>
 201         </div>
 202         <div data-nstest-role="content">
 203                 <ul data-nstest-role="listview">
 204                         <li>a is for aquaman</li>
 205                         <li>b is for batman</li>
 206                         <li data-nstest-role="list-divider">This is a list divider</li>
 207                         <li>c is for catwoman</li>
 208                         <li data-nstest-role="list-divider">This is another list divider</li>
 209                         <li>d is for darkwing</li>
 210                 </ul>
 211         </div>
 212 </div>
 213
 214 <!-- Search bar filter -->
 215 <div data-nstest-role="page" id='search-filter-test'>
 216         <div data-nstest-role="header" data-nstest-position="inline">
 217                 <h1>Split List View</h1>
 218         </div>
 219         <div data-nstest-role="content">
 220                 <ul data-nstest-role="listview" data-nstest-filter="true">
 221                         <li>a is for aquaman</li>
 222                         <li>b is for batman</li>
 223                         <li>c is for catwoman</li>
 224                         <li>d is for darkwing</li>
 225                 </ul>
 226         </div>
 227 </div>
 228
 229 <!-- Search bar filter with list-dividers -->
 230 <div data-nstest-role="page" id='search-filter-with-dividers-test'>
 231         <div data-nstest-role="header" data-nstest-position="inline">
 232                 <h1>Split List View</h1>
 233         </div>
 234         <div data-nstest-role="content">
 235                 <ul data-nstest-role="listview" data-nstest-filter="true">
 236                         <li data-nstest-role="list-divider">a</li>
 237                         <li>a is for aquaman</li>
 238                         <li data-nstest-role="list-divider">b</li>
 239                         <li>b is for batman</li>
 240                         <li data-nstest-role="list-divider">c</li>
 241                         <li>c is for catwoman</li>
 242                         <li data-nstest-role="list-divider">d</li>
 243                         <li>d is for darkwing</li>
 244                 </ul>
 245         </div>
 246 </div>
 247
 248 <!-- Search bar filter inset -->
 249 <div data-nstest-role="page" id='search-filter-inset-test'>
 250         <div data-nstest-role="header" data-nstest-position="inline">
 251                 <h1>Inset Filter List View</h1>
 252         </div>
 253         <div data-nstest-role="content">
 254                 <ul data-nstest-role="listview" data-nstest-filter="true" data-nstest-inset="true">
 255                         <li>a is for aquaman</li>
 256                         <li>b is for batman</li>
 257                         <li>c is for catwoman</li>
 258                         <li>d is for darkwing</li>
 259                 </ul>
 260         </div>
 261 </div>
 262
 263 <!-- Programmatically generated list items !-->
 264 <div data-nstest-role="page" id="programmatically-generated-list">
 265         <ul data-nstest-role="listview" data-nstest-inset="true" id="programmatically-generated-list-items"></ul>
 266 </div>
 267
 268 <!-- Removing items from list -->
 269 <div data-nstest-role="page" id='removing-items-from-list-test'>
 270         <div data-nstest-role="header" data-nstest-position="inline">
 271                 <h1>Basic List View</h1>
 272         </div>
 273         <div data-nstest-role="content">
 274                 <ul data-nstest-role="listview" data-nstest-inset="true">
 275                         <li>Item 1</li>
 276                         <li>Item 2</li>
 277                         <li>Item 3</li>
 278                         <li>Item 4</li>
 279                 </ul>
 280         </div>
 281 </div>
 282
 283 <!-- Rounded corners inset list with variable items -->
 284 <div data-nstest-role="page" id='corner-rounded-test'>
 285         <div data-nstest-role="header" data-nstest-position="inline">
 286                 <h1>Basic List View</h1>
 287         </div>
 288         <div data-nstest-role="content">
 289                 <ul data-nstest-role="listview" data-nstest-inset="true">
 290                 </ul>
 291         </div>
 292 </div>
 293
 294 <div data-nstest-role="page" id="enhancetest">
 295         <ul data-nstest-role="listview">
 296                 <li><a href="#basic-link-results">Home</a></li>
 297                 <li><a href="#basic-link-results">Back</a></li>
 298                 <li><a href="#basic-link-results">Return</a></li>
 299         </ul>
 300 </div>
 301
 302 <div id="list-theme-inherit" data-nstest-theme="b">
 303   <ul data-nstest-role="listview">
 304     <li>foo</li>
 305   </ul>
 306 </div>
 307
 308 <div data-nstest-role="page" id="ui-li-has-test">
 309   <div data-nstest-role="content">
 310         <p>Right padding on item 1 is OK (75px).</p>
 311         <p>Right padding on items 2 &amp; 3 should probably be around 30 or 35 (not 25).</p>
 312         <p>Right padding on item 4 should be 15px to match the left side.</p>
 313         <ol data-nstest-role="listview" data-nstest-inset="true">
 314           <li><a href="#">Link LI with counter --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------<span class="ui-li-count">123</span></a></li>
 315           <li><a href="#">Link LI without counter -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</a></li>
 316           <li><a href="#page1">Page1 Link LI without counter -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</a><a href="#page2"></a></li>
 317           <li>Static LI with counter ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------<span class="ui-li-count">123</span></li>
 318           <li>Static LI without counter ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</li>
 319         </ol>
 320   </div>
 321 </div>
 322
 323 </body>
 324 </html>