【応用編】アコーディオンパネルNo2

アコーディオンパネルNo1では、
縦に開閉するアコーディオンでしたが、
応用して横に開閉するアコーディオンに改良してみましょう。
横スライドするコンテンツは珍しく、
ユーザーへ印象を与えるコンテンツになります。

【jQuery】
<script type=”text/javascript”>
$(function(){
 $(“dd:not(:first)”).css(“width”,”0px”);
 $(“dt:first span”).addClass(“selected”);
 $(“dl dt”).click(function(){
  if($(“+dd”,this).css(“width”)==”0px”){
   $(“dt:has(.selected) +dd”).animate({“width”:”0px”});
   $(“+dd”,this).animate({“width”:”695px”});
   $(“dt span”).removeClass(“selected”);
   $(“span”,this).addClass(“selected”);
  }
 }).mouseover(function(){
 $(“span”,this).addClass(“over”);
 }).mouseout(function(){
  $(“span”,this).removeClass(“over”);
 });
});
</script>

【HTML】
<div>
<dl>
<dt id=”no1″><span>織田 信長</span></dt>
<dd><p>尾張国古渡城主・織田信秀の嫡男・・・</p></dd>

<dt id=”no2″><span>柴田 勝家</span></dt>
<dd><p>大永2年(1522年)、『張州府誌』によると・・・</p></dd>

<dt id=”no3″><span>前田 利家</span></dt>
<dd><p>尾張国海東郡荒子村の・・・</p></dd>

</dl>
</div>

アコーディオンパネルサンプル

【応用編】アコーディオンパネルNo1

タブパネルとは違った形でコンテンツを集約する方法として
アコーディオンパネルがあります。
まずはオーソドックスに縦に開閉するアコーディオンパネルです。

【jQuery】
<script type=”text/javascript”>
$(function(){
 //織田信長のパネルのみ表示させる
 $(“dd:not(:first)”).css(“display”,”none”);
 //織田信長タブを選択済みにする
 $(“dt:first”).addClass(“selected”);
 $(“dl dt”).click(function(){
  if($(“+dd”,this).css(“display”)==”none”){
   $(“dd”).slideUp(“slow”);
   $(“+dd”,this).slideDown(“slow”);
   $(“dt”).removeClass(“selected”);
   $(this).addClass(“selected”);
  }
 }).mouseover(function(){
  $(this).addClass(“over”);
 }).mouseout(function(){
  $(this).removeClass(“over”);
 });
});
</script>

【HTML】
<dl>
<dt>織田 信長</dt>
<dd><p>尾張国古渡城主・織田信秀の嫡男・・・</p></dd>

<dt>柴田 勝家</dt>
<dd><p>大永2年(1522年)、『張州府誌』・・・</p></dd>

<dt>前田 利家</dt>
<dd><p>尾張国海東郡荒子村の・・・</p></dd>

<dt>明智 光秀</dt>
<dd><p>清和源氏の・・・</p></dd>
</dl>

アコーディオンパネルサンプル

【応用編】フロートボックス

mousedown()/mouseup()/mousemove()を組み合わせた
インターフェースとしてフローティングボックスがあります。
ユーザーがページ上でコンテンツを動かあwるものとして
インパクトのあるものになります。

【jQuery】
<script type=”text/javascript”>
$(function(){
 //リンク要素をクリックするとフロートボックスを表示させる
 $(“a.open”).click(function(){
  $(“#floatWindow”).fadeIn(“fast”);
  return false;
 });
 //閉じるボタンでフロートボックスを閉じる
 $(“#floatWindow a.close”).click(function(){
  $(“#floatWindow”).fadeOut(“fast”);
  return false;
 });
 //フロートボックスのタイトルをマウスダウンしたときのカーソル座標を保存
 $(“#floatWindow dl dt”).mousedown(function(e){
  $(“#floatWindow”)
  .data(“clickPointX”,e.pageX – $(“#floatWindow”).offset().left)
  .data(“clickPointY”,e.pageY – $(“#floatWindow”).offset().top);

  //マウスカーソルをドラッグしたとき、フロートボックスを追跡させる
  $(document).mousemove(function(e){
   $(“#floatWindow”).css({
   top:e.pageY – $(“#floatWindow”).data(“clickPointY”)+”px”,
   left:e.pageX – $(“#floatWindow”).data(“clickPointX”)+”px”
  });
 });
 $(“body”).bind(“selectstart”,function(){
  return false;
  });
 //マウスアップしたとき、イベントを切り離す
 }).mouseup(function(){
  $(document).unbind(“mousemove”);
  $(“body”).unbind(“mousemove”)
 });
});
</script>

【HTML】
<a href=”#floatWindow” class=”open”>織田信長に関する詳しい説明</a>
<div id=”floatWindow”>
  <a href=”#” class=”close”>
  <img src=”images/close.png” alt=”閉じる” /></a>
  <dl>
    <dt>織田信長について</dt>
        <dd>
        <p>尾張国(現在の愛知県)の古渡城主・織田信秀の嫡男・・・</p>
    </dd>
  </dl>
</div>

フロートボックスサンプル

Posted in: 応用例 by admin 【応用編】フロートボックス はコメントを受け付けていません ,

【応用編】タブパネルNo3

タブパネルNo1、タブパネルNo2のパネル内のコンテンツは
すべてHTMLの中に直接書かれていました。
jQueryを使うメリットの中にはAjaxを簡単に実装できることがあります。
パネル内のコンテンツをメンテナンスすることも考えて、
テキストファイルから読み込んで表示するようにしましよう。
クリックされるたびにすべてを読み込みなおすことの無いよう、
Ajaxでテキストファイルのみ読み込ませます。

【jQuery】
 <script type=”text/javascript”>
$(function(){
 //織田信長のコンテンツを読み込む
 $(“p.panel”).load($(“ul.tab li a.selected”).attr(“href”));
 $(“ul.tab li a”).click(function(){
  $(“ul.tab li a”).removeClass(“selected”);
  $(this).addClass(“selected”);
  $(“p.panel”).load($(this).attr(“href”));
  return false;
 });
});
</script>

【HTML】
<div id=”container”>
 <ul class=”tab”>
  <li><a href=“oda.txt”>織田 信長</a></li>
  <li><a href=“shibata.txt”>柴田 勝家</a></li>
  <li><a href=“maeda.txt”>前田 利家</a></li>
  <li><a href=“akechi.txt”>明智 光秀</a></li>
  <li><a href=“sassa.txt”>佐々 成政</a></li>
 </ul>
<p class=”panel”></p>
</div>

タブパネルサンプル

【応用編】タブパネルNo2

タブパネルNo1ではshow()、hide()で表示を切り替えましたが、
jQueryのインターフェースらしくなるように、
slideUp()slideDown()にしてみましょう。
よりユーザーへインパクトを与え、
コンテンツが切り替わりを効果的に表現出来ます。

【jQuery】
<script type=”text/javascript”>
$(function(){
 $(“ul.panel li:not(” + $(“ul.tab li a.selected”).attr(“href”)  + “)”).hide();

 $(“ul.tab li a”).click(function(){
  $(“ul.tab li a”).removeClass(“selected”);
  $(this).addClass(“selected”);
  $(“ul.panel li”).slideUp(“normal”);
  $($(this).attr(“href”)).slideDown(“normal”);
  return false;
 });
});
</script>

【HTML】
タブパネルNo1と同じ

タブパネルサンプル