jQueryでフローティングウィンドウ

フローティングウィンドウは、任意のページの上に重ねるように絶対配置したテーブル等を、jQueryでdisplayの表示・非表示を切り替えれるようにしたものです。

まずウィンドウとして表示させたいテーブル等要素を用意します。

処理命令	処理内容
data(“A”,B)	AにBを保存
data(“A”)	Aデータを取り出す
each(function(){})	繰り返し処理実行
filter()	要素をセレクタで絞る
parent()	要素の親要素に移動
size()	要素の数を調べる
index(要素名)	要素の順番を調べる
offset()	要素の座標の取得
scrollTop()	スクロールTOPを取得
height()	高さを取得
width()	幅を取得
get()	jsの要素に変換
load(“ファイル名”)	htmlの読み込み
parseInt()	整数に変換
if(A){B}	AならばBする
if(A){B}else{C}	AならばB、以外ならC

ここで注意すべきことに、htmlでposition:relativeを指定しているdiv要素の中で絶対配置してしまうと、あたりまえですが、そのdiv要素の左上が基点となるので、画面の左上には配置できません。

意外とうっかり、relative指定していると失敗しますのでご注意を。指定せざるを得ない方は、<body>の直前に記述してください。ブログのページでできない場合は、jQueryのappend()命令でbodyの前に読み込む方法もあります。Ajaxでhtmlファイルごと読み込む方法もあるんでしょうけどね。

さて、関係ない人はそのまま進みましょう。

絶対配置したテーブルをcssでdisplay:noneにしておきましょう。cursorも移動できることを伝えるためにmoveを指定します。tableの背景も色を指定しておきましょう。

/*cssの記述*/
#z1 {
	display:none;
	position:absolute;
	top:0;
	left:0;
	}

#z1 table th {
	cursor:move;
	}

そしたら、このテーブルウィンドウを表示させるスイッチと非表示にするスイッチの2つを作ります。

<a href="#" class="z2">全て閉じる</a>
<a href="#" class="z3">リファレンス</a>

ウィンドウ表示（display:block)：リファレンス（画面上部左上に出現しているはず）
ウィンドウ非表示(display:none)：閉じる

閉じるボタンはテーブルの上にでも配置しておきます。リンク（hrefの中身）はなんでもいいです。href属性をjQueryでいじりたいときは入力で。

ここまでできたら、jQueryの命令を記述していきます。

テーブルのヘッダ部分をドラッグして移動できるようにしない、ただ表示非表示であれば非常に簡単です。fadeIn、fadeOutというイベント命令を使います。

$(function(){
	$("#z2").click(function(){
		$("#z1").fadeIn("fast");
		return false;
	});
	$("#z3").click(function(){
		$("#z1").fadeOut("fast");
		return false;
	});
});

訳）リファレンスボタン（表示ボタン）をクリックしたら、テーブルを表示させ、閉じるボタンをクリックしたらテーブルを非表示にさせる。画面をスクロールして上部へ行き、左上に設置できていることを確認したら、続いてこのテーブルの位置を自分で移動できるようにします。

$(function(){
	$("#z2").click(function(){
		$("#z1").fadeIn("fast");
		return false;
	});
	$("#z3").click(function(){
		$("#z1").fadeOut("fast");
		return false;
	});


	$("#z1 table th").mousedown(function(e){	
		$("#z1").data("tbx" , e.pageX - $("#z1").offset().left)
			.data("tby" , e.pageY - $("#z1").offset().top);
		
		$(document).mousemove(function(e){
			$("#z1").css({
				top:e.pageY  - $("#z1").data("tby")+"px",
				left:e.pageX - $("#z1").data("tbx")+"px"
			});
		});
	}).mouseup(function(){
		$(document).unbind("mousemove");
	});
});

訳）テーブルの見出し部分をクリックしているときは、テーブルの左座標を取得して、これをマウスカーソルのx座標から引いた値を、ファイル名（tbx）に格納し、同様y座標の値も格納します。
クリックした状態でドラッグしているときは、マウスカーソルの座標からtbxを呼び出した座標を引いて、今現在のテーブルの座標を割り出します。
クリックを離す（ドロップ）たら、マウスムーブイベント命令を取り除きます。

