Team:UNAM-Genomics Mexico/Templates/Modeling

From 2011.igem.org

(Difference between revisions)
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>
<style type="text/css">
<style type="text/css">
-
 
+
<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>
/*Horizontal Slider*/
/*Horizontal Slider*/
.top-slider-main{width:860px; height:459px; overflow:hidden; position:relative; border:0px solid #000; background: #ff8888;
.top-slider-main{width:860px; height:459px; overflow:hidden; position:relative; border:0px solid #000; background: #ff8888;
Line 534: Line 573:
</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;">&laquo;</a> 
 +
<a href="" id="tabs_example_two_previous" style="margin-right:10px;">&larr;</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;">&rarr;</a> 
 +
<a href="" id="tabs_example_two_last">&raquo;</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>

Revision as of 06:46, 26 September 2011

UNAM-Genomics_Mexico

This is the simplest example of a set of tabs.

Note that the styling for the tabs is done with CSS, not the Control.Tabs script.

This example demonstrates scripting a Control.Tabs instance. Try clicking the links below, or changing the select box.

I am the second tab.

I am the third tab.

I am the fourth tab.

« ← → »

{{{content}}}

Retrieved from "http://2011.igem.org/Team:UNAM-Genomics_Mexico/Templates/Modeling"