久々にjQueryでの実験サンプルを紹介。

CSSでは意外と手間がかかってしまう、
ボックス要素を、【上下左右中央】に配置する場合や【上下中央】に配置する場合。

配置する要素のpositionをabsoluteにして、
marginのtopとleftを50%にしたり、ああだこうだと面倒な物。

そんな面倒なボックスの配置をjQueryのライブラリでさっくり可能にできる
「jQuery Center plugin」がかなり便利に使えそう。

Plugins | jQuery Plugins - Center element plugin

使い方はいたって簡単。
まずjQuery本体と上記ページの【jquery.center.js(ダウンロード時はテキストファイル)】をページ内に設置。

2つの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のものでも使用可能。

実際に試してみると以下の様な感じになります。

【左右中央】はこれを使う必要はないかもしれませんが、
【上下中央】及び【上下左右中央】はかなり使えそう。

たまに必要になることがある、
ページ(サイト)全体を【上下左右中央】にする場合にも
これがあれば簡単に組み込むことができそうです。

是非、ご活用下さい。。。

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

jQueryでボックスを【上下左右中央】自由に配置

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR