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

先上效果图：

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

/*jslint browser: true*/
/*global console, Framework7, alert, Dom7*/

/**
 * A plugin for Framework7 to show black little toasts
 *
 * @author www.timo-ernst.net
 * @license MIT
 */
Framework7.prototype.plugins.toast = function (app, globalPluginParams) {
  'use strict';
  
  var Toast = function (text, iconhtml, options) {
    var self = this,
        $$ = Dom7,
        $box;

    function hideBox($curbox) {
      if ($curbox) {
        $curbox.removeClass('fadein').transitionEnd(function () {
          $curbox.remove();
        });
      }
    }

    function isString(obj) {
      return toString.call(obj) === '[object String]';
    }
    
    this.show = function (message) {
      var clientLeft,
          $curbox,
          html = [];
      
      // Remove old toasts first if there are still any
      $$('.toast-container').off('click').off('transitionEnd').remove();
      $box = $$('<div class="toast-container show">');
      
      // Add content
      if (isString(iconhtml) && iconhtml.length > 0) {
        html.push(
          '<div class="toast-icon">' + 
            iconhtml + 
          '</div>'
        );
      }

      if (isString(message) && message.length > 0) {
        text = message;
      }

      if (isString(text) && text.length > 0) {
        html.push(
          '<div class="toast-msg">' + 
            text + 
          '</div>'
        );
      }

      $box.html(
        html.join('')
      );

      // Add to DOM
      clientLeft = $box[0].clientLeft;
      $$('body').append($box);

      $box.css('margin-top', $box.outerHeight() / -2 + 'px')
          .css('margin-left', $box.outerWidth() / -2 + 'px');
      
      // Hide box on click
      $box.click(function () {
        hideBox($box);
      });

      // Dirty hack to cause relayout xD
      clientLeft = $box[0].clientLeft;
      
      // Fade in toast
      $box.addClass('fadein');

      // Automatically hide box after few seconds
      $curbox = $box;
      setTimeout(function () {
        hideBox($curbox);
      }, 1500);
    };

    this.hide = function() {
      hideBox($box);
    };
    
    return this;
  };
  
  app.toast = function (text, iconhtml, options) {
    return new Toast(text, iconhtml, options);
  };
};

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

      var app = new Framework7();
      var toast = app.toast('这是一个toast', '', {});
      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