toplevel menus use pills for now - need alignment

[unfold.git] / slice / templates / sample.html

diff --git a/slice/templates/sample.html b/slice/templates/sample.html
index 18c897a..40c85ba 100644 (file)
--- a/slice/templates/sample.html
+++ b/slice/templates/sample.html
@@ -5,43 +5,28 @@
 {% insert_str prelude "css/sample.css" %}
 {% insert_str prelude "js/sample.js" %}
 
-{% insert raw_js %}
-function myinit () {
-alert ('initing'); 
-$('#foo a#name1').click(function (e) { e.preventDefault(); $(this).tab('show');})
-$('#foo a#name2').click(function (e) { e.preventDefault(); $(this).tab('show');})
-};
-$(document).ready (function () {
-alert ('initing'); 
-$('#foo a#name1').click(function (e) { e.preventDefault(); $(this).tab('show');})
-$('#foo a#name2').click(function (e) { e.preventDefault(); $(this).tab('show');})
-});
-{% endinsert %}
-
-<div onclick="alert('yes');"> manual alert </div>
-<div onclick="init1();">manual init </div>
-
-<div style='border:1'>
+<div id=sample-tabs>
 <ul class="nav nav-tabs" id='foo'>
-  <li class="active"><a href="#name1">Here</a></li>
-  <li><a href="#name2">Other</a></li>
+  <li >                                <a href="#name1" data-toggle="tab">Here</a></li>
+  <li class="active">          <a href="#name2" data-toggle="tab">Other</a></li>
   </ul>
 <div class="tab-content">
-   <div class="tab-pane fade active in" id="name1">
-     <p> text for tab 1 </p>
+   <div class="tab-pane fade in" id="name1">
+     <p> {{ lorem|safe }} </p>
    </div>
-   <div class="tab-pane fade in" id="name2">
-     <p> Lorem <span class='bold'>ipsum dolor</span> sit amet, consectetuer
+   <div class="tab-pane fade in active" id="name2">
+     <p> Sample tabs, this one is the active one; A shorter Lorem <code> with embedded code </code> <span class='bold'>ipsum dolor</span> sit amet, consectetuer
     adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
     laoreet dolore magna aliquam erat volutpat. Ut wisi enim </p>
    </div>
 </div>   
 </div>
 
-<div class='well'> quis nostrud exerci tation </div>
+
+<div class='well'> a sample of the 'well' class quis nostrud exerci tation </div>
 
 <div>
-  Lorem <span class='bold'>ipsum dolor</span> <code> counter += 1
+ {{ lorem }}   Lorem <span class='bold'>ipsum dolor</span> <code> counter += 1
   </code> sit amet, consectetuer
     adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
     laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim