jQuery確認
jQuery では、confirm プラグインは、JavaScript の confirm 関数に似た関数で構成されています。 しかし、基本的な特徴は、jQuery の $.confirm にはいくつかのプロパティ (OK ボタンと Cancel ボタンを含む) があり、好みで変更できるのに対し、JavaScript の confirm は厳格であり、最小限のボタンは変更できないことです。 変更されます。
言い換えれば、jQuery はより柔軟であるという点で脚光を浴びています。 確認のタスクは、JavaScript、jQuery confirm プラグイン、および jQuery dialog UI によって実装できます。
jQuery confirm プラグインに基づくソリューションのみに焦点を当てます。
ローカル PC でプラグインを有効にするには、CDN に依存するか、npm を介してパッケージをインストールすることができます。 このポータルは、適切な ユーザー ガイド になります。
サンプルセットでは、CDN を多用途のユースケースと調査に使用します。
確認を確実にするための jQuery .$alert の使用
alert、dialog、confirm アクションの基本的な違いによると、alert には OK という 1つのボタンが付属しています。 対照的に、dialog は、カスタマイズされたコンテンツとタイトル値を含む基本的なモーダルをプレビューします。
それでは、alertタイプの確認を可視化してみましょう。
コードスニペット：
<!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>
出力：
確認のための jQuery $.dialog の使用
dialog アクションの基本的なテンプレートを見て、そのタイトルと内容を変更します。 dialog にはボタンがないので、好みのメッセージを表示するだけです。
メインコンテンツに戻るために、右上隅に十字 (x) ボタンがあります。
コードスニペット：
<!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>
出力：
確認を確認するための jQuery $.confirm の使用
この点で、2つのボタン オプションがあります。 デフォルトでは、すべての 確認 アクションのテキストは OK と キャンセル です。
ただし、ここでは、これらのテキストを変更する権限があります。 また、他のいくつかのパラメータを操作できます。
紹介のリンクから、最新のリストにアクセスできます。 タスクをよりよく理解するために、例を確認してみましょう。
コードスニペット：
<!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>
出力：
注目すべき 1つの事実は、すべての関数 $.alert()、$.confirm()、および $.dialog() が jconfirm() 関数の一部であることです。 これらはすべて、ユースケースに基づいて交換可能に使用されます。
また、jQuery 縮小版 js、jquery-confirm 縮小版 js、および jquery-confirm 縮小版 css の CDN を使用しました。 例を参照しながら、バージョンとそれ以降の更新を確認してください。
