Changeset 10995 for main/waeup.kofa/branches/uli-diazo-themed/layout/theme.html

Timestamp:

28 Jan 2014, 15:32:58 (11 years ago)

Author:

uli

Message:

Use twbs 3.x tabs.

File:

• main/waeup.kofa/branches/uli-diazo-themed/layout/theme.html (modified) (6 diffs)

main/waeup.kofa/branches/uli-diazo-themed/layout/theme.html

@@ -13 +13 @@
     <link href="bootstrap/css/bootstrap-theme.min.css"
           rel="stylesheet">
-
     <link href="static/css/jquery.dataTables.css"
           rel="stylesheet">
-
     <link href="static/css/base.css" rel="stylesheet">
 
@@ -105 +103 @@
                 <li><a href="#">Personal Data</a></li>
                 <li><a href="#">Study Course</a></li>
-                <li><a href="#"">Payments</a></li>
+                <li><a href="#">Payments</a></li>
                 <li><a href="#">Accommodation</a></li>
                 <li><a href="#">History</a></li>
@@ -124 +122 @@
           </div> <!-- /well -->
         </div> <!-- /kofa-sidebar -->
+
         <div class="col-md-10 content kofa-content-narrow">
           <div class="well">
@@ -149 +148 @@
               </div>
               <h1>WAeUP.Kofa Theme</h1>
-              <p class="kofa-content-desc">A sample Diazo theme for WAeUP.Kofa
-              <br>
-              Fusce dapibus, tellus ac cursus commodo.
+
+              <p class="kofa-content-desc">
+                A sample Diazo theme for WAeUP.Kofa
+                <br />
+                Fusce dapibus, tellus ac cursus commodo.
               </p>
               <p>
@@ -161 +162 @@
               </p>
               <img src="static/img/bg.png" />
+
+              <!-- Tabs... -->
+              <br /><br />
+              <h3>Sample Tabs</h3>
+              <ul id="tabs" class="tabs nav nav-tabs" data-tabs="tabs">
+                <li class="active">
+                  <a href="#tab-1" data-toggle="tab">Tab 1</a>
+                </li>
+                <li class="">
+                  <a href="#tab-2" data-toggle="tab">Tab 2</a>
+                </li>
+                <li class="">
+                  <a href="#tab-3" data-toggle="tab">Tab 3</a>
+                </li>
+              </ul>
+              <div class="tab-content">
+                <div id="tab-1" class="tab-pane active">
+                  <br />
+                  <p>
+                    Tab 1 content...<br />  Donec id elit non mi porta
+                    gravida at eget metus. Fusce dapibus, tellus ac
+                    cursus commodo.
+                  </p>
+                </div>
+                <div id="tab-2" class="tab-pane">
+                  <br />
+                  <p>
+                    Tab 2 content...<br />  Tortor mauris condimentum
+                    nibh, ut fermentum massa justo sit amet
+                    risus. Etiam porta sem malesuada.
+                  </p>
+                </div>
+                <div id="tab-3" class="tab-pane">
+                  <br />
+                  <p>
+                    Tab 3 content...<br /> Magna mollis euismod. Donec
+                    sed odio dui.
+                  </p>
+                </div>
+              </div><!-- /tab-content -->
+
+              <script type="text/javascript" 
+                      class="kofa-script kofa-script-tabs">
+                $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
+                console.log('showing tab ' + e.target); // Active Tab
+                console.log('showing tab ' + e.relatedTarget); // Previous Tab
+                });
+              </script>
+
             </div> <!-- /kofa-content -->
           </div> <!-- /well -->
@@ -402 +452 @@
                 "aoColumnDefs":[{ "bSortable": false, "aTargets": [ 0 ] }]
         } );
+
+        //* activate current tab, if any... */
+        $('a[href="' + window.location.hash + '"]').trigger('click');
       });
     </script>