Pemalam SweetAlert JavaScript melaksanakan kemahiran box_javascript amaran mesej yang hebat-tutorial js-php.cn

Pemalam SweetAlert JavaScript melaksanakan kemahiran box_javascript amaran mesej yang hebat

WBOY

Lepaskan： 2016-05-16 15:17:12

asal

1530 orang telah melayarinya

Hari ini saya ingin mengesyorkan anda kotak amaran mesej yang menarik – SweetAlert SweetAlert ialah kotak gesaan js asli yang tidak memerlukan sokongan jQuery, dan gayanya serupa dengan bootstrap. Kotak gesaannya bukan sahaja cantik dan bergerak, tetapi juga membenarkan penyesuaian Ia menyokong menetapkan tajuk kotak gesaan, jenis gesaan, imej paparan kandungan, mengesahkan dan membatalkan teks butang, klik fungsi panggil balik, dsb. Berbanding dengan amaran tradisional:

Pemalam SweetAlert JavaScript melaksanakan kemahiran box_javascript amaran mesej yang hebat

SweetAlert boleh memusatkan halaman secara automatik, menyokong persekitaran desktop, terminal mudah alih dan tablet, dan sangat boleh disesuaikan. Seterusnya, mari kita lihat penggunaan khususnya!

HTML

Mula-mula perkenalkan js dan css yang sepadan ini tidak memerlukan sokongan pemalam jQuery:

<link rel="stylesheet" type="text/css" href="http://sandbox.runjs.cn/uploads/rs/499/ixc5vbvz/sweetalert.css"/>
<script src="http://sandbox.runjs.cn/uploads/rs/499/ixc5vbvz/sweetalert.min.js"></script>

Salin selepas log masuk

Kemudian letakkan 6 butang berbeza:

<div class="demo_1">
基本示例：<button>点击这里</button> 
</div>
<div class="demo_2">
提示成功：<button>点击这里</button> 
</div>
<div class="demo_3">
提示失败：<button>点击这里</button> 
</div>
<div class="demo_4">
提示确认：<button>点击这里</button> 
</div>
<div class="demo_5">
定义内容：<button>点击这里</button> 
</div>
<div class="demo_6">
确认输入：<button>点击这里</button> 
</div>

Salin selepas log masuk

JavaScript

Tentukan acara js:

$(function() {
$(".demo_1 button").click(function() {
swal("这是一个信息提示框!");
});
$(".demo_2 button").click(function() {
swal("Good!", "弹出了一个操作成功的提示框", "success");
});
$(".demo_3 button").click(function() {
swal("OMG!", "弹出了一个错误提示框", "error");
});
$(".demo_4 button").click(function() {
swal({
title: "您确定要删除吗？",
text: "您确定要删除这条数据？",
type: "warning",
showCancelButton: true,
closeOnConfirm: false,
confirmButtonText: "是的，我要删除",
confirmButtonColor: "#ec6c62"
}, function() {
$.ajax({
url: "do.php",
type: "DELETE"
}).done(function(data) {
swal("操作成功!", "已成功删除数据！", "success");
}).error(function(data) {
swal("OMG", "删除操作失败了!", "error");
});
});
});

$(".demo_5 button").click(function() {
swal({
title: "Good!",
text: '自定义<span style="color:red">图片</span>、<a href="#">HTML内容</a>。<br/>5秒后自动关闭。',
imageUrl: "images/thumbs-up.jpg",
html: true,
timer: 5000,
showConfirmButton: false
});
});

$(".demo_6 button").click(function() {
swal({
title: "输入框来了",
text: "这里可以输入并确认:",
type: "input",
showCancelButton: true,
closeOnConfirm: false,
animation: "slide-from-top",
inputPlaceholder: "填点东西到这里面吧"
}, function(inputValue) {
if (inputValue === false)
return false;
if (inputValue === "") {
swal.showInputError("请输入!");
return false
}
swal("棒极了!", "您填写的是: " + inputValue, "success");
});
});
});

Salin selepas log masuk