jQuery UI模式對話框：按鈕圖標不出現

我的模式對話框完美地工作（意味着我可以調整每個選項），除了按鈕圖標選項沒有效果。這裏是我用來生成對話框的代碼：jQuery UI模式對話框：按鈕圖標不出現

$('#alert_div') 
    .attr("title", "Delete all instances?") 
    .text("Are you sure you want to delete all instances of this event between the specificed dates? This cannot be undone.") 
    .dialog({ 
     modal: true, 
     draggable: false, 
     position: { my: "top", at: "center", of: window }, 
     buttons: [ 
      { 
       text: "No", 
       icons: { primary: "ui-icon-check" }, 
       click: function() { 
        $(this).dialog('close'); 
        console.log('Clicked no.'); 
       } 
      }, 
      { 
       text: "Yes", 
       click: function() { 
        $(this).dialog('close'); 
        console.log('Clicked yes'); 
       } 
      } 
     ] 
    });

我已經看過了我能找到的所有相關堆棧溢出問題 - 例如， this one。除了將元素附加到打開的按鈕上，我不知道如何解決這個問題。當我在文檔的其他地方創建元素並給他們適當的課程時，圖標顯示正確。

這裏的HTML打開的對話框時，jQuery的生成按鈕：

<div class="ui-dialog-buttonset"><button type="button" icons="[object Object]" class="ui-button ui-corner-all ui-widget">OK</button></div>

我猜想應該有比其他東西「的翻譯：中的圖標屬性。這是爲什麼發生？我正在使用jQuery UI v。1.12.0和jQuery v。3.0.0。，並且我沒有使用Bootstrap。

來源

2016-07-24 Harpo Jaeger

更新：這裏是別人的報告幾乎完全從一個而jQuery的論壇同樣的問題後面：HTTPS：/ /forum.jquery.com/topic/adding-icons-to-dialog-buttons-and-setting-focus –

你檢查過瀏覽器的控制檯是否有錯誤？你有鏈接，我們可以看到，或者你可以創建一個jsFiddle或堆棧片段？ – j08691

在控制檯上沒有錯誤，但我會做一個jsFiddle，謝謝。支持。 –

jQuery UI的1.12推出了new syntax for button icons，我已確認修復了這個問題（見this jsFiddle）。目前，它不接受已棄用的選項;一個PR has been submitted來解決這個問題。詳情請參閱my bug report。下面的代碼工作與jQuery UI 1.12和jQuery 3.1.0：

$("#alert_div") 
.attr("title", "Error") 
.text("Please choose a calendar and enter both start and end dates.") 
.dialog({ 
    modal: true, 
    draggable: false, 
    resizable: false, 
    position: { my: "top", at: "top", of: window }, 
    buttons: [{ 
     text: "OK", 
     icon: "ui-icon-check", 
     click: function() { 
      $(this).dialog("close"); 
     } 
    }] 
});

來源

2016-07-25 12:33:56

顯然，問題是jquery-ui 1.12.0中的一個錯誤。如果在你的小提琴中用1.11.4代替1.12.0，問題就會消失。

我在自己的測試環境中運行了你的代碼（上面發佈的代碼，而不是你的小提琴中的代碼），並且一切正常。（我在五月份下載了1.11.4，當時它是最新的穩定版本。）當調用dialog()時，似乎button()方法沒有被調用。正如您正確猜測的那樣，icons元素中不應該有object Object。我的按鈕代碼如下所示：

<button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icons" role="button"> 
    <span class="ui-button-icon-primary ui-icon ui-icon-check"></span> 
    <span class="ui-button-text">No</span> 
    <span class="ui-button-icon-secondary ui-icon ui-icon-circle-check"></span> 
</button>

看起來也許這是jQuery-UI 1.12.0中的「真正的真正的bug」。 :)

編輯：看起來實際上這是jQuery-UI 1.12.0中的「真正的真正功能」，以及一系列其他更改，其中一些更改會破壞與以前版本的兼容性。請參閱Harpo的「新語法」鏈接。任何使用菜單（特別是菜單，舊菜單，舊菜單，菜單，單選按鈕或複選框等）的用戶都需要閱讀。

至於在按鈕上獲取兩個圖標，仍然可以使用新語法，但不能使用dialog()方法中的buttons參數進行操作。相反，你必須按照標準的方式來做按鈕，爲圖標添加跨度。（升級文檔表示，您可以將第二個圖標跨度放在標記中，並使用icon參數表示曾經是主要圖標的參數，但我無法在此情況下使其工作。）因此，爲標記：

<div id="alert_div"> 
    <button id="okButton"> 
     <span class="ui-icon ui-icon-check"></span> 
     Ok 
     <span class="ui-icon ui-icon-circle-check"></span> 
    </button> 
</div>

然後：

$('#alert_div').dialog({ 
    open: function(e, ui) { 
     $('#okButton') 
     .button() 
     .on('click', function() { 
      $(this).dialog('close'); 
     }); 
    } 
});

來源

2016-07-24 21:45:20 BobRodes

謝謝！我認爲我應該能夠降級到1.11.4而不會破壞其他事情。所以現在的問題是：我該如何報告這個錯誤/幫助補丁呢？我只是打開一個新的GH問題（https://github.com/jquery/api.jqueryui.com/issues）還是我需要以某種方式使用jQuery的Trac？ –

我不知道，但谷歌搜索「jQuery的用戶界面報告錯誤」揭示此頁：https：//bugs.jqueryui.com/。我會從那裏開始。 – BobRodes

好的，我會這樣做，如果他們也問我，就提交GH問題。再次感謝你的幫助。 –

請看看這是例子，我們可以做任何事情來呢..

使用樣式進行更改了進去......

謝謝... :)

來源

2016-07-25 14:14:20

這不回答這個問題。 –

jQuery UI模式對話框：按鈕圖標不出現

回答

相關問題