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

ここではメニューボタンの例を1つだけ示しましたが、要点はわかります。

誰かがこれを解決する方法を教えてもらえますか？

乾杯

更新：以下の回答に関連するコンテキストメニューのコードは次のとおりです。

<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ます）

itemselect= +対応するダイアログ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-Ui1.8.11からjQuery-ui1.9.0に更新することだけで、すべての問題が解消されました。

ご協力いただきありがとうございます。

于 2012-10-24T14:13:55.947 に答える