148 lines
5.2 KiB
HTML
148 lines
5.2 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>okSweetalert2</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||
<link rel="stylesheet" href="../../css/oksub.css">
|
||
</head>
|
||
<body>
|
||
<div class="ok-body">
|
||
<blockquote class="layui-elem-quote">
|
||
<p>SweetAlert2 - 一个强大的纯Js模态消息对话框插件</p>
|
||
</blockquote>
|
||
<pre>
|
||
layui.use(["okSweetAlert2"], function () {
|
||
let okSweetAlert2 = layui.okSweetAlert2;
|
||
<br/>
|
||
okSweetAlert2.fire("欢迎使用ok-admin");
|
||
<br/>
|
||
okSweetAlert2.fire(
|
||
"关于ok-admin的问题",
|
||
"你觉得ok-admin好用吗？",
|
||
"question"
|
||
);
|
||
<br/>
|
||
okSweetAlert2.fire({
|
||
type: "error",
|
||
title: "糟糕",
|
||
text: "服务器好像开小差了！",
|
||
footer: "<a href='http://git.xlbweb.cn/ok-admin' target='_blank'>为什么会有这个问题？</a>"
|
||
});
|
||
<br/>
|
||
okSweetAlert2.fire({
|
||
type: "info",
|
||
title: "<strong>HTML <u>example</u></strong>",
|
||
html: "You can use <b>bold text</b>, <a href='http://git.xlbweb.cn/ok-admin' target='_blank'>links</a> and other HTML tags",
|
||
showCloseButton: true,
|
||
showCancelButton: true,
|
||
focusConfirm: false,
|
||
confirmButtonText: "<span class='ok-icon'></span> Great!",
|
||
confirmButtonAriaLabel: "Thumbs up, great!",
|
||
cancelButtonText: "<span class='ok-icon'></span>",
|
||
cancelButtonAriaLabel: "Thumbs down"
|
||
});
|
||
<br/>
|
||
okSweetAlert2.fire({
|
||
type: "warning",
|
||
title: "你确定要这样操作吗？",
|
||
text: "此操作您将无法还原！",
|
||
showCancelButton: true,
|
||
confirmButtonColor: "#3085d6",
|
||
cancelButtonColor: "#d33",
|
||
confirmButtonText: "确定",
|
||
cancelButtonText: "取消"
|
||
}).then((result) => {
|
||
if (result.value) {
|
||
okSweetAlert2.fire(
|
||
"删除成功",
|
||
"您已经将该记录删除成功！",
|
||
"success"
|
||
)
|
||
}
|
||
});
|
||
});
|
||
</pre>
|
||
<button type="button" class="layui-btn" id="btn1">btn1</button>
|
||
<button type="button" class="layui-btn" id="btn2">btn2</button>
|
||
<button type="button" class="layui-btn" id="btn3">btn3</button>
|
||
<button type="button" class="layui-btn" id="btn4">btn4</button>
|
||
<button type="button" class="layui-btn" id="btn5">btn5</button>
|
||
</div>
|
||
<!--js逻辑-->
|
||
<script src="../../lib/layui/layui.js"></script>
|
||
<script>
|
||
layui.use(["util", "code", "okSweetAlert2"], function () {
|
||
let util = layui.util;
|
||
let code = layui.code;
|
||
let okSweetAlert2 = layui.okSweetAlert2;
|
||
let $ = layui.jquery;
|
||
|
||
util.fixbar({});
|
||
|
||
code({
|
||
elem: "pre",
|
||
title: "代码示例"
|
||
});
|
||
|
||
$("#btn1").click(function () {
|
||
okSweetAlert2.fire("欢迎使用ok-admin");
|
||
});
|
||
|
||
$("#btn2").click(function () {
|
||
okSweetAlert2.fire(
|
||
"关于ok-admin的问题",
|
||
"你觉得ok-admin好用吗？",
|
||
"question"
|
||
);
|
||
});
|
||
|
||
$("#btn3").click(function () {
|
||
okSweetAlert2.fire({
|
||
type: "error",
|
||
title: "糟糕",
|
||
text: "服务器好像开小差了！",
|
||
footer: "<a href='http://git.xlbweb.cn/ok-admin' target='_blank'>为什么会有这个问题？</a>"
|
||
});
|
||
});
|
||
|
||
$("#btn4").click(function () {
|
||
okSweetAlert2.fire({
|
||
type: "info",
|
||
title: "<strong>HTML <u>example</u></strong>",
|
||
html: "You can use <b>bold text</b>, <a href='http://git.xlbweb.cn/ok-admin' target='_blank'>links</a> and other HTML tags",
|
||
showCloseButton: true,
|
||
showCancelButton: true,
|
||
focusConfirm: false,
|
||
confirmButtonText: "<span class='ok-icon'></span> Great!",
|
||
confirmButtonAriaLabel: "Thumbs up, great!",
|
||
cancelButtonText: "<span class='ok-icon'></span>",
|
||
cancelButtonAriaLabel: "Thumbs down"
|
||
});
|
||
});
|
||
|
||
$("#btn5").click(function () {
|
||
okSweetAlert2.fire({
|
||
type: "warning",
|
||
title: "你确定要这样操作吗？",
|
||
text: "此操作您将无法还原！",
|
||
showCancelButton: true,
|
||
confirmButtonColor: "#3085d6",
|
||
cancelButtonColor: "#d33",
|
||
confirmButtonText: "确定",
|
||
cancelButtonText: "取消"
|
||
}).then((result) => {
|
||
if (result.value) {
|
||
okSweetAlert2.fire(
|
||
"删除成功",
|
||
"您已经将该记录删除成功！",
|
||
"success"
|
||
)
|
||
}
|
||
});
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|