0

jqueryモーダルダイアログでhtmlフォームを表示したいボタンがいくつかあります:

<button class="add1">Add1</button>
<button class="add2">Add2</button>


<div id="form1">
<form id='AddForm1' name='' method='post' action='<?php echo htmlspecialchars($_SERVER['REQUEST_URI']); ?>'>
    <label for="Name">Name:&nbsp;</label>
    <input id="Name" name="camera_name" size="24" maxlength="36" value="Enter label for camera" onclick="this.select()" />
    <label for='Quality'>Quality:&nbsp;</label>
    <select id='Quality' name='quality'>
        <option value='HIGH' selected='selected'>High</option>
        <option value='MEDIUM'>Medium</option>
        <option value='LOW'>Low</option>
    </select>
    <label for='Status'>Status:&nbsp;</label>
    <select id='Status' name='status'>
        <option value='ENABLED' selected='selected'>On</option>
        <option value='DISABLED'>Off</option>
    </select>
    <label for='EmailNotice'>Email notice:&nbsp;</label>
    <select id='EmailNotice' name='email_notice'>
        <option value='ENABLED' selected='selected'>On</option>
        <option value='DISABLED'>Off</option>
    </select>
    <label for='Sensitivity'>Sensitivity:&nbsp;</label>
       <select id='Sensitivity' name='sensitivity'>
        <option value='HIGH'>High</option>
        <option value='AVERAGE' selected='selected'>Average</option>
        <option value='LOW'>Low</option>
    </select>
    <input type='hidden' name='type' value='TYPE1' />
    <button type='submit' class='submitme' name='add' value='Add'>Add</button>
    <button type='button' class='cancel_changes' name='cancel_changes' value='Cancel'>Cancel</button>
</form>
</div>

これで、名前、品質、ステータス、電子メール通知などの共通項目を含む 2 番目のフォームができましたが、選択したボタンによっていくつかの項目が異なります。

<div id="form2">
<form id='AddForm2' name='' method='post' action='<?php echo htmlspecialchars($_SERVER['REQUEST_URI']); ?>'>
    <label for="Name">Name:&nbsp;</label>
    <input id="Name" name="camera_name" size="24" maxlength="36" value="Enter label for camera" onclick="this.select()" />
    <label for='Quality'>Quality:&nbsp;</label>
    <select id='Quality' name='quality'>
        <option value='HIGH' selected='selected'>High</option>
        <option value='MEDIUM'>Medium</option>
        <option value='LOW'>Low</option>
    </select>
    <label for='Status'>Status:&nbsp;</label>
    <select id='Status' name='status'>
        <option value='ENABLED' selected='selected'>On</option>
        <option value='DISABLED'>Off</option>
    </select>
    <label for='EmailNotice'>Email notice:&nbsp;</label>
    <select id='EmailNotice' name='email_notice'>
        <option value='ENABLED' selected='selected'>On</option>
        <option value='DISABLED'>Off</option>
    </select>
    <label for='UserName'>User name:&nbsp;</label>
       <input id='UserName' size='14' maxlength='16' name='add_user' value="Enter username" onfocus="if(this.value=='Enter username') this.value='';" />
    <label for='Pass'>Password:&nbsp;</label>
    <input type='password' size='12' maxlength='16' id='Pass' name='add_pass' value='' />
        <label for='IP'>Enter IP:&nbsp;</label>
        <input id='IP' name='add_ip' size='10' value="Enter IP" onfocus="if(this.value=='Enter IP') this.value='';" />
        <label for='Port'>Enter port:&nbsp;</label>
        <input id='Port' name='add_port' size='12' maxlength='6' value="Enter Port" onfocus="if(this.value=='Enter Port') this.value='';" />
    <input type='hidden' name='type' value='TYPE2' />
    <button type='submit' class='submit' name='add' value='Add'>Add</button>
    <button type='button' class='cancel_changes' name='cancel_changes' value='Cancel'>Cancel</button>
</form>
</div>

クリックしたボタンに応じて、jquery ダイアログが開きます。

var $dialog1 = $('#form1').dialog({
    modal:true,
    autoOpen: false,
    resizable:false,
    width: 625
}); //init dialog

var $dialog2 = $('#form2').dialog({
    modal:true,
    autoOpen: false,
    resizable:false,
    width: 625
}); //init dialog

//events
$('.add1').click(function(e) {
    $dialog1.dialog('open');
});

$('.add2').click(function(e) {
    $dialog1.dialog('open');
});

$(".cancel_changes").click(function() {
    $dialog1.dialog('close');
    $dialog2.dialog('close');
});

$(".submit_camera").click(function() {
    $("#AddForm1").validate({
    //all validation stuff
});

最後に私の質問に、これにより適切なフォームでダイアログが開きますが、ここで多くのものを複製し始めました。送信の検証にたどり着くと、重複の量に夢中になり始めます。同じ名前の ID があるため、フォームをクリーンアップする必要があります。すべてを複製するよりも良い方法が必要だと考えています。どういうわけか1つのフォームしか持っていないのでしょうか？

4

1 に答える 1

0

プラグインのオプション オブジェクトを作成する場合、コード内で同じオブジェクトを再度複製する代わりに、既存のオブジェクトを変数としてプラグインに渡すこともできます。

フォームの場合、すべての重複ルールを含む 1 つのオブジェクトを作成し、各フォームに固有のルールでそのオブジェクトを拡張できます。

この場合、コードの大幅な節約にはなりませんが、要素にデータ属性を追加すると、コードの削減にも役立ちます。一般に、同じスタイルやadd1, add2vsのような要素の使用には一意のクラスを使用しない方がよいでしょうadd_btn。次に、コード内の CSS セレクターを使用すると、多数の要素を 1 つのセレクターに集約するのがはるかに簡単になります。

ID を気にする代わりにトラバース手法を使用することで、コードを複雑にしたり複製したりすることは非常に役立ちます。

単純化した html mod-common クラスとデータ属性:

  <button class="add1 add_btn" data-form_num="1">Add1</button>

上記の注記に従って合理化するためのさまざまな方法を組み込んだいくつかの JS 簡素化:

/* store dialog options for numerous dialogs*/
var dialogOpts={
    modal:true,
    autoOpen: false,
    resizable:false,
    width: 625
}
/* combine selectors for dialogs - one common class would simplify further*/
$('#form1,#form2 ').dialog(dialogOpts); //init dialog


/* combine selectors by using common class*/
$('.add_btn').click(function(e) {
        /* use attributes to determine which to open */                      
    $('#form'+ $(this).data('form_num') ).dialog('open');
});



$(".cancel_changes").click(function() {
    /* tarverse rather than worry about specific ID's*/                             
    $(this).closest('form').parent().dialog('close');   
});


/*  rules for all forms */
var all_forms_rules={
    'camera_name': 'required',
    'email_notice': 'required'  
}

var form_1_rules={
    'sensitivity': 'required'   
}
/* extend form_1_rules by merging "rules" */
form_1_rules= $.extend({}, form_1_rules,all_forms_rules)

$(".submit_camera").click(function() {
    $("#AddForm1").validate({
            /* pass rules object as variable */             
          rules: form_1_rules

    })
});
于 2012-06-25T01:07:13.020 に答える