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

TEST

TEST

Go to Design
Back to project
contact us
NCTU_Formosa APOllO   
  Engineering Building 6 EF455, 1001 University Road, Hsinchu 300, Taiwan, ROC.


===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}}