Ignore:
Timestamp:
28 Jan 2014, 15:32:58 (11 years ago)
Author:
uli
Message:

Use twbs 3.x tabs.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • main/waeup.kofa/branches/uli-diazo-themed/layout/theme.html

    r10994 r10995  
    1313    <link href="bootstrap/css/bootstrap-theme.min.css"
    1414          rel="stylesheet">
    15 
    1615    <link href="static/css/jquery.dataTables.css"
    1716          rel="stylesheet">
    18 
    1917    <link href="static/css/base.css" rel="stylesheet">
    2018
     
    105103                <li><a href="#">Personal Data</a></li>
    106104                <li><a href="#">Study Course</a></li>
    107                 <li><a href="#"">Payments</a></li>
     105                <li><a href="#">Payments</a></li>
    108106                <li><a href="#">Accommodation</a></li>
    109107                <li><a href="#">History</a></li>
     
    124122          </div> <!-- /well -->
    125123        </div> <!-- /kofa-sidebar -->
     124
    126125        <div class="col-md-10 content kofa-content-narrow">
    127126          <div class="well">
     
    149148              </div>
    150149              <h1>WAeUP.Kofa Theme</h1>
    151               <p class="kofa-content-desc">A sample Diazo theme for WAeUP.Kofa
    152               <br>
    153               Fusce dapibus, tellus ac cursus commodo.
     150
     151              <p class="kofa-content-desc">
     152                A sample Diazo theme for WAeUP.Kofa
     153                <br />
     154                Fusce dapibus, tellus ac cursus commodo.
    154155              </p>
    155156              <p>
     
    161162              </p>
    162163              <img src="static/img/bg.png" />
     164
     165              <!-- Tabs... -->
     166              <br /><br />
     167              <h3>Sample Tabs</h3>
     168              <ul id="tabs" class="tabs nav nav-tabs" data-tabs="tabs">
     169                <li class="active">
     170                  <a href="#tab-1" data-toggle="tab">Tab 1</a>
     171                </li>
     172                <li class="">
     173                  <a href="#tab-2" data-toggle="tab">Tab 2</a>
     174                </li>
     175                <li class="">
     176                  <a href="#tab-3" data-toggle="tab">Tab 3</a>
     177                </li>
     178              </ul>
     179              <div class="tab-content">
     180                <div id="tab-1" class="tab-pane active">
     181                  <br />
     182                  <p>
     183                    Tab 1 content...<br />  Donec id elit non mi porta
     184                    gravida at eget metus. Fusce dapibus, tellus ac
     185                    cursus commodo.
     186                  </p>
     187                </div>
     188                <div id="tab-2" class="tab-pane">
     189                  <br />
     190                  <p>
     191                    Tab 2 content...<br />  Tortor mauris condimentum
     192                    nibh, ut fermentum massa justo sit amet
     193                    risus. Etiam porta sem malesuada.
     194                  </p>
     195                </div>
     196                <div id="tab-3" class="tab-pane">
     197                  <br />
     198                  <p>
     199                    Tab 3 content...<br /> Magna mollis euismod. Donec
     200                    sed odio dui.
     201                  </p>
     202                </div>
     203              </div><!-- /tab-content -->
     204
     205              <script type="text/javascript"
     206                      class="kofa-script kofa-script-tabs">
     207                $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
     208                console.log('showing tab ' + e.target); // Active Tab
     209                console.log('showing tab ' + e.relatedTarget); // Previous Tab
     210                });
     211              </script>
     212
    163213            </div> <!-- /kofa-content -->
    164214          </div> <!-- /well -->
     
    402452                "aoColumnDefs":[{ "bSortable": false, "aTargets": [ 0 ] }]
    403453        } );
     454
     455        //* activate current tab, if any... */
     456        $('a[href="' + window.location.hash + '"]').trigger('click');
    404457      });
    405458    </script>
Note: See TracChangeset for help on using the changeset viewer.