Team:KAIST Korea/Team KAIST

From 2012.igem.org

(Difference between revisions)
Line 116: Line 116:
-
/* Lined Tab Navigation */
+
#kaistcontent ul.subsection_tabs {
-
.tab.line{padding:0 0 35px 0}
+
list-style:none;
-
.tab.line ul{position:relative;margin:0;padding:0;list-style:none;border-bottom:1px solid #ccc;font-family:Tahoma, Sans-serif;font-size:12px;*zoom:1}
+
margin:0 0 5px 0;
-
.tab.line ul:after{content:"";display:block;clear:both}
+
padding:0;
-
.tab.line li{float:left;margin-bottom:-1px}
+
clear:both;
-
.tab.line li a{position:relative;float:left;text-decoration:none;border:1px solid #eee;border-bottom-color:#ccc;background:#fafafa;color:#333}
+
border-bottom:1px solid #ccc;
-
.tab.line li a span{display:inline-block;height:14px;padding:6px 25px 6px 25px;letter-spacing:-1px;cursor:pointer}
+
height:20px;
-
.tab.line li ul{width:100%;position:absolute;top:40px;left:0;list-style:none;border:0;margin:0;padding:0;white-space:nowrap;overflow:hidden;*zoom:1}
+
clear:both;
-
.tab.line li ul:after{content:"";display:block;clear:both}
+
}
-
.tab.line li li{position:relative;left:-1px;padding:0 10px;border-left:1px solid #ddd;overflow:visible}
+
 
-
.tab.line li li a{padding:0;margin:0;border:0 !important;color:#666 !important;font-weight:normal;background:transparent;letter-spacing:normal}
+
#kaistcontent ul.subsection_tabs li.tab {
-
.tab.line li.active a{border:1px solid #ccc;border-bottom:1px solid #fff;margin-top:-1px;background:transparent}
+
float:left;
-
.tab.line li.active a span{padding-top:7px;font-weight:bold}
+
margin-right:7px;
-
.tab.line li li a:hover,
+
text-align:center;
-
.tab.line li li a:active,
+
}
-
.tab.line li li a:focus,
+
 
-
.tab.line li li.active a{font-weight:bold;letter-spacing:-1px;color:#333 !important}
+
#kaistcontent ul.subsection_tabs li.tab a {
-
.tab.line.jx{padding:0}
+
display:block;
-
.tab.line.jx ul{border:0}
+
height:20px;
-
.tab.line.jx li{float:none}
+
padding:0 6px 0 6px;
-
.tab.line.jx li a{float:none;display:block;font-weight:bold;color:#333;border:1px solid #eee !important;border-bottom-color:#ccc !important;background:#fafafa !important}
+
background-color:#fff;
-
.tab.line.jx li ul{position:static;display:block;padding:5px 0;left:0;top:0}
+
color:#666;
-
.tab.line.jx li li{display:inline}
+
width:80px;
-
.tab.line.jx li li a{display:inline;letter-spacing:normal;border:0 !important;font-weight:normal !important;color:#666 !important;background:none !important}
+
}
-
.tab.line.jx li li a:hover,
+
 
-
.tab.line.jx li li a:active,
+
#kaistcontent ul.subsection_tabs li.tab a:hover {
-
.tab.line.jx li li a:focus{text-decoration:underline}
+
color:#666;
 +
}
 +
 
 +
#kaistcontent ul.subsection_tabs li.tab a.active {
 +
background-color:#ddd;
 +
}
 +
 
 +
#kaistcontent ul.subsection_tabs li.source_code {
 +
float:right;
 +
}
</style>
</style>
Line 166: Line 175:
<div id="kaistcontent">
<div id="kaistcontent">
-
<div class="tab line jx">
+
<ul id="tabs_example_one" class="subsection_tabs">
-
<ul>
+
    <li class="tab"><a href="#one">One</a></li>
-
<li><a href="#"><span>Activity 1</span></a>
+
    <li class="tab"><a href="#two">Two</a></li>
-
<span id="inside">
+
</ul>
-
</br> 안녕하세용</br> hi</br>
+
<div id="one"><p>This is the simplest example of a set of tabs.</p></div>
-
</span>
+
<div id="two"><p>Note that the styling for the tabs is done with CSS, not the Control.Tabs script.</p></div>  
-
</li>
+
-
<li><a href="#"><span>Activity 2</span></a>
+
-
+
-
</li>
+
-
<li><a href="#"><span>Activity 3</span></a>
+
-
+
-
</li>
+
-
</ul>
+
</div>
</div>
</br>
</br>
Line 190: Line 191:
</div>
</div>
-
 
+
</div>
<script>
<script>
-
jQuery(function($){
+
document.observe('dom:loaded',function(){
-
// Lined Tab Navigation
+
new Control.Tabs('tabs_example_one');
-
var tab_line = $('div.tab.line');
+
-
var tab_line_i = tab_line.find('>ul>li');
+
-
var tab_line_ii = tab_line.find('>ul>li>ul>li');
+
-
tab_line.removeClass('jx');
+
-
tab_line_i.find('>ul').hide();
+
-
tab_line_i.find('>ul>li[class=active]').parents('li').attr('class','active');
+
-
tab_line.find('>ul>li[class=active]').find('>ul').show();
+
-
function lineTabMenuToggle(event){
+
-
var t = $(this);
+
-
tab_line_i.find('>ul').hide();
+
-
t.next('ul').show();
+
-
tab_line_i.removeClass('active');
+
-
t.parent('li').addClass('active');
+
-
return false;
+
-
}
+
-
function lineTabSubMenuActive(){
+
-
tab_line_ii.removeClass('active');
+
-
$(this).parent(tab_line_ii).addClass('active');
+
-
return false;
+
-
};
+
-
tab_line_i.find('>a[href=#]').click(lineTabMenuToggle).focus(lineTabMenuToggle);
+
-
tab_line_ii.find('>a[href=#]').click(lineTabSubMenuActive).focus(lineTabSubMenuActive);
+
});
});
</script>
</script>

Revision as of 10:26, 30 August 2012

KAIST Korea 2012 iGEM

aaaa

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.








Kaist Footer

Retrieved from "http://2012.igem.org/Team:KAIST_Korea/Team_KAIST"