【前端插件】基于JQuery / Zepto的移动端弹窗提示插件,模仿原生Toast

1、概述

对于前端人员来说，经常在做混合移动端的时候，需要弹窗提示一些信息。现在网上有很多类似的插件，但是都为了追求功能全面，而做的体量很大，使用起来不是很方便，而且资源消耗也比较大。所以，一个轻量级的只专注于提示信息的弹窗插件就显得尤为重要。

HiToast.js就是为此开发的。

2、依赖：

该插件依赖JQuery或者Zepto，使用之前需要在页面引入或者使用 npm 或者 bower install。

3、获取插件

From GitHub

From Npm

    npm install hitoast.js

4、 使用前

• HTML页面添加

  <div id="hitoast"></div>
  

• CSS添加

.toast {    
    padding: 5px 15px;
    border: 1px solid #eed3d7;
    border-radius: 4px;
    position: fixed;height: 20px;
}
.toast-Error {
    color: white;
    background-color: #DA4453;
}
.toast-Success {
    color: white;
    background-color: #37BC9B;
}
.toast-Info {
    color: white;
    background-color: #4A89DC;
}
.toast-Waring {
    color: white;
    background-color: #F6BB42;
}

5、使用

在方法中调用hiToast(text,options).Examples:

hiToast("Successfully Create Your Account",{thems:'Success',position:'top'});
hiToast("Hi Toast! You are so handsome",{thems:'Info',position:'center',duration: 5000});
hiToast("Please Check Your Code",{thems:'Waring',fade-time:'fast'});
hiToast("Sorry, bug is coming.",{thems:'Error',position:'bottom','duration': 3000});

text说明：

你想要提示的信息

options说明：

• DefaultOptions:

    'thems' : 'Info',
    'duration' : 3000,
    'fade-time' : 'normal'
    'position' : 'bottom',
    'container-id' : 'hitoast'

• options:

  1. thems: 提示主题，可选项：
     Info ：普通信息
     Success : 成功信息
     Waring : 警示信息
     Error ： 错误信息

  2. duration: 提示持续时间，单位毫秒，需要输入整数值。

  3. fade-time : 淡入淡出效果。可选项：
     normal : 正常
     slow ：慢速
     fast ：快速
     整数值，单位毫秒

  4. position ： 显示位置。可选项
     top : 屏幕顶部
     center : 屏幕中部
     bottom : 屏幕底部

  5. container-id ： 页面添加的div的id，默认为hitoast。

6、Demo

查看Demo，你可以Click Here。

7、贡献

如果你有任何的意见和建议，欢迎给我issue或者pull request。

如果该插件对你有所帮助，请关注我的Github，并给我一个star。