|
|
| Line 25: |
Line 25: |
| | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> | | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> |
| | | | |
| - | <script src="https://github.com/syntacticx/livepipe-ui.git"></script>
| + | |
| - | <script type="text/javascript">
| + | |
| - | //example 1
| + | |
| - | new Control.Tabs('tabs_example_one');
| + | |
| - |
| + | |
| - | //example 2
| + | |
| - | var tabs_example_two = new Control.Tabs('tabs_example_two',{
| + | |
| - | afterChange: function(new_container){
| + | |
| - | $A($('tabs_example_two_select').options).each(function(option,i){
| + | |
| - | if(option.value == new_container.id){
| + | |
| - | $('tabs_example_two_select').options.selectedIndex = i;
| + | |
| - | throw $break;
| + | |
| - | }
| + | |
| - | });
| + | |
| - | }
| + | |
| - | });
| + | |
| - | $('tabs_example_two_select').observe('change',function(){
| + | |
| - | tabs_example_two.setActiveTab($('tabs_example_two_select').value);
| + | |
| - | });
| + | |
| - | $('tabs_example_two_first').observe('click',function(event){
| + | |
| - | this.first();
| + | |
| - | Event.stop(event);
| + | |
| - | }.bindAsEventListener(tabs_example_two));
| + | |
| - | $('tabs_example_two_previous').observe('click',function(event){
| + | |
| - | this.previous();
| + | |
| - | Event.stop(event);
| + | |
| - | }.bindAsEventListener(tabs_example_two));
| + | |
| - | $('tabs_example_two_next').observe('click',function(event){
| + | |
| - | this.next();
| + | |
| - | Event.stop(event);
| + | |
| - | }.bindAsEventListener(tabs_example_two));
| + | |
| - | $('tabs_example_two_last').observe('click',function(event){
| + | |
| - | this.last();
| + | |
| - | Event.stop(event);
| + | |
| - | }.bindAsEventListener(tabs_example_two));
| + | |
| - |
| + | |
| - | //example 3
| + | |
| - | new Control.Tabs('tabs_example_three',{
| + | |
| - | hover: true
| + | |
| - | });
| + | |
| - | </script>
| + | |
| | <style type="text/css"> | | <style type="text/css"> |
| | | | |
| - |
| |
| - |
| |
| - |
| |
| - | .tabbed_images {
| |
| - | list-style:none;
| |
| - | margin:0;
| |
| - | padding:0;
| |
| - | clear:both;
| |
| - | }
| |
| - |
| |
| - | .tabbed_images li {
| |
| - | list-style:none;
| |
| - | float:left;
| |
| - | margin:0;
| |
| - | padding:0;
| |
| - | }
| |
| - |
| |
| - | .tabbed_images li a {
| |
| - | border:1px solid #ccc;
| |
| - | display:block;
| |
| - | float:left;
| |
| - | margin:0 10px 0 0;
| |
| - | }
| |
| - |
| |
| - | .tabbed_images li a.active,
| |
| - | .tabbed_images li a:hover {
| |
| - | border:1px solid #333;
| |
| - | }
| |
| - |
| |
| - | .tabbed_images li a img {
| |
| - | border:none;
| |
| - | padding:2px;
| |
| - | margin:0;
| |
| - | margin-bottom:-5px;
| |
| - | }
| |
| - |
| |
| - | #image_1,
| |
| - | #image_2,
| |
| - | #image_3,
| |
| - | #image_4,
| |
| - | #image_5 {
| |
| - | margin-top:10px;
| |
| - | padding:2px;
| |
| - | border:1px solid #ccc;
| |
| - | }
| |
| - |
| |
| | | | |
| | | | |
| Line 621: |
Line 535: |
| | </div><!--class="header"--> | | </div><!--class="header"--> |
| | | | |
| - | <!-- example 1 -->
| |
| - | <ul id="tabs_example_one" class="subsection_tabs">
| |
| - | <li class="tab"><a href="#one">One</a></li>
| |
| - | <li class="tab"><a href="#two">Two</a></li>
| |
| - | </ul>
| |
| - | <div id="one"><p>This is the simplest example of a set of tabs.</p></div>
| |
| - | <div id="two"><p>Note that the styling for the tabs is done with CSS, not the Control.Tabs script.</p></div>
| |
| | | | |
| - | <!-- example 2 -->
| |
| - | <ul id="tabs_example_two" class="subsection_tabs">
| |
| - | <li class="tab"><a href="#a">One</a></li>
| |
| - | <li class="tab"><a href="#b">Two</a></li>
| |
| - | <li class="tab"><a href="#c">Three</a></li>
| |
| - | <li class="tab"><a href="#d">Four</a></li>
| |
| - | </ul>
| |
| - | <div id="a"><p>This example demonstrates scripting a Control.Tabs instance. Try clicking the links below, or changing the select box.</p></div>
| |
| - | <div id="b"><p>I am the second tab.</p></div>
| |
| - | <div id="c"><p>I am the third tab.</p></div>
| |
| - | <div id="d"><p>I am the fourth tab.</p></div>
| |
| - | <a href="" id="tabs_example_two_first" style="margin-right:10px;">«</a>
| |
| - | <a href="" id="tabs_example_two_previous" style="margin-right:10px;">←</a>
| |
| - | <select id="tabs_example_two_select" style="margin-right:10px;">
| |
| - | <option value="a">One</option>
| |
| - | <option value="b">Two</option>
| |
| - | <option value="c">Three</option>
| |
| - | <option value="d">Four</option>
| |
| - | </select>
| |
| - | <a href="" id="tabs_example_two_next" style="margin-right:10px;">→</a>
| |
| - | <a href="" id="tabs_example_two_last">»</a>
| |
| - |
| |
| - | <!-- example 3 -->
| |
| - | <ul class="tabbed_images" id="tabs_example_three">
| |
| - | <li><a href="#image_1"><img src="https://static.igem.org/mediawiki/2011/6/60/Unamgenomicsteam3.jpg"/></a></li>
| |
| - | <li><a href="#image_2"><img src="https://static.igem.org/mediawiki/2011/6/60/Unamgenomicsteam3.jpg"/></a></li>
| |
| - | <li><a href="#image_3"><img src="https://static.igem.org/mediawiki/2011/6/60/Unamgenomicsteam3.jpg"/></a></li>
| |
| - | <li><a href="#image_4"><img src="https://static.igem.org/mediawiki/2011/6/60/Unamgenomicsteam3.jpg"/></a></li>
| |
| - | </ul>
| |
| - | <img src="https://static.igem.org/mediawiki/2011/6/60/Unamgenomicsteam3.jpg" id="image_1"/>
| |
| - | <img src="https://static.igem.org/mediawiki/2011/6/60/Unamgenomicsteam3.jpg" id="image_2"/>
| |
| - | <img src="https://static.igem.org/mediawiki/2011/6/60/Unamgenomicsteam3.jpg" id="image_3"/>
| |
| - | <img src=https://static.igem.org/mediawiki/2011/6/60/Unamgenomicsteam3.jpg" id="image_4"/>
| |
| - |
| |
| | </body> | | </body> |
| | </html> | | </html> |
"
