Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    toast2public

    简介

    本组件使用 JavaScript 和 CSS 写成。目标有如下若干:

    • 实现一个具有消息提示、成功提示、错误提示等功能的插件
    • 使用时,不依赖任何其他模块(图标也都是纯CSS实现的~~)
    • 浏览器兼容性:IE >= 9 ,Android >= 4.3,ios >= 6,其他浏览器 last 3 version
    • 响应式设计

    本组件的设计,参考了诸多类似功能的插件、组件的设计思路。在此列出,不一而足。

    • iOS-Overlay,这是 toast2.js 最初参考的组件
    • 微信UI:weui,参考了部分基本的样式设计方案
    • http://eve.uedmei.com/doc,参考了部分动画解决方案
    • animate.css,参考了部分动画的解决方案
    • ICONO,参考其中若干图标的纯CSS解决方案,替换掉最开始由 font-awesome 实现的图标

    源码&文档&包地址

    文档与示例地址:http://borninsummer.com/toast2.js/

    npm 包地址:https://www.npmjs.com/package/toast2

    源码地址:https://github.com/zilong-thu/toast2.js

    使用方式

    直接引用

    <link rel="stylesheet" type="text/css" href="toast.css">
    
    <script type="text/javascript" src="toast.js"></script>
    

    toast.js 会将 toast 注册到 window 上面,成为全局变量。

    React + Bable

    安装:

    npm i --save toast2
    

    然后,引入这个模块:

    import toast from 'toast2';
    

    然后,还需要引用一下CSS文件,如果使用了诸如 less、sass、stylus或者postcss 等编译工具,可以像这样引用(以less为例):

    @import "node_modules/toast2/dist/toast.css";
    

    在使用了 webpack 工具的开发环境中,也可以在 JS/JSX/ES6 文件里这样直接引用样式:

    import 'toast2/dist/toast2.css';
    

    示例代码

    最简单的 toast

    toast('this is a toast.');
    

    任何时刻,toast 最多只能有一个。而且总是会自动消失。toast('') 的默认停留时间是3秒。

    TODO:根据其中文本的数量计算默认的显示时间,不过需要处理的情形是:toast里面为 HTML 字符串时,该如何处理。

    toast('this is a toast.')

    toast 长文本的效果:

    toast('this is a toast with long long long long long long long long long text......');
    

    toast('...')长文本

    提示成功,会显示一个正方形的、可以显示简短文本的也会自动消失的 toast。

    toast.success('操作成功!');
    

    toast.success()

    Loading

    显示一个 loading 提示框,3秒后自动消失:

    toast.showLoading()

    toast.showLoading({
      text: '加载中',
    });
    
    setTimeout(function() {
      toast.hideLoading();
    }, 3000);
    

    警告框 alert

    alert 弹窗会打断用户的体验流,因此应该只在真的有必要的时候使用。toast2.js 提供的 alert 有三类:

    • 普通的警告
    • 成功提示
    • 错误、失败提示

    普通的 alert 可以这样写:

    // 方式1:
    toast.alert('This is an alert.', () => {
      // do something after closing
    });
    
    // 方式2:
    toast.alert({
      title: '提示',  // title 是可选的
      text: 'This is an alert.',
      onClose: function() {
        ...
      }
    });
    

    toast.alert('')

    带有 title 的 alert:

    toast.alert('')

    成功提示:

    success 弹窗

    toast.alert({
      title: '操作成功!',
      type: 'success',
      text: '您可以在“我的”页面看到刚才的订单。',
      onClose: function() {
        // 点击“确定”后的回调函数
        ...
      }
    })
    

    错误或者失败提示:

    error 弹窗

    toast.alert({
      text: '操作失败!',
      type: 'error',
      onClose: function() {
        // 点击“确定”后的回调函数
        ...
      }
    })
    

    confirm 对话框:

    toast.confirm('')

    toast.confirm({
      title: '提示',  // title 是可选的
      text: '请问你真的要退出吗?',
      onConfirm: function() {
        // 点击“确定”后的回调函数
        ...
      },
      onCancel: function() {
        // 点击“取消”后的回调函数
        ...
      }
    })
    

    此外,toast.confirm() 方法可以修改确定和取消按钮的文本,分别通过 sureBtnTextcancelBtnText 来设置,例如:

    confirm 按钮文本

    toast.confirm({
      title: '提示',
      text: '确定要进行修改吗?修改后,新的价格方案会立即生效。',
      sureBtnText: '确定修改',
      cancelBtnText: '取消',
      onConfirm: function() {},
      onCancel: function() {}
    });
    

    Toast.message()

    toast2 的 message 设计理念是尽可能不打断用户的交互流程,因此会以非阻塞的方式出现。目前设计了3类 message:

    • message,浅的米黄色,用于普通的消息提示
    • danger,比较醒目的红色,用于表示出错了
    • info,清爽的天蓝色,表示有值得注意的信息出现了

    当鼠标悬浮到 message 上方时,会延迟自动关闭。

    toast.message('')

    toast.danger('')

    toast.info('')

    {type: 'success'}

    toast.message() 也提供了 success 类型的消息框,是在配置项里添加 type: 'success' 来实现的:

    toast.message({
      text: '请求成功!',
      type: 'success'
    });
    

    下面是一个不显示“关闭”按钮的例子。这样的消息框,最好不要把 autoHide 属性设置为 false

    toast.message({
      text: 'This example shows a message box without close button.',
      showCloseBtn: false
    });
    

    不显示“关闭”按钮

    “关闭”按钮+autoHide

    组合使用

    先调用 confirm 方法,在点击确定后,立即用 toast('text') 提示点击了“确定”按钮。

    toast.confirm({
      text: '点击确定吧~~',
      onConfirm: function() {
        toast('谢谢!');
      }
    });
    

    confirm + toast

    For Developers Who Want to Contribute

    Folder structor of toast2 project is as follows.

    .
    ├── README.md
    ├── build.js
    ├── dist
    │   ├── toast.css
    │   └── toast.js
    ├── favicon.png
    ├── gulpfile.js
    ├── index.css
    ├── index.html
    ├── node_modules
    │   │...dir and files
    ├── package.json
    ├── src
    │   ├── animations.less
    │   ├── fix-scrollbars.less
    │   ├── font.less
    │   ├── icons.less
    │   ├── media.less
    │   ├── message.less
    │   ├── toast-btn.less
    │   ├── toast.css
    │   └── toast.js
    └── views
        ├── body.html
        ├── ga.html
        ├── index.less
        └── index.tpl
    

    To guarantee a small published code volume, .npmignore file is presented in the root dir.



    2016 ~ 2018 © zilong-thu


    install

    npm i toast2

    Downloadsweekly downloads

    1

    version

    2.1.1

    license

    ISC

    repository

    githubgithub

    last publish

    collaborators

    • avatar