mui.dialog.toast.js 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. (function($, window) {
  2. var CLASS_ACTIVE = $.className('active');
  3. /**
  4. * 自动消失提示框
  5. */
  6. $.toast = function(message,options) {
  7. var durations = {
  8. 'long': 3500,
  9. 'short': 2000
  10. };
  11. //计算显示时间
  12. options = $.extend({
  13. duration: 'short'
  14. }, options || {});
  15. if ($.os.plus && options.type !== 'div') {
  16. //默认显示在底部;
  17. $.plusReady(function() {
  18. plus.nativeUI.toast(message, {
  19. verticalAlign: 'bottom',
  20. duration:options.duration
  21. });
  22. });
  23. } else {
  24. if (typeof options.duration === 'number') {
  25. duration = options.duration>0 ? options.duration:durations['short'];
  26. } else {
  27. duration = durations[options.duration];
  28. }
  29. if (!duration) {
  30. duration = durations['short'];
  31. }
  32. var toast = document.createElement('div');
  33. toast.classList.add($.className('toast-container'));
  34. toast.innerHTML = '<div class="' + $.className('toast-message') + '">' + message + '</div>';
  35. toast.addEventListener('webkitTransitionEnd', function() {
  36. if (!toast.classList.contains(CLASS_ACTIVE)) {
  37. toast.parentNode.removeChild(toast);
  38. toast = null;
  39. }
  40. });
  41. //点击则自动消失
  42. toast.addEventListener('click', function() {
  43. toast.parentNode.removeChild(toast);
  44. toast = null;
  45. });
  46. document.body.appendChild(toast);
  47. toast.offsetHeight;
  48. toast.classList.add(CLASS_ACTIVE);
  49. setTimeout(function() {
  50. toast && toast.classList.remove(CLASS_ACTIVE);
  51. }, duration);
  52. return {
  53. isVisible: function() {return !!toast;}
  54. }
  55. }
  56. };
  57. })(mui, window);