first working example for tabs
[myslice.git] / slice / templates / sample.html
1 {% extends 'myslice.html' %}
2
3 {% block content_main %}
4
5 {% insert_str prelude "css/sample.css" %}
6 {% insert_str prelude "js/sample.js" %}
7
8 {% insert raw_js %}
9 $(document).ready (function () {
10 window.console.log ('initing 1 & 2'); 
11 $('#foo a#name1').click(function (e) { window.console.log('click 1'); e.preventDefault(); $('#foo a#name1').tab('show');})
12 $('#foo a#name2').click(function (e) { window.console.log('click 2'); e.preventDefault(); $('#foo a#name2').tab('show');})
13 });
14 {% endinsert %}
15
16 <div id=sample-tabs>
17 <ul class="nav nav-tabs" id='foo'>
18   <li class="active">   <a href="#name1" data-toggle="tab">Here</a></li>
19   <li>                  <a href="#name2" data-toggle="tab">Other</a></li>
20   </ul>
21 <div class="tab-content">
22    <div class="tab-pane fade active in" id="name1">
23      <p> {{ lorem }} </p>
24    </div>
25    <div class="tab-pane fade in" id="name2">
26      <p> A shorter Lorem <code> with embedded code </code> <span class='bold'>ipsum dolor</span> sit amet, consectetuer
27     adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
28     laoreet dolore magna aliquam erat volutpat. Ut wisi enim </p>
29    </div>
30 </div>   
31 </div>
32
33
34 <script>
35  $(function () {
36     $('#myTab a:last').tab('show');
37   })
38 </script>
39
40 <div class='well'> quis nostrud exerci tation </div>
41
42 <div>
43  {{ lorem }}   Lorem <span class='bold'>ipsum dolor</span> <code> counter += 1
44   </code> sit amet, consectetuer
45     adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
46     laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
47     veniam,  ullamcorper suscipit lobortis
48     nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
49     dolor in hendrerit in vulputate velit esse molestie consequat, vel
50     illum dolore eu feugiat nulla facilisis at vero eros et accumsan
51     et iusto odio dignissim qui blandit praesent luptatum zzril
52     delenit augue duis dolore te feugait nulla facilisi. Nam liber
53     tempor cum soluta nobis eleifend option congue nihil imperdiet
54     doming id quod mazim placerat facer possim assum. Typi non habent
55     claritatem insitam; est usus legentis in iis qui facit eorum
56     claritatem. Investigationes demonstraverunt lectores legere me
57     lius quod ii legunt saepius. Claritas est etiam processus
58     dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum
59     est notare quam littera gothica, quam nunc putamus parum claram,
60     anteposuerit litterarum formas humanitatis per seacula quarta
61     decima et quinta decima. Eodem modo typi, qui nunc nobis videntur
62     parum clari, fiant sollemnes in futurum.
63   </div>
64 {% endblock content_main %}
65
66 {% block content_related %}
67 This text is shorter on purpose Lorem <span class='bold'>ipsum
68    dolor</span> sit amet, consectetuer adipiscing elit, sed diam
69    nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
70    volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
71    ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
72    consequat.
73 {% endblock content_related %}