模拟弹窗提醒插件
HiToast.js is a simple notification library similar to Toast designed to be used in mobile apps .
Hitoast.js is based on the development of jQuery or Zepto .
InstallationDependency: jQuery or Zepto.
Download HiToast.js:
from GitHub
with Npm :
npm install hitoast.js
Add a div.hitoast which will contain the alerts :
<div id="hitoast"></div>
Usage
To call a notification, use 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});
To remove a notification, use hiToastX().
Toast are automatically bound to a click event and hiToastX() is called when the toast is clicked.
Styling:Before using , please add the following styles to your CSS file :
.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;
}
##Demo
You can see a demo here.
ContributionIf you have good comments or suggestions, please give me a issue or pull request.
版权声明:
1、该文章(资料)来源于互联网公开信息,我方只是对该内容做点评,所分享的下载地址为原作者公开地址。2、网站不提供资料下载,如需下载请到原作者页面进行下载。