前の記事 ≪:いい感じの手作り感が出せる紙のテクスチャ素材色々
次の記事 ≫:光輝く綺麗な地球儀アイコンを作成する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 では出来ないことが案外簡単に出来たりします。

関連エントリ

関連の記事検索:jQuery, CSS, JavaScript, フォーム, Webデザイン, チュートリアル
スポンサード リンク

By.KJ : 2009年03月26日 10:01 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)