2

我创建了 4 个 jQuery 对话框，如下所示：

    <div id="addCustomer" title="Add Customer">
    <h2>Add Customer</h2>
    <label>Customer Name: </label><input type="text" name ="customerName" id="addCustomerName"/><br/>
    <input type="button" value="Submit" id="addCustomerBtn" /><br/>
    <a href="#" id="close">Close</a>
</div>
<div id="editCustomer" title="Edit Customer">
    <h2>Edit Customer</h2>
    <label>Customer Name: </label><input type="text" name="editCustomerName" id="editCustomerName"/>
    <input type="button" value="Submit" id="editCustomerbtn"/> <br/>
    <a href="#" id="editClose">Close</a>
</div>
<div id="deleteCustomer" title="Delete Customer">
    <h2>Delete Customer</h2>
    <label>Are you sure you want to delete this customer?</label><br/><br/>
    <input type="button" value="Yes" id="confirmDeleteCustomer"/> <input type="button" value="No" id="cancelDeleteCustomer"/>
</div>
<div id="addDevice" title="Add Device">
    <h2>Add Device</h2>
    <label>Device Id:   </label><input type="text" name="addDeviceId" id="addDeviceId"/><br/><br/>
    <label>Version:     </label><input type="text" name ="addDeviceVersion" id="addDeviceVersion"/><br/>
    <input type="button" value="Submit" id="addDeviceBtn"/> <br/> 
    <a href="#" id="addDeviceClose">Close</a>
</div>

我已将它们设置为在页面开始时隐藏，如下所示：

$("#addCustomer").dialog({
        autoOpen: false,
        draggable: true
    });
    $("#deleteCustomer").dialog({
        autoOpen: false,
        draggable: true
    });
    $("#addDevice").dialog({
        autoOpen: false,
        draggable: true
    });
    $("#editCustomer").dialog({
        autoOpen: false,
        draggable: true
    });

现在我正在尝试从上下文菜单上的一个选项中调用每个选项，如下所示，但是当我尝试时，我选择打开的第一个对话框可以正常打开，但是一旦关闭，就不会再打开对话框了页。

if (e.item.name == "itmAddCustomer") {
        $(function() {
            $("#addCustomer").dialog("open");            
        });            
    }

我在这里只展示了一个菜单按钮的例子，但你明白了要点。

有人可以告诉我如何解决这个问题吗？

干杯

更新：这是与以下答案相关的上下文菜单的代码：

<div id="popupMenu" style="z-index:19998;display:none;">
        <div class="dxm-popupMain dxm-shadow dxm-popup">
            <ul class="dx dxm-noImages dxm-gutter">
                <li class="dxm-item"><div class="dxm-content dxm-hasText">
                    Expand
                </div><b class="dx-clear"></b></li><li class="dxm-spacing"></li><li class="dxm-item"><div class="dxm-content dxm-hasText">
                    Enable
                </div><b class="dx-clear"></b></li><li class="dxm-spacing"></li><li class="dxm-item"><div class="dxm-content dxm-hasText">
                    Add Customer
                </div><b class="dx-clear"></b></li><li class="dxm-spacing"></li><li class="dxm-item"><div class="dxm-content dxm-hasText">
                    Edit Customer
                </div><b class="dx-clear"></b></li><li class="dxm-spacing"></li><li class="dxm-item"><div class="dxm-content dxm-hasText">
                    Delete Customer
                </div><b class="dx-clear"></b></li><li class="dxm-spacing"></li><li class="dxm-item"><div class="dxm-content dxm-hasText">
                    Add Device
                </div><b class="dx-clear"></b></li>
            </ul>
        </div>
    </div>
</div>
4

2 回答 2

4

这是可以满足您需求的东西。SqlFiddle

它们是一些约定（可能会被删除，它只会使代码更短）：

每个对话框 div 都有一个类（因此当值更改.dialog时所有对话框都关闭）select

select 的每个选项值 = item+ 对应的对话框 div 的 id。

我用了一个select，不知道你的是什么

上下文菜单上的选项

HTML部分：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<select id ="actionChooser">
    <option value ="">-choisir-</option>
    <option value="itemaddCustomer">Add</option>
    <option value="itemeditCustomer">Edit</option>
    <option value="itemdeleteCustomer">Delete</option>
    <option value="itemaddDevice">Add device</option>
</select>

<div id="addCustomer" class="dialog" title="Add Customer">
    <h2>Add Customer</h2>
    <label>Customer Name: </label><input type="text" name ="customerName" id="addCustomerName"/><br/>
    <input type="button" value="Submit" id="addCustomerBtn" /><br/>
</div>

<div id="editCustomer"  class="dialog" title="Edit Customer">
    <h2>Edit Customer</h2>
    <label>Customer Name: </label><input type="text" name="editCustomerName" id="editCustomerName"/>
    <input type="button" value="Submit" id="editCustomerbtn"/> <br/>