function(e){}で、e.pageXとe.pageYを用いると、その変数にマウスカーソルの位置の座標を入れることができます。（bodyの左上からの座標であり、relative基点座標からではありません。）

eは関数の引数で、eventのeをとっていますが、aでもbでもなんでもかまいません。関数内の引数は、イベントを起こした要素を参照します。

offset()関数のあとに.leftとか.topをつけることで、そのセレクタの座標を取得できます。

この場合のe.pageXは、マウスポインタの座標で、offset()関数で取得する座標は、このテーブルの左上角の座標で、両者は同じものではないことに注意します。

data(“ファイル名”,”数値”)でファイル名（適当な名前）に、座標数値をぶちこんでいるわけです。保存したデータの取り出しは、data("ファイル名")です。

mousemoveでマウスを移動させているときのマウスカーソルの位置とテーブルの左上の位置が同じとは限らないので、クリックした時点でのカーソル位置とテーブル左上の差を覚えておいて、マウスカーソルが動くと動いた位置引く「その差」でテーブル位置を判断しています。

$関数の中身がdocumentなのはmousemoveする範囲を画面全体にしたいから。e.pageやoffset()で取得した座標はpxがつかないnumberデータなので、pxをつけてcssの絶対座標を修正しています。

unbind()はイベント命令の取り消しです。取り消さなければ、クリックをしていなくてもマウスの動きに反応してテーブルが動いてしまいますので、documentに対して指定したmousemoveイベントを取り消します。mousedown命令のあとにメソッドチェーンでくっつけています。

表示のボタン（テーブルでなくボタンの方）をツイッターのfollow meボタンのようにスクロールバーにくっつけて、スクロールに応じて移動させるようにしてみます。（右上にくっついているやつです）

<div id="z4">
<a href="#" class="z2">
<img src="../gif/179.gif" alt="jQueryのリファレンス" title="jQueryのリファレンス" />
</a>
</div>

#z4 {
	position:absolute;
	top:0;
	right:0;
	}

$(function(){
	$(window).scroll(function(){
		$("#z4").css('top',$(document).scrollTop()+'px');
	});
});

window（画面全体）に対してスクロールイベントを指定し、ボタントップ座標は、常にdocument（今見えている画面全体）のスクロールトップとしています。

この考えを使って、先ほどのリファレンステーブルにもこのイベントを指定（上のz4をz1に変えるだけ）してみると画面の動きに合わせて移動するようになります。

こんどは右下に配置してみます。scrollTopというメソッドはありますが、scrollBottomというメソッドはありませんので、座標は固定配置（fixed）で行います。ただし、IE6が対応してないのでその対処もしなければなりませんが略というか使わないで。。。

適当にHTMLを組んで、それを固定配置すればOKです。

<div id="z5">
<a href="#" id="z6">
ページトップへ
</a>
</div>

#z5 {
	position:fixed;
	bottom:100px;
	right:100px;
	background:#999;
	width:100px;height:50px;
	}

ついでに、フローラルウィンドウとは関係なくなってしまいますが、このボタンにページトップへ移動するリンクを貼ります。

普段は消しておいて、スクロールトップがある一定位置（ここでは200に設定）に来たら表示させるスクリプトです。

$(function() {	
	$("#z5").hide();
	$(window).scroll(function () {
		if ($(this).scrollTop() > 200) {
			$("#z5").fadeIn();
		} else {
			$("#z5").fadeOut();
		}
	});
});

座標をscrollTop:0で一気に移動させるのもいいですが、アニメーションを指定してゆったり移動させるほうが見ている人にはだいぶやさしいです。

$(function() {	
    $("#z5 a").click(function () {
		$('body,html').animate({
			scrollTop: 0
		}, "slow");
		return false;
    });
});

もっと応用する例は、このサイトで紹介されています。

コメントor補足情報orご指摘あればをお願いします。

<< 前のページ
次のページ >>