首页
友链
壁纸
留言
今日热榜
更多
关于
时光
推荐
精品流量卡
Search
1
都二十多年了,你的梦为什么还没碎!
57,085 阅读
2
2022年5个好用的 BT/ 磁力链接下载工具推荐 |Windows 、安卓系统
37,335 阅读
3
nps内网穿透实现外网访问树莓派
32,418 阅读
4
实践利用宝塔建emlog个人博客-超详细【原创】
26,129 阅读
5
Typecho-Joe-Theme主题帮助文档
24,602 阅读
闲杂乱码
Python
网站源码
微信小程序
娱乐分享
Is相册
软件工具
登录
Search
标签搜索
PHP
HTML
API
Javascript
源码
JS
Vue
Github
CloudFlare
接口
函数
SQL
ASP.NET
MVC
EF
T4模板
后台管理
CDN
微信小程序
MAC
韩小韩
累计撰写
261
篇文章
累计收到
1,303
条评论
首页
栏目
闲杂乱码
Python
网站源码
微信小程序
娱乐分享
Is相册
软件工具
页面
友链
壁纸
留言
今日热榜
关于
时光
推荐
精品流量卡
搜索到
1
篇与
消息提示插件
的结果
2021-06-21
VH-Toast - 一款简约的基于原生Javascript的消息提示插件(原创)
一款简约的基于原生 Javascript 的消息提示插件{message type="info" content="一款简约的基于原生 Javascript 的消息提示插件 VH-Toast。比如,$vh.default,$vh.info 等,默认为default。此时正文内容以message的值传入。同时,我们可传入 vhHtml 来支持 HTML标签 的显示。"/}Github项目地址{cloud title="VH-Toast" type="github" url="https://github.com/uxiaohan/VH-Toast" password=""/}演示地址{anote icon="fa-link" href="https://www.vvhan.com/other/vh-toast/index.html" type="secondary" content="点击查看演示效果"/}Demo调用<script src="https://cache.4ce.cn/gh/uxiaohan/VH-Toast/lib/vh.toast.min.js"></script>代码<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>VH-Toast - 一款简约的基于原生Javascript的消息提示插件(原创)</title> <style> body { margin: 0; padding: 0; box-sizing: border-box; background-color: darkslategray; text-align: center; } input { margin:36px auto 0; width: 86%; height: 40px; font-size: 16px; padding: 4px 10px; outline: none; } .btns { margin-top: 36px; display: flex; justify-content: space-between; } .btns button { outline: none; flex: 1; height: 40px; margin: 0 10px; } </style> <script src="https://cache.4ce.cn/gh/uxiaohan/VH-Toast/lib/vh.toast.min.js"></script> </head> <body> <input placeholder="请输入内容" type="text"> <div class="btns"> <button onclick="defalt()">默认消息</button> <button onclick="success()">成功消息</button> <button onclick="info()">信息消息</button> <button onclick="warning()">警告消息</button> <button onclick="error()">危险消息</button> </div> <script> function defalt() { const msg = document.querySelector('input').value || '你可以在输入框内输入内容来测试!'; $vh.default(msg); } function success() { const msg = document.querySelector('input').value || '你可以在输入框内输入内容来测试!'; $vh.success(msg); } function info() { const msg = document.querySelector('input').value || '你可以在输入框内输入内容来测试!'; $vh.info(msg); } function warning() { const msg = document.querySelector('input').value || '你可以在输入框内输入内容来测试!'; $vh.warning(msg); } function error() { const msg = document.querySelector('input').value || '你可以在输入框内输入内容来测试!'; $vh.error(msg); } </script> </body> </html>使用文档默认样式$vh.default("这是一条默认消息提示"); $vh.default({ message: "这是一条默认消息提示", }); $vh.default({ message: "这是一条支持 HTML标签 的默认消息提示", vhHtml: true, });成功样式$vh.success("这是一条成功消息提示"); $vh.success({ message: "这是一条成功消息提示", }); $vh.success({ message: "这是一条支持 HTML标签 的成功消息提示", vhHtml: true, });消息样式$vh.info("这是一条消息提示"); $vh.info({ message: "这是一条消息提示", }); $vh.info({ message: "这是一条支持 HTML标签 的消息提示", vhHtml: true, });警告样式$vh.warning("这是一条警告消息提示"); $vh.warning({ message: "这是一条警告消息提示", }); $vh.warning({ message: "这是一条支持 HTML标签 的警告消息提示", vhHtml: true, });错误样式$vh.error("这是一条错误消息提示"); $vh.error({ message: "这是一条错误消息提示", }); $vh.error({ message: "这是一条支持 HTML标签 的错误消息提示", vhHtml: true, });
2021年06月21日
716 阅读
1 评论
2 点赞