web-dev-qa-db-fra.com

Boîtes de dialogue d'alerte / confirmation jQuery Mobile

Existe-t-il une solution jQuery Mobile de type Sencha Nice pour les dialogues d'alertes et de confirmation?

dialogjquery-mobile
22
Keith Adler

Ce plugin pour jQM stylisera la boîte de confirmation avec le style jQM

http://dev.jtsage.com/jQM-SimpleDialog/

EDIT: Ce plugin a maintenant été remplacé par SimpleDialog2 qui peut être trouvé ici:

http://dev.jtsage.com/jQM-SimpleDialog/demos2/

20
Martin

Oui, le plugin est sympa. Cependant, si vous n'avez pas besoin de toutes les fonctionnalités, il est toujours beaucoup plus léger pour lancer vos propres dialogues simples. J'utilise ceci:

<div data-role="dialog" id="sure" data-title="Are you sure?">
  <div data-role="content">
    <h3 class="sure-1">???</h3>
    <p class="sure-2">???</p>
    <a href="#" class="sure-do" data-role="button" data-theme="b" data-rel="back">Yes</a>
    <a href="#" data-role="button" data-theme="c" data-rel="back">No</a>
  </div>
</div>

Et ça:

function areYouSure(text1, text2, button, callback) {
  $("#sure .sure-1").text(text1);
  $("#sure .sure-2").text(text2);
  $("#sure .sure-do").text(button).on("click.sure", function() {
    callback();
    $(this).off("click.sure");
  });
  $.mobile.changePage("#sure");
}

Vous pouvez les utiliser partout où vous avez besoin de la boîte de dialogue de confirmation:

areYouSure("Are you sure?", "---description---", "Exit", function() {
  // user has confirmed, do stuff
});
40
Peter

J'ai eu un problème similaire. Je voulais avoir une fonction facile à utiliser comme la fonction confirm() standard.

Étant donné que les boîtes de dialogue sont obsolètes dans jquery mobile 1.4 (documentation) , j'ai décidé de créer mon propre violon:

function confirmDialog(text, callback) {
var popupDialogId = 'popupDialog';
$('<div data-role="popup" id="' + popupDialogId + '" data-confirmed="no" data-transition="pop" data-overlay-theme="b" data-theme="b" data-dismissible="false" style="max-width:500px;"> \
                    <div data-role="header" data-theme="a">\
                        <h1>Question</h1>\
                    </div>\
                    <div role="main" class="ui-content">\
                        <h3 class="ui-title">' + text + '</h3>\
                        <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b optionConfirm" data-rel="back">Yes</a>\
                        <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b optionCancel" data-rel="back" data-transition="flow">No</a>\
                    </div>\
                </div>')
    .appendTo($.mobile.pageContainer);
var popupDialogObj = $('#' + popupDialogId);
popupDialogObj.trigger('create');
popupDialogObj.popup({
    afterclose: function (event, ui) {
        popupDialogObj.find(".optionConfirm").first().off('click');
        var isConfirmed = popupDialogObj.attr('data-confirmed') === 'yes' ? true : false;
        $(event.target).remove();
        if (isConfirmed && callback) {
            callback();
        }
    }
});
popupDialogObj.popup('open');
popupDialogObj.find(".optionConfirm").first().on('click', function () {
    popupDialogObj.attr('data-confirmed', 'yes');
});

}

J'ai remarqué un comportement étrange, lorsque la fenêtre de redirection/effacement a été effectuée sur le bouton "Oui". Il a commencé à fonctionner dans l'événement afterClose, c'est pourquoi c'est un peu compliqué.

Voici une démo jsfiddle

5
loleksy

Excellent code @ Peter, mais pour ne pas générer d'événements consécutifs, il pourrait être préférable d'utiliser unbind (), comme ceci:

function areYouSure(text1, text2, button, callback) {
  $("#sure .sure-1").text(text1);
  $("#sure .sure-2").text(text2);
  $("#sure .sure-do").text(button).unbind("click.sure").on("click.sure", function() {
    callback(false);
    $(this).off("click.sure");
  });
  $.mobile.changePage("#sure");
}

Merci!

5
Taylor

Ce plugin craftpip/jquery-confirm

a été initialement conçu pour les mobiles, est basé sur le framework bootstrap3. Prend en charge les alertes, les confirmations, les modaux, les boîtes de dialogue et de nombreuses options.

Simple à utiliser.

$.alert({
    title: 'title here',
    content: 'content here',
    confirm: function(){
        //on confirm
    },
    cancel: function(){
        // on cancel
    }
})

Prend en charge le chargement ajax, les animations CSS3, Responsive, etc.

[EDIT] Une documentation détaillée peut être trouvée ici

Liste des fonctionnalités:

  • Thèmes (thèmes Android inclus)
  • Ajax chargement de contenu.
  • Animations CSS3 (animations 2D et 3D)
  • Options de rebond d'animation
  • Fermeture automatique (déclenche une action après expiration du délai)
  • Icônes
  • fond ignoré (ferme le modal en cliquant en dehors du modal)
  • Actions du clavier (les déclencheurs ENTER/SPACE confirment, les déclencheurs ESC annulent)
  • API détaillée pour changer le contenu programmé en modal.

Je développe activement le plugin, veuillez suggérer des améliorations et des fonctionnalités.

1
Boniface Pereira

Je n'ai rien vu avec des alertes car je pense qu'il utilise l'apparence native pour eux. Vous devriez pouvoir les personnaliser via un autre plugin jQuery et/ou CSS.

Voici un Exemple jQuery

MISE À JOUR:

Eh bien, le lien est maintenant un 404 et jQM 1.2 est sorti et propose des popups:

0
Phill Pafford