js实现安卓toast效果（Framework7框架）

版权声明：本文为博主原创文章，未经博主允许不得转载。 http://blog.csdn.net/xiaoxiaoluckylucky/article/details/79374157

先上效果图：

1，先写一个js文件，toast.js

[html]  view plain  copy

1. /*jslint browser: true*/  
2. /*global console, Framework7, alert, Dom7*/  
3.   
4. /**  
5.  * A plugin for Framework7 to show black little toasts  
6.  *  
7.  * @author www.timo-ernst.net  
8.  * @license MIT  
9.  */  
10. Framework7.prototype.plugins.toast = function (app, globalPluginParams) {  
11.   'use strict';  
12.     
13.   var Toast = function (text, iconhtml, options) {  
14.     var self = this,  
15.         $$ = Dom7,  
16.         $box;  
17.   
18.     function hideBox($curbox) {  
19.       if ($curbox) {  
20.         $curbox.removeClass('fadein').transitionEnd(function () {  
21.           $curbox.remove();  
22.         });  
23.       }  
24.     }  
25.   
26.     function isString(obj) {  
27.       return toString.call(obj) === '[object String]';  
28.     }  
29.       
30.     this.show = function (message) {  
31.       var clientLeft,  
32.           $curbox,  
33.           html = [];  
34.         
35.       // Remove old toasts first if there are still any  
36.       $$('.toast-container').off('click').off('transitionEnd').remove();  
37.       $box = $$('<div class="toast-container show">');  
38.         
39.       // Add content  
40.       if (isString(iconhtml) && iconhtml.length > 0) {  
41.         html.push(  
42.           '<div class="toast-icon">' +   
43.             iconhtml +   
44.           '</div>'  
45.         );  
46.       }  
47.   
48.       if (isString(message) && message.length > 0) {  
49.         text = message;  
50.       }  
51.   
52.       if (isString(text) && text.length > 0) {  
53.         html.push(  
54.           '<div class="toast-msg">' +   
55.             text +   
56.           '</div>'  
57.         );  
58.       }  
59.   
60.       $box.html(  
61.         html.join('')  
62.       );  
63.   
64.       // Add to DOM  
65.       clientLeft = $box[0].clientLeft;  
66.       $$('body').append($box);  
67.   
68.       $box.css('margin-top', $box.outerHeight() / -2 + 'px')  
69.           .css('margin-left', $box.outerWidth() / -2 + 'px');  
70.         
71.       // Hide box on click  
72.       $box.click(function () {  
73.         hideBox($box);  
74.       });  
75.   
76.       // Dirty hack to cause relayout xD  
77.       clientLeft = $box[0].clientLeft;  
78.         
79.       // Fade in toast  
80.       $box.addClass('fadein');  
81.   
82.       // Automatically hide box after few seconds  
83.       $curbox = $box;  
84.       setTimeout(function () {  
85.         hideBox($curbox);  
86.       }, 1500);  
87.     };  
88.   
89.     this.hide = function() {  
90.       hideBox($box);  
91.     };  
92.       
93.     return this;  
94.   };  
95.     
96.   app.toast = function (text, iconhtml, options) {  
97.     return new Toast(text, iconhtml, options);  
98.   };  
99. };  

2，然后在需要的地方如下使用：

[html]  view plain  copy

1. var app = new Framework7();  
2. var toast = app.toast('这是一个toast', '', {});  
3. toast.show(true);  

ok。以上使用了Framework7框架，框架文档地址：http://framework7.taobao.org/docs/#.WCv_NGVZ8dU。

/***************************************** 分割线 **************************************／

2017.04.10添加：

在适配多机型的过程中，发现以上方式实现的toast在部分机型上不是水平居中，于是废弃。最终是采用插件cordova-plugin-x-toast实现了想要的效果。

插件地址：https://github.com/EddyVerbruggen/Toast-PhoneGap-Plugin