libs/js/jquery-mobile-1.2.0/tests/unit/collapsible/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 Collapsible 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                                 "widgets/collapsible",
  17                                 "widgets/collapsibleSet",
  18                                 "widgets/page.sections"
  19                         ],
  20                         [ "jquery.mobile.init" ],
  21                         [
  22                                 "collapsible_core.js"
  23                         ]
  24                 ]);
  25         </script>
  26         <link rel="stylesheet"  href="../../../css/themes/default/jquery.mobile.css" />
  27         <link rel="stylesheet" href="../../../external/qunit.css"/>
  28
  29         <script src="../swarminject.js"></script>
  30 </head>
  31 <body>
  32
  33 <h1 id="qunit-header">jQuery Mobile Collapsible Integration Test</h1>
  34 <h2 id="qunit-banner"></h2>
  35 <h2 id="qunit-userAgent"></h2>
  36 <ol id="qunit-tests">
  37 </ol>
  38
  39 <div data-nstest-role="page" id='basic-collapsible-test'>
  40         <div data-nstest-role="header">
  41                 <h1>Basic collapsible</h1>
  42         </div>
  43         <div data-nstest-role="content">
  44                 <div data-nstest-role="collapsible">
  45                         <h3>Section A</h3>
  46
  47                         <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
  48                                 have the "collapsed" state; you need to expand the header to see me.</p>
  49
  50                 </div>
  51                 <div data-nstest-role="collapsible" data-nstest-collapsed="false">
  52                         <h3>Section B</h3>
  53
  54                         <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
  55                                 have the "collapsed" state; you need to expand the header to see me.</p>
  56
  57                 </div>
  58         </div>
  59 </div>
  60
  61 <div data-nstest-role="page" id='basic-collapsible-set-test'>
  62         <div data-nstest-role="header">
  63                 <h1>Basic collapsible</h1>
  64         </div>
  65         <div data-nstest-role="content">
  66                 <div data-nstest-role="collapsible-set">
  67                         <div data-nstest-role="collapsible">
  68                                 <h3>Section A</h3>
  69
  70                                 <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
  71                                         have the "collapsed" state; you need to expand the header to see me.</p>
  72
  73                         </div>
  74                         <div data-nstest-role="collapsible" data-nstest-collapsed="false">
  75                                 <h3>Section B</h3>
  76
  77                                 <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
  78                                         have the "collapsed" state; you need to expand the header to see me.</p>
  79
  80                         </div>
  81                         <div data-nstest-role="collapsible">
  82                                 <h3>Section C</h3>
  83
  84                                 <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
  85                                         have the "collapsed" state; you need to expand the header to see me.</p>
  86
  87                         </div>
  88                 </div>
  89         </div>
  90 </div>
  91
  92 <div data-nstest-role="page" id='collapsible-set-with-lonely-collapsible-test'>
  93         <div data-nstest-role="header">
  94                 <h1>Basic collapsible</h1>
  95         </div>
  96         <div data-nstest-role="content">
  97                 <div data-nstest-role="collapsible-set">
  98                         <div data-nstest-role="collapsible" >
  99                                 <h3>Section D</h3>
 100
 101                                 <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
 102                                         have the "collapsed" state; you need to expand the header to see me.</p>
 103                         </div>
 104                 </div>
 105
 106                 <div data-nstest-role="collapsible" >
 107                         <h3>Section E</h3>
 108
 109                         <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
 110                                 have the "collapsed" state; you need to expand the header to see me.</p>
 111                 </div>
 112         </div>
 113 </div>
 114
 115 <div data-nstest-role="page" id='collapsible-with-custom-icons'>
 116         <div data-nstest-role="header">
 117                 <h1>Custom icons for collapsibles</h1>
 118         </div>
 119         <div data-nstest-role="content">
 120                 <div data-nstest-role="collapsible">
 121                         <h3>Section A</h3>
 122
 123                         <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
 124                                 have the "collapsed" state; you need to expand the header to see me.</p>
 125                 </div>
 126                 <div data-nstest-role="collapsible" data-nstest-collapsed="false">
 127                         <h3>Section B</h3>
 128
 129                         <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
 130                                 have the "collapsed" state; you need to expand the header to see me.</p>
 131                 </div>
 132
 133                 <div data-nstest-role="collapsible" data-nstest-collapsed-icon="arrow-r" data-nstest-expanded-icon="arrow-d">
 134                         <h3>Section C</h3>
 135
 136                         <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
 137                                 have the "collapsed" state; you need to expand the header to see me.</p>
 138                 </div>
 139                 <div data-nstest-role="collapsible" data-nstest-collapsed-icon="arrow-r" data-nstest-expanded-icon="arrow-d" data-nstest-collapsed="false">
 140                         <h3>Section D</h3>
 141
 142                         <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
 143                                 have the "collapsed" state; you need to expand the header to see me.</p>
 144                 </div>
 145         <div data-nstest-role="collapsible" data-nstest-collapsed-icon="info" data-nstest-expanded-icon="info">
 146             <h3>Section E</h3>
 147
 148             <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
 149                 have the "collapsed" state; you need to expand the header to see me.</p>
 150         </div>
 151
 152         </div>
 153 </div>
 154
 155 <div data-nstest-role="page" id='collapsible-set-with-custom-icons'>
 156         <div data-nstest-role="header">
 157                 <h1>Custom icons for collapsible sets</h1>
 158         </div>
 159         <div data-nstest-role="content">
 160                 <div data-nstest-role="collapsible-set">
 161                         <div data-nstest-role="collapsible">
 162                                 <h3>Section A</h3>
 163
 164                                 <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
 165                                         have the "collapsed" state; you need to expand the header to see me.</p>
 166                         </div>
 167                         <div data-nstest-role="collapsible" data-nstest-collapsed="false">
 168                                 <h3>Section B</h3>
 169
 170                                 <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
 171                                         have the "collapsed" state; you need to expand the header to see me.</p>
 172                         </div>
 173                 </div>
 174                 <div data-nstest-role="collapsible-set" data-nstest-collapsed-icon="arrow-r" data-nstest-expanded-icon="arrow-d">
 175                         <div data-nstest-role="collapsible">
 176                                 <h3>Section A</h3>
 177
 178                                 <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
 179                                         have the "collapsed" state; you need to expand the header to see me.</p>
 180                         </div>
 181                         <div data-nstest-role="collapsible" data-nstest-collapsed="false">
 182                                 <h3>Section B</h3>
 183
 184                                 <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
 185                                         have the "collapsed" state; you need to expand the header to see me.</p>
 186                         </div>
 187                         <div data-nstest-role="collapsible" data-nstest-collapsed-icon="arrow-l" data-nstest-expanded-icon="arrow-u">
 188                                 <h3>Section C</h3>
 189
 190                                 <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
 191                                         have the "collapsed" state; you need to expand the header to see me.</p>
 192                         </div>
 193                         <div data-nstest-role="collapsible" data-nstest-collapsed-icon="arrow-l" data-nstest-expanded-icon="arrow-u" data-nstest-collapsed="false">
 194                                 <h3>Section D</h3>
 195
 196                                 <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
 197                                         have the "collapsed" state; you need to expand the header to see me.</p>
 198                         </div>
 199                 </div>
 200         </div>
 201 </div>
 202
 203 <div data-nstest-role="page" id='collapsible-with-theming'>
 204         <div data-nstest-role="header">
 205                 <h1>Themed collapsibles</h1>
 206         </div>
 207         <div data-nstest-role="content">
 208                 <div data-nstest-role="collapsible" data-nstest-theme="a">
 209                         <h3>Section A</h3>
 210
 211                         <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
 212                                 have the "collapsed" state; you need to expand the header to see me.</p>
 213                 </div>
 214                 <div data-nstest-role="collapsible" data-nstest-theme="b" data-nstest-content-theme="b">
 215                         <h3>Section B</h3>
 216
 217                         <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
 218                                 have the "collapsed" state; you need to expand the header to see me.</p>
 219                 </div>
 220                 <div data-nstest-role="collapsible" data-nstest-theme="c" data-nstest-content-theme="c" data-nstest-collapsed="false">
 221                         <h3>Section B</h3>
 222
 223                         <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
 224                                 have the "collapsed" state; you need to expand the header to see me.</p>
 225                 </div>
 226
 227         </div>
 228 </div>
 229
 230 <div data-nstest-role="page" id='collapsible-set-with-theming'>
 231         <div data-nstest-role="header">
 232                 <h1>Themed collapsibles</h1>
 233         </div>
 234         <div data-nstest-role="content">
 235                 <div data-nstest-role="collapsible-set" data-nstest-theme="d" data-nstest-content-theme="d">
 236                         <div data-nstest-role="collapsible" data-nstest-theme="a">
 237                                 <h3>Section A</h3>
 238
 239                                 <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
 240                                         have the "collapsed" state; you need to expand the header to see me.</p>
 241                         </div>
 242                         <div data-nstest-role="collapsible" data-nstest-theme="b" data-nstest-content-theme="b">
 243                                 <h3>Section B</h3>
 244
 245                                 <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
 246                                         have the "collapsed" state; you need to expand the header to see me.</p>
 247                         </div>
 248                         <div data-nstest-role="collapsible" data-nstest-collapsed="false">
 249                                 <h3>Section C</h3>
 250
 251                                 <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
 252                                         have the "collapsed" state; you need to expand the header to see me.</p>
 253                         </div>
 254                         <div data-nstest-role="collapsible">
 255                                 <h3>Section D</h3>
 256
 257                                 <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
 258                                         have the "collapsed" state; you need to expand the header to see me.</p>
 259                         </div>
 260                 </div>
 261
 262         </div>
 263 </div>
 264
 265 <div data-nstest-role="page" id='collapsible-set-with-dynamic-content'>
 266         <div data-nstest-role="header">
 267                 <h1>Collapsible Set with dynamic content</h1>
 268         </div>
 269         <div data-nstest-role="content">
 270                 <div data-nstest-role="collapsible-set"></div>
 271         </div>
 272 </div>
 273
 274 <div data-nstest-role="page" id='collapsible-set-with-static-and-dynamic-content'>
 275         <div data-nstest-role="header">
 276                 <h1>Collapsible Set with dynamic content</h1>
 277         </div>
 278         <div data-nstest-role="content">
 279                 <div data-nstest-role="collapsible-set">
 280       <div data-nstest-role="collapsible">
 281         <h3>Section A</h3>
 282
 283         <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
 284           have the "collapsed" state; you need to expand the header to see me.</p>
 285       </div>
 286                 </div>
 287         </div>
 288 </div>
 289
 290 <div data-nstest-role="page" id="collapsible-set-with-last-collapsible-expanded">
 291         <div data-nstest-role="header">
 292         <h1>uncollapsed collapsible</h1>
 293         </div>
 294         <div data-nstest-role="content">
 295                 <div data-nstest-role="collapsible-set">
 296                         <div data-nstest-role="collapsible">
 297                                 <h1>Collapsible collapsed</h1>
 298                                 <ul data-nstest-role="listview" data-inset="true">
 299                                         <li data-nstest-theme="b">Swatch b</li>
 300                                         <li data-nstest-theme="d">Swatch d</li>
 301                                 </ul>
 302                         </div>
 303                         <div data-nstest-role="collapsible" data-nstest-collapsed="false" data-nstest-content-theme="e">
 304                                 <h1>Collapsible initial uncollapsed</h1>
 305                                 <ul data-nstest-role="listview" data-nstest-inset="true">
 306                                         <li data-nstest-theme="a">Swatch a</li>
 307                                         <li data-nstest-theme="b">Swatch b</li>
 308                                 </ul>
 309                         </div>
 310                 </div>
 311         </div>
 312 </div>
 313
 314 <div data-nstest-role="page" id="collapsible-set-with-legends">
 315         <div data-nstest-role="header">
 316                 <h1>Collapsible set with legends</h1>
 317         </div>
 318         <div data-nstest-role="content">
 319                 <form data-nstest-role="collapsible-set">
 320                         <fieldset data-nstest-role="collapsible">
 321                                 <legend>Legend</legend>
 322                                 <div data-nstest-role="controlgroup">
 323                                         <input type="checkbox" name="checkbox-1" id="checkbox-1" />
 324                                         <label for="checkbox-1">Checkbox</label>
 325                                 </div>
 326                         </fieldset>
 327                         <fieldset data-nstest-role="collapsible">
 328                                 <legend>Legend</legend>
 329                                 <div data-nstest-role="controlgroup">
 330                                         <input type="checkbox" name="checkbox-2" id="checkbox-2" />
 331                                         <label for="checkbox-2">Checkbox</label>
 332                                 </div>
 333                         </fieldset>
 334                         <fieldset data-nstest-role="collapsible">
 335                                 <legend>Legend</legend>
 336                                 <div data-nstest-role="controlgroup">
 337                                         <input type="checkbox" name="checkbox-3" id="checkbox-3" />
 338                                         <label for="checkbox-3">Checkbox</label>
 339                                 </div>
 340                         </fieldset>
 341                 </form>
 342         </div>
 343 </div>
 344
 345 </body>
 346 </html>