Question

我有几个按钮，我想在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>

现在我有第二个表单，其中包含名称，质量，状态和电子邮件通知等常见项目，但根据所选按钮的不同，有些情况会有所不同。

<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。我认为必须有比复制一切更好的方法。也许某种形式只有一种形式？

Answer 1

为插件创建选项对象时，您还可以将现有对象作为变量传递给插件，而不是在代码中再次复制相同的对象。

对于表单，您可以创建一个包含所有重复规则的对象，然后使用特定于每个表单的规则扩展该对象。

虽然在这种情况下代码节省不多，但向元素添加数据属性也有助于减少代码。通常，最好不要对同一样式使用唯一类，并使用add1, add2 vs add_btn等元素。然后代码中的css选择器更容易在一个选择器中聚合多个元素。

使用遍历技术而不是担心ID，因此过度复杂或复制代码非常有帮助

简单的html mod-公共类和数据属性：

  <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

    })
});

重复的html表单打开jquery对话框

1 个答案: