Team:ZJU-China/Notebook/week1

From 2011.igem.org

(Difference between revisions)
Line 1: Line 1:
 +
{{Template:Zjucss_header}}
 +
{{Template:Zjujs_header}}
 +
<!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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 +
<title></title>
 +
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 +
<meta http-equiv="Content-Style-Type" content="text/css" />
 +
<meta http-equiv="Content-Script-Type" content="text/javascript" />
 +
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link href='http://fonts.googleapis.com/css?family=Molengo' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Molengo' rel='stylesheet' type='text/css'>
-
<link href='http://fonts.googleapis.com/css?family=Hammersmith+One' rel='stylesheet' type='text/css'>
+
<link href='http://fonts.googleapis.com/css?family=Hammersmith+One' rel='stylesheet' type='text/css' >
-
<title>无标题文档</title>
+
 
 +
<!-- The JavaScript -->
 +
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
 +
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
 +
<script type="text/javascript">
 +
    $(function() {
 +
        var $menu = $('#ei_menu > ul'),
 +
            $menuItems = $menu.children('li'),
 +
            $menuItemsImgWrapper= $menuItems.children('a'),
 +
            $menuItemsPreview = $menuItemsImgWrapper.children('.ei_preview'),
 +
            totalMenuItems = $menuItems.length,
 +
       
 +
            ExpandingMenu = (function(){
 +
                /*
 +
                    @current
 +
                    set it to the index of the element you want to be opened by default,
 +
                    or -1 if you want the menu to be closed initially
 +
                */
 +
                var current = 2,
 +
                /*
 +
                    @anim
 +
                    if we want the default opened item to animate initialy set this to true
 +
                */
 +
                anim = false,
 +
                /*
 +
                    checks if the current value is valid -
 +
                    between 0 and the number of items
 +
                */
 +
                validCurrent = function() {
 +
                    return (current >= 0 && current < totalMenuItems);
 +
                },
 +
                init = function() {
 +
                        /* show default item if current is set to a valid index */
 +
                    if(validCurrent())
 +
                        configureMenu();
 +
                    initEventsHandler();
 +
                },
 +
                configureMenu = function() {
 +
                        /* get the item for the current */
 +
                    var $item = $menuItems.eq(current);
 +
                        /* if anim is true slide out the item */
 +
                    if(anim)
 +
                        slideOutItem($item, true, 900, 'easeInQuint');
 +
                    else{
 +
                            /* if not just show it */
 +
                        $item.css({width : '400px'})
 +
                        .find('.ei_image')
 +
                        .css({left:'0px', opacity:1});
 +
 
 +
                            /* decrease the opacity of the others */
 +
                            $menuItems.not($item)
 +
                                      .children('.ei_preview')
 +
                                      .css({opacity:0.5});
 +
                    }
 +
                },
 +
                initEventsHandler = function() {
 +
                        /*
 +
                        when we click an item the following can happen:
 +
                        1) The item is already opened - close it!
 +
                        2) The item is closed - open it! (if another one is opened, close it!)
 +
                        */
 +
                    $menuItemsImgWrapper.bind('click.ExpandingMenu', function(e) {
 +
                        var $this = $(this).parent(),
 +
                        idx = $this.index();
 +
 
 +
                        if(current === idx) {
 +
                            slideOutItem($menuItems.eq(current), false, 1500, 'easeOutQuint', true);
 +
                            current = -1;
 +
                        }
 +
                        else{
 +
                            if(validCurrent() && current !== idx)
 +
                                    slideOutItem($menuItems.eq(current), false, 250, 'jswing');
 +
 
 +
                            current = idx;
 +
                                slideOutItem($this, true, 250, 'jswing');
 +
                        }
 +
                        return false;
 +
                    });
 +
                },
 +
                    /* if you want to trigger the action to open a specific item */
 +
                    openItem = function(idx) {
 +
                        $menuItemsImgWrapper.eq(idx).click();
 +
                    },
 +
                    /*
 +
                    opens or closes an item
 +
                    note that "mLeave" is just true when all the items close,
 +
                    in which case we want that all of them get opacity 1 again.
 +
                    "dir" tells us if we are opening or closing an item (true | false)
 +
                    */
 +
                slideOutItem = function($item, dir, speed, easing, mLeave) {
 +
                    var $ei_image = $item.find('.ei_image'),
 +
 
 +
                    itemParam = (dir) ? {width : '400px'} : {width : '120px'},
 +
                    imageParam = (dir) ? {left : '0px'} : {left : '120px'};
 +
 
 +
                        /*
 +
                        if opening, we animate the opacity of all the elements to 0.1.
 +
                        this is to give focus on the opened item..
 +
                        */
 +
                    if(dir)
 +
                    /*
 +
                            alternative:
 +
                            $menuItemsPreview.not($menuItemsPreview.eq(current))
 +
                                            .stop()
 +
                                            .animate({opacity:0.1}, 500);
 +
                    */
 +
                        $menuItemsPreview.stop()
 +
                    .animate({opacity:0.5}, 1000);
 +
                    else if(mLeave)
 +
                        $menuItemsPreview.stop()
 +
                    .animate({opacity:1}, 1500);
 +
 
 +
                        /* the <li> expands or collapses */
 +
                    $item.stop().animate(itemParam, speed, easing);
 +
                        /* the image (color) slides in or out */
 +
                    $ei_image.stop().animate(imageParam, speed, easing, function() {
 +
                            /*
 +
                            if opening, we animate the opacity to 1,
 +
                            otherwise we reset it.
 +
                            */
 +
                        if(dir)
 +
                            $ei_image.animate({opacity:1}, 2000);
 +
                        else
 +
                            $ei_image.css('opacity', 0.5);
 +
                    });
 +
                };
 +
 
 +
                return {
 +
                    init : init,
 +
                    openItem : openItem
 +
                };
 +
            })();
 +
           
 +
        /*
 +
        call the init method of ExpandingMenu
 +
        */
 +
        ExpandingMenu.init();
 +
   
 +
    /*
 +
    if later on you want to open / close a specific item you could do it like so:
 +
    ExpandingMenu.openItem(3); // toggles item 3 (zero-based indexing)
 +
    */
 +
    });
 +
