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'}});}});

bootstrap v4 toast轻提示正确用法相关推荐

html div toast,React实现全局组件：Toast轻提示
Toast是常用的轻提示弹框,常用于页面loading和提示语弹窗. 本例基于React实现一个随时可调用且不随页面渲染的全局组件. 如何使用首先引入 import Toast from './co ...
React实现全局组件的Toast轻提示效果
Toast是常用的轻提示弹框,常用于页面loading和提示语弹窗. 本例基于React实现一个随时可调用且不随页面渲染的全局组件. 需求分析 Toast 不需要同页面一起被渲染,而是根据需要被随时调 ...
qtreeview 点击二级节点弹出dialog_Flutter Toast、弹出提示、轻提示
主流的三种APP反馈形式: toast.snackbar以及dialog. toast通常用于提示用户一些不那么重要的信息, 会弹出并显示文字一段时间. 时间一到就会消失. 相较于snackbar和d ...
react.js fetch 基于单例+轻提示（toast）的简单封装
Services /* eslint-disable no-useless-constructor */import config from './config.js';import 'whatwg- ...
Spring MVC中Session的正确用法之我见02
Spring MVC中Session的正确用法之我见 Spring MVC是个非常优秀的框架,其优秀之处继承自Spring本身依赖注入(Dependency Injection)的强大的模块化和可配置 ...
C#中dynamic的正确用法以及 typeof(DynamicSample).GetMethod(Add);
dynamic是FrameWork4.0的新特性.dynamic的出现让C#具有了弱语言类型的特性.编译器在编译的时候不再对类型进行检查,编译期默认dynamic对象支持你想要的任何特性.比如,即使你 ...
C#中dynamic、ExpandoObject 的正确用法
原文地址:http://www.cnblogs.com/qiuweiguo/archive/2011/08/03/2125982.html dynamic是FrameWork4.0的新特性.dynam ...
vantUI 弹出层（轻提示）案例 - 踩坑篇
vantUI 弹出层(轻提示)- 踩坑篇可自定义项: 显示时长显示内容显示何时消失代码 · 实例: if(this.checkedAgreement == false){this.$toast
改善C#程序的建议2：C#中dynamic的正确用法
dynamic是FrameWork4.0的新特性.dynamic的出现让C#具有了弱语言类型的特性.编译器在编译的时候不再对类型进行检查,编译期默认dynamic对象支持你想要的任何特性.比如,即使你 ...

bootstrap v4 toast轻提示正确用法

bootstrap v4 toast轻提示正确用法相关推荐

最新文章

热门文章