jQuery bestätigen
-
Verwendung von jQuery
.$alert, um die Bestätigung sicherzustellen -
Verwendung von jQuery
$.dialogzur Sicherstellung der Bestätigung -
Verwendung von jQuery
$.confirmzur Verifizierung der Bestätigung
In jQuery beinhaltet das confirm-Plug-in eine ähnliche Funktion wie die confirm-Funktion von JavaScript. Aber das grundlegende Unterscheidungsmerkmal ist, dass die jQuery $.confirm einige Eigenschaften hat (einschließlich OK- und Abbrechen-Buttons), die als Präferenz geändert werden können, während das JavaScript confirm starr ist und die minimalen Buttons dies nicht können verändert sein.
Mit anderen Worten, jQuery steht im Rampenlicht, weil es flexibler ist. Die Aufgabe des Bestätigens kann durch JavaScript, das Plug-in confirm von jQuery und die Benutzeroberfläche dialog von jQuery implementiert werden.
Wir konzentrieren uns nur auf die Lösung basierend auf dem jQuery Plug-in confirm.
Um das Plug-in auf Ihrem lokalen PC zu aktivieren, können Sie sich auf die CDNs verlassen oder das Paket über npm installieren. Dieses Portal kann eine richtige Bedienungsanleitung für Sie sein.
In unseren Beispielsets verwenden wir die CDNs für vielseitige Anwendungsfälle und Untersuchungen.
Verwendung von jQuery .$alert, um die Bestätigung sicherzustellen
Entsprechend der grundsätzlichen Unterscheidung zwischen Alarm-, dialog- und Bestätigen-Aktionen kommt der Alarm mit einem einzigen Button OK daher. Im Gegensatz dazu zeigt der dialog eine Vorschau eines Basismodals mit angepassten Inhalts- und Titelwerten an.
Stellen wir uns also die Bestätigung vom Typ alert vor.
Code-Auszug:
<!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>
Ausgang:
Verwendung von jQuery $.dialog zur Sicherstellung der Bestätigung
Wir werden die Grundvorlage der Aktion dialog sehen und deren Titel und Inhalt ändern. Da dialog keine Schaltflächen hat, zeigt es lediglich eine Präferenzmeldung an.
Es hat ein Kreuz (x) in der oberen rechten Ecke, um zum Hauptinhalt zurückzukehren.
Code-Auszug:
<!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>
Ausgang:
Verwendung von jQuery $.confirm zur Verifizierung der Bestätigung
In dieser Hinsicht haben wir zwei Schaltflächenoptionen. Standardmäßig sind die Texte für jede Bestätigen-Aktion OK und Abbrechen.
Hier haben wir jedoch das Privileg, diese Texte zu ändern. Außerdem können einige andere Parameter manipuliert werden.
Der Link in der Einleitung führt Sie durch die aktuelle Liste. Schauen wir uns unser Beispiel an, um die Aufgabe besser zu sehen.
Code-Auszug:
<!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>
Ausgang:
Eine Tatsache, auf die man sich konzentrieren sollte, ist, dass alle Funktionen $.alert(), $.confirm() und $.dialog() Teil der Funktion jconfirm() sind. Alle werden je nach Anwendungsfall austauschbar verwendet.
Außerdem haben wir die CDNs für jQuery minified js, jquery-confirm minified js und jquery-confirm minified css verwendet. Stellen Sie sicher, dass Sie die Versionen und späteren Updates überprüfen, während Sie die Beispiele als Referenzen verwenden.
