jQuery Mobile Alert/Diálogos de confirmación

Question

¿Existe una buena solución jQuery Mobile similar a Sencha para los cuadros de diálogo Alertas y Confirmación?

Answer 1

Este plugin para JQM será el estilo de la caja de confirmación con JQM estilo

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

EDIT: Este plugin ha sido supserseeded por SimpleDialog2 que se puede encontrar aquí:

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

Answer 2

No he visto nada con alertas ya que creo que utiliza el aspecto nativo para ellos. Debería poder personalizarlos a través de otro plugin jQuery y/o CSS.

Aquí es una actualización jQuery Example

:

bien el enlace es un 404 ahora y JQM 1.2 es salir y ofrece ventanas emergentes:

• http://jquerymobile.com/demos/1.2.0/docs/pages/popup/index.html

Answer 3

intento,

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

Answer 4

Sí, el plugin es bueno. Sin embargo, si no necesita la funcionalidad completa, todavía es mucho más ligero para hacer sus propios diálogos simples. Yo uso este:

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

Y esto:

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

Usted puede utilizar éstos siempre que se necesite el diálogo de confirmación:

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

Answer 5

Excelente código @ Peter, pero no estar generando consecutiva eventos, podría ser mejor usar unbind(), como este:

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

¡Gracias!

Answer 6

Tuve un problema similar. Quería tener una función fácil de usar como estándar confirm().

Dado que los diálogos están en desuso en jQuery Mobile 1.4 (documentation), he decidido crear mi propio violín:

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

}

noté un comportamiento extraño, al redirigir/limpieza de la ventana se hizo en "Sí" botón clic. Comenzó a funcionar en el evento afterClose, por eso es un poco complicado.

Here is a jsfiddle demo

Answer 7

Este plugin craftpip/jquery-confirm

fue diseñada para móviles inicialmente, se basa en el marco bootstrap3. Admite alertas, confirmaciones, modales, cuadros de diálogo y muchas opciones.

Fácil de usar.

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

Soporta carga ajax, animaciones CSS3, Responsive, etc.

[EDIT] documentación detallada se puede encontrar la lista here

Características:

• temas (temas androide incluido)
• Ajax cargando contenido.
• animaciones CSS3 (2D & animaciones 3D)
• opciones de animación de rebote
• cercana del automóvil (desencadena una acción después de tiempo de espera)
• iconos
• fondo Rechazar (cierra el modal al hacer clic fuera del modal)
• Acciones del teclado (los activadores ENTER/SPACE confirman, los desencadenantes ESC se cancelan)
• API detallada para cambiar el contenido programmáticamente en modal.

Estoy desarrollando activamente el complemento, sugiera mejoras y funciones.