我只展示了一个jQuery Dialog。如何让它们全部显示？

时间：2012-10-24 11:37:38

标签： javascript jquery jquery-ui web dialog

我创建了4个jQuery Dialog，如下所示：

    <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");            
        });            
    }

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

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

干杯

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

<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>

2 个答案:

答案 0 :(得分：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 Part 

$('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
    });

答案 1 :(得分：2)

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

感谢您的帮助。

相关问题
最新问题