</script>
 +
       
<style type="text/css">
<style type="text/css">
<!--
<!--
-
#week1 {
+
.header {
-
background-color: #e9e9e9;
+
background-image: url(http://ung.igem.org/wiki/images/1/1c/Header-end.jpg);
-
width:710px;
+
background-color:#e9e9e9;
-
font-family: 'Molengo', sans-serif;
+
background-repeat: no-repeat;
 +
background-position: center top;
 +
margin: 0px;
 +
padding: 0px;
 +
height: 600px;
 +
width: 970px;
}
}
-
.subblock {
 
-
background-color: #FFF;
 
-
margin:10px;
 
-
vertical-align: middle;
 
-
width: 680px;
 
-
-moz-border-radius: 5px;
 
-
-webkit-border-radius: 5px;
 
-
border-radius: 5px;
 
-
}
 
-
#mondy h3 {
 
-
color: #90b5d5;
 
-
}
 
-
.subblock hr{
 
-
height:2px;
 
-
margin-left:10px;
 
-
margin-right:10px;
 
-
}
 
-
p {
 
-
margin: 5px;
 
-
padding: 5px;
 
-
}
 
-
h3{
 
-
 
-
margin:10px;}
 
-->
-->
</style>
</style>
Line 41: Line 174:
<body>
<body>
-
<div class="iblock" id="week1">
+
<div class="header">
-
  <div class="subblock" id="mondy"><h3>Monday</h3>
+
<div id="ei_menu" class="ei_menu">
-
      <hr/>
+
<ul>
-
      <p>   We are a young and happy team of 13 scientists and engineers from very diverse backgrounds.Although this is our first
