Team:SYSU-China
From 2011.igem.org
(Difference between revisions)
Line 1: | Line 1: | ||
- | + | {{:Team:SYSU-China/header/temp}} | |
+ | {{:Team:SYSU-China/header/jscss}} | ||
- | + | <html xmlns="http://www.w3.org/1999/xhtml"> | |
- | + | <head> | |
+ | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | ||
+ | <title></title> | ||
+ | <link rel="stylesheet" href="style.css" /> | ||
+ | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> | ||
+ | <script type="text/javascript"> | ||
+ | /* | ||
+ | * FeatureList - simple and easy creation of an interactive "Featured Items" widget | ||
+ | * Examples and documentation at: http://jqueryglobe.com/article/feature_list/ | ||
+ | * Version: 1.0.0 (01/09/2009) | ||
+ | * Copyright (c) 2009 jQueryGlobe | ||
+ | * Licensed under the MIT License: http://en.wikipedia.org/wiki/MIT_License | ||
+ | * Requires: jQuery v1.3+ | ||
+ | */ | ||
+ | ;(function($) { | ||
+ | $.fn.featureList = function(options) { | ||
+ | var tabs = $(this); | ||
+ | var output = $(options.output); | ||
- | + | new jQuery.featureList(tabs, output, options); | |
- | + | ||
- | + | ||
- | + | return this; | |
- | + | }; | |
- | + | ||
- | + | $.featureList = function(tabs, output, options) { | |
+ | function slide(nr) { | ||
+ | if (typeof nr == "undefined") { | ||
+ | nr = visible_item + 1; | ||
+ | nr = nr >= total_items ? 0 : nr; | ||
+ | } | ||
- | + | tabs.removeClass('current').filter(":eq(" + nr + ")").addClass('current'); | |
- | {| | + | output.stop(true, true).filter(":visible").fadeOut(); |
- | + | output.filter(":eq(" + nr + ")").fadeIn(function() { | |
- | + | visible_item = nr; | |
- | + | }); | |
- | + | } | |
- | + | ||
- | + | var options = options || {}; | |
- | + | var total_items = tabs.length; | |
- | + | var visible_item = options.start_item || 0; | |
- | + | ||
- | + | options.pause_on_hover = options.pause_on_hover || true; | |
+ | options.transition_interval = options.transition_interval || 5000; | ||
+ | |||
+ | output.hide().eq( visible_item ).show(); | ||
+ | tabs.eq( visible_item ).addClass('current'); | ||
+ | |||
+ | tabs.click(function() { | ||
+ | if ($(this).hasClass('current')) { | ||
+ | return false; | ||
+ | } | ||
+ | |||
+ | slide( tabs.index( this) ); | ||
+ | }); | ||
+ | |||
+ | if (options.transition_interval > 0) { | ||
+ | var timer = setInterval(function () { | ||
+ | slide(); | ||
+ | }, options.transition_interval); | ||
+ | |||
+ | if (options.pause_on_hover) { | ||
+ | tabs.mouseenter(function() { | ||
+ | clearInterval( timer ); | ||
+ | |||
+ | }).mouseleave(function() { | ||
+ | clearInterval( timer ); | ||
+ | timer = setInterval(function () { | ||
+ | slide(); | ||
+ | }, options.transition_interval); | ||
+ | }); | ||
+ | } | ||
+ | } | ||
+ | }; | ||
+ | })(jQuery); | ||
+ | </script> | ||
+ | <script language="javascript"> | ||
+ | $(document).ready(function() { | ||
+ | |||
+ | $.featureList( | ||
+ | $("#tabs li a"), | ||
+ | $("#output li"), { | ||
+ | start_item : 1 | ||
+ | } | ||
+ | ); | ||
+ | |||
+ | /* | ||
+ | |||
+ | // Alternative | ||
+ | |||
+ | |||
+ | $('#tabs li a').featureList({ | ||
+ | output : '#output li', | ||
+ | start_item : 1 | ||
+ | }); | ||
+ | |||
+ | */ | ||
+ | |||
+ | }); | ||
+ | </script> | ||
+ | |||
+ | </head> | ||
+ | <body> | ||
+ | <div id="background_shadow"> | ||
+ | <div id="loge_bar"><img src="https://static.igem.org/mediawiki/igem.org/2/20/SYSU_Logo_bar.png" width="1000" height="138" /></div> | ||
+ | |||
+ | <div id="content"> | ||
+ | <div id="feature_list"> | ||
+ | <ul id="tabs"> | ||
+ | <li> | ||
+ | <a href="javascript:;"> | ||
+ | <img src="https://static.igem.org/mediawiki/igem.org/8/80/SYSU_Homepage_tab_news.png" /> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="javascript:;"> | ||
+ | <img src="https://static.igem.org/mediawiki/igem.org/4/48/SYSU_Homepage_tab_story.png" /> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="javascript:;"> | ||
+ | <img src="https://static.igem.org/mediawiki/igem.org/0/0c/SYSU_Homepage_tab_project.png" /> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="javascript:;"> | ||
+ | <img src="https://static.igem.org/mediawiki/igem.org/0/00/SYSU_Homepage_tab_humanpractice.png" /> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="javascript:;"> | ||
+ | <img src="https://static.igem.org/mediawiki/igem.org/4/42/SYSU_Homepage_tab_aboutus.png" /> | ||
+ | </a> | ||
+ | </li> | ||
+ | |||
+ | |||
+ | </ul> | ||
+ | <ul id="output"> | ||
+ | <li> | ||
+ | <img src="https://static.igem.org/mediawiki/igem.org/7/77/SYSU_Home_bgp_news.png" /> | ||
+ | <a href="https://2011.igem.org/Team:SYSU-China/main_page_news">See details</a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <img src="https://static.igem.org/mediawiki/igem.org/3/36/SYSU_Home_bgp_story.png" /> | ||
+ | <a href="https://2011.igem.org/Team:SYSU-China/main_page_story">See details</a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <img src="https://static.igem.org/mediawiki/igem.org/d/da/SYSU_Home_bgp_project.png" /> | ||
+ | <a href="https://2011.igem.org/Team:SYSU-China/main_page_project">See details</a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <img src="https://static.igem.org/mediawiki/igem.org/8/82/SYSU_Home_bgp_humanpractice.png | ||
+ | " /> | ||
+ | <a href="https://2011.igem.org/Team:SYSU-China/main_page_human_practice">See details</a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <img src="https://static.igem.org/mediawiki/igem.org/7/7b/SYSU_Home_bgp_aboutus.png | ||
+ | " /> | ||
+ | <a href="https://2011.igem.org/Team:SYSU-China/main_page_aboutus">See details</a> | ||
+ | </li> | ||
+ | |||
+ | |||
+ | |||
+ | </ul> | ||
+ | |||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <div class="contact_bottombar"> | ||
+ | <p>From the 2011 iGEM team SYSU-China (2011)</p> | ||
+ | <p>Sun Yat-Sen University, Guangzhou, China</p> | ||
+ | <p>Address: 135# Xingang Rd.(W.), Haizhu Guangzhou, P.R.China</p> | ||
+ | <p><a href="http://eng.sysu.edu.cn/">visit the Sun Yat-sen university website</a></p> | ||
+ | </div> | ||
+ | </div> | ||
+ | </body> | ||
+ | </html> |
Revision as of 19:53, 5 October 2011