0

jqueryUIを使用して簡単なダイアログフォームを作成します。

HTMLコード：

<div id="newarticle-form" title="Cr&eacute;ation nouvel article">
    <p class="validateTips">Tous les champs sont requis.</p>

    <form>
    <fieldset>
        <p><label for="validite" class="label-class">Date de validit&eacute;</label>
        <input type="text" name="validite" id="validite" size="10" maxlength="10" class="text input-class" /></p>
        <label for="libelle" class="label-class">Libell&eacute;</label>
        <input type="text" name="libelle" id="libelle" size="50" maxlength="100" class="text input-class" />
        <label for="email" class="label-class">Description</label>
        <input type="text" name="description" id="description" value="" size="50" maxlength="250" class="text input-class" />
        <label for="pu" class="label-class">Prix unitaire</label>
        <input type="text" name="pu" id="pu" value="" size="10" maxlength="10" class="text input-class" />
    </fieldset>
    </form>
</div>

そして、javascript / jqueryコード：

$(function() {  
    $( "#newarticle-form" ).dialog({
        autoOpen: false,
        height: 400,
        width: 800,
        modal: true,
        resizable:false,
        buttons: {
            "Ajouter l'article": function() {
                var bValid = true;
                allFields.removeClass( "ui-state-error" );
            },

            "Fermer": function() {
                $( this ).dialog( "close" );
            }
        },

        close: function() {
            allFields.val( "" ).removeClass( "ui-state-error" );
        },
    });

    $( "#New" )
        .click(function() {
            $( "#newarticle-form" ).dialog( "open" );
    });

});

いくつかの便利なCSS：

.label-class {
    display: block;
    width: 150px;
    float: left;
    text-align: right;
    padding-right: 10px;
}

.input-class {
    float: left;
    margin-bottom: 10px;
}

すべて正常に動作します...しかし、フィールドは完全にまとまりがありません。

正しく配置するには、各フィールドにダイアログボックスの幅とほぼ同じサイズの合計サイズを指定する必要があります。したがって、5文字の長さのフィールドを最大のフィールド（50文字）に伸ばす必要があります。すべてが適切に配置されていますが、見た目はかなり醜いです。

私に何ができる ？

4

1 に答える 1

1

clear:left;あなたに追加.label-class

これにより、ラベルが正しく配置されます。

于 2012-12-17T18:20:08.040 に答える