2010-10-27 96 views
15

我無法將按鈕添加到此jQuery UI對話框。如果可能請給我一個例子。 謝謝。將按鈕添加到jQuery UI對話框

<script type="text/javascript"> 
    $(document).ready(function() { 
     //setup new person dialog 
     $('#dialog2').dialog({ 
      autoResize: true, 
      show: "clip", 
      hide: "clip", 
      height: 'auto', 
      width: '1000', 
      autoOpen: false, 
      modal: true, 
      position: 'top', 
      draggable: false, 
      title: "انتخاب درخواست", 
      open: function (type, data) { 
       $(this).parent().appendTo("form"); 
      } 
     }); 

     $('#viewfaktor').dialog({ 
      autoResize: true, 
      show: "clip", 
      hide: "clip", 
      height: 'auto', 
      width: '1000', 
      autoOpen: false, 
      modal: true, 
      position: 'top', 
      draggable: true, 
      title: "مشاهده صورت ریز", 
      open: function (type, data) { 
       $(this).parent().appendTo("form"); 
      } 
     }); 


     $('#msgBox').dialog({ 


      autoResize: true, 
      show: "clip", 
      hide: "clip", 
      height: 'auto', 
      width: 'auto', 
      autoOpen: false, 
      modal: true, 
      position: 'center', 
      draggable: false, 



      open: function (type, data) { 
       $(this).parent().appendTo("form"); 
      } 


     }); 



    }); 

    function showDialog(id) { 
     $('#' + id).dialog("open"); 
    } 

    function closeDialog(id) { 
     $('#' + id).dialog("destroy"); 
    } 



</script> 

回答

23
$('#msgBox').dialog({ 
    autoResize: true, 
    show: "clip", 
    hide: "clip", 
    height: 'auto', 
    width: 'auto', 
    autoOpen: false, 
    modal: true, 
    position: 'center', 
    draggable: false, 

    open: function (type, data) { 
     $(this).parent().appendTo("form"); 
    }, 

    buttons: { "OK": function() { $(this).dialog("close"); } } 
}); 
+0

,你再看看我的問題。我有錯誤 – Shahin 2010-10-27 09:35:43

+0

我沒有添加你的代碼,但我有語法錯誤! – Shahin 2010-10-27 09:37:40

+2

啊。我省略了一個逗號。我更新了這個例子。 – 2010-10-27 09:42:21

6

Here is an example

添加到您的函數:

buttons: { 
       OK: function() { //submit 
        $(this).dialog("close"); 
       }, 
       Cancel: function() { //cancel 
        $(this).dialog("close"); 
       } 
      } 

所以,你得到

$('#msgBox').dialog({ 


       autoResize: true, 
       show: "clip", 
       hide: "clip", 
       height: 'auto', 
       width: 'auto', 
       autoOpen: false, 
       modal: true, 
       position: 'center', 
       draggable: false, 
       buttons: { 
       OK: function() { //ok 
        $(this).dialog("close"); 
       }, 
       Cancel: function() { //cancel 
        $(this).dialog("close"); 
       } 
      } 
       open: function (type, data) { 
        $(this).parent().appendTo("form"); 
       } 


      }); 
24

有時要動態地添加按鈕後的對話框創建也是。見我answer的問題Add a button to a dialog box dynamically

var mydialog = ... result of jqueryui .dialog() 
var buttons = mydialog.dialog("option", "buttons"); // getter 
$.extend(buttons, { foo: function() { alert('foo'); } }); 
mydialog.dialog("option", "buttons", buttons); // setter 
+0

你將如何添加一個具有特定ID的按鈕? – 2012-01-13 12:22:19

+0

爲什麼你需要按鈕上的ID? – JJS 2012-01-15 16:34:30

+0

還是你的意思是添加一個由ID標識的現有按鈕? – JJS 2012-01-15 16:41:19

10

如果你想將按鈕添加到已經打開,你可以這樣做一個對話框:

var buttonSet = $('#dialog').parent().find('.ui-dialog-buttonset'); 
var newButton = $('<button>My New Button</button>'); 
newButton.button().click(function() { 
    alert('My new button clicked'); 
}); 
buttonSet.append(newButton);