root
/
ok-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add:okToastr使用方法

master
bobi 2019-11-02 13:35:40 +08:00
parent f4ae28b5a9
commit b121d28a18
2 changed files with 93 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
data/navs.json
View File

@ -410,23 +410,23 @@
"href": "pages/tripartite/countup.html" "href": "pages/tripartite/countup.html"
}, },
{ {
"title": "okToastr.js", "title": "okToastr",
"href": "pages/tripartite/okToastr.html" "href": "pages/tripartite/okToastr.html"
}, },
{ {
"title": "okMd5.js", "title": "okMd5",
"href": "pages/tripartite/okMd5.html" "href": "pages/tripartite/okMd5.html"
}, },
{ {
"title": "okBarcode.js", "title": "okBarcode",
"href": "pages/tripartite/okBarcode.html" "href": "pages/tripartite/okBarcode.html"
}, },
{ {
"title": "okNprogress.js", "title": "okNprogress",
"href": "pages/tripartite/okNprogress.html" "href": "pages/tripartite/okNprogress.html"
}, },
{ {
"title": "okSweetalert2.js", "title": "okSweetalert2",
"href": "pages/tripartite/okSweetalert2.html" "href": "pages/tripartite/okSweetalert2.html"
}, },
{ {

85
pages/tripartite/okToastr.html
View File

@ -8,20 +8,103 @@
</head> </head>
<body> <body>
<div class="ok-body"> <div class="ok-body">
<blockquote class="layui-elem-quote">
<p>toastr是非阻塞通知的JavaScript库</p>
</blockquote>
<pre>
layui.use(["okToastr"], function () {
// 引入okToastr
let okToastr = layui.okToastr;
// 是否显示关闭按钮
okToastr.options.closeButton = true;
// 回调函数
okToastr.options.onShown = function () {
console.log("hello");
}
okToastr.options.onHidden = function () {
console.log("goodbye");
}
okToastr.options.onclick = function () {
console.log("clicked");
}
okToastr.options.onCloseClick = function () {
console.log("close button clicked");
}
<br/>
// info
okToastr.info("ok-admin");
// success
okToastr.success("ok-admin");
// warning
okToastr.warning("ok-admin");
// error
okToastr.error("ok-admin");
// remove
okToastr.remove();
// clear
okToastr.clear();
});
</pre>
<button type="button" class="layui-btn" id="info">info</button>
<button type="button" class="layui-btn" id="success">success</button>
<button type="button" class="layui-btn" id="warning">warning</button>
<button type="button" class="layui-btn" id="error">error</button>
<button type="button" class="layui-btn" id="remove">remove</button>
<button type="button" class="layui-btn" id="clear">clear</button>
</div> </div>
<!--js逻辑--> <!--js逻辑-->
<script src="../../lib/layui/layui.js"></script> <script src="../../lib/layui/layui.js"></script>
<script> <script>
layui.use(["okToastr"], function () { layui.use(["code", "okToastr"], function () {
let code = layui.code;
let okToastr = layui.okToastr; let okToastr = layui.okToastr;
let $ = layui.jquery;
code({
elem: 'pre',
title: "代码示例"
});
// 是否显示关闭按钮
okToastr.options.closeButton = true; okToastr.options.closeButton = true;
// 回调函数
okToastr.options.onShown = function () {
console.log("hello");
}
okToastr.options.onHidden = function () {
console.log("goodbye");
}
okToastr.options.onclick = function () {
console.log("clicked");
}
okToastr.options.onCloseClick = function () {
console.log("close button clicked");
}
$("#info").click(function () {
okToastr.info("ok-admin"); okToastr.info("ok-admin");
});
$("#success").click(function () {
okToastr.success("ok-admin"); okToastr.success("ok-admin");
});
$("#warning").click(function () {
okToastr.warning("ok-admin"); okToastr.warning("ok-admin");
});
$("#error").click(function () {
okToastr.error("ok-admin"); okToastr.error("ok-admin");
}); });
$("#remove").click(function () {
okToastr.remove();
});
$("#clear").click(function () {
okToastr.clear();
});
});
</script> </script>
</body> </body>
</html> </html>