私はjQueryを使って、再利用可能な「確認」ダイアログを実装する方法を探していますjQueryの確認ダイアログ

Question

に...

これは、ダイアログボックスを開くには、MyAppのクラスからの一部です：別で

/** 
* @param text string Message to display 
*/ 
getConfirmationDialog: function(text) { 
    MyApp.confirmDialog = $('<div><p>' + text + '</p></div>'); 
    MyApp.confirmDialog 
    .dialog({ 
     modal: true, 
     autoOpen: false, 
     title: 'Please confirm', 
     width: 300, 
     height: 180, 
     buttons: { 
      'OK': function() { 
       return true; 
      }, 
      Cancel: function() { 
       $(this).dialog('close'); 
       return false; 
      } 
     } 
    }); 

    MyApp.confirmDialog.dialog('open'); 
}, 

私はこうします：

/** 
* Clear system cache 
* 
* @param url string Backend URL 
*/ 
clearCache: function(url) { 

    dialog = MyApp.getConfirmationDialog('Clear cache?'); 

    //dialog returns true.. 
    if (dialog) { 
     MyApp.admin.dashboard.doClearCache(); 
    } 

}, 

しかし、私はこれを "正しい"方法で行うことは考えていません。ダイアログは値を返すことはできませんか？

Answer 1

jQuery UIでは、ダイアログボタンのイベントを変更するための優れた方法はありません。

私はpubsubパターン、小さなpubsubプラグインをCowboyba hereまたはphiggins effort hereから使用します。 jquery UI getterとsetterを使用してボタンやクリックイベントを変更しようとするよりもクリーンで、大きなアプリを作成すると他の多くの場所で役立ちます。

[OK]ボタンをクリックしてイベントを公開し、他のハンドラを購読および登録解除してイベントを聞くことができます。

Quick Demoここに機能性を示します。

Answer 2

私はあなたが言っていることを得ると思います。私のjsfiddle attemptを見て、それがあなたを助けるかどうかを見てください。私はあなたがしようとしていることをやっていると思う。

Answer 3

1. 確認クラスを作成します。

   //以下は、確認クラススケルトン

   function ConfirmDialog() { 
        this.showMessage = function(message, callback, argument) { 
   
         var $dialog = $('<div></div>') 
          .html(message) 
          .dialog({ 
           modal: true, 
           closeOnEscape: true, 
           buttons: { 
            Yes: function() { 
             if (callback && typeof(callback) === "function") { 
              if (argument == 'undefined') { 
               callback(); 
              } else { 
               callback(argument); 
              } 
              } 
   
             $(this).dialog("close"); 
             }, 
   
             No: function() { 
              $(this).dialog("close"); 
             } 
            } 
           }); 
          $dialog.dialog("open"); 
         } 
        } 
   

2. は.jspという

   CONFIRM_DIALOG = new ConfirmDialog(); 
   

3. タイプconfirmDialogと場所のオブジェクトを作成しているが1つのPARAMとコールバックメッセージを作成します。

   function saved(what) { 
       alert("Saved: " + what);   
   } 
   

4. どこでも必要な場所で呼び出してください。

   CONFIRM_DIALOG.showMessage("Do you wish to marry?", saved, "Life"); 
   

仕事を！

Answer 4

Jqueryで確認ボックスを正常に実装しました。 （jquery-ui-1.8.16.custom.css、jquery-1.6.2.js、jquery-ui-1.8.16.custom.min）を試す前に、コードにJqueryライブラリとcssが含まれていることを確認してください。 js）。 JAVASCRIPT確認ボックスとこのBOXの主な相違点は、DIVを使用して作成したものですか？JAVASCRIPTの確認はユーザー入力後に行われます。次の行は実行されません。ここでYESを実行する必要があります。 NO BLOCKない - ** コードの次の行showConfirm AFTER（）即時*を実行するように注意して

/** add this div to your html 

*/

var $confirm; 
var callBack; 
var iconStyle = '<span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 50px 0;"></span>'; 
var messageStyleStart = '<span align="center" style="font-family:arial, verdana, sans-serif;font-size:9.3pt;">'; 
var messageStyleEnd = '</span>'; 


$(document).ready(function(){ 
    $('#confirmDialog').dialog({ 
      autoOpen: false, 
      modal: true 
    }); 


    //jquery confirm box -- the general alert box 
    $confirm = $('<div style="vertical-align:middle;"></div>') 
    .html('This Message will be replaced!') 
    .dialog({ 
     autoOpen: false, 
     modal: true, 
     position: 'top', 
     height:300, 
     width: 460, 
     modal: true, 
     buttons: { 
      Ok : function() { 
       $(this).dialog("close"); 
       if(null != callBack) 
        callBack.success(); 
      }, 
      Cancel: function() { 
       $(this).dialog("close"); 
       if(null != callBack) 
        callBack.fail(); 
      } 
     } 
    }); 

}); 

    function showConfirm(message,callBackMe,title){ 
    callBack = null; 
    $confirm.html(""); // work around 
    $confirm.html(iconStyle + messageStyleStart +message + messageStyleEnd); 
    if(title =='undefined'|| null ==title) 
     $confirm.dialog("option", "title", "Please confirm"); 
    else 
     $confirm.dialog("option", "title", title); 
    var val = $confirm.dialog('open'); 
    callBack = callBackMe; 
    // prevent the default action 
    return true; 
} 

    // Now for calling the function 
