BlockUIとjQueryを使用して効率的にダイアログを作成する

Question

私のアプリケーションで使用される素晴らしいBlockUIプラグイン用の小さなラッパーを作成して、自分のニーズに合ったダイアログを簡単に作成します。

時には私は少しjQueryが遅れていて、愛好家の誰かからこの特定の作業をどのように行うのかを知りたいと思うことがあります。

この関数は、アプリケーションに対してヘッダー、中間およびフッターのカスタムを作成します。オプションで渡されたものを使用してHTMLをさらに埋めます。ダイアログを合成して、BlockUIプラグインに挿入します。

function blockApp(element, options){ 
    var header = jQuery('<div class="modal-header clearfix"><h2></h2><span><a href="#"></a></span></div>'), 
     center = jQuery('<div class="modal-content"></div>'), 
     footer = jQuery('<div class="modal-footer"></div>'); 

    //Compose dialog 
    var opts = jQuery.extend({}, dialogDefaults, options); 
    header.find('h2').html(opts.title); 
    center.html(jQuery(element).html()); 

    var comp = jQuery('<div></div>').append(header).append(center).append(footer); 

    jQuery('#notificationUI').block(jQuery.extend({}, standardBlock, { 
     message: comp, 
    })); 
    jQuery('.blockOverlay').click(function(){ 
     jQuery('#notificationUI').unblock(); 
    });    
} 

私もいない成功して最初に（ラップを使用してみました）とwrapInner（）。

私の質問はどのようにジョンResigはこれを行うでしょう？

Answer 1

これはあなたが探しているものかどうかわかりませんが、最近、BlockUI with/jConfirmという別のjQueryプラグインを使用しました。これはhereからダウンロードできます。 jConfirm（またはjAlertまたはjPrompt）を使用すると、CSS経由でアラートボックスを完全にカスタマイズできます。私のシナリオはおそらくあなたとは異なるものですが、私のアプリでは、ユーザーはドキュメントを変更することができます。彼らが私の「キャンセル」ボタンをクリックしてすべての変更を消去することを選択した場合、BlockUIを使用してjConfirmアラートが表示され、そこからインターフェイスが消えます。それはかなり滑らかに見えます。 jQueryを使用して「キャンセル」ボタンのクリックイベントをキャッチして、次のような操作を行うことができます：

$('.cancel').click(function() { 

       $.alerts.dialogClass = 'my_css'; 

       $.blockUI({ message: null }); 

       jConfirm('Are you sure you want to cancel?', 'Cancel Changes?', 

       function (r) { 
        if (r.toString() == 'false') { 
         $.unblockUI(); 
        } else { 
         //close window 
        } 
       }); 

       return false; 

      });