Composer efficacement un dialogue en utilisant BlockUI et jQuery

Question

Je crée un petit emballage pour le fantastique plugin BlockUI utilisé dans mon application pour créer facilement des boîtes de dialogue répondant à mes besoins. Parfois, je suis un peu trop attardé et je voudrais savoir de la part des aficionados comment ils pourraient faire cette tâche particulière.

Cette fonction crée une en-tête, un milieu et un pied de page personnalisés pour mon application. Utilise certaines options passées pour compléter le code HTML. Compose le dialogue, puis l'insère dans le plugin 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(); 
    });    
} 

J'ai essayé d'utiliser wrap() et wrapInner() au début sans succès également.

Ma question est Comment John Resig ferait-il?

Answer 1

Vous ne savez pas si c'est ce que vous cherchez, mais j'ai récemment utilisé BlockUI avec un autre plugin jQuery appelé jConfirm que vous pouvez télécharger depuis here. Avec le jConfirm (ou jAlert ou jPrompt) vous pouvez entièrement personnaliser votre boîte d'alerte via CSS. Mon scénario est probablement très différent du vôtre, mais dans mon application, l'utilisateur peut apporter des modifications à un document. Si elles choisissent de cliquer sur mon bouton "Annuler" pour effacer toutes leurs modifications, une alerte jConfirm s'affiche alors que BlockUI est utilisé pour assombrir l'interface. Il a l'air assez lisse. En utilisant jQuery je peux attraper l'événement click de mon bouton « Annuler » et faire quelque chose comme:

$('.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; 

      }); 

Hope this helps!