// create a Javascript/jSOn callback object 

var callMeBack = { 
        success: function() 
          { // call your yes function here         
           clickedYes(); 
           return; 
          }, 
        fail: function(){ 
           // call your 'no' function here 
           clickedNo(); 
           return ; 
          } 
       }; 


    showConfirm("Do you want to Exit ?<br/>"+ 
        ,callMeBack1,"Please Answer"); 

Answer 5

コードベロwはこの問題に対する私の解決策です。私は、関数内で使用状況を文書化していないが、ここでそれを強調します：

$.ConfirmDialog('Do you want to continue?', 'Continue Title', function() { alert('yes'); }, function() { alert('no'); }, null); 

必要な特別な設定を、ちょうどあなたのページの「ConfirmDialog」コードブロックを（私は私のapp.jsに地雷を置く）が含まれ、シングルラインで呼び出します上記。楽しい！

$.ConfirmDialog = function (message, title, callbackYes, callbackNo, callbackArgument) { 
    /// <summary> 
    ///  Generic confirmation dialog. 
    /// 
    ///  Usage: 
    ///   $.ConfirmDialog('Do you want to continue?', 'Continue Title', function() { alert('yes'); }, function() { alert('no'); }, null); 
    ///   $.ConfirmDialog('Do you want to continue?', 'Continue Title', function(arg) { alert('yes, ' + arg); }, function(arg) { alert('no, ' + arg); }, 'please'); 
    ///</summary> 
    ///<param name="message" type="String"> 
    ///  The string message to display in the dialog. 
    ///</param> 
    ///<param name="title" type="String"> 
    ///  The string title to display in the top bar of the dialog. 
    ///</param> 
    ///<param name="callbackYes" type="Function"> 
    ///  The callback function when response is yes. 
    ///</param> 
    ///<param name="callbackNo" type="Function"> 
    ///  The callback function when response is no. 
    ///</param> 
    ///<param name="callbackNo" type="Object"> 
    ///  Optional parameter that is passed to either callback function. 
    ///</param> 

    if ($("#modalConfirmDialog").length == 0) 
     $('body').append('<div id="modalConfirmDialog"></div>'); 

    var dlg = $("#modalConfirmDialog") 
     .html(message) 
     .dialog({ 
      autoOpen: false, // set this to false so we can manually open it 
      dialogClass: "confirmScreenWindow", 
      closeOnEscape: true, 
      draggable: false, 
      width: 460, 
      minHeight: 50, 
      modal: true, 
      resizable: false, 
      title: title, 
      buttons: { 
       Yes: function() { 
        if (callbackYes && typeof (callbackYes) === "function") { 
         if (callbackArgument == null) { 
          callbackYes(); 
         } else { 
          callbackYes(callbackArgument); 
         } 
        } 

        $(this).dialog("close"); 
       }, 

       No: function() { 
        if (callbackNo && typeof (callbackNo) === "function") { 
         if (callbackArgument == null) { 
          callbackNo(); 
         } else { 
          callbackNo(callbackArgument); 
         } 
        } 

        $(this).dialog("close"); 
       } 
      } 
     }); 
    dlg.dialog("open"); 
}; 

Answer 6

確認ボタンの上のビナイの回答を参照してください。私はそれを再利用して、通常の目的のためのokボタンと確認のためのok nを持つ再利用可能な単純なダイアログを作成しました。カスタムタイトルとコンテンツをオンザフライで設定することもできます。

<div id="yeah" title="Alert"> 
    <p id="yeah_msg">&nbsp;</p> 
</div> 

<button id="click_me">Show it</button> 

<script type="text/javascript"> 
    function dlg(msg, callback, title){ 
     if(callback == undefined){ 
      callback = null; 
     } 
     if(title == undefined){ 
      title = 'Alert'; 
     } 

     $("#yeah_msg").html(msg); 
     $("#yeah").dialog('option', 'title', title); 

     if(callback){ 
      $("#yeah").dialog('option', 'buttons', { 
       "Ok": function() { 
        $(this).dialog("close"); 
        if(null != callback) callback.success(); 
       }, 
       'Cancel': function(){ 
        $(this).dialog("close"); 
        if(null != callback) callback.fail(); 
       } 
      }); 
     }else{ 
      $("#yeah").dialog('option', 'buttons', { 
       "Ok": function() { 
        $(this).dialog("close"); 
       } 
      }); 
     } 

     $("#yeah").dialog("open"); 
    } 

    $(document).ready(function(){ 
     //create dialog 
     $("#yeah").dialog({ 
      autoOpen: false, 
      modal: true, 
      show: 'blind', 
      hide: 'explode', 
      resizable: false 
     }); 

     //show dialog 
     $('#click_me').click(function(){ 
      dlg('title', {success: function(){ console.log('yipee'); }, fail: function(){ console.log('nopee'); } }); 
     }); 
    }); 
</script> 

Answer 7

なぜこのように複雑ですか？ここでは簡単な方法です

$("#myButton").click(function(event) { 
    var cont = confirm('Continue?'); 
    if(cont) { 
     // do stuff here if OK was clicked 
     return true; 
    } 
    // If cancel was clicked button execution will be halted. 
    event.preventDefault(); 
}