29分でできる！ あのサイトの“技”を盗め ― 第15回

懐かしの“マーキー”をjQueryでちょいオシャレに！ (3/5)

マーキーとリストを切り替える

　次に、展開パネル部分を作りましょう。先ほど説明したように、liscrollはリストタグの項目をスクロール表示していますので、クリックするとマーキーとリスト表示を切り替えるようにしましょう。ただ、liscrollにそのような機能があれば簡単なのですが、残念ながらありません。また、スクロールを停止させたり、一時的に機能を解除するといったこともできません。

　そこで、liscrollを組み込む前にリスト項目の複製を作っておき、クリックされるたびに表示／非表示を切り替えるようにします。リスト項目の複製を作ったら、ID名を新しいものに変更し、非表示にしておきます。これらの処理は以下のスクリプトで実現できます。

$("#newslist").clone().attr("id", "newslist2").insertAfter("#openlist").hide();

　この後、liscrollを組み込みます。

$("#newslist").liScroll({travelocity: 0.04});

　次に、クリックされたらマーキーとリスト表示を切り替える、という処理です。jQueryライブラリにはクリックされる度に処理を切り替える「toggle()」メソッドがあります。交互に切り替えるので、関数を2つパラメータに書いておきます。それぞれの関数内で、マーキーとリスト項目を表示する、しないを設定すればできあがりです。

      $("#openlist").toggle(
            function(){
                  $("#newslist").hide();
                  $("#newslist2").show();
                  $(".tickercontainer").hide();
            },function(){
                  $("#newslist").show();
                  $("#newslist2").hide();
                  $(".tickercontainer").show();
            }
      );