ダイアログの上部にjqueryuiダイアログ・ボタンをクローズする

Question

私は、ダイアログ・ボックスを閉じるだけでなく、ダイアログ・ボックスのデータに対していくつかのアクションを実行する「保存」ボタンと「キャンセル」ボタンがある大きなダイアログ・ボックスを持っています。

これらのボタンを複製して、ダイアログの上部と下部に表示することはできますか？

私は胞子形成の結果を使ってこれを手動で行うことができました。ダイアログのinitで作成されたボタンを正確に複製できますか？私はボタンがIDの持っていないことを知っている...

ありがとう！

Answer 1

はい、これを行うことができます。 jQueryのスクリプトで使用される正確なセレクタは、あなたのボタンを表示するために使用されるHTML要素に依存するが、ボタンのクローンを作成し、そのイベントハンドラは次のようになります位置していますいくつかのコンテナに追加するには

$('.dialogClass button').clone(true); 

ダイアログの上部にある：

$('.dialogClass button').clone(true).appendTo('.topContainerClass'); 

cloneのためのドキュメントをチェックしてください。

Answer 2

ダイアログウィジェットは、この動作をそのまま使用することはできません。あなた自身で動作をハックすることができますが、新しいjquery-uiリリースにアップグレードすると、動作が中断する可能性があります。ここで私はそれを達成するだろう方法は次のとおりです。この

として

$('#my-dialog').dialog({ 
     buttons: { 
      'hello world': function() { alert('hello world'); }, 
      'good bye': function() { alert('goodbye'); } 
     }, 
     open: function(event, ui) { 
      // for whatever reason, the dialog isn't passed into us as a paramter, discover it. 
      var dialog = $(this).closest('.ui-dialog'); 

      // create a copy of all the buttons and mark it as a clone (for later) 
      var originalButtons = $('.ui-dialog-buttonpane', dialog) 
      var clonedButtons = originalButtons.clone().addClass('clone'); 
      $('.ui-dialog-titlebar', dialog).after(clonedButtons); 

      // cloning doesn't copy over event handlers, so we need to wire up 
      // the click events manually.  
      $('button', clonedButtons).click(function() { 
       var button = $(this);      
       var buttonIndex = $('button', clonedButtons).index(button); 
       $('button:eq(' + buttonIndex + ')', originalButtons).click(); 
      }); 
     } 
    }); 

Answer 3

として単純なjQueryのUIのCSS

.ui-dialog .ui-dialog-buttonpane 
{ 
position: absolute; top: 35px; width: 98%; 
}