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