如何將jquery ui對話框按鈕變成複選框？

Question

所以我是Jquery和Jquery UI的新手。我有我的對話框工作，但我正在尋找的一件事是如何將對話框中的按鈕之一更改爲複選框。我的場景： 用戶將發佈信息，如新聞等。但我想讓他們有能力不向公衆發佈。草稿，如果你願意。所以該複選框就在「確定」和「取消」按鈕旁邊。

我已經嘗試在對話框函數之前創建一個數組，並將它放在那裏，但我似乎無法找到一種方法來聲明一個按鈕作爲複選框。

預先感謝您所有的幫助，

編輯：下面是一些代碼，我都試過了。我的問題是現在，我嘗試設置按鈕窗格的樣式，它消失。

var dialog = $('<div title="Create News Post">' + 
        '<form method="POST" action="index.php?controller=posts&action=add">' + 
         '<div id="tabs" class="form">' + 
          '<ul>' + 
           '<li><a href="#tabs-1">English</a></li>' + 
           '<li><a href="#tabs-2">French</a></li>' + 
          '</ul>' + 
          '<div id="tabs-1">' + 
           '<label class="first">' + 
            '<span>English Title:</span>' + 
            '<input type="text" name="en_title" />' + 
           '</label>' + 
           '<label>' + 
            '<span>English Text:</span>' + 
            '<textarea name="en_text">' + 
            '</textarea>' + 
           '</label>' + 
          '</div>' + 
          '<div id="tabs-2">' + 
           '<label class="first">' + 
            '<span>French Title:</span>' + 
            '<input type="text" name="fr_title" />' + 
           '</label>' + 
           '<label>' + 
            '<span>French Text:</span>' + 
            '<textarea name="fr_text">' + 
            '</textarea>' + 
           '</label>' + 
          '</div>' + 
         '</div>' + 
         '<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">' + 
          '<div class="ui-dialog-buttonset">' + 
           '<input type="checkbox" id="isDraft" /><label for="isDraft">Publish?</label>' + 
           '<button id="btnSave" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" type="button" role="button" aria-disabled="false">' + 
            '<span class="ui-button-text">Save</span>' + 
           '</button>' + 
           '<button id="btnCancel" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" type="button" role="button" aria-disabled="false">' + 
            '<span class="ui-button-text">Cancel</span>' + 
           '</button>' + 
          '</div>' + 
         '</div>' + 
        '</form>' + 
       '</div>' 
      ) 
      .dialog({autoOpen: false,closeOnEscape: true,draggable:false,modal:true,resizable: false,width: 600}); 

Answer 1

1）您可以添加按鈕和複選框到一個創建爲您生成按鈕對話框，而不是使用對話框的屬性HTML。一旦你創建的對話框中你可以使用對話框對象中選擇設置處理 ：

dialog = $('<div>' + 
      '...' + 
      '<input type="submit" id="btnCancel" value="Ok" />' + 
      '<button id="btnCancel">Cancel</button>' + 
      '<input type="checkbox" id="chkIsDraft" name="chkIsDraft" value="Is Draft" />' + 
      '</div>') 
      .dialog(autoOpen: false,closeOnEscape: true,draggable:false,modal:true,resizable: false}); 

$('#btnCancel', dialog).click(function(){ 
//... 
}); 

dialog.dialog('open'); 

編輯：沒有閱讀jQuery UI的代碼似乎與像「UI的對話框 - 類屬性的div中buttonpane'將從對話框html中刪除。所以如果你選擇這種方法 你必須避免重用jQuery UI對話框類。

2）其他方法可能是通過對話框的屬性添加第三個按鈕和替代第三個按鈕的HTML爲您複選框：

//Again use the dialog object as the scope for the selector. 
$('.ui-dialog-buttonpane button:eq(1)',dialog.parent()).replaceWith('<input type="checkbox" id="chkIsDraft" name="chkIsDraft">Is Draft</input>'); 

編輯：通過正確對話框返回的對象是指DOM元素用於創建對話框而不是使對話框工作的所有機器。這就是你 將需要使用dialog.parent（）作爲上述選擇器的範圍。

3）第三個選項：單擊此按鈕時，使用常規的按鈕提供了相同的選中/清除語義，一個複選框（我的意思是在視覺上，手藝一些CSS），只要在肯定有些隱藏字段對話框標記（我想在你按下確定後會發佈的表單）進行更新以反映檢查狀態。

$("<div>...</div>").dialog({ 
    modal: true /.. 
    }, 
    buttons: { 
     //... 
     'IsDraft': function() { 
      $(this).toggleClass('checked') 
      $("input[name='is_draft']",$(this).parent('form')).val($(this).hasClass('checked')); 
     } 
    } 
}); 

實例（總部設在你的代碼）：

var dialog = $('<div title="Create News Post">' + 
        '<form method="POST" action="index.php?controller=posts&action=add">' + 
         '<div id="tabs" class="form">' + 
          '<ul>' + 
           '<li><a href="#tabs-1">English</a></li>' + 
           '<li><a href="#tabs-2">French</a></li>' + 
          '</ul>' + 
          '<div id="tabs-1">' + 
           '<label class="first">' + 
            '<span>English Title:</span>' + 
            '<input type="text" name="en_title" />' + 
           '</label>' + 
           '<label>' + 
            '<span>English Text:</span>' + 
            '<textarea name="en_text">' + 
            '</textarea>' + 
           '</label>' + 
          '</div>' + 
          '<div id="tabs-2">' + 
           '<label class="first">' + 
            '<span>French Title:</span>' + 
            '<input type="text" name="fr_title" />' + 
           '</label>' + 
           '<label>' + 
            '<span>French Text:</span>' + 
            '<textarea name="fr_text">' + 
            '</textarea>' + 
           '</label>' + 
          '</div>' + 
         '</div>' + 
        '</form>' + 
       '</div>' 
      ) 
      .dialog({autoOpen: false,closeOnEscape: true,draggable:false,modal:true,resizable: false,width: 600,height:400, 
       buttons: { 
        IsDraft: function(){alert('draft');}, 
        Save: function(){alert('saving');}, 
        Cancel: function(){alert('cancel');} 
       } 
      }); 
     //lets do a replacement to get a checkbox in the button pane.  
     $('.ui-dialog-buttonset button:eq(0)',dialog.parent()).replaceWith('<input type="checkbox" id="chkIsDraft" name="chkIsDraft">Is Draft</input>'); 
     dialog.dialog('open'); 

Answer 2

也許它會幫助：看JQuery UI button。它可以用作複選框。您可以在對話框中爲您的目的創建單獨的按鈕。