Team:SYSU-China/Attributions
From 2011.igem.org
(Difference between revisions)
(Prototype team page) |
|||
Line 1: | Line 1: | ||
- | <!-- ** | + | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
+ | <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> | ||
+ | |||
+ | <style type="text/css"> | ||
+ | #background_shadow { | ||
+ | width: 1080px; | ||
+ | margin-right: auto; | ||
+ | margin-left: auto; | ||
+ | background-image: url(https://static.igem.org/mediawiki/igem.org/a/a6/SYSU_Upper_background_shadow.png); | ||
+ | background-repeat: repeat-y; | ||
+ | margin-top: 0px; | ||
+ | margin-bottom: 0px; | ||
+ | padding-left: 40px; | ||
+ | } | ||
+ | body { | ||
+ | background-color: #f5f5f5; | ||
+ | padding: 0px; | ||
+ | margin: 0%; | ||
+ | margin-left: 0px; | ||
+ | } | ||
+ | div#feature_list { | ||
+ | width: 1000px; | ||
+ | height: 500px; | ||
+ | overflow: hidden; | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | div#feature_list ul { | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | list-style: none; | ||
+ | padding: 0; | ||
+ | margin: 0; | ||
+ | } | ||
+ | |||
+ | ul#tabs { | ||
+ | left: 0; | ||
+ | z-index: 2; | ||
+ | width: 200px; | ||
+ | background-color: #333333; | ||
+ | height: 100px; | ||
+ | } | ||
+ | |||
+ | ul#tabs li { | ||
+ | font-size: 12px; | ||
+ | font-family: Arial; | ||
+ | background-color: #33333; | ||
+ | } | ||
+ | |||
+ | ul#tabs li img { | ||
+ | border: none; | ||
+ | float: left; | ||
+ | background-color: #33333; | ||
+ | } | ||
+ | |||
+ | ul#tabs li a { | ||
+ | color: #222; | ||
+ | text-decoration: none; | ||
+ | display: block; | ||
+ | height: 100px; | ||
+ | outline: none; | ||
+ | background-color: #33333; | ||
+ | } | ||
+ | |||
+ | ul#tabs li a:hover { | ||
+ | text-decoration: underline; | ||
+ | background-color: #33333; | ||
+ | } | ||
+ | |||
+ | ul#tabs li a.current { | ||
+ | color: #FFF; | ||
+ | width: 250px; | ||
+ | background-color: #33333; | ||
+ | background-image: url(feature-tab-current.png); | ||
+ | } | ||
+ | |||
+ | ul#tabs li a.current:hover { | ||
+ | text-decoration: none; | ||
+ | cursor: default; | ||
+ | background-color: #33333; | ||
+ | } | ||
+ | |||
+ | ul#output { | ||
+ | width: 800px; | ||
+ | height: 500px; | ||
+ | position: relative; | ||
+ | left: -50px; | ||
+ | } | ||
+ | |||
+ | ul#output li { | ||
+ | position: relative; | ||
+ | width: 800px; | ||
+ | height: 500px; | ||
+ | left: 250px; | ||
+ | top: 0px; | ||
+ | } | ||
+ | |||
+ | ul#output li a { | ||
+ | position: absolute; | ||
+ | bottom: 10px; | ||
+ | right: 10px; | ||
+ | padding: 8px 12px; | ||
+ | text-decoration: none; | ||
+ | font-size: 11px; | ||
+ | color: #FFF; | ||
+ | background: #000; | ||
+ | -moz-border-radius: 5px; | ||
+ | } | ||
+ | |||
+ | ul#output li a:hover { | ||
+ | background: #D33431; | ||
+ | } | ||
+ | |||
+ | |||
+ | #loge_bar { | ||
+ | height: 138px; | ||
+ | width: 100px; | ||
+ | } | ||
+ | .contact_bottombar { | ||
+ | margin: 0px; | ||
+ | width: 1000px; | ||
+ | font-family: Arial, Helvetica, sans-serif; | ||
+ | padding: 20px; | ||
+ | font-size: 12px; | ||
+ | line-height: 5px; | ||
+ | } | ||
+ | </style> | ||
+ | <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/d/da/SYSU_Home_bgp_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="#">See details</a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <img src="https://static.igem.org/mediawiki/igem.org/7/77/SYSU_Home_bgp_news.png" /> | ||
+ | <a href="#">See details</a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <img src="https://static.igem.org/mediawiki/igem.org/d/da/SYSU_Home_bgp_project.png" /> | ||
+ | <a href="#">See details</a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <img src="https://static.igem.org/mediawiki/igem.org/8/82/SYSU_Home_bgp_humanpractice.png" /> | ||
+ | <a href="#">See details</a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <img src="https://static.igem.org/mediawiki/igem.org/7/7b/SYSU_Home_bgp_aboutus.png" /> | ||
+ | <a href="#">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 17:08, 1 October 2011
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">