专栏首页hotqin888的专栏bootstrap v4 toast轻提示正确用法

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Android 逆向笔记 —— 一个简单 CrackMe 的逆向总结

    无意中在看雪看到一个简单的 CrackMe 应用,正好就着这个例子总结一下逆向过程中基本的常用工具的使用,和一些简单的常用套路。感兴趣的同学可以照着尝试操作一下...

    路遥TM
  • BootstrapVue 入门[每日前端夜话0x62]

    Vue.js 是一个流行的 JavaScript 库,用于在短时间内开发原型。这包括用户界面、前端应用、静态网页和本机移动应用。它以易用的语法和简单的数据绑定功...

    疯狂的技术宅
  • ionic3使用带图标带事件的toast

    这个时候,如果想扩展这些功能,一是修改源码,二是自己实现,然而这两种方法都比较麻烦,比较好的解决方案是利用现有的开源代码,搜索ionic的相关组件寥寥无几,这个...

    IT晴天
  • Bootstrap 4.6.0 发布,前端开发框架

    v4.6.0 最大的变化是官方对开发环境进行了大的调整以匹配即将正式发布的 v5 版本。官方表示,目前 v4.x 版本的文档改为基于 Hugo 框架提供支持,与...

    IT大咖说
  • 解读bootstrap v4 sass设计

    首先关于bootstrap从v3的less转到v4的sass的十万个为什么,这里暂且不表(计划会另起一篇文章对比less,sass,postcss)。 其次本篇...

    IMWeb前端团队
  • 解读bootstrap v4 sass设计

    首先关于bootstrap从v3的less转到v4的sass的十万个为什么,这里暂且不表(计划会另起一篇文章对比less,sass,postcss)。

    IMWeb前端团队
  • 由浅入深 定制Bootstrap开发自己网站的六种方法

    对于Bootstrap这个CSS框架,很多程序员持鄙视的态度,就如鄙视jQuery一般。诚然,就算不用这个框架,而是纯手写,或者借助JS框架的模板,一样可以写出...

    公众号php_pachong
  • 前端每周清单第 47 期:NPM 年度报告与 2018 展望,Airbnb React Router 实践

    前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点;分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注...

    王下邀月熊
  • 7个实用的 Vue.js 工具和库

    本文总结了一些最值得关注的工具和库,相信你迟早会用在自己的 Vue.js 项目中。同类文章经常只会列举一些 UI 组件库,而本文涉及的范围更广,探讨了 Vue ...

    王小婷
  • 优雅的类写法

    虽然现在已经是ES6的时代,但是,还是有必要了解下ES5是怎么写一个类的。 本文详述JavaScript面向对象编程中的类写法,并分步骤讲述如何写出优雅的类。

    我是leon
  • Java单体应用 - 项目实战(后台) - 03.后台账户管理 - 07.JS代码重构

    原文地址:http://www.work100.net/training/monolithic-project-iot-cloud-admin-manager-...

    光束云
  • “吐司”测试二三事

    问题2: 在做定制版项目时,对方测试曾反馈一个问题,在小米手机上,输入法的Toast提示前面总是带着:搜狗输入法 的应用名称,显...

    用户5521279
  • 2020年 16 个最有用的 Vue UI库

    本文主要跟大家分享一些 Vue 的 UI 库,这些库都是 github 高星的库,废话不多说,我们一直来看看。

    前端小智@大迁世界
  • RDP的阈值怎么选?

    昨天有读者问我RDP的阈值怎么选,我只知道用默认的就行,并不知道原因。于是查了一下:

    Listenlii-生物信息知识分享
  • 安卓逆向系列教程 4.3 登山赛车内购破解

    首先在这里下载游戏:http://g.10086.cn/game/760000032287?spm=www.pdindex.android.addjgame.1

    ApacheCN_飞龙
  • 12 月份新增开源项目:手机都可以变个人监控系统了?

    摘要: 看看开源中国社区 12 月份有哪些值得关注的新增项目:有将手机变成个人监控系统的 Haven,有中文语音对话机器人项目 dingdang-robot,有...

    企鹅号小编
  • 11个让你的 React 应用程序更加出彩的库

    React 在 2013 年发布时,它立即席卷了整个编程世界。React 提供了一种轻松构建交互式 UI 组件的方法,同时管理整个应用程序的状态。它是迄今为止最...

    前端达人
  • Vue3 封装出让后来者难以理解的组件,让你变得不再随时可替代

    https://juejin.cn/post/6964954862991704094

    coder_koala
  • Toastr 通知提示插件

    Toastr 简介 jquery toastr 一款轻量级的通知提示框插件。 网页开发中经常会用到提示框,自带的alert样式无法调整,用户体验差。 所以一般通...

    人生不如戏

扫码关注云+社区

领取腾讯云代金券