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> |