133 lines
5.4 KiB
HTML
133 lines
5.4 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|||
|
|
<title>基于layui的notice通知控件</title>
|
|||
|
|
<link rel="stylesheet" href="https://layui.hcwl520.com.cn/layui/css/layui.css">
|
|||
|
|
<link href="../../component/layui/css/layui.css" rel="stylesheet" />
|
|||
|
|
<link href="../../component/font-awesome/css/font-awesome.css" rel="stylesheet" />
|
|||
|
|
<script src="../../component/layui/layui.js"></script>
|
|||
|
|
<script src="../../modules/lay-config.js"></script>
|
|||
|
|
<style>
|
|||
|
|
body{
|
|||
|
|
margin: 10px;
|
|||
|
|
background-color: lightgray;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body>
|
|||
|
|
<div >
|
|||
|
|
<div class="layui-card">
|
|||
|
|
<div class="layui-card-header">消息通知</div>
|
|||
|
|
<div class="layui-card-body">
|
|||
|
|
<blockquote class="layui-elem-quote layui-quote-nm">Layui Notice API</blockquote>
|
|||
|
|
<button class="layui-btn" id="create1">生成notice</button>
|
|||
|
|
<button class="layui-btn" id="clear1">移除notice</button>
|
|||
|
|
<pre class="layui-code">
|
|||
|
|
//使用说明
|
|||
|
|
layui.use(['notice'], function () {
|
|||
|
|
var notice = layui.notice; // 允许别名 toastr
|
|||
|
|
|
|||
|
|
// 初始化配置，同一样式只需要配置一次，非必须初始化，有默认配置
|
|||
|
|
notice.options = {
|
|||
|
|
closeButton:true,//显示关闭按钮
|
|||
|
|
debug:false,//启用debug
|
|||
|
|
positionClass:"toast-top-right",//弹出的位置,
|
|||
|
|
showDuration:"300",//显示的时间
|
|||
|
|
hideDuration:"1000",//消失的时间
|
|||
|
|
timeOut:"2000",//停留的时间
|
|||
|
|
extendedTimeOut:"1000",//控制时间
|
|||
|
|
showEasing:"swing",//显示时的动画缓冲方式
|
|||
|
|
hideEasing:"linear",//消失时的动画缓冲方式
|
|||
|
|
iconClass: 'toast-info', // 自定义图标，有内置，如不需要则传空 支持layui内置图标/自定义iconfont类名
|
|||
|
|
onclick: null, // 点击关闭回调
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
|
|||
|
|
notice.warning("成功");
|
|||
|
|
notice.info("提示信息：毛都没有...");
|
|||
|
|
notice.error("大佬，我咋知道怎么肥四！");
|
|||
|
|
notice.success("大佬，我咋知道怎么肥四！");
|
|||
|
|
});
|
|||
|
|
</pre>
|
|||
|
|
<br>
|
|||
|
|
、
|
|||
|
|
<button class="layui-btn" id="desktopInfo">桌面提示</button>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<br>
|
|||
|
|
</div>
|
|||
|
|
</body>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
|
|||
|
|
//layui模块的定义
|
|||
|
|
layui.use(['notice', 'jquery', 'layer'], function () {
|
|||
|
|
var notice = layui.notice;
|
|||
|
|
var layer = layui.layer;
|
|||
|
|
var $ = layui.jquery;
|
|||
|
|
|
|||
|
|
// 初始化配置，同一样式只需要配置一次，非必须初始化，有默认配置
|
|||
|
|
notice.options = {
|
|||
|
|
closeButton:true,//显示关闭按钮
|
|||
|
|
debug:false,//启用debug
|
|||
|
|
positionClass:"toast-top-right",//弹出的位置,
|
|||
|
|
showDuration:"300",//显示的时间
|
|||
|
|
hideDuration:"1000",//消失的时间
|
|||
|
|
timeOut:"2000",//停留的时间
|
|||
|
|
extendedTimeOut:"1000",//控制时间
|
|||
|
|
showEasing:"swing",//显示时的动画缓冲方式
|
|||
|
|
hideEasing:"linear",//消失时的动画缓冲方式
|
|||
|
|
iconClass: 'toast-info', // 自定义图标，有内置，如不需要则传空 支持layui内置图标/自定义iconfont类名
|
|||
|
|
onclick: null, // 点击关闭回调
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
|
|||
|
|
notice.warning("成功");
|
|||
|
|
notice.info("提示信息：毛都没有...");
|
|||
|
|
notice.error("大佬，我咋知道怎么肥四！");
|
|||
|
|
notice.success("大佬，我咋知道怎么肥四！");
|
|||
|
|
|
|||
|
|
|
|||
|
|
let notice01;
|
|||
|
|
$("#create1").click(function () {
|
|||
|
|
let options = {
|
|||
|
|
closeButton:false,//显示关闭按钮
|
|||
|
|
debug:false,//启用debug
|
|||
|
|
positionClass:"toast-top-right",//弹出的位置,
|
|||
|
|
showDuration:"300",//显示的时间
|
|||
|
|
hideDuration:"1000",//消失的时间
|
|||
|
|
timeOut:"0",//停留的时间,0则不自动关闭
|
|||
|
|
extendedTimeOut:"1000",//控制时间
|
|||
|
|
showEasing:"swing",//显示时的动画缓冲方式
|
|||
|
|
hideEasing:"linear",//消失时的动画缓冲方式
|
|||
|
|
iconClass: 'layui-icon layui-icon-praise', // 自定义图标，有内置，如不需要则传空 支持layui内置图标/自定义iconfont类名,需要完整加上 layui-icon/icon iconfont
|
|||
|
|
onclick: null, // 点击关闭回调
|
|||
|
|
}
|
|||
|
|
notice01 = notice.error("大佬，error！","错误提示",options);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
|
|||
|
|
$("#clear1").click(function () {
|
|||
|
|
layer.msg('移除生成的notice通知');
|
|||
|
|
notice.clear(notice01);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$("#desktopInfo").click(function () {
|
|||
|
|
layer.msg('生成桌面通知');
|
|||
|
|
notice.desktopInfo("无线长，2333，66666，给你一百分不怕你骄傲的！","layuinotice");
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
window.setTimeout(function () {
|
|||
|
|
|
|||
|
|
}, 3500);
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
</html>
|