+
<li>
-
year working on a wet lab project and biofilm experiments are new to us, we're currently taking great efforts to build
+
<a href="#" class="pos1">
-
the whole system for experiments.Our team progress and more info will be frequently updated so that our iGEM
+
<span class="ei_preview"></span>
-
experience could be shared as much as possible along the way. We truly welcome you to contact us for any
+
<span class="ei_image"></span>
-
cooperation or suggestion.</p></div>
+
</a>
-
    <div class="subblock" id="mondy"><h3>Tuesday</h3>
+
<div class="ei_descr">
-
      <hr/>
+
<h2>Home</h2>
-
      <p> We are a young and happy team of 13 scientists and engineers from very diverse backgrounds.Although this is our first
+
-
year working on a wet lab project and biofilm experiments are new to us, we're currently taking great efforts to build
+
<p>This is our homepage, contain the introductions of every part</p>
-
the whole system for experiments.Our team progress and more info will be frequently updated so that our iGEM
+
</div>
-
experience could be shared as much as possible along the way. We truly welcome you to contact us for any
+
</li>
-
cooperation or suggestion.</p></div>
+
<li>
 +
<a href="#" class="pos2">
 +
<span class="ei_preview"></span>
 +
<span class="ei_image"></span>
 +
</a>
 +
<div class="ei_descr">
 +
 +
</div>
 +
 
 +
</li>
 +
<li>
 +
<a href="#" class="pos3">
 +
<span class="ei_preview"></span>
 +
<span class="ei_image"></span>
 +
</a>
 +
<div class="ei_descr">
 +
<h2>Team</h2>
 +
 +
<p>Monkey D. Luffy (モンキー・D・ルフィ, Monkī Dī Rufi), nicknamed "Straw Hat" Luffy (麦わらのルフィ, Mugiwara no Rufi), is the 19 year-old captain of The Straw Hat Pirates and the main protagonist of the franchise.</p>
 +
</div>
 +
</li>
 +
<li>
 +
<a href="#" class="pos4">
 +
<span class="ei_preview"></span>
 +
<span class="ei_image"></span>
 +
</a>
 +
<div class="ei_descr">
 +
<h2>Notebook</h2>
 +
 +
<p>Nami (ナミ), nicknamed "Cat Burglar" Nami (泥棒猫のナミ, Dorobō Neko no Nami, renamed Nami the "Navigator" in the 4Kids anime), is the crew's 20 year oldch.27 navigator and thief.FROM www.lanrentuku.com</p>
 +
 +
</div>
 +
</li>
 +
<li>
 +
<a href="#" class="pos5">
 +
<span class="ei_preview"></span>
 +
<span class="ei_image"></span>
 +
</a>
 +
<div class="ei_descr">
 +
<h2>Human Practice</h2>
 +
 +
<p>Sanji (サンジ), nicknamed "Black Leg" Sanji (黒脚のサンジ, Kuro Ashi no Sanji)ch.435, is the crew's 21-year-oldch.55 chef.</p>
 +
</div>
 +
</li>
 +
</ul>
 +
  </div>
 +
</div>
 +
 
</div>
</div>
</body>
</body>
</html>
</html>

Revision as of 16:21, 11 September 2011

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  • Home

    This is our homepage, contain the introductions of every part

  • Team

    Monkey D. Luffy (モンキー・D・ルフィ, Monkī Dī Rufi), nicknamed "Straw Hat" Luffy (麦わらのルフィ, Mugiwara no Rufi), is the 19 year-old captain of The Straw Hat Pirates and the main protagonist of the franchise.

  • Notebook

    Nami (ナミ), nicknamed "Cat Burglar" Nami (泥棒猫のナミ, Dorobō Neko no Nami, renamed Nami the "Navigator" in the 4Kids anime), is the crew's 20 year oldch.27 navigator and thief.FROM www.lanrentuku.com

  • Human Practice

    Sanji (サンジ), nicknamed "Black Leg" Sanji (黒脚のサンジ, Kuro Ashi no Sanji)ch.435, is the crew's 21-year-oldch.55 chef.

Retrieved from "http://2011.igem.org/Team:ZJU-China/Notebook/week1"