"
Team:SYSU-China/Attributions
From 2011.igem.org
| Line 1: | Line 1: | ||
| - | + | ||
| - | + | ||
<head> | <head> | ||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | ||
| Line 248: | Line 247: | ||
<li> | <li> | ||
<a href="javascript:;"> | <a href="javascript:;"> | ||
| - | <img src="https://static.igem.org/mediawiki/igem.org/ | + | <img src="https://static.igem.org/mediawiki/igem.org/0/0c/SYSU_Homepage_tab_project.png" /> |
</a> | </a> | ||
</li> | </li> | ||
Revision as of 17:10, 1 October 2011
<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(
);
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>
" width="1000" height="138" />-
<a href="javascript:;">
<img src="
" />
</a>
-
<a href="javascript:;">
<img src="
" />
</a>
-
<a href="javascript:;">
<img src="
" />
</a>
-
<a href="javascript:;">
<img src="
" />
</a>
-
<a href="javascript:;">
<img src="
" />
</a>
-
<img src="
" />
<a href="#">See details</a>
-
<img src="" />
<a href="#">See details</a>
-
<img src="
" />
<a href="#">See details</a>
-
<img src="
" />
<a href="#">See details</a>
-
<img src="
" />
<a href="#">See details</a>
</body> </html>
