Team:GeorgiaState/templates/tabs

From 2011.igem.org

(Difference between revisions)
(Created page with "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> ...")
Line 10: Line 10:
<script src="https://student.gsu.edu/~bmehta2/iGEM/tab/tabbedContent.js" type="text/javascript"></script>
<script src="https://student.gsu.edu/~bmehta2/iGEM/tab/tabbedContent.js" type="text/javascript"></script>
</head>
</head>
 +
<div class='tabbed_content'>
 +
<div class='tabs'>
 +
<div class='moving_bg'>
 +
&nbsp;
 +
</div>
 +
<span class='tab_item'>
 +
Tab one
 +
</span>
 +
<span class='tab_item'>
 +
Tab two
 +
</span>
 +
<span class='tab_item'>
 +
Tab three
 +
</span>
 +
<span class='tab_item'>
 +
Tab four
 +
</span>
 +
</div>
-
<div style='padding: 15px;'>
+
<div class='slide_content'>
-
+
<div class='tabslider'>
-
<div class='content'>
+
 
-
+
<!-- content goes here -->
-
<h1>Tabbed content with jQuery</h1>
+
 
-
+
</div>
-
<p>
+
</div>
-
An example of some tabbed content containers.
+
</div>
-
</p>
+
 
-
+
-
<h2>Example:</h2>
+
-
+
-
<div class='tabbed_content'>
+
-
<div class='tabs'>
+
-
<div class='moving_bg'>
+
-
&nbsp;
+
-
</div>
+
-
<span class='tab_item'>
+
-
Latest posts
+
-
</span>
+
-
<span class='tab_item'>
+
-
Top posts
+
-
</span>
+
-
<span class='tab_item'>
+
-
Partners
+
-
</span>
+
-
<span class='tab_item'>
+
-
Links
+
-
</span>
+
-
</div>
+
-
+
-
<div class='slide_content'>
+
-
<div class='tabslider'>  
+
-
<ul>
+
-
<li>
+
-
<a href='http://www.gayadesign.com/general/new-looks-coming-your-way/'>  
+
-
New looks coming your way
+
-
</a>
+
-
</li>
+
-
<li>
+
-
<a href='http://www.gayadesign.com/diy/jquery-convertion-panoramic-photoviewer-in-javascript/'>
+
-
jQuery convertion: Panoramic Photoviewer in Javascript
+
-
</a>
+
-
</li>
+
-
<li>
+
-
<a href='http://www.gayadesign.com/diy/jquery-convertion-garagedoor-effect-using-javascript/'>
+
-
jQuery convertion: Garagedoor effect using Javascript
+
-
</a>
+
-
</li>
+
-
<li>
+
-
<a href='http://www.gayadesign.com/diy/image-slider-for-displaying-pictures-or-portfolios/'>
+
-
Image slider for displaying pictures or portfolios
+
-
</a>
+
-
</li>
+
-
<li>
+
-
<a href='http://www.gayadesign.com/diy/ajaxtwits-load-tweets-on-your-website-with-ajax/'>
+
-
AjaxTwits - Load Tweets on your website with AJAX
+
-
</a>
+
-
</li>
+
-
</ul>
+
-
<ul>
+
-
<li>
+
-
<a href='http://www.gayadesign.com/diy/panoramic-photoviewer-in-javascript/'>
+
-
Panoramic Photoviewer in Javascript
+
-
</a>
+
-
</li>
+
-
<li>
+
-
<a href='http://www.gayadesign.com/general/new-looks-coming-your-way/'>
+
-
New looks coming your way
+
-
</a>
+
-
</li>
+
-
<li>
+
-
<a href='http://www.gayadesign.com/diy/jquery-convertion-garagedoor-effect-using-javascript/'>
+
-
jQuery convertion: Garagedoor effect using Javascript
+
-
</a>
+
-
</li>
+
-
<li>
+
-
<a href='http://www.gayadesign.com/diy/jquery-convertion-panoramic-photoviewer-in-javascript/'>
+
-
jQuery convertion: Panoramic Photoviewer in Javascript
+
-
</a>
+
-
</li>
+
-
<li>
+
-
<a href='http://www.gayadesign.com/diy/lightbox-photonav-lightnav/'>
+
-
Lightbox + PhotoNav = LightNav
+
-
</a>
+
-
</li>
+
-
</ul>
+
-
<ul>
+
-
<li>
+
-
<a href='http://www.siebdesign.nl/'>
+
-
Sieb Design | Design + Illustration
+
-
</a>
+
-
</li>
+
-
<li>
+
-
<a href='http://www.cybox.nl/'>
+
-
Cybox | Internet & Communicatie
+
-
</a>
+
-
</li>
+
-
<li>
+
-
<a href='http://www.hypekid.com/'>
+
-
Hypekid | Pim Arts, a freelance web-developer from the Netherlands
+
-
</a>
+
-
</li>
+
-
<li>
+
-
<a href='http://www.marcofolio.net/'>
+
-
Marcofolio | Marco's weblog
+
-
</a>
+
-
</li>
+
-
<li>
+
-
<a href='http://dev-tips.com/'>
+
-
Dev Tips | Become a better developer, one tip at a time
+
-
</a>
+
-
</li>
+
-
</ul>
+
-
<ul>
+
-
<li>
+
-
<a href='http://www.last.fm/user/xgayax'>
+
-
Last.fm profile
+
-
</a>
+
-
</li>
+
-
<li>
+
-
<a href='http://twitter.com/gayadesign'>
+
-
Gaya Design on Twitter
+
-
</a>
+
-
</li>
+
-
<li>
+
-
<a href='http://www.youtube.com/user/xgayax'>
+
-
My Youtube Channel
+
-
</a>
+
-
</li>
+
-
<li>
+
-
<a href='http://www.linkedin.com/pub/5/762/121'>
+
-
Linked in profile
+
-
</a>
+
-
</li>
+
-
<li>
+
-
<a href='http://ds.gayadesign.nl/'>
+
-
Stuff to do with a NDS blog
+
-
</a>
+
-
</li>
+
-
</ul>
+
-
</div>  
+
-
<br style='clear: both' />
+
-
</div>  
+
-
</div>  
+
-
+
-
<br />
+
-
<br />
+
-
+
-
<div class='tabbed_content'>
+
-
<div class='tabs'>
+
-
<div class='moving_bg'>
+
-
&nbsp;
+
-
</div>
+
-
<span class='tab_item'>
+
-
Latest posts
+
-
</span>
+
-
<span class='tab_item'>
+
-
Top posts
+
-
</span>
+
-
<span class='tab_item'>
+
-
Partners
+
-
</span>
+
-
<span class='tab_item'>
+
-
Links
+
-
</span>
+
-
</div>
+
-
+
-
<div class='slide_content'>
+
-
<div class='tabslider'>
+
-
<ul>
+
-
<li>
+
-
<a href='http://www.gayadesign.com/general/new-looks-coming-your-way/'>
+
-
New looks coming your way
+
-
</a>
+
-
</li>
+
-
<li>
+
-
<a href='http://www.gayadesign.com/diy/jquery-convertion-panoramic-photoviewer-in-javascript/'>
+
-
jQuery convertion: Panoramic Photoviewer in Javascript
+
-
</a>
+
-
</li>
+
-
<li>
+
-
<a href='http://www.gayadesign.com/diy/jquery-convertion-garagedoor-effect-using-javascript/'>
+
-
jQuery convertion: Garagedoor effect using Javascript
+
-
</a>
+
-
</li>
+
-
<li>
+
-
<a href='http://www.gayadesign.com/diy/image-slider-for-displaying-pictures-or-portfolios/'>
+
-
Image slider for displaying pictures or portfolios
+
-
</a>
+
-
</li>
+
-
<li>
+
-
<a href='http://www.gayadesign.com/diy/ajaxtwits-load-tweets-on-your-website-with-ajax/'>
+
-
AjaxTwits - Load Tweets on your website with AJAX
+
-
</a>
+
-
</li>
+
-
</ul>
+
-
<ul>
+
-
<li>
+
-
<a href='http://www.gayadesign.com/diy/panoramic-photoviewer-in-javascript/'>
+
-
Panoramic Photoviewer in Javascript
+
-
</a>
+
-
</li>
+
-
<li>
+
-
<a href='http://www.gayadesign.com/general/new-looks-coming-your-way/'>
+
-
New looks coming your way
+
-
</a>
+
-
</li>
+
-
<li>
+
-
<a href='http://www.gayadesign.com/diy/jquery-convertion-garagedoor-effect-using-javascript/'>
+
-
jQuery convertion: Garagedoor effect using Javascript
+
-
</a>
+
-
</li>
+
-
<li>
+
-
<a href='http://www.gayadesign.com/diy/jquery-convertion-panoramic-photoviewer-in-javascript/'>
+
-
jQuery convertion: Panoramic Photoviewer in Javascript
+
-
</a>
+
-
</li>
+
-
<li>
+
-
<a href='http://www.gayadesign.com/diy/lightbox-photonav-lightnav/'>
+
-
Lightbox + PhotoNav = LightNav
+
-
</a>
+
-
</li>
+
-
</ul>
+
-
<ul>
+
-
<li>
+
-
<a href='http://www.siebdesign.nl/'>
+
-
Sieb Design | Design + Illustration
+
-
</a>
+
-
</li>
+
-
<li>
+
-
<a href='http://www.cybox.nl/'>
+
-
Cybox | Internet & Communicatie
+
-
</a>
+
-
</li>
+
-
<li>
+
-
<a href='http://www.hypekid.com/'>
+
-
Hypekid | Pim Arts, a freelance web-developer from the Netherlands
+
-
</a>
+
-
</li>
+
-
<li>
+
-
<a href='http://www.marcofolio.net/'>
+
-
Marcofolio | Marco's weblog
+
-
</a>
+
-
</li>
+
-
<li>
+
-
<a href='http://dev-tips.com/'>
+
-
Dev Tips | Become a better developer, one tip at a time
+
-
</a>
+
-
</li>
+
-
</ul>
+
-
<ul>
+
-
<li>
+
-
<a href='http://www.last.fm/user/xgayax'>
+
-
Last.fm profile
+
-
</a>
+
-
</li>
+
-
<li>
+
-
<a href='http://twitter.com/gayadesign'>
+
-
Gaya Design on Twitter
+
-
</a>
+
-
</li>
+
-
<li>
+
-
<a href='http://www.youtube.com/user/xgayax'>
+
-
My Youtube Channel
+
-
</a>
+
-
</li>
+
-
<li>
+
-
<a href='http://www.linkedin.com/pub/5/762/121'>
+
-
Linked in profile
+
-
</a>
+
-
</li>
+
-
<li>
+
-
<a href='http://ds.gayadesign.nl/'>
+
-
Stuff to do with a NDS blog
+
-
</a>
+
-
</li>
+
-
</ul>
+
-
</div>
+
-
<br style='clear: both' />
+
-
</div>
+
-
</div>
+
-
+
-
<br />
+
-
<br />
+
-
+
-
<a href='tabbedContent.zip'>Download</a><br />
+
-
<a href='http://www.gayadesign.com/diy/animated-tabbed-content-with-jquery/'>Read the post</a>
+
-
+
-
</div>
+
-
+
-
</div>
+
</body>  
</body>  
</html>
</html>

Revision as of 04:13, 7 July 2011

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Tabbed content

 
Tab one Tab two Tab three Tab four

Retrieved from "http://2011.igem.org/Team:GeorgiaState/templates/tabs"