̃Gg[͂ĂȃubN}[Nɒlj

jQuery :: フォームの input要素 を整列させる



jqueryで、フォームの input要素 を整列させます。

  • <table>タグを使わずに、きれいなレイアウトが実現できます。


<script type="text/javascript" src="/path/to/jquery.js"></script>
<script type="text/javascript">
    $(function(){
        var max = 0;
        $("span.label").each(function(){
            if ($(this).width() > max) max = $(this).width();
        });
        // ラベル左寄せ
        $("span.label").width(max).css({"float":"left", "clear":"both", "padding":"3px 0px 0px 0px"});
 
        // ラベル右寄せ
        //$("span.label").width(max).css({"float":"left", "clear":"both", "text-align":"right", "padding":"3px 0px 0px 0px"});
    });
</script>
 
<p><span class="label">氏名&nbsp;</span><input type="text" name="name" size="35"></p>
<p><span class="label">住所&nbsp;</span><input type="text" name="addr" size="35"></p>
<p><span class="label">E-mail&nbsp;</span><input type="text" name="email" size="35"></p>
  • ラベルの最大横幅を計算して、よしなに調整してくれます。


デモ

適用前

氏名 

住所 

E-mail 


ラベル左寄せ 適用

氏名 

住所 

E-mail 


ラベル右寄せ 適用

氏名 

住所 

E-mail 









コメント (ご自由にお書きください)

Enter your comment
 
programming/javascript/jquery/marshal_input_elements.txt