libs/js/jquery-mobile-1.2.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 type="text/javascript">
  14     // redirects from push-state-tests.html
  15     $( document ).bind( 'mobileinit', function(){
  16       $.testHelper.setPushState();
  17     });
  18   </script>
  19         <script>
  20                 $.testHelper.asyncLoad([
  21                         [
  22                                 "jquery.mobile.navigation",
  23                                 "widgets/listview",
  24                                 "widgets/listview.filter",
  25                                 "widgets/listview.autodividers",
  26                                 "widgets/collapsible"
  27                         ],
  28                         [ "jquery.mobile.init" ],
  29                         [ "listview_core.js" ]
  30                 ]);
  31         </script>
  32
  33         <link rel="stylesheet"  href="../../../css/themes/default/jquery.mobile.css" />
  34         <link rel="stylesheet" href="../../../external/qunit.css"/>
  35
  36         <script src="../swarminject.js"></script>
  37 </head>
  38 <body>
  39
  40 <h1 id="qunit-header">jQuery Mobile Listview Integration Test</h1>
  41 <h2 id="qunit-banner"></h2>
  42 <h2 id="qunit-userAgent"></h2>
  43 <ol id="qunit-tests">
  44 </ol>
  45
  46 <!-- Basic Linked view test -->
  47 <div data-nstest-role="page" id='basic-linked-test'>
  48         <div data-nstest-role="header" data-nstest-position="inline">
  49                 <h1>Basic List View</h1>
  50         </div>
  51         <div data-nstest-role="content">
  52                 <ul data-nstest-role="listview">
  53                         <li><a href="#basic-link-results">Home</a></li>
  54                         <li><a href="#basic-link-results">Back</a></li>
  55                         <li><a href="#basic-link-results">Return</a></li>
  56                         <li><a href="#nested-list-test" id="nested-list-test-anchor">Nested List Test</a></li>
  57                 </ul>
  58         </div>
  59   <a href="cache-tests/nested.html" id="cached-tests"></a>
  60 </div>
  61
  62 <div data-nstest-role='page' id='basic-link-results'>
  63         <div data-nstest-role="header" data-nstest-position="inline">
  64                 <h1>Results</h1>
  65         </div>
  66 </div>
  67
  68 <!-- Nested List -->
  69 <div data-nstest-role="page" id='nested-list-test'>
  70         <div data-nstest-role="header" data-nstest-position="inline">
  71                 <h1>Basic List View</h1>
  72         </div>
  73         <div data-nstest-role="content">
  74                 <ul data-nstest-role="listview">
  75                         <li>Groups of animals
  76                                 <ul>
  77                                         <li>pod of whales</li>
  78                                         <li>quiver of cobras</li>
  79                                         <li>troop of baboons</li>
  80                                 </ul>
  81                         </li>
  82                         <li class="linebreaknode">
  83
  84                         More animals
  85
  86
  87                                 <ul>
  88                                         <li>Shoal of Bass</li>
  89                                         <li>Rhumba of rattlesnakes</li>
  90                                 </ul>
  91                         </li>
  92                 </ul>
  93         </div>
  94 </div>
  95
  96
  97 <div data-nstest-role="page" id='nested-lists-test'>
  98         <div data-nstest-role="header" data-nstest-position="inline">
  99                 <h1>Basic multiple lists view</h1>
 100         </div>
 101     <div data-nstest-role="content">
 102         <ul data-nstest-role="listview" data-nstest-inset="true">
 103             <li>Item 1</li>
 104             <li>Item 2</li>
 105             <li>Item 3
 106                 <ul data-nstest-role="listview">
 107                     <li>Item A-3-0</li>
 108                     <li>Item A-3-1</li>
 109                     <li>Item A-3-2</li>
 110                 </ul>
 111             </li>
 112         </ul>
 113         <ul data-nstest-role="listview" data-nstest-inset="true">
 114             <li>Item 1</li>
 115             <li>Item 2</li>
 116             <li>Item 3
 117                 <ul data-nstest-role="listview">
 118                     <li>Item B-3-0
 119                         <ul data-nstest-role="listview">
 120                                                         <li>Item B-3-0-0</li>
 121                                                         <li>Item B-3-0-1
 122                                                                 <ul data-nstest-role="listview">
 123                                                                         <li>Item B-3-0-1-0</li>
 124                                                                         <li>Item B-3-0-1-1</li>
 125                                                                         <li>Item B-3-0-1-2</li>
 126                                                                 </ul>
 127                                                         </li>
 128                                                         <li>Item B-3-0-2</li>
 129                                                 </ul>
 130                     </li>
 131                     <li>Item B-3-1
 132                                                 <ul data-nstest-role="listview">
 133                                                         <li>Item B-3-1-0</li>
 134                                                         <li>Item B-3-1-1</li>
 135                                                         <li>Item B-3-1-2</li>
 136                                                 </ul>
 137                     </li>
 138                     <li>Item B-3-2</li>
 139                 </ul>
 140             </li>
 141         </ul>
 142     </div>
 143 </div>
 144
 145 <!-- Numbered List -->
 146 <div data-nstest-role="page" id='numbered-list-test'>
 147         <div data-nstest-role="header" data-nstest-position="inline">
 148                 <h1>Basic List View</h1>
 149         </div>
 150         <div data-nstest-role="content">
 151                         <ol data-nstest-role="listview">
 152                                 <li><a href="#numbered-list-results">Number 1</a></li>
 153                                 <li><a href="#numbered-list-results">Number 2</a></li>
 154                                 <li><a href="#numbered-list-results">Number 3</a></li>
 155                         </ol>
 156         </div>
 157 </div>
 158
 159 <div data-nstest-role='page' id='numbered-list-results'>
 160         <div data-nstest-role="header" data-nstest-position="inline">
 161                 <h1>Numbered List</h1>
 162         </div>
 163 </div>
 164
 165 <!-- Read only List -->
 166 <div data-nstest-role="page" id='read-only-list-test'>
 167         <div data-nstest-role="header" data-nstest-position="inline">
 168                 <h1>Basic List View</h1>
 169         </div>
 170         <div data-nstest-role="content">
 171                 <ul data-nstest-role="listview">
 172                         <li>Read</li>
 173                         <li>Only</li>
 174                         <li>List</li>
 175                         <li>View</li>
 176                 </ul>
 177         </div>
 178 </div>
 179
 180 <!-- Split listview -->
 181 <div data-nstest-role="page" id='split-list-test'>
 182         <div data-nstest-role="header" data-nstest-position="inline">
 183                 <h1>Split List View</h1>
 184         </div>
 185         <div data-nstest-role="content">
 186                 <ul data-nstest-role="listview">
 187                         <li>
 188                                 <a href="#split-list-link1">link one</a>
 189                                 <a href="#split-list-link2">link second</a>
 190                         </li>
 191                         <li>
 192                                 <a href="#split-list-link1">link one</a>
 193                                 <a href="#split-list-link2">link second</a>
 194                         </li>
 195                         <li>
 196                                 <a href="#split-list-link1">link one</a>
 197                                 <a href="#split-list-link2">link second</a>
 198                         </li>
 199                 </ul>
 200         </div>
 201 </div>
 202
 203 <div data-nstest-role="page" id='split-list-link1'>
 204         <div data-nstest-role="header" data-nstest-position="inline">
 205                 <h1>Split List view 1</h1>
 206         </div>
 207 </div>
 208
 209 <div data-nstest-role="page" id='split-list-link2'>
 210         <div data-nstest-role="header" data-nstest-position="inline">
 211                 <h1>Split List view 2</h1>
 212         </div>
 213 </div>
 214
 215 <!-- List divider -->
 216 <div data-nstest-role="page" id='list-divider-test'>
 217         <div data-nstest-role="header" data-nstest-position="inline">
 218                 <h1>List Divider Test</h1>
 219         </div>
 220         <div data-nstest-role="content">
 221                 <ul data-nstest-role="listview">
 222                         <li>a is for aquaman</li>
 223                         <li>b is for batman</li>
 224                         <li data-nstest-role="list-divider">This is a list divider</li>
 225                         <li>c is for catwoman</li>
 226                         <li data-nstest-role="list-divider">This is another list divider</li>
 227                         <li>d is for darkwing</li>
 228                 </ul>
 229         </div>
 230 </div>
 231
 232 <!-- Autodivider -->
 233 <div data-nstest-role="page" id="autodividers-test">
 234         <div data-nstest-role="header" data-nstest-position="inline">
 235                 <h1>Autodivider Test</h1>
 236         </div>
 237         <div data-nstest-role="content">
 238                 <ul data-nstest-role="listview" data-nstest-autodividers="true">
 239                         <li data-nstest-role="list-divider">SHOULD REMOVE</li>
 240                         <li>a is for aquaman</li>
 241                         <li>b is for batman</li>
 242                         <li>c is for catwoman</li>
 243                         <li>d is for darkwing</li>
 244                 </ul>
 245         </div>
 246 </div>
 247
 248 <div data-nstest-role="page" id="autodividers-selector-test">
 249         <div data-nstest-role="header" data-nstest-position="inline">
 250                 <h1>Autodivider Selector Test</h1>
 251         </div>
 252         <div data-nstest-role="content">
 253                 <ul id="autodividers-selector-test-list1" data-nstest-role="listview" data-nstest-autodividers="true">
 254                         <li><a href="#">a is for aquaman</a></li>
 255                         <li>b is for batman</li>
 256                         <li><img><a href="">c is for catwoman</a><a href="">split</a></li>
 257                         <li><a href="#"><h2>d is for darkwing</h2><p>Some text</p></a></li>
 258                 </ul>
 259
 260                 <ul id="autodividers-selector-test-list2" data-nstest-role="listview" data-nstest-autodividers="true">
 261                         <li><div><span class="autodividers-selector-test-selectme">eddie</span> is for aquaman</div></li>
 262                         <li><div><span class="autodividers-selector-test-selectme">frankie</span> is for batman</div></li>
 263                         <li><div><span class="autodividers-selector-test-selectme">georgie</span> is for catwoman</div></li>
 264                         <li><div><span class="autodividers-selector-test-selectme">henry</span> is for darkwing</div></li>
 265                 </ul>
 266         </div>
 267 </div>
 268
 269 <!-- Search bar filter -->
 270 <div data-nstest-role="page" id='search-filter-test'>
 271         <div data-nstest-role="header" data-nstest-position="inline">
 272                 <h1>Split List View</h1>
 273         </div>
 274         <div data-nstest-role="content">
 275                 <ul data-nstest-role="listview" data-nstest-filter="true">
 276                         <li>a is for aquaman</li>
 277                         <li>b is for batman</li>
 278                         <li>c is for catwoman</li>
 279                         <li>d is for darkwing</li>
 280                 </ul>
 281         </div>
 282 </div>
 283
 284 <!-- Search bar filter -->
 285 <div data-nstest-role="page" id='search-customfilter-test'>
 286         <div data-nstest-role="header" data-nstest-position="inline">
 287                 <h1>Filtered List View</h1>
 288         </div>
 289         <div data-nstest-role="content">
 290                 <ul data-nstest-role="listview" data-nstest-filter="true">
 291                         <li>a is for aquaman</li>
 292                         <li>b is for batman</li>
 293                         <li>c is for catwoman</li>
 294                         <li>d is for darkwing</li>
 295                 </ul>
 296         </div>
 297 </div>
 298
 299 <!-- Search bar filter with list-dividers -->
 300 <div data-nstest-role="page" id='search-filter-with-dividers-test'>
 301         <div data-nstest-role="header" data-nstest-position="inline">
 302                 <h1>Split List View</h1>
 303         </div>
 304         <div data-nstest-role="content">
 305                 <ul data-nstest-role="listview" data-nstest-filter="true">
 306                         <li data-nstest-role="list-divider">a</li>
 307                         <li>a is for aquaman</li>
 308                         <li data-nstest-role="list-divider">b</li>
 309                         <li>b is for batman</li>
 310                         <li data-nstest-role="list-divider">c</li>
 311                         <li>c is for catwoman</li>
 312                         <li data-nstest-role="list-divider">d</li>
 313                         <li>d is for darkwing</li>
 314                 </ul>
 315         </div>
 316 </div>
 317
 318 <!-- Search bar filter inset -->
 319 <div data-nstest-role="page" id='search-filter-inset-test'>
 320         <div data-nstest-role="header" data-nstest-position="inline">
 321                 <h1>Inset Filter List View</h1>
 322         </div>
 323         <div data-nstest-role="content">
 324                 <ul data-nstest-role="listview" data-nstest-filter="true" data-nstest-inset="true">
 325                         <li>a is for aquaman</li>
 326                         <li>b is for batman</li>
 327                         <li>c is for catwoman</li>
 328                         <li>d is for darkwing</li>
 329                 </ul>
 330         </div>
 331 </div>
 332
 333 <!-- Programmatically generated list items !-->
 334 <div data-nstest-role="page" id="programmatically-generated-list">
 335         <ul data-nstest-role="listview" data-nstest-inset="true" id="programmatically-generated-list-items"></ul>
 336 </div>
 337
 338 <!-- Removing items from list -->
 339 <div data-nstest-role="page" id='removing-items-from-list-test'>
 340         <div data-nstest-role="header" data-nstest-position="inline">
 341                 <h1>Basic List View</h1>
 342         </div>
 343         <div data-nstest-role="content">
 344                 <ul data-nstest-role="listview" data-nstest-inset="true">
 345                         <li>Item 1</li>
 346                         <li>Item 2</li>
 347                         <li>Item 3</li>
 348                         <li>Item 4</li>
 349                 </ul>
 350         </div>
 351 </div>
 352
 353 <!-- Rounded corners inset list with variable items -->
 354 <div data-nstest-role="page" id='corner-rounded-test'>
 355         <div data-nstest-role="header" data-nstest-position="inline">
 356                 <h1>Basic List View</h1>
 357         </div>
 358         <div data-nstest-role="content">
 359                 <ul data-nstest-role="listview" data-nstest-inset="true">
 360                 </ul>
 361         </div>
 362 </div>
 363
 364 <div data-nstest-role="page" id="enhancetest">
 365         <ul data-nstest-role="listview">
 366                 <li><a href="#basic-link-results">Home</a></li>
 367                 <li><a href="#basic-link-results">Back</a></li>
 368                 <li><a href="#basic-link-results">Return</a></li>
 369         </ul>
 370 </div>
 371
 372 <div id="list-theme-inherit" data-nstest-theme="b">
 373   <ul data-nstest-role="listview">
 374     <li>foo</li>
 375   </ul>
 376 </div>
 377
 378 <div data-nstest-role="page" id="ui-li-has-test">
 379   <div data-nstest-role="content">
 380         <p>Right padding on item 1 is OK (75px).</p>
 381         <p>Right padding on items 2 &amp; 3 should probably be around 30 or 35 (not 25).</p>
 382         <p>Right padding on item 4 should be 15px to match the left side.</p>
 383         <ol data-nstest-role="listview" data-nstest-inset="true">
 384           <li><a href="#">Link LI with counter --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------<span class="ui-li-count">123</span></a></li>
 385           <li><a href="#">Link LI without counter -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</a></li>
 386           <li><a href="#page1">Page1 Link LI without counter -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</a><a href="#page2"></a></li>
 387           <li>Static LI with counter ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------<span class="ui-li-count">123</span></li>
 388           <li>Static LI without counter ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</li>
 389         </ol>
 390   </div>
 391 </div>
 392
 393
 394 <div id="list-inset-filter-prototype" data-nstest-theme="b">
 395         <ul data-nstest-role="listview" data-nstest-filter="true">
 396                 <li>foo</li>
 397                 <li>bar</li>
 398         </ul>
 399 </div>
 400
 401 <div id="list-inset-filter-data-attr" data-nstest-theme="b">
 402         <ul data-nstest-role="listview" data-nstest-filter="true" data-nstest-inset="true">
 403                 <li>foo</li>
 404                 <li>bar</li>
 405         </ul>
 406 </div>
 407
 408 <div data-nstest-role="page" id="split-list-icon">
 409         <div data-nstest-role="content">
 410                 <ul data-nstest-role="listview" data-nstest-split-icon="delete">
 411                         <li data-nstest-icon="star"><a href="#">Star</a><a href="#">Star</a></li>
 412                         <li data-nstest-icon="plug"><a href="#">Plus</a><a href="#">Plus</a></li>
 413                         <li><a href="#">Default</a><a href="#">Default</a></li>
 414       <!-- respect the child element icon -->
 415                         <li data-nstest-icon="star"><a href="#">Default</a><a data-nstest-icon="plug" href="#">Default</a></li>
 416                 </ul>
 417         </div>
 418 </div>
 419
 420 <div data-nstest-role="page" id="list-divider-ignore-link">
 421   <div data-nstest-role="content">
 422     <ul data-nstest-role="listview">
 423       <li data-nstest-role="list-divider">A</li>
 424       <li><a href="index.html">Adam Kinkaid</a></li>
 425       <li><a href="index.html">Alex Wickerham</a></li>
 426       <li><a href="index.html">Avery Johnson</a></li>
 427       <li data-nstest-role="list-divider" id="ignored-link">B has a <a href="#">link</a></li>
 428       <li><a href="index.html">Bob Cabot</a></li>
 429       <li data-nstest-role="list-divider">C</li>
 430       <li><a href="index.html">Caleb Booth</a></li>
 431       <li><a href="index.html">Christopher Adams</a></li>
 432     </ul>
 433   </div><!-- /content -->
 434 </div>
 435
 436 <div data-nstest-role="page" id="list-last-visible-item-border">
 437         <div data-nstest-role="content">
 438                 <ul data-nstest-role="listview">
 439                         <li class="listitem"><a href="index.html">Adam Kinkaid</a></li>
 440                         <li class="listitem"><a href="index.html">Alex Wickerham</a></li>
 441                         <li class="listitem ui-screen-hidden"><a href="index.html">Bob Cabot</a></li>
 442                         <li id="lastitem"><a href="index.html">Caleb Booth</a></li>
 443                         <li class="listitem ui-screen-hidden"><a href="index.html">Christopher Adams</a></li>
 444                 </ul>
 445         </div><!-- /content -->
 446 </div>
 447
 448 <div data-nstest-role="page" id="list-inside-collapsible-content">
 449         <div data-nstest-role="content">
 450                 <div data-nstest-role="collapsible" data-nstest-content-theme="c">
 451                         <h1>Heading</h1>
 452                         <ul data-nstest-role="listview">
 453                                 <li><a href="index.html">Adam Kinkaid</a></li>
 454                                 <li><a href="index.html">Alex Wickerham</a></li>
 455                                 <li id="noninsetlastli"><a href="index.html">Caleb Booth</a></li>
 456                         </ul>
 457                 </div>
 458                 <div data-nstest-role="collapsible" data-nstest-content-theme="c">
 459                         <h1>Heading</h1>
 460                         <ul data-nstest-role="listview" data-nstest-inset="true">
 461                                 <li><a href="index.html">Adam Kinkaid</a></li>
 462                                 <li><a href="index.html">Alex Wickerham</a></li>
 463                                 <li id="insetlastli"><a href="index.html">Caleb Booth</a></li>
 464                         </ul>
 465                 </div>
 466   </div><!-- /content -->
 467 </div>
 468
 469 </body>
 470 </html>