Difference between revisions of "Team:NCTU Formosa/Notebook"
Line 45: | Line 45: | ||
</body> | </body> | ||
+ | </html> | ||
+ | |||
+ | |||
+ | <html> | ||
+ | <style> | ||
+ | .effect { | ||
+ | left: 81.25%; | ||
+ | } | ||
+ | |||
+ | .left{ | ||
+ | float:right; | ||
+ | width:45%; | ||
+ | display:block; | ||
+ | } | ||
+ | .right{ | ||
+ | float:left; | ||
+ | width:45%; | ||
+ | display:block; | ||
+ | } | ||
+ | #cover{ | ||
+ | background-color: #fbfbfb; | ||
+ | } | ||
+ | |||
+ | .download li { | ||
+ | display: inline-block; | ||
+ | border-radius: 3px; | ||
+ | text-align: center; | ||
+ | font-weight: 700; | ||
+ | width: 45%; | ||
+ | padding:0; | ||
+ | margin:0; | ||
+ | background: #fbfbfb; | ||
+ | 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: #fbfbfb; | ||
+ | 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: #fbfbfb; | ||
+ | border:0; | ||
+ | margin-bottom: 5px; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | .cal li:hover {color:red;} | ||
+ | h3 { | ||
+ | padding-top: 0px; | ||
+ | } | ||
+ | #footer-wrapper { | ||
+ | clear:both; | ||
+ | } | ||
+ | .cal-wrapper { | ||
+ | display: block; | ||
+ | background: #fbfbfb; | ||
+ | border-radius: 5px; | ||
+ | padding: 5px; | ||
+ | margin-bottom: 10px; | ||
+ | } | ||
+ | .calendar { | ||
+ | background-color: #fbfbfb; | ||
+ | border-radius: 5px; | ||
+ | width: 40%; | ||
+ | float: left; | ||
+ | padding-top:5px; | ||
+ | padding-bottom: 5px; | ||
+ | } | ||
+ | .calendar-week, .calendar-day { | ||
+ | padding: 0; | ||
+ | margin: 0!important; | ||
+ | margin-left: 5px!important; | ||
+ | } | ||
+ | .calendar-week li { | ||
+ | display: inline-block; | ||
+ | border-radius: 3px; | ||
+ | text-align: center; | ||
+ | font-weight: 700; | ||
+ | width: 12.5%; | ||
+ | padding:0; | ||
+ | margin:0; | ||
+ | background: #fbfbfb; | ||
+ | border:0; | ||
+ | margin-bottom: 5px; | ||
+ | color:black; | ||
+ | } | ||
+ | .calendar-day li { | ||
+ | display: inline-block; | ||
+ | border-radius: 3px; | ||
+ | text-align: center; | ||
+ | width: 12.5%; | ||
+ | padding:0; | ||
+ | margin:0; | ||
+ | background: #fbfbfb; | ||
+ | border:0; | ||
+ | list-style: none; | ||
+ | height: 30px; | ||
+ | line-height: 30px; | ||
+ | margin-bottom: 5px; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | .calendar-day:hover li { | ||
+ | background: #fbfbfb; | ||
+ | color: #F00; | ||
+ | } | ||
+ | .clear { | ||
+ | clear: both; | ||
+ | } | ||
+ | .calendar-note { | ||
+ | background-color: #fbfbfb; | ||
+ | border-radius: 5px; | ||
+ | width: 59%; | ||
+ | float: right; | ||
+ | height: 216px; | ||
+ | overflow:scroll; | ||
+ | } | ||
+ | .note { | ||
+ | height: 100%; | ||
+ | margin: 5px; | ||
+ | } | ||
+ | .calendar-day:nth-child(2) li { | ||
+ | background: #fbfbfb ; | ||
+ | } | ||
+ | .note:nth-child(1) { | ||
+ | border-left: yellow 3px solid; | ||
+ | } | ||
+ | .calendar-day:nth-child(3) li { | ||
+ | background: #fbfbfb; | ||
+ | } | ||
+ | .note:nth-child(2) { | ||
+ | border-left: red 3px solid; | ||
+ | } | ||
+ | .calendar-day:nth-child(4) li { | ||
+ | background: #fbfbfb; | ||
+ | } | ||
+ | .note:nth-child(3) { | ||
+ | border-left: green 3px solid; | ||
+ | } | ||
+ | .calendar-day:nth-child(5) li { | ||
+ | background: #fbfbfb; | ||
+ | } | ||
+ | .note:nth-child(4) { | ||
+ | border-left: blue 3px solid; | ||
+ | } | ||
+ | .calendar-day:nth-child(6) li { | ||
+ | background:#fbfbfb; | ||
+ | } | ||
+ | .note:nth-child(5) { | ||
+ | border-left: blue 3px solid; | ||
+ | } | ||
+ | .calendar-day:nth-child(7) li { | ||
+ | background:#fbfbfb(39, 39, 39, 1) | ||
+ | } | ||
+ | .note:nth-child(6) { | ||
+ | border-left: blue 3px solid; | ||
+ | } | ||
+ | </style> | ||
+ | <script> | ||
+ | function initMenu() { | ||
+ | var block = $(".calendar-day"); | ||
+ | var index; | ||
+ | block.hover(function(){window.status = $(this)}, function(){window.status = ""}); | ||
+ | $('.note').hide(); | ||
+ | |||
+ | block.click( | ||
+ | function() { | ||
+ | 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+')').siblings().hide(); | ||
+ | } | ||
+ | );} | ||
+ | $(document).ready(function() {initMenu();}); | ||
+ | </script> | ||
+ | <script> | ||
+ | $(document).ready(function(){ | ||
+ | $(".doo1").hide(500) ; | ||
+ | $(".doo2").hide(500) ; | ||
+ | $(".doo3").hide(500) ; | ||
+ | $(".doo4").hide(500) ; | ||
+ | $(".doo5").hide(500) ; | ||
+ | $(".doo6").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"> | ||
+ | <script> | ||
+ | $(function() { | ||
+ | $( "#dialog" ).dialog({ | ||
+ | autoOpen: false, | ||
+ | show: { | ||
+ | effect: "blind", | ||
+ | duration: 1000 | ||
+ | }, | ||
+ | hide: { | ||
+ | effect: "explode", | ||
+ | duration: 1000 | ||
+ | } | ||
+ | }); | ||
+ | $( "#opener" ).click(function() { | ||
+ | $( "#dialog" ).dialog( "open" ); | ||
+ | }); | ||
+ | }); | ||
+ | </script> | ||
+ | |||
+ | <div class="li"><div class="card"> | ||
+ | |||
+ | ===Note=== | ||
+ | <ul class="cal"> | ||
+ | <li><div id="move7">March<br>2015</div></li> | ||
+ | <li><div id="move1">April<br>2015</div></li> | ||
+ | <li><div id="move2">May<br>2015</div></li> | ||
+ | <li><div id="move3">June<br>2015</div></li> | ||
+ | <li><div id="move4">July<br>2015</div></li> | ||
+ | <li><div id="move5">August<br>2015</div></li> | ||
+ | <li><div id="move6">September<br>2015</div></li> | ||
+ | </ul> | ||
+ | <div class="doo1"> | ||
+ | ====April 2015==== | ||
+ | {{:Team:NCTU Formosa/TEST/exp1}} | ||
+ | </div><div class="doo2"> | ||
+ | ====May 2015==== | ||
+ | {{:Team:NCTU Formosa/TEST/exp2}} | ||
+ | </div><div class="doo3"> | ||
+ | ====June 2015==== | ||
+ | {{:Team:NCTU Formosa/TEST/exp3}} | ||
+ | </div><div class="doo4"> | ||
+ | ====July 2015==== | ||
+ | {{:Team:NCTU Formosa/TEST/exp4}} | ||
+ | </div><div class="doo5"> | ||
+ | ====August 2015==== | ||
+ | {{:Team:NCTU Formosa/TEST/exp5}} | ||
+ | </div><div class="doo6"> | ||
+ | ====September 2015==== | ||
+ | {{:Team:NCTU Formosa/TEST/exp6}} | ||
+ | </div><div class="doo7"> | ||
+ | ====March 2015==== | ||
+ | {{:Team:NCTU Formosa/TEST/exp7}} | ||
+ | </div> | ||
+ | </div> </div> | ||
</html> | </html> |
Revision as of 14:45, 28 August 2015
===Note===
- March
2015 - April
2015 - May
2015 - June
2015 - July
2015 - August
2015 - September
2015
====April 2015====
{{:Team:NCTU Formosa/TEST/exp1}}
====May 2015====
{{:Team:NCTU Formosa/TEST/exp2}}
====June 2015====
{{:Team:NCTU Formosa/TEST/exp3}}
====July 2015====
{{:Team:NCTU Formosa/TEST/exp4}}
====August 2015====
{{:Team:NCTU Formosa/TEST/exp5}}
====September 2015====
{{:Team:NCTU Formosa/TEST/exp6}}
====March 2015====
{{:Team:NCTU Formosa/TEST/exp7}}