jquery.notify.js 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  1. /**
  2. * jQuery notify v1.0
  3. * 2015 Yefei <316606233@qq.com>
  4. *
  5. * $('<p>Hello World!</p>').notify();
  6. * $('<p>Hello World!</p>').notify('error');
  7. * $('<p>Hello World!</p>').notify({sticky: true});
  8. *
  9. * <p class="notify" data-notify-type="error">Error!</p>
  10. * <p class="notify" data-notify-type="success sticky">Sticky Info</p>
  11. * $('.notify').notify();
  12. */
  13. !function($) {
  14. var types = ['notice', 'warning', 'error', 'success'];
  15. var audio;
  16. var settings = {
  17. inEffect: {
  18. opacity: 'show'
  19. },
  20. inEffectDuration: 100,
  21. stay: 5000,
  22. sticky: false,
  23. type: 'notice',
  24. position: 'top-right',
  25. sound: null
  26. };
  27. function dataSetting(el, options, name) {
  28. var data = el.data('notify-' + name);
  29. if (data) options[name] = data;
  30. };
  31. var Notify = function(el, options){
  32. var el = $(el);
  33. var $this = this;
  34. var dataSettings = {};
  35. $.each(['type','stay','position'], function(k, v){
  36. dataSetting(el, dataSettings, v);
  37. });
  38. if (el.data('notify-sticky')) {
  39. dataSettings['sticky'] = el.data('notify-sticky') == 'yes';
  40. }
  41. this.opts = $.extend({}, settings, dataSettings, typeof options == 'object' && options);
  42. // 检查 type 配置里面是否有 sticky 值
  43. if (this.opts.type.indexOf('sticky') > -1) {
  44. this.opts.sticky = true;
  45. this.opts.type = $.trim(this.opts.type.replace('sticky',''));
  46. }
  47. // 检查 type 类型是否支持
  48. if (types.indexOf(this.opts.type) == -1) {
  49. this.opts.type = settings.type;
  50. }
  51. var wrapAll = (!$('.notify-container').length) ? $('<div></div>').addClass('notify-container').addClass('notify-position-' + this.opts.position).appendTo('body') : $('.notify-container');
  52. var itemOuter = $('<div></div>').addClass('notify-item-wrapper');
  53. this.itemInner = $('<div></div>').hide().addClass('notify-item notify-type-' + this.opts.type).appendTo(wrapAll).append(el).animate(this.opts.inEffect, this.opts.inEffectDuration).wrap(itemOuter);
  54. $('<div></div>').addClass('notify-item-close').prependTo(this.itemInner).click(function(){$this.close()});
  55. $('<div></div>').addClass('notify-item-image').addClass('notify-item-image-' + this.opts.type).prependTo(this.itemInner);
  56. navigator.userAgent.match(/MSIE 6/i) && wrapAll.css({top: document.documentElement.scrollTop});
  57. !this.opts.sticky && setTimeout(function(){$this.close()}, this.opts.stay);
  58. this.opts.sound && audio && audio.play();
  59. };
  60. Notify.prototype.close = function () {
  61. var obj = this.itemInner;
  62. obj.animate({opacity: '0'}, 600, function() {
  63. obj.parent().animate({height: '0px'}, 300, function() {
  64. obj.parent().remove();
  65. });
  66. });
  67. };
  68. $.notifySetup = function(options) {
  69. $.extend(settings, options);
  70. if (options['sound']) {
  71. if (window.HTMLAudioElement) {
  72. audio = new Audio();
  73. audio.src = options['sound'];
  74. }
  75. }
  76. };
  77. $.fn.notify = function(options) {
  78. return this.each(function () {
  79. if (typeof options == 'string') {
  80. return new Notify(this, {type: options});
  81. }
  82. return new Notify(this, options);
  83. });
  84. };
  85. }(window.jQuery);