li リストの生成とデザイン

li タグで書くリンクのリストをjQueryで生成するケースはありそうなので、デザインのメモを兼ねて書いておく。

f:id:posturan:20160313190806j:plain


このように、ページを開いた時の現在日から、前年度、今年度、翌年度の li のリストリンクを
jQuery で作成する。
マウスが上にきたとき、背景も変える。→ これは画像ソースを指定してるわけでもない。
linear-gradient を使っている。
children(':last') で、追加していくのがポイント。
年度の年数を渡すのに、HTML5 のカスタムデータ属性、"data-*" を使うようにした。


<style type="text/css">
body{
   padding: 0;
   margin: 0;
}
a        { font-weight: bold; color: #0000cc; text-decoration:none;}
a:link   { color: #0000cc; }
a:active { color: #0000cc; }
a:visited{ color: #0000cc; }
a:focus  { color: #0000cc; }
a:hover  { color: #990033; }
ul {
   padding: 0px;
}
li {
   list-style: none;
   height: 26px;
   padding-top: 7px;
   cursor: pointer;
}
#genlist li a{
   padding: 20px;
}
</style>
<script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
<script type="text/javascript">

$(function(){
   var dt = new Date();
   var cyear = dt.getFullYear();
   if (dt.getMonth() < 4){
      cyear--;
   }

   for(var y=cyear-1;y <= cyear+1;y++){
      $('<色:#660000>#genlist</色>').append('<li>');
      $('<色:#660000>#genlist</色>').children(':last').css('background-image','linear-gradient(#f9f9f9,#c0c0c0)');
      $('#genlist').children(':last').attr("data-year", y);
      $('#genlist').children(':last').append('<a href="generation.php?gyear='+y+'">'+y+" 年度</a>");
   }
   $('#genlist li').click(function(){
      var url = "generation_child.html?gyear=" + $(this).attr("data-year");
      //window.open(url, '_blank');
      window.open(url, '_self');
   });
   // li 上にマウスある時とない時
   $('#genlist li').hover(function(){
      $(this).css('background-image','linear-gradient(#ffb0b0,#f0f0f0)');
      $(this).children('a').css("color", "#990033");
   },function(){
      $(this).css('background-image','linear-gradient(#f9f9f9,#c0c0c0)');
      $(this).children('a').css("color", "#0000cc");
   });
});
</script>
</head>
<body>
<div>
   <ul id="genlist"></ul>
</div>
</body>

---------------------
liタグ属性で、マウスを上に置いた時にカーソル形状を変えるのも忘れないようにしたいところだ。

cursor: pointer;