jQuery Confirmar
-
Uso de jQuery
.$alertpara asegurar la confirmación -
Uso de jQuery
$.dialogpara asegurar la confirmación -
Uso de jQuery
$.confirmpara verificar la confirmación
En jQuery, el complemento confirmar comprende una función similar a la función confirmar de JavaScript. Pero la característica distintiva básica es que jQuery $.confirm tiene algunas propiedades (incluidos los botones OK y Cancel) que se pueden modificar como una preferencia, mientras que JavaScript confirm es rígido y los botones mínimos no pueden modificarse. ser cambiado.
Entonces, en otras palabras, jQuery se destaca por ser más flexible. La tarea de confirmación se puede implementar mediante JavaScript, el complemento de confirmación de jQuery y la interfaz de usuario de diálogo de jQuery.
Solo nos centraremos en la solución basada en el complemento jQuery confirm.
Para habilitar el complemento en su PC local, puede depender de los CDN, o puede instalar el paquete a través de npm. Este portal puede ser una guía de usuario adecuada para usted.
En nuestros conjuntos de ejemplos, utilizaremos las CDN para casos de uso y examen versátiles.
Uso de jQuery .$alert para asegurar la confirmación
Según la diferenciación básica entre las acciones alerta, diálogo y confirmar, la alerta viene con un solo botón, OK. Por el contrario, el diálogo muestra una vista previa de un modal básico con contenido personalizado y valores de título.
Entonces, vamos a visualizar la confirmación del tipo alerta.
Fragmento de código:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css">
<title>confirm</title>
<script>
$(function(){
$('#btn').click(function(e){
e.preventDefault();
$.alert({
title: 'Alert!',
content: 'Simple alert!'
});
});
});
</script>
</head>
<body>
<button id="btn">Click</button>
</body>
</html>
Producción:
Uso de jQuery $.dialog para asegurar la confirmación
Veremos la plantilla básica de la acción diálogo y modificaremos el título y contenido de la misma. Como diálogo no tiene ningún botón, lo único que hace es mostrar un mensaje de preferencia.
Tiene un botón con una cruz (x) en la esquina superior derecha para volver al contenido principal.
Fragmento de código:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css">
<title>confirm</title>
<script>
$(function(){
$('#btn').click(function(e){
e.preventDefault();
$.dialog({
title: 'Dialog!',
content: 'Simple dialog!'
});
});
});
</script>
</head>
<body>
<button id="btn">Click</button>
</body>
</html>
Producción:
Uso de jQuery $.confirm para verificar la confirmación
En este sentido, tendremos dos opciones de botón. Por defecto, para cada acción de confirmar, los textos son Aceptar y Cancelar.
Sin embargo, aquí tenemos el privilegio de alterar estos textos. Además, se pueden manipular algunos otros parámetros.
El enlace en la introducción puede permitirle acceder a la lista más reciente. Veamos nuestro ejemplo para una mejor vista de la tarea.
Fragmento de código:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css">
<title>confirm</title>
<script>
$(function(){
var ask = true;
$('#btn').click(function(e){
if(ask){
e.preventDefault();
$.confirm({
title: "Delete",
content: "You sure?",
buttons: {
confirm: {
text: "Yes",
action: function(){
ask = false;
alert("Deleted.");
}
},
cancel: {
text: "No"
}
}
});
}
});
});
</script>
</head>
<body>
<button id="btn">Click</button>
</body>
</html>
Producción:
Un hecho a destacar es que todas las funciones $.alert(), $.confirm() y $.dialog() forman parte de la función jconfirm(). Todos ellos se usan indistintamente según el caso de uso.
Además, hemos utilizado los CDN para jQuery minimizado js, jquery-confirm minimizado js y jquery-confirm minimizado css. Asegúrese de verificar las versiones y actualizaciones posteriores mientras toma los ejemplos como referencias.
