Team:NCTU Formosa/source/header-notebook
From 2014.igem.org
(Difference between revisions)
(83 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
<html> | <html> | ||
<style> | <style> | ||
- | . | + | |
- | + | ||
+ | .download li { | ||
+ | display: inline-block; | ||
+ | border-radius: 3px; | ||
+ | text-align: center; | ||
+ | font-weight: 700; | ||
+ | width: 45%; | ||
+ | padding:0; | ||
+ | margin:0; | ||
+ | background: #000; | ||
+ | border:0; | ||
+ | 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 15: | Line 49: | ||
.cal-wrapper { | .cal-wrapper { | ||
display: block; | display: block; | ||
- | background: | + | background: #133453; |
border-radius: 5px; | border-radius: 5px; | ||
padding: 5px; | padding: 5px; | ||
+ | margin-bottom: 10px; | ||
} | } | ||
.calendar { | .calendar { | ||
- | background-color: | + | background-color: black; |
border-radius: 5px; | border-radius: 5px; | ||
- | width: | + | width: 40%; |
float: left; | float: left; | ||
padding-top:5px; | padding-top:5px; | ||
Line 37: | 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 43: | Line 78: | ||
border:0; | border:0; | ||
margin-bottom: 5px; | margin-bottom: 5px; | ||
+ | color:black; | ||
} | } | ||
.calendar-day li { | .calendar-day li { | ||
Line 48: | 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 60: | Line 96: | ||
} | } | ||
.calendar-day:hover li { | .calendar-day:hover li { | ||
- | background: | + | background: black; |
- | color: | + | color: #F00; |
} | } | ||
.clear { | .clear { | ||
Line 67: | 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: | + | height: 216px; |
+ | overflow:scroll; | ||
} | } | ||
.note { | .note { | ||
height: 100%; | height: 100%; | ||
margin: 5px; | margin: 5px; | ||
+ | } | ||
+ | .calendar-day:nth-child(2) li { | ||
+ | background: #C2C2C2 ; | ||
+ | } | ||
+ | .note:nth-child(1) { | ||
+ | border-left: yellow 3px solid; | ||
+ | } | ||
+ | .calendar-day:nth-child(3) li { | ||
+ | background: #909090; | ||
+ | } | ||
+ | .note:nth-child(2) { | ||
+ | border-left: red 3px solid; | ||
+ | } | ||
+ | .calendar-day:nth-child(4) li { | ||
+ | background: #777; | ||
+ | } | ||
+ | .note:nth-child(3) { | ||
+ | border-left: green 3px solid; | ||
+ | } | ||
+ | .calendar-day:nth-child(5) li { | ||
+ | background: #545454; | ||
+ | } | ||
+ | .note:nth-child(4) { | ||
+ | border-left: blue 3px solid; | ||
+ | } | ||
+ | .calendar-day:nth-child(6) li { | ||
+ | background:#424242; | ||
+ | } | ||
+ | .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; | ||
} | } | ||
</style> | </style> | ||
Line 81: | Line 154: | ||
function initMenu() { | function initMenu() { | ||
var block = $(".calendar-day"); | var block = $(".calendar-day"); | ||
- | var index; | + | var index; |
- | + | block.hover(function(){window.status = $(this)}, function(){window.status = ""}); | |
- | + | $('.note').hide(); | |
- | $('. | + | |
block.click( | block.click( | ||
function() { | function() { | ||
- | index = | + | index = $(this).closest('.calendar').find('.calendar-day').index(this)+1; |
- | $(this).closest('.cal-wrapper').find('. | + | $(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