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