Domanda jQuery finestre di dialogo Avviso / conferma mobile


C'è una bella soluzione jQuery Mobile simile a Sencha per le finestre di dialogo Avvisi e Conferma?


21
2018-04-21 17:07


origine


risposte:


Questo plugin per jQM formerà la finestra di conferma con lo stile jQM

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

MODIFICARE : Questo plugin è stato superato da SimpleDialog2 che può essere trovato qui:

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


19
2017-07-15 09:48



Sì, il plugin è carino. Tuttavia, se non hai bisogno di tutte le funzionalità, è ancora molto più leggero pesare le tue semplici finestre di dialogo. Io uso questo:

<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>

E questo:

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");
}

Puoi utilizzarli ovunque sia necessaria la finestra di dialogo di conferma:

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

38
2018-03-24 10:53



Codice eccellente @ Peter, ma per non generare eventi consecutivi, potrebbe essere meglio usare unbind (), come questo:

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");
}

Grazie!


5
2017-12-23 19:09



Ho avuto un problema simile. Volevo avere una funzione facile da usare come standard confirm().

Poiché le finestre di dialogo sono deprecate in jQuery Mobile 1.4 (documentazione), Ho deciso di creare il mio violino:

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');
});

}

Ho notato un comportamento strano, quando la finestra di reindirizzamento / cancellazione era stata eseguita facendo clic sul pulsante "Sì". Ha iniziato a funzionare nell'evento afterClose, ecco perché è un po 'complicato.

Ecco una demo di jsfiddle


5
2018-01-02 21:31



Questo plugin craftpip / jquery-confirm

è stato progettato inizialmente per dispositivi mobili, si basa sul framework bootstrap3. Supporta avvisi, conferme, modali, finestre di dialogo e molte opzioni.

Semplice da usare.

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

Supporta caricamento Ajax, animazioni CSS3, Risposta, ecc.

[MODIFICARE] La documentazione dettagliata può essere trovata Qui

Elenco delle caratteristiche:

  • Temi (temi Android inclusi)
  • Ajax caricamento di contenuti.
  • Animazioni CSS3 (animazioni 2D e 3D)
  • Opzioni di animazione di rimbalzo
  • Chiusura automatica (attiva un'azione dopo il timeout)
  • Icone
  • backgroundged (chiude il modal facendo clic all'esterno del modal)
  • Azioni della tastiera (i trigger ENTER / SPACE confermano, i trigger ESC si annullano)
  • API dettagliata per modificare a livello di programmazione il contenuto in modale.

Sto sviluppando attivamente il plugin, per favore suggerisci miglioramenti e funzionalità.


1
2018-04-24 10:59



Non ho visto nulla con avvisi perché penso che usi l'aspetto e il tatto nativi per loro. Dovresti essere in grado di personalizzarli tramite un altro plugin jQuery e / o CSS.

Ecco un Esempio di jQuery

AGGIORNARE:

Bene il link è un 404 ora e jQM 1.2 è fuori e offre popup:


0
2018-04-22 12:17



Provare,

if (confirm("Are you sure?"))
{
   /*code to execute when 'Ok' bttn selected*/
}

-2
2018-05-11 18:05