久々にjQueryでの実験サンプルを紹介。
CSSでは意外と手間がかかってしまう、
ボックス要素を、【上下左右中央】に配置する場合や【上下中央】に配置する場合。
配置する要素のpositionをabsoluteにして、
marginのtopとleftを50%にしたり、ああだこうだと面倒な物。
そんな面倒なボックスの配置をjQueryのライブラリでさっくり可能にできる
「jQuery Center plugin」がかなり便利に使えそう。
≫Plugins | jQuery Plugins － Center element plugin
使い方はいたって簡単。
まずjQuery本体と上記ページの【jquery.center.js（ダウンロード時はテキストファイル）】をページ内に設置。
２つのJSファイルをHTMLからリンクしたら、
配置するボックス要素に対して以下の様に指定を加えます。
◆【上下左右中央】にする場合
$(“id or class名”).center();
◆【左右中央】にする場合
$(“id or class名”).center({
vertical: false
});
◆【上下中央】にする場合
$(“id or class名”).center({
horizontal: false
});
実際にソース上に書き加える場合は
————————————–
<script type=”text/javascript”>
$(document).ready(function() {
$(“id or class名”).center();
$(“id or class名”).center({
vertical: false
});
$(“id or class名”).center({
horizontal: false
});
});
</script>
————————————–
といった具合になります。
指定するボックス要素はIDのものでもCLASSのものでも使用可能。
実際に試してみると以下の様な感じになります。
【左右中央】はこれを使う必要はないかもしれませんが、
【上下中央】及び【上下左右中央】はかなり使えそう。
たまに必要になることがある、
ページ（サイト）全体を【上下左右中央】にする場合にも
これがあれば簡単に組み込むことができそうです。
是非、ご活用下さい。。。