THE HAM MEDIA BLOG

jQuery自作:半透明のレイヤーで覆われるプラグイン

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery plugin自作
タグ:
jquery
プラグイン
javascript
自作

半透明のレイヤーで覆われるプラグイン

前回のエントリーで画面にレイヤーなどが表示されるような
jQueryのプラグインを試して紹介したが、
今回はそれっぽいものを自分で作ってみることにした。

Lightboxにしろムーダルボックスにしろ、
半透明のレイヤーで画面が覆われるスクリプトが多々あって、
どうやって作るんだ?なんて思っていたけど、
画面全体を覆うレイヤーがあればいいのか!
なんて思ってみたので、実験してみることにした。



試作プラグイン

■ プラグイン本体

(function($){
$.overLay = function(settings){
	var c = $.extend({
		selector: '#overlay',
		bgColor: '#ffffff',
		opacityPoint: 0.6,
		time: 3000
	}, settings);
		
	$(c.selector).remove();
	var style = 'display:block;width:100%;height:5000px;position:absolute;left:0px;top:0px;background:'+ c.bgColor +';z-index:1;';
	$("body").append('<div id="overlay" style="'+ style +'"></div>');
	$(c.selector).css('opacity' , c.opacityPoint);
	setTimeout(function(){
		$(c.selector).fadeTo(500,0).css('height','100%');
	},c.time);
};
})(jQuery);

■ プラグイン呼び出し 例1

$(function() {
	$.overLay();
});

↑$()の中身はなんでもよかったりする…
スマートな表示じゃないのがちょっと気にくわないけど、
これを入れないと表示してくれなかったので断念していれた。

コレを入れなくても表示させる方法ってあるかな・・・

※追記(10/22 21:15)
ソースを修正しました!
cyokodogさんのおかげでスマートに書くことができました!
このような場合はfnはなくてもよいのですね。
勉強になります!ありがとうございました。

■ プラグイン呼び出し 例2

$(function() {
	$('div.preview a').click(function(){
		$().overLay();
		return false;
	});
});

クリックさせたときに表示させる。
でもまだまだ修正必要だな。
これもあとで修正ひつようかな。

サンプルデモ

今回はクリックしたら表示されるようにしてみました。

demo

試作プラグインのオブション

一応プラグインなのでオプションもつけてみてある。
呼び出すときに以下の3点については変更可能。

$(function() {
	$.overLay({
		//レイヤー色、デフォルトが白(#ffffff)
		bgColor: '#000',
		//レイヤーの透明度、デフォルトが0.6
		opacityPoint: 0.4,
		//レイヤーの表示時間、デフォルトが3000
		time: 1000
	});
});

変更は一つでも出来る。
最後の指定ではコンマ(,)を入れると表示されなくなるブラウザもあるので、
オプションを入れる最後はコンマ(,)入れないように!

今後のこのプラグイン

とりあえず仮に作ってみたプラグインなので、
動作保障はしません。
仕組みとして、body内の最後にdivタグをheight:5000pxで表示して
それが全体を覆っているだけの仕組みである。
問題として、開いたその画面が5000px分の長さをとること。
つまり、表示しているページが5000px以下だったばあい、
スクロールすると、通常時よりも高くなってしまうのである。

これは今後なんとかしてみたいもの。

それと、次のステップとして、スクロールがですぎてしまうだけでなく、
この表示されるレイヤーより前面に何か表示できるようにしたい。
お待ちくださいとかのアナウンスでもいいし、
ムーダルボックスのようなのを表示させるでもいい。
とにかく時間を見つけて進化させていこうと思う。



この記事へのコメント
>↑$()の中身はなんでもよかったりする…
>これを入れないと表示してくれなかったので断念し>ていれた。

↓こう書いてはどうでしょうか?

(function($){
$.overLay = function(settings){

};
})(jQuery);


呼び出し
$.overLay();

Posted by cyokodog at 2008年10月22日
>cyokodogさん
ご教授いただき、本当にありがとうございます!
おかげですっきり書くことができました。
fnの役割も少し気づけたきがします!

先ほど修正しておきました。
Posted by ハム at 2008年10月22日
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

トップに戻る

×

この広告は180日以上新しい記事の投稿がないブログに表示されております。