Team:NCTU Formosa/source/header-notebook
From 2014.igem.org
(Difference between revisions)
(31 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
<html> | <html> | ||
<style> | <style> | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
.download li { | .download li { | ||
Line 22: | Line 15: | ||
margin-bottom: 5px; | margin-bottom: 5px; | ||
} | } | ||
- | + | .download2 li { | |
+ | display: inline-block; | ||
+ | border-radius: 3px; | ||
+ | text-align: center; | ||
+ | font-weight: 700; | ||
+ | width: 90%; | ||
+ | padding:0; | ||
+ | margin:0; | ||
+ | background: #000; | ||
+ | border:0; | ||
+ | margin-bottom: 5px; | ||
+ | } | ||
+ | .cal li { | ||
+ | display: inline-block; | ||
+ | border-radius: 3px; | ||
+ | text-align: center; | ||
+ | font-weight: 700; | ||
+ | width: 13%; | ||
+ | padding:0; | ||
+ | margin:0; | ||
+ | background: #000; | ||
+ | border:0; | ||
+ | margin-bottom: 5px; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | .cal li:hover {color:red;} | ||
h3 { | h3 { | ||
padding-top: 0px; | padding-top: 0px; | ||
Line 31: | Line 49: | ||
.cal-wrapper { | .cal-wrapper { | ||
display: block; | display: block; | ||
- | background: | + | background: #133453; |
border-radius: 5px; | border-radius: 5px; | ||
padding: 5px; | padding: 5px; | ||
Line 39: | Line 57: | ||
background-color: black; | background-color: black; | ||
border-radius: 5px; | border-radius: 5px; | ||
- | width: | + | width: 40%; |
float: left; | float: left; | ||
padding-top:5px; | padding-top:5px; | ||
Line 54: | Line 72: | ||
text-align: center; | text-align: center; | ||
font-weight: 700; | font-weight: 700; | ||
- | width: | + | width: 12.5%; |
padding:0; | padding:0; | ||
margin:0; | margin:0; | ||
Line 66: | Line 84: | ||
border-radius: 3px; | border-radius: 3px; | ||
text-align: center; | text-align: center; | ||
- | width: | + | width: 12.5%; |
padding:0; | padding:0; | ||
margin:0; | margin:0; | ||
Line 79: | Line 97: | ||
.calendar-day:hover li { | .calendar-day:hover li { | ||
background: black; | background: black; | ||
- | color: | + | color: #F00; |
} | } | ||
.clear { | .clear { | ||
Line 85: | Line 103: | ||
} | } | ||
.calendar-note { | .calendar-note { | ||
- | background-color: | + | background-color: black; |
border-radius: 5px; | border-radius: 5px; | ||
- | width: | + | width: 59%; |
float: right; | float: right; | ||
height: 216px; | height: 216px; | ||
Line 124: | Line 142: | ||
} | } | ||
.note:nth-child(5) { | .note:nth-child(5) { | ||
+ | border-left: blue 3px solid; | ||
+ | } | ||
+ | .calendar-day:nth-child(7) li { | ||
+ | background:rgba(39, 39, 39, 1) | ||
+ | } | ||
+ | .note:nth-child(6) { | ||
border-left: blue 3px solid; | border-left: blue 3px solid; | ||
} | } | ||
Line 138: | Line 162: | ||
index = $(this).closest('.calendar').find('.calendar-day').index(this)+1; | index = $(this).closest('.calendar').find('.calendar-day').index(this)+1; | ||
$(this).closest('.cal-wrapper').find('.note:nth-child('+index+')').slideToggle('fast'); | $(this).closest('.cal-wrapper').find('.note:nth-child('+index+')').slideToggle('fast'); | ||
+ | $(this).closest('.cal-wrapper').find('.note:nth-child('+index+')').siblings().hide(); | ||
} | } | ||
);} | );} | ||
$(document).ready(function() {initMenu();}); | $(document).ready(function() {initMenu();}); | ||
</script> | </script> | ||
+ | <script> | ||
+ | $(document).ready(function(){ | ||
+ | $(".doo2").hide(500) ; | ||
+ | $(".doo3").hide(500) ; | ||
+ | $(".doo4").hide(500) ; | ||
+ | $(".doo5").hide(500) ; | ||
+ | $(".doo6").hide(500) ; | ||
+ | $(".doo7").hide(500) ; | ||
+ | $(".doo8").hide(500) ; | ||
+ | $(".doo9").hide(500) ; | ||
+ | $("#move1").click(function(){ | ||
+ | $(".doo1").slideToggle(500); | ||
+ | $(".doo2").hide(500) ; | ||
+ | $(".doo3").hide(500) ; | ||
+ | $(".doo4").hide(500) ; | ||
+ | $(".doo5").hide(500) ; | ||
+ | $(".doo6").hide(500) ; | ||
+ | $(".doo7").hide(500) ; | ||
+ | $(".doo8").hide(500) ; | ||
+ | $(".doo9").hide(500) ; | ||
+ | }); | ||
+ | $("#move2").click(function(){ | ||
+ | $(".doo2").slideToggle(500); | ||
+ | $(".doo1").hide(500) ; | ||
+ | |||
+ | $(".doo3").hide(500) ; | ||
+ | $(".doo4").hide(500) ; | ||
+ | $(".doo5").hide(500) ; | ||
+ | $(".doo6").hide(500) ; | ||
+ | $(".doo7").hide(500) ; | ||
+ | $(".doo8").hide(500) ; | ||
+ | $(".doo9").hide(500) ; | ||
+ | }); | ||
+ | $("#move3").click(function(){ | ||
+ | $(".doo3").slideToggle(500); | ||
+ | $(".doo1").hide(500) ; | ||
+ | $(".doo2").hide(500) ; | ||
+ | |||
+ | $(".doo4").hide(500) ; | ||
+ | $(".doo5").hide(500) ; | ||
+ | $(".doo6").hide(500) ; | ||
+ | $(".doo7").hide(500) ; | ||
+ | $(".doo8").hide(500) ; | ||
+ | $(".doo9").hide(500) ; | ||
+ | }); | ||
+ | $("#move4").click(function(){ | ||
+ | $(".doo4").toggle(500); | ||
+ | $(".doo1").hide(500) ; | ||
+ | $(".doo2").hide(500) ; | ||
+ | $(".doo3").hide(500) ; | ||
+ | |||
+ | $(".doo5").hide(500) ; | ||
+ | $(".doo6").hide(500) ; | ||
+ | $(".doo7").hide(500) ; | ||
+ | $(".doo8").hide(500) ; | ||
+ | $(".doo9").hide(500) ; | ||
+ | }); | ||
+ | $("#move5").click(function(){ | ||
+ | $(".doo5").toggle(500); | ||
+ | $(".doo1").hide(500) ; | ||
+ | $(".doo2").hide(500) ; | ||
+ | $(".doo3").hide(500) ; | ||
+ | $(".doo4").hide(500) ; | ||
+ | |||
+ | $(".doo6").hide(500) ; | ||
+ | $(".doo7").hide(500) ; | ||
+ | $(".doo8").hide(500) ; | ||
+ | $(".doo9").hide(500) ; | ||
+ | }); | ||
+ | $("#move6").click(function(){ | ||
+ | $(".doo6").toggle(500); | ||
+ | $(".doo1").hide(500) ; | ||
+ | $(".doo2").hide(500) ; | ||
+ | $(".doo3").hide(500) ; | ||
+ | $(".doo4").hide(500) ; | ||
+ | $(".doo5").hide(500) ; | ||
+ | |||
+ | $(".doo7").hide(500) ; | ||
+ | $(".doo8").hide(500) ; | ||
+ | $(".doo9").hide(500) ; | ||
+ | }); | ||
+ | $("#move7").click(function(){ | ||
+ | $(".doo7").toggle(500); | ||
+ | $(".doo1").hide(500) ; | ||
+ | $(".doo2").hide(500) ; | ||
+ | $(".doo3").hide(500) ; | ||
+ | $(".doo4").hide(500) ; | ||
+ | $(".doo5").hide(500) ; | ||
+ | $(".doo6").hide(500) ; | ||
+ | |||
+ | $(".doo8").hide(500) ; | ||
+ | $(".doo9").hide(500) ; | ||
+ | }); | ||
+ | $("#move8").click(function(){ | ||
+ | $(".doo8").toggle(500); | ||
+ | $(".doo1").hide(500) ; | ||
+ | $(".doo2").hide(500) ; | ||
+ | $(".doo3").hide(500) ; | ||
+ | $(".doo4").hide(500) ; | ||
+ | $(".doo5").hide(500) ; | ||
+ | $(".doo6").hide(500) ; | ||
+ | $(".doo7").hide(500) ; | ||
+ | |||
+ | $(".doo9").hide(500) ; | ||
+ | }); | ||
+ | $("#move9").click(function(){ | ||
+ | $(".doo9").toggle(500); | ||
+ | $(".doo1").hide(500) ; | ||
+ | $(".doo2").hide(500) ; | ||
+ | $(".doo3").hide(500) ; | ||
+ | $(".doo4").hide(500) ; | ||
+ | $(".doo5").hide(500) ; | ||
+ | $(".doo6").hide(500) ; | ||
+ | $(".doo7").hide(500) ; | ||
+ | $(".doo8").hide(500) ; | ||
+ | |||
+ | }); | ||
+ | }); | ||
+ | </script> | ||
+ | <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css"> | ||
+ | <script src="//code.jquery.com/jquery-1.10.2.js"></script> | ||
+ | <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script> | ||
+ | <link rel="stylesheet" href="/resources/demos/style.css"> |
Latest revision as of 06:07, 28 August 2015