toastr.js組件 關於信息提示框,項目中使用的是toastr.js這個組件,這個組件最大的好處就是非同步、無阻塞,提示後可設置消失時間,並且可以將消息提示放到界面的各個地方。 官方文檔以及源碼 源碼網站:http://codeseven.github.io/toastr/ api:http:// ...
toastr.js組件
關於信息提示框,項目中使用的是toastr.js這個組件,這個組件最大的好處就是非同步、無阻塞,提示後可設置消失時間,並且可以將消息提示放到界面的各個地方。
官方文檔以及源碼
源碼網站:http://codeseven.github.io/toastr/
api:http://www.ithao123.cn/content-2414918.html
引入js和css
<link href="/static/js/toastr/toastr.css" rel="stylesheet"> <!--消息提示--> <script src="/static/js/toastr/toastr.js"></script>
設置提示框位置: toastr.options.positionClass = 'toast-bottom-right';
如toast-bottom-right表示下右、toast-bottom-center表示下中、toast-top-center表示上中等
<script type="text/javascript"> toastr.options.positionClass = 'toast-bottom-right'; </script>
在js中使用
toastr.success('提交數據成功'); toastr.error('Error'); toastr.warning('只能選擇一行進行編輯'); toastr.info('info');
效果如下:
推薦學習網址:https://codeseven.github.io/toastr/demo.html