418 lines
25 KiB
HTML
418 lines
25 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||
<title>在线演示 — MetonaToast</title>
|
||
<style>
|
||
:root {
|
||
--bg: #0b1121; --surface: #151d33; --border: #1e2d4d;
|
||
--text: #e2e8f0; --muted: #64748b; --accent: #6366f1; --accent2: #818cf8;
|
||
--radius: 14px;
|
||
}
|
||
* { margin:0; padding:0; box-sizing:border-box; }
|
||
body { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif; background:var(--bg); color:var(--text); line-height:1.6; min-height:100vh; }
|
||
a { color:var(--accent2); text-decoration:none; }
|
||
code { background:rgba(99,102,241,0.12); color:#a5b4fc; padding:1px 6px; border-radius:4px; font-size:0.85em; }
|
||
.nav { position:sticky; top:0; z-index:100; background:rgba(11,17,33,0.88); backdrop-filter:blur(14px); border-bottom:1px solid var(--border); }
|
||
.nav-inner { max-width:1300px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:0 20px; height:56px; }
|
||
.nav-logo { font-size:18px; font-weight:700; background:linear-gradient(135deg,#818cf8,#c084fc,#f472b6); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
|
||
.nav-links { display:flex; gap:20px; }
|
||
.nav-links a { color:var(--muted); font-size:13px; font-weight:500; transition:.2s; }
|
||
.nav-links a:hover { color:var(--accent2); }
|
||
.hero { text-align:center; padding:40px 20px 30px; border-bottom:1px solid var(--border); background:radial-gradient(ellipse at 50% 0%,rgba(99,102,241,0.12) 0%,transparent 50%); }
|
||
.hero h1 { font-size:36px; font-weight:800; }
|
||
.hero h1 span { background:linear-gradient(135deg,#818cf8,#c084fc,#f472b6); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
|
||
.hero p { color:var(--muted); font-size:14px; margin-top:6px; }
|
||
|
||
.container { max-width:1300px; margin:0 auto; padding:24px 20px; display:grid; grid-template-columns:repeat(auto-fill,minmax(400px,1fr)); gap:18px; }
|
||
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:20px; }
|
||
.card h2 { font-size:15px; margin-bottom:2px; }
|
||
.card > p { color:var(--muted); font-size:11px; margin-bottom:12px; }
|
||
.btn-row { display:flex; flex-wrap:wrap; gap:6px; }
|
||
.btn { padding:8px 14px; border:none; border-radius:7px; font-size:12px; font-weight:500; cursor:pointer; transition:.15s; color:#fff; }
|
||
.btn:hover { transform:translateY(-1px); filter:brightness(1.15); }
|
||
.btn-sm { padding:5px 10px; font-size:11px; border-radius:5px; }
|
||
.btn-outline { background:transparent; border:1px solid var(--border); color:var(--text); }
|
||
.btn-outline:hover { border-color:var(--accent); background:rgba(99,102,241,0.06); }
|
||
.btn-tiny { padding:4px 9px; font-size:10px; border-radius:4px; }
|
||
.c-s { background:#10b981; } .c-e { background:#ef4444; } .c-w { background:#f59e0b; color:#1e293b; }
|
||
.c-i { background:#3b82f6; } .c-p { background:#6366f1; } .c-pp { background:#8b5cf6; }
|
||
.c-pk { background:#ec4899; } .c-t { background:#14b8a6; } .c-o { background:#f97316; }
|
||
.c-sl { background:#475569; } .c-r { background:#f43f5e; } .c-g { background:#22c55e; }
|
||
.label { font-size:10px; text-transform:uppercase; letter-spacing:0.8px; color:var(--muted); margin-bottom:10px; font-weight:600; }
|
||
.demo-section { border-top:1px solid var(--border); padding-top:8px; margin-top:8px; }
|
||
footer { text-align:center; padding:30px 20px; color:var(--muted); font-size:12px; border-top:1px solid var(--border); }
|
||
@media (max-width:768px) { .container { grid-template-columns:1fr; } }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<nav class="nav">
|
||
<div class="nav-inner">
|
||
<div class="nav-logo">MetonaToast</div>
|
||
<div class="nav-links">
|
||
<a href="index.html">首页</a>
|
||
<a href="docs.html">文档</a>
|
||
<a href="demo.html">演示</a>
|
||
<a href="https://gitee.com/thzxx/MetonaToast" target="_blank">Gitee</a>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<header class="hero">
|
||
<h1><span>在线演示</span></h1>
|
||
<p>覆盖项目全部功能的交互演示 — 点击即可体验</p>
|
||
</header>
|
||
|
||
<main class="container">
|
||
|
||
<!-- 1. 基础通知 -->
|
||
<div class="card">
|
||
<div class="label">📢 基础通知</div>
|
||
<div class="btn-row">
|
||
<button class="btn c-s" onclick="MeToast.success('操作成功！')">✓ 成功</button>
|
||
<button class="btn c-e" onclick="MeToast.error('操作失败！')">✕ 错误</button>
|
||
<button class="btn c-w" onclick="MeToast.warning('请注意检查')">⚠ 警告</button>
|
||
<button class="btn c-i" onclick="MeToast.info('系统维护中')">ℹ 信息</button>
|
||
<button class="btn c-sl" onclick="MeToast.show('默认消息')">— 默认</button>
|
||
</div>
|
||
<div class="demo-section">
|
||
<div class="btn-row">
|
||
<button class="btn btn-outline btn-sm" onclick="MeToast.success({title:'保存成功',message:'文件已同步到云端'})">带标题</button>
|
||
<button class="btn btn-outline btn-sm" onclick="MeToast.info('持续10秒',{duration:10000})">长时10s</button>
|
||
<button class="btn btn-outline btn-sm" onclick="MeToast.warning('手动关闭',{duration:0,closeButton:true})">手动关闭</button>
|
||
<button class="btn btn-outline btn-sm" onclick="MeToast.info('',{icon:false})">无图标</button>
|
||
<button class="btn btn-outline btn-sm" onclick="MeToast.info('无按钮',{closeButton:false})">无关闭按钮</button>
|
||
<button class="btn btn-outline btn-sm" onclick="demoCustomIcon()">自定义图标</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 2. Loading 链式 -->
|
||
<div class="card">
|
||
<div class="label">🔄 Loading 链式转换</div>
|
||
<div class="btn-row">
|
||
<button class="btn c-s" onclick="demoLoading()">提交成功</button>
|
||
<button class="btn c-e" onclick="demoLoadingFail()">提交失败</button>
|
||
<button class="btn c-w" onclick="demoLoadingWarn()">转为警告</button>
|
||
<button class="btn c-i" onclick="demoLoadingUpdate()">原地更新</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 3. Promise + confirm + prompt -->
|
||
<div class="card">
|
||
<div class="label">💬 对话框</div>
|
||
<div class="btn-row">
|
||
<button class="btn c-pp" onclick="demoPromise()">Promise 风格</button>
|
||
<button class="btn c-pk" onclick="demoConfirm()">确认对话框</button>
|
||
<button class="btn c-t" onclick="demoPrompt()">输入对话框</button>
|
||
<button class="btn c-o" onclick="demoPromptPassword()">密码输入</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 4. 进度 & 倒计时 -->
|
||
<div class="card">
|
||
<div class="label">📊 进度 & 倒计时</div>
|
||
<div class="btn-row">
|
||
<button class="btn c-o" onclick="demoProgress()">进度条(水平)</button>
|
||
<button class="btn c-g" onclick="demoProgressV()">进度条(垂直)</button>
|
||
<button class="btn c-pk" onclick="demoCountdown()">倒计时 5s</button>
|
||
<button class="btn c-r" onclick="demoCountdownPause()">倒计时(可暂停)</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 5. 队列 & 堆叠 -->
|
||
<div class="card">
|
||
<div class="label">📋 队列 & 堆叠</div>
|
||
<div class="btn-row">
|
||
<button class="btn c-p" onclick="demoQueue()">队列展示</button>
|
||
<button class="btn c-e" onclick="demoQueueCancel()">队列中途取消</button>
|
||
<button class="btn c-pp" onclick="demoStack()">堆叠展示</button>
|
||
<button class="btn c-t" onclick="demoStackMixed()">混合类型堆叠</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 6. Action Toast -->
|
||
<div class="card">
|
||
<div class="label">⚡ Action Toast <span style="color:#34d399;font-size:10px;">v2.0</span></div>
|
||
<div class="btn-row">
|
||
<button class="btn c-e" onclick="demoActionDelete()">删除+撤销</button>
|
||
<button class="btn c-i" onclick="demoActionMulti()">多按钮</button>
|
||
<button class="btn c-s" onclick="demoActionNoClose()">不自动关闭</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 7. 分组管理 -->
|
||
<div class="card">
|
||
<div class="label">📁 分组管理 <span style="color:#34d399;font-size:10px;">v2.0</span></div>
|
||
<div class="btn-row">
|
||
<button class="btn c-p" onclick="demoGroup()">创建分组消息</button>
|
||
<button class="btn c-e" onclick="dismissGroup()">关闭分组</button>
|
||
<button class="btn c-i" onclick="MeToast.info('分组数量: '+group.count(),{type:'info'})">查看数量</button>
|
||
<button class="btn btn-outline btn-sm" onclick="demoGroupMixed()">混合类型分组</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 8. 动画效果 -->
|
||
<div class="card">
|
||
<div class="label">🎭 11种动画效果</div>
|
||
<div class="btn-row">
|
||
<button class="btn btn-outline btn-tiny" onclick="anim('slide')">slide</button>
|
||
<button class="btn btn-outline btn-tiny" onclick="anim('fade')">fade</button>
|
||
<button class="btn btn-outline btn-tiny" onclick="anim('scale')">scale</button>
|
||
<button class="btn btn-outline btn-tiny" onclick="anim('bounce')">bounce</button>
|
||
<button class="btn btn-outline btn-tiny" onclick="anim('flip')">flip</button>
|
||
<button class="btn btn-outline btn-tiny" onclick="anim('rotate')">rotate</button>
|
||
<button class="btn btn-outline btn-tiny" onclick="anim('zoom')">zoom</button>
|
||
<button class="btn btn-outline btn-tiny" onclick="anim('slideUp')">slideUp</button>
|
||
<button class="btn btn-outline btn-tiny" onclick="anim('slideDown')">slideDown</button>
|
||
<button class="btn btn-outline btn-tiny" onclick="anim('slideLeft')">slideLeft</button>
|
||
<button class="btn btn-outline btn-tiny" onclick="anim('slideRight')">slideRight</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 9. 6种位置 -->
|
||
<div class="card">
|
||
<div class="label">📍 全部位置</div>
|
||
<div class="btn-row">
|
||
<button class="btn btn-outline btn-sm" onclick="MeToast.success('左上角',{position:'top-left'})">↖ top-left</button>
|
||
<button class="btn btn-outline btn-sm" onclick="MeToast.success('顶部居中',{position:'top-center'})">↑ top-center</button>
|
||
<button class="btn btn-outline btn-sm" onclick="MeToast.success('右上角',{position:'top-right'})">↗ top-right</button>
|
||
<button class="btn btn-outline btn-sm" onclick="MeToast.success('左下角',{position:'bottom-left'})">↙ bottom-left</button>
|
||
<button class="btn btn-outline btn-sm" onclick="MeToast.success('底部居中',{position:'bottom-center'})">↓ bottom-center</button>
|
||
<button class="btn btn-outline btn-sm" onclick="MeToast.success('右下角',{position:'bottom-right'})">↘ bottom-right</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 10. 主题切换 + 自定义 -->
|
||
<div class="card">
|
||
<div class="label">🎨 主题切换 & 自定义</div>
|
||
<div class="btn-row">
|
||
<button class="btn btn-outline btn-sm" onclick="switchTheme('light')">☀️ Light</button>
|
||
<button class="btn btn-outline btn-sm" onclick="switchTheme('dark')">🌙 Dark</button>
|
||
<button class="btn btn-outline btn-sm" onclick="switchTheme('auto')">🔄 Auto</button>
|
||
<button class="btn btn-outline btn-sm" onclick="switchTheme('warm')">🔥 Warm</button>
|
||
<button class="btn btn-outline btn-sm" onclick="demoRegisterTheme()">注册自定义主题</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 11. 插件系统 -->
|
||
<div class="card">
|
||
<div class="label">🔌 插件系统</div>
|
||
<div class="btn-row">
|
||
<button class="btn btn-outline btn-sm" onclick="MeToast.use('keyboard');MeToast.info('已安装 — 按 ESC 关闭所有 Toast')">keyboard ESC关闭</button>
|
||
<button class="btn btn-outline btn-sm" onclick="MeToast.use('persistence');MeToast.info('已安装 — 配置将持久化到 localStorage')">persistence 持久化</button>
|
||
<button class="btn btn-outline btn-sm" onclick="MeToast.use('accessibility');MeToast.info('已安装 — 屏幕阅读器可用')">accessibility 无障碍</button>
|
||
<button class="btn btn-outline btn-sm" onclick="demoCustomPlugin()">自定义插件</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 12. v2.0 新功能 -->
|
||
<div class="card">
|
||
<div class="label">🆕 v2.0 新功能 <span style="color:#34d399;font-size:10px;">resetTimer · onUpdate · render · notify</span></div>
|
||
<div class="btn-row">
|
||
<button class="btn c-i" onclick="demoResetTimer()">resetTimerOnUpdate</button>
|
||
<button class="btn c-p" onclick="demoOnUpdate()">onUpdate 回调</button>
|
||
<button class="btn c-pp" onclick="demoCustomRender()">自定义渲染</button>
|
||
<button class="btn c-w" onclick="demoNotify()">系统通知</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 13. Toast 管理 -->
|
||
<div class="card">
|
||
<div class="label">🔧 Toast 管理</div>
|
||
<div class="btn-row">
|
||
<button class="btn c-s" onclick="MeToast.success('消息 '+(MeToast.count()+1))">发一条</button>
|
||
<button class="btn c-i" onclick="MeToast.info('消息 '+(MeToast.count()+1))">再一条</button>
|
||
<button class="btn c-w" onclick="MeToast.info('当前 '+MeToast.count()+' 条')">查看数量</button>
|
||
<button class="btn c-sl" onclick="MeToast.pauseAll();MeToast.info('已暂停全部')">暂停全部</button>
|
||
<button class="btn c-sl" onclick="MeToast.resumeAll();MeToast.info('已恢复全部')">恢复全部</button>
|
||
<button class="btn c-e" onclick="MeToast.dismiss()">关闭全部</button>
|
||
<button class="btn c-r" onclick="MeToast.destroy();MeToast.info('已销毁')">销毁</button>
|
||
</div>
|
||
<div class="demo-section">
|
||
<div class="btn-row">
|
||
<button class="btn btn-outline btn-tiny" onclick="demoFindById()">findById</button>
|
||
<button class="btn btn-outline btn-tiny" onclick="demoGetAll()">getAll</button>
|
||
<button class="btn btn-outline btn-tiny" onclick="demoClearByPos()">clear(位置)</button>
|
||
<button class="btn btn-outline btn-tiny" onclick="demoGetConfig()">查看配置</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 14. 交互特性 -->
|
||
<div class="card">
|
||
<div class="label">✋ 交互特性</div>
|
||
<div class="btn-row">
|
||
<button class="btn c-i" onclick="demoDraggable()">拖拽关闭</button>
|
||
<button class="btn c-p" onclick="demoPauseHover()">悬停暂停</button>
|
||
<button class="btn c-w" onclick="demoCloseOnClick()">点击关闭</button>
|
||
<button class="btn c-pp" onclick="demoWidth()">自定义宽度</button>
|
||
<button class="btn c-t" onclick="demoClassName()">自定义className</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 15. 国际化切换 -->
|
||
<div class="card">
|
||
<div class="label">🌍 国际化 & 格式化</div>
|
||
<div class="btn-row">
|
||
<button class="btn c-s" onclick="switchLocale('zh-CN')">切换到中文</button>
|
||
<button class="btn c-i" onclick="switchLocale('en-US')">Switch to English</button>
|
||
<button class="btn btn-outline btn-sm" onclick="demoFormat()">格式化演示</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 16. 107种预设图标 -->
|
||
<div class="card" style="grid-column:1/-1;">
|
||
<div class="label">🎨 107种预设图标 — 点击任意图标发送Toast</div>
|
||
<div class="btn-row" id="icon-grid" style="max-height:300px;overflow-y:auto;padding:4px 0;"></div>
|
||
</div>
|
||
|
||
</main>
|
||
|
||
<footer>
|
||
MetonaToast v2.0.0 · MIT · <a href="index.html">首页</a> · <a href="docs.html">文档</a> · <a href="https://gitee.com/thzxx/MetonaToast">Gitee</a>
|
||
</footer>
|
||
|
||
<script src="../dist/metona-toast.js"></script>
|
||
<script>
|
||
MeToast.configure({ position:'top-right', duration:4000, theme:'dark', animation:'slide', pauseOnHover:true, showProgress:true });
|
||
|
||
// === Loading ===
|
||
function demoLoading() { const l=MeToast.loading('正在提交...'); setTimeout(()=>l.success('提交成功！'),2000); }
|
||
function demoLoadingFail() { const l=MeToast.loading('正在处理...'); setTimeout(()=>l.error('处理失败'),2000); }
|
||
function demoLoadingWarn() { const l=MeToast.loading('检查中...'); setTimeout(()=>l.warning('发现潜在问题'),2000); }
|
||
function demoLoadingUpdate() { const l=MeToast.loading('处理中 0%'); let i=1; const t=setInterval(()=>{if(i>3){clearInterval(t);l.success('完成！');return;} l.update({message:'处理中 '+i*33+'%'}); i++;},600); }
|
||
|
||
// === Promise / confirm / prompt ===
|
||
async function demoPromise() {
|
||
const p=new Promise((r,e)=>setTimeout(()=>Math.random()>0.3?r('ok'):e('fail'),2000));
|
||
try{await MeToast.promise(p,{loading:'处理中...',success:'成功！',error:'失败'});}catch(_){}
|
||
}
|
||
async function demoConfirm() { const ok=await MeToast.confirm('确定删除？',{confirmText:'删除',confirmColor:'#ef4444'}); if(ok)MeToast.success('已删除'); }
|
||
async function demoPrompt() { const v=await MeToast.prompt('请输入姓名',{placeholder:'请输入...'}); if(v) MeToast.info('你好，'+v+'！'); }
|
||
async function demoPromptPassword() { const v=await MeToast.prompt('请输入密码',{placeholder:'密码',inputType:'password',submitText:'登录'}); if(v) MeToast.info('密码已输入'); }
|
||
|
||
// === Progress & Countdown ===
|
||
function demoProgress() { const p=MeToast.progress('上传中...',{progressColor:'#3b82f6'}); let v=0; const t=setInterval(()=>{v+=Math.random()*25; if(v>=100){clearInterval(t);p.complete('上传完成！');}else p.setProgress(v);},400); }
|
||
function demoProgressV() { const p=MeToast.progress('上传中...',{progressColor:'#10b981',progressDirection:'vertical'}); let v=0; const t=setInterval(()=>{v+=Math.random()*25; if(v>=100){clearInterval(t);p.complete('完成！');}else p.setProgress(v);},400); }
|
||
function demoCountdown() { MeToast.countdown('{seconds} 秒后执行',5,{onComplete:()=>MeToast.success('已执行')}); }
|
||
function demoCountdownPause() {
|
||
const c=MeToast.countdown('{seconds}s 可暂停',10,{type:'info',onComplete:()=>MeToast.success('倒计时结束')});
|
||
setTimeout(()=>{c.pause();MeToast.warning('已暂停3秒后恢复',{duration:3000})},4000);
|
||
setTimeout(()=>{c.resume();MeToast.info('已恢复倒计时')},7000);
|
||
}
|
||
|
||
// === Queue & Stack ===
|
||
async function demoQueue() { await MeToast.queue(['第一步','第二步','第三步'],{delay:800,duration:2000,type:'info'}); }
|
||
async function demoQueueCancel() {
|
||
const q=MeToast.queue(['步骤1','步骤2','步骤3','步骤4','步骤5'],{delay:600,duration:1500,type:'info'});
|
||
setTimeout(()=>{q.cancel();MeToast.warning('队列已取消',{duration:2000});},3500);
|
||
}
|
||
function demoStack() { MeToast.stack(['消息1','消息2','消息3','消息4','消息5'],{stagger:120,type:'info'}); }
|
||
function demoStackMixed() {
|
||
MeToast.stack(['普通消息',{message:'警告消息',type:'warning',duration:5000},{message:'错误消息',type:'error'}],{stagger:150});
|
||
}
|
||
|
||
// === Action ===
|
||
function demoActionDelete() { MeToast.action('文件 data.json 已删除',[{text:'撤销',onClick:()=>MeToast.success('已撤销'),color:'#3b82f6'}]); }
|
||
function demoActionMulti() { MeToast.action('邮件已发送',[{text:'查看',onClick:()=>MeToast.info('打开邮件详情'),color:'#3b82f6'},{text:'撤回',onClick:()=>MeToast.warning('已撤回'),color:'#f59e0b'}]); }
|
||
function demoActionNoClose() { MeToast.action('完成后点击关闭',[{text:'我知道了',onClick:()=>{},color:'#10b981'}]); }
|
||
|
||
// === Group ===
|
||
const group = MeToast.group('demo-group');
|
||
function demoGroup() { group.success('分组成功 #'+group.count()); group.info('分组消息 #'+group.count()); }
|
||
function dismissGroup() { MeToast.dismissGroup('demo-group'); MeToast.info('分组已关闭'); }
|
||
function demoGroupMixed() {
|
||
const g = MeToast.group('mixed-test');
|
||
g.success('OK'); g.warning('Warning'); g.info('Info');
|
||
setTimeout(()=>MeToast.dismissGroup('mixed-test'),4000);
|
||
}
|
||
|
||
// === Animation ===
|
||
function anim(name) { MeToast.success('动画: '+name,{animation:name,duration:3000,showProgress:false}); }
|
||
|
||
// === Theme ===
|
||
function switchTheme(t) { MeToast.themes.switchTheme(t); MeToast.configure({theme:t}); MeToast.info('主题: '+t,{theme:t}); }
|
||
function demoRegisterTheme() {
|
||
try {
|
||
MeToast.themes.registerTheme('sunset',{bg:'rgba(255,248,240,0.96)',text:'#92400e',border:'rgba(249,115,22,0.2)',shadow:'0 10px 36px -10px rgba(249,115,22,0.2)',hoverShadow:'0 14px 48px -10px rgba(249,115,22,0.3)',progressBg:'rgba(249,115,22,0.1)',closeHoverBg:'rgba(249,115,22,0.1)'});
|
||
MeToast.themes.switchTheme('sunset');
|
||
MeToast.configure({theme:'sunset'});
|
||
MeToast.success('已切换到 sunset 主题',{theme:'sunset'});
|
||
} catch(_) { MeToast.warning('主题已注册，已切换'); }
|
||
}
|
||
|
||
// === Plugins ===
|
||
function demoCustomPlugin() {
|
||
MeToast.use({name:'click-counter',version:'1.0',install(){let c=0;Toast.on('afterShow',t=>{c++;setTimeout(()=>t.update({message:t.message.replace(/\\(\\d+\\)/,'')+' (总通知#'+c+')'}),1);});}});
|
||
MeToast.info('自定义插件已安装（消息后追加计数）');
|
||
}
|
||
|
||
// === v2.0 new features ===
|
||
function demoResetTimer() {
|
||
const t=MeToast.info('这条消息不会自动消失（resetTimer）',{duration:3000,resetTimerOnUpdate:true,closeButton:true});
|
||
let n=0; const iv=setInterval(()=>{n++;if(n>8){clearInterval(iv);t.close();return;}t.update({message:'重置计时器 #'+n+' — 每次更新重置3秒'});},1000);
|
||
}
|
||
function demoOnUpdate() { const t=MeToast.success('onUpdate 演示',{onUpdate:t=>{console.log('更新了:',t.message);}}); setTimeout(()=>t.update({message:'已更新！'}),1000); setTimeout(()=>t.update({message:'再次更新！'}),2000); }
|
||
function demoCustomRender() {
|
||
MeToast.show({render:toast=>'<div style="background:#111;color:#0f0;padding:16px 20px;border-radius:10px;border:1px solid #0f0;font-family:monospace">🟢 <b>'+toast.message+'</b><br><span style="font-size:11px;opacity:0.6"># custom render by thzxx</span></div>',message:'自定义渲染内容',duration:5000});
|
||
}
|
||
function demoNotify() {
|
||
if(typeof Notification==='undefined'){MeToast.error('浏览器不支持 Notification');return;}
|
||
if(Notification.permission==='denied'){MeToast.error('通知权限已拒绝');return;}
|
||
MeToast.info('页面隐藏时看系统通知',{notifyWhenHidden:true,duration:6000});
|
||
}
|
||
|
||
// === Management ===
|
||
function demoFindById() {
|
||
const t=MeToast.info('这是测试 toast',{duration:5000});
|
||
setTimeout(()=>{const found=MeToast.find(t.id); if(found)MeToast.success('找到了 #'+found.id);},500);
|
||
}
|
||
function demoGetAll() { const all=MeToast.getAll(); MeToast.info('当前共 '+all.size+' 条 toast'); }
|
||
function demoClearByPos() { MeToast.error('右下角临时消息',{position:'bottom-right',duration:3000}); setTimeout(()=>{MeToast.clear('bottom-right');MeToast.info('右下角已清除');},500); }
|
||
function demoGetConfig() { try{const c=MeToast.getConfig();MeToast.info('配置: '+JSON.stringify({position:c.position,duration:c.duration,theme:c.theme,animation:c.animation,locale:c.locale}).replace(/"/g,''),{duration:5000});}catch(e){MeToast.error('无 getConfig 方法');} }
|
||
|
||
// === Interaction ===
|
||
function demoDraggable() { MeToast.info('← 试试拖动我来关闭',{draggable:true,duration:8000,closeButton:true}); }
|
||
function demoPauseHover() { MeToast.info('鼠标悬停在我上面，倒计时会暂停',{pauseOnHover:true,duration:8000}); }
|
||
function demoCloseOnClick() { MeToast.warning('点击我即可关闭',{closeOnClick:true,duration:10000}); }
|
||
function demoWidth() { MeToast.info('宽550px',{width:550}); setTimeout(()=>MeToast.info('宽280px(窄)',{width:280}),500); }
|
||
function demoClassName() { MeToast.success('带自定义 className',{className:'demo-custom-class'}); }
|
||
function demoCustomIcon() {
|
||
MeToast.info('通用通知', {
|
||
iconHTML: '<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/></svg>'
|
||
});
|
||
}
|
||
|
||
// === i18n ===
|
||
function switchLocale(loc) {
|
||
try{MeToast.i18n.switchLocale(loc);MeToast.configure({locale:loc});MeToast.success(loc==='zh-CN'?'已切换到中文':'Switched to English',{theme:'dark'});}
|
||
catch(e){MeToast.info('已切换语言');}
|
||
}
|
||
function demoFormat() {
|
||
try{
|
||
MeToast.info('数字: '+MeToast.i18n.formatNumber(1234567)+' | 货币: '+MeToast.i18n.formatCurrency(99.5,'CNY')+' | 日期: '+MeToast.i18n.formatDate(new Date()),{duration:8000});
|
||
}catch(e){MeToast.info('格式化: 1234567 → 1,234,567');}
|
||
}
|
||
|
||
// === 图标网格 ===
|
||
(function renderIcons() {
|
||
var grid = document.getElementById('icon-grid');
|
||
if (!grid) return;
|
||
var icons = ['success','error','warning','info','loading','close','check','x','alert','question','star','heart','bell','mail','settings','user','home','search','plus','minus','edit','trash','download','upload','share','link','external','clock','calendar','map','compass','globe','wifi','cloud','sun','moon','zap','activity','cpu','database','server','terminal','code','git','package','layers','grid','list','filter','sort','refresh','sync','power','battery','bluetooth','volume','mic','camera','image','video','music','file','folder','clipboard','save','print','eye','eyeOff','lock','unlock','shield','key','flag','bookmark','tag','gift','award','target','crosshair','move','maximize','minimize','copy','cut','paste','rotateCw','rotateCcw','zoomIn','zoomOut','crop','sliders','toggleLeft','toggleRight','checkCircle','xCircle','alertCircle','infoCircle','helpCircle','alertTriangle','checkSquare','square','circle','triangle','hexagon','octagon','pentagon','diamond'];
|
||
icons.forEach(function(ic) {
|
||
var btn = document.createElement('button');
|
||
btn.className = 'btn btn-outline btn-tiny';
|
||
btn.textContent = ic;
|
||
btn.title = 'type=' + ic;
|
||
btn.onclick = function() { MeToast.success(ic, { type: ic, duration: 2000, showProgress: false }); };
|
||
grid.appendChild(btn);
|
||
});
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|