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

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>

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

This entry was written by admin , posted on 日曜日 6月 19 2011at 03:06 pm , filed under 応用例 and tagged , . Bookmark the permalink . Post a comment below or leave a trackback: Trackback URL.

Comments are closed.