bootstrap v4 toast轻提示正确用法
时间:2022-07-22
本文章向大家介绍bootstrap v4 toast轻提示正确用法,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
用vue和小程序开发的同学会感到里面的toast轻提示很好,可惜bootstrap到4以上才支持,而它的帮助里写的代码感觉都是“扯淡”的,根本用不起来效果。
轻提示首先是不影响页面布局,像弹窗一样,设置延迟的时间后会自动消失。
下图是vue的。——新建成功那个就是轻提示了。
所以这里有标准的用法。
https://github.com/Script47/Toast
https://www.kaiu.net/script/content/3154
https://www.kaiu.net/script/show/3154
注意,git上代码在不断更新,并且example也是在更新,请以上面第一为准哦。
首先要引用git上toast.css和js,以及bootstrap.js和css的4.0版本以上,然后将example代码拷贝过来使用即可。
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="../dist/toast.min.js"></script>
<script>
const TYPES = ['info', 'warning', 'success', 'error'],
TITLES = {
'info': 'Notice!',
'success': 'Awesome!',
'warning': 'Watch Out!',
'error': 'Doh!'
},
CONTENT = {
'info': 'Hello, world! This is a toast message.',
'success': 'The action has been completed.',
'warning': 'It's all about to go wrong',
'error': 'It all went wrong.'
},
POSITION = ['top-right', 'top-left', 'top-center', 'bottom-right', 'bottom-left', 'bottom-center'];
$.toastDefaults.position = 'bottom-center';
$.toastDefaults.dismissible = true;
$.toastDefaults.stackable = true;
$.toastDefaults.pauseDelayOnHover = true;
$('.snack').click(function() {
var type = TYPES[Math.floor(Math.random() * TYPES.length)],
content = CONTENT[type];
$.snack(type, content);
});
$('.toast-btn').click(function() {
var rng = Math.floor(Math.random() * 2) + 1,
type = TYPES[Math.floor(Math.random() * TYPES.length)],
title = TITLES[type],
content = CONTENT[type];
if (rng === 1) {
$.toast({
type: type,
title: title,
subtitle: '11 mins ago',
content: content,
delay: 5000
});
} else {
$.toast({
type: type,
title: title,
subtitle: '11 mins ago',
content: content,
delay: 5000,
img: {
src: 'https://via.placeholder.com/20',
alt: 'Image'
}
});
}
});
- 实例分享微信小程序项目搭建(上)
- Android6.0源码分析之蓝牙显示接收到的文件
- Android中应用调用系统权限
- Android5.0以后隐式启动ServiceBug
- Android6.0源码分析之录音功能(一)
- Android6.0源码开发之修改默认音量default及max和min
- Android源码开发之添加/删除系统应用
- 按键事件处理
- Android6.0锁屏源码分析之界面布局分析
- Android6.0源码分析之menu键弹出popupwindow菜单流程分析
- Android中初步自定义view
- Android中View研究自学之路 Android6.0源码分析之View(一)Android6.0源码分析之View(二)
- Android蓝牙配对弹出框过程分析 Android蓝牙配对弹出框过程分析
- Android6.0之修改或者查看系统属性值
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- Linux内核参数调优
- 扒掉“缓冲区溢出”的底裤
- MySQL not exists 真的不走索引么?
- 「R」使用 tinyscholar 展示个人谷歌学术档案
- GC调优到底是什么
- VBA编写Ribbon Custom UI编辑器06——读取xml
- centos安装kubectl和minikube工具
- 性能测试必备命令(4)- pstree
- 你必须熟练使用的10条 Python 技巧
- 四叉树在碰撞检测中的应用
- 一些Redis很实用的工作技巧
- 设计模式(Design Patterns)Java版
- 一个PHP高性能、多并发、restful的工具库(基于multi_curl)
- Spring框架的设计模式
- 最全Kafka 设计与原理详解【2017.9全新】