jQueryとCSSを使ってフォームのinput要素を楽に整列させる方法:phpspot開発日誌

前の記事 ≪：いい感じの手作り感が出せる紙のテクスチャ素材色々
次の記事 ≫：光輝く綺麗な地球儀アイコンを作成するPhotoshopチュートリアル

jQueryとCSSを使ってフォームのinput要素を楽に整列させる方法

2009年03月26日-

スポンサードリンク

Justify elements using jQuery and CSS

jQueryとCSSを使ってフォームのinput要素を楽に整列させる方法が紹介されております。
何ができるか？というのは次の図を見て頂くのがはやいでしょう。

ビフォア

↓↓↓↓

アフター

これを実現するために、CSSとマークアップによって実現するのが普通ですが、jQueryによってもっとスマートに出来るようですね。

具体的には、次のように、label の中で width がもっとも大きいもののサイズを得て、そのサイズにJavaScriptで調整しちゃうというものです。

$(document).ready(function() {
    var max = 0;
    $("label").each(function(){
        if ($(this).width() > max)
        max = $(this).width();
    });
    $("label").width(max);
});

こういう発想は素晴らしいですね。
JavaScript (jQuery) によって、HTML+CSS では出来ないことが案外簡単に出来たりします。

関連エントリ