</div>
<div id="deleteCustomer"  class="dialog" title="Delete Customer">
    <h2>Delete Customer</h2>
    <label>Are you sure you want to delete this customer?</label><br/><br/>
    <input type="button" value="Yes" id="confirmDeleteCustomer"/> <input type="button" value="No" id="cancelDeleteCustomer"/>
</div>
<div id="addDevice"  class="dialog" title="Add Device">
    <h2>Add Device</h2>
    <label>Device Id:   </label><input type="text" name="addDeviceId" id="addDeviceId"/><br/><br/>
    <label>Version:     </label><input type="text" name ="addDeviceVersion" id="addDeviceVersion"/><br/>
    <input type="button" value="Submit" id="addDeviceBtn"/> <br/> 
</div> ​​​​​​​

jQuery部分

$("#actionChooser").change(function(e) {
    $('.dialog').dialog('close');
    var val = '#'+$(this).val().replace('item', '');

    $(val).dialog('open'); 
});

   $("#addCustomer, #deleteCustomer, #addDevice, #editCustomer").dialog({// or just $('.dialog').dialog({
    autoOpen: false,
    draggable: true
});

编辑

使用您给定的 html（我修改了“对话框”部分）：jsFiddle

 <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<div id="popupMenu" style="z-index:19998;">
        <div class="dxm-popupMain dxm-shadow dxm-popup">
            <ul class="dx dxm-noImages dxm-gutter">
                <li class="dxm-item"><div class="dxm-content dxm-hasText">
                    Expand
                </div><b class="dx-clear"></b></li><li class="dxm-spacing"></li><li class="dxm-item"><div class="dxm-content dxm-hasText">
                    Enable
                </div><b class="dx-clear"></b></li><li class="dxm-spacing"></li><li class="dxm-item"><div class="dxm-content dxm-hasText">
                    Add Customer
                </div><b class="dx-clear"></b></li><li class="dxm-spacing"></li><li class="dxm-item"><div class="dxm-content dxm-hasText">
                    Edit Customer
                </div><b class="dx-clear"></b></li><li class="dxm-spacing"></li><li class="dxm-item"><div class="dxm-content dxm-hasText">
                    Delete Customer
                </div><b class="dx-clear"></b></li><li class="dxm-spacing"></li><li class="dxm-item"><div class="dxm-content dxm-hasText">
                    Add Device
                </div><b class="dx-clear"></b></li>
            </ul>
        </div>
    </div>

<hr/>
<div id="addCustomer" class="dialog" title="Add Customer">
    <h2>Add Customer</h2>
    <label>Customer Name: </label><input type="text" name ="customerName" id="addCustomerName"/><br/>
    <input type="button" value="Submit" id="addCustomerBtn" /><br/>

</div>
<div id="editCustomer" class="dialog" title="Edit Customer">
    <h2>Edit Customer</h2>
    <label>Customer Name: </label><input type="text" name="editCustomerName" id="editCustomerName"/>
    <input type="button" value="Submit" id="editCustomerbtn"/> <br/>

</div>
<div id="deleteCustomer" class="dialog" title="Delete Customer">
    <h2>Delete Customer</h2>
    <label>Are you sure you want to delete this customer?</label><br/><br/>
    <input type="button" value="Yes" id="confirmDeleteCustomer"/> <input type="button" value="No" id="cancelDeleteCustomer"/>
</div>
<div id="addDevice" class="dialog" title="Add Device">
    <h2>Add Device</h2>
    <label>Device Id:   </label><input type="text" name="addDeviceId" id="addDeviceId"/><br/><br/>
    <label>Version:     </label><input type="text" name ="addDeviceVersion" id="addDeviceVersion"/><br/>
    <input type="button" value="Submit" id="addDeviceBtn"/> <br/> 

</div>

jQuery 部分

$('div .dxm-content').click(function() {
    $('.dialog').dialog('close');
    var popupText = $.trim($(this).html());
    var dialogId;
    if (popupText.length > 0) {
        switch(popupText) {
            case 'Edit Customer' : dialogId = 'editCustomer';
            break;
            case 'Delete Customer' : dialogId= 'deleteCustomer'; 
            break;
            case 'Add Device' : dialogId = 'addDevice';
            break;
            case 'Add Customer': dialogId = 'addCustomer';
            break;
            default : dialogId='';
            break;
        }
        if (dialogId != '') {
            $('#'+ dialogId).dialog('open');
        }
    }
});

$('.dialog').dialog({
        autoOpen: false,
        draggable: true
    });

​</p>

于 2012-10-24T11:58:25.520 回答
2

事实证明，要解决这个问题，我需要做的就是从 jQuery-Ui 1.8.11 更新到 jQuery-ui 1.9.0，所有问题都消失了。

谢谢你的帮助。

于 2012-10-24T14:13:55.947 回答