libs/js/jquery-mobile-1.1.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                                 "jquery.mobile.collapsible",
  17                                 "jquery.mobile.collapsibleSet",
  18                                 "jquery.mobile.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-theming'>
 116         <div data-nstest-role="header">
 117                 <h1>Themed collapsibles</h1>
 118         </div>
 119         <div data-nstest-role="content">
 120                 <div data-nstest-role="collapsible" data-nstest-theme="a">
 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-theme="b" data-nstest-content-theme="b">
 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                 <div data-nstest-role="collapsible" data-nstest-theme="c" data-nstest-content-theme="c" data-nstest-collapsed="false">
 133                         <h3>Section B</h3>
 134
 135                         <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
 136                                 have the "collapsed" state; you need to expand the header to see me.</p>
 137                 </div>
 138
 139         </div>
 140 </div>
 141
 142 <div data-nstest-role="page" id='collapsible-set-with-theming'>
 143         <div data-nstest-role="header">
 144                 <h1>Themed collapsibles</h1>
 145         </div>
 146         <div data-nstest-role="content">
 147                 <div data-nstest-role="collapsible-set" data-nstest-theme="d" data-nstest-content-theme="d">
 148                         <div data-nstest-role="collapsible" data-nstest-theme="a">
 149                                 <h3>Section A</h3>
 150
 151                                 <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
 152                                         have the "collapsed" state; you need to expand the header to see me.</p>
 153                         </div>
 154                         <div data-nstest-role="collapsible" data-nstest-theme="b" data-nstest-content-theme="b">
 155                                 <h3>Section B</h3>
 156
 157                                 <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
 158                                         have the "collapsed" state; you need to expand the header to see me.</p>
 159                         </div>
 160                         <div data-nstest-role="collapsible" data-nstest-collapsed="false">
 161                                 <h3>Section C</h3>
 162
 163                                 <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
 164                                         have the "collapsed" state; you need to expand the header to see me.</p>
 165                         </div>
 166                         <div data-nstest-role="collapsible">
 167                                 <h3>Section D</h3>
 168
 169                                 <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
 170                                         have the "collapsed" state; you need to expand the header to see me.</p>
 171                         </div>
 172                 </div>
 173
 174         </div>
 175 </div>
 176
 177 <div data-nstest-role="page" id='collapsible-set-with-dynamic-content'>
 178         <div data-nstest-role="header">
 179                 <h1>Collapsible Set with dynamic content</h1>
 180         </div>
 181         <div data-nstest-role="content">
 182                 <div data-nstest-role="collapsible-set"></div>
 183         </div>
 184 </div>
 185
 186 <div data-nstest-role="page" id='collapsible-set-with-static-and-dynamic-content'>
 187         <div data-nstest-role="header">
 188                 <h1>Collapsible Set with dynamic content</h1>
 189         </div>
 190         <div data-nstest-role="content">
 191                 <div data-nstest-role="collapsible-set">
 192       <div data-nstest-role="collapsible">
 193         <h3>Section A</h3>
 194
 195         <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
 196           have the "collapsed" state; you need to expand the header to see me.</p>
 197       </div>
 198                 </div>
 199         </div>
 200 </div>
 201
 202 </body>
 203 </html>