jQuery-/jquery.notification.js at master · zhang156/jQuery- · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
(function($) {
	var obj = {
			icon: '',
			title: '提示',
			desc: ''
	};
	jQuery.fn.extend({
		notificationShow: function(){
			this.show();
		},
		notificationHide: function(){
			this.hide();
			this.empty();
		},
		notification : function(o) {
			o = $.extend(obj,o);
			if(this) {
				var group = '<div class="notification_group"><h2 class="notification_title">'+ o.title +'</h2>'+
							'<div class="desc">'+ o.desc +'</div></div>';
				var close = '<div class="notification_close" style="position:absolute;top:10px;right:10px;color:#bfcbd9;line-height:1;cursor:pointer;"><i class="iconfont" style="font-size:24px;">&#xe600;</i></div>';
				var icon = '';
				if(o.icon) {
					if(o.icon === 'success')
						icon = '<div class="icon_wrap"><i class="iconfont" style="color:#13ce66;">&#xe642;</i></div>';
					else if(o.icon === 'warning')
						icon = '<div class="icon_wrap"><i class="iconfont" style="color:#f7ba2a;">&#xe6d4;</i></div>';
					else if(o.icon === 'error')
						icon = '<div class="icon_wrap"><i class="iconfont" style="color:#ff4949;">&#xe641;</i></div>';
				}

				// 样式
				this.css({
					//'display': 'none',
					'position': 'fixed',
					'right': '16px',
					'bottom': '50px',
					'padding': '20px',
					'z-index': '1002',
					'width': '330px',
					'boxSize': 'border-box',
					'borderRadius': '2px',
					'backgroundColor': '#fff',
					'boxShadow': '0 2px 4px rgba(0,0,0,.12),0 0 6px rgba(0,0,0,.04)',
					'transition': 'all .3s',
					'overflow': 'hidden'
				});

				this.addClass('clear');
				this.empty().append(icon+group+close);
				var _this = this;

				// 自动消失
				setTimeout(function(){
					_this.notificationHide();
				},2500);

				// 手动关闭
				$('.notification_close').click(function(){
					_this.notificationHide();
				});

				$('.icon_wrap').css({
					'float': 'left',
					'lineHeight': 1,
					'position': 'relative',
					'top': '5px'
				});

				$('.icon_wrap .iconfont').css({
					'font-size': '40px',

				});

				$('.notification_group').css({
					'marginLeft': '50px'
				});

				$('.notification_group .notification_title').css({
					'margin': '0',
					'fontSize' : '18px',
					'color': '#000'
				});
				$('.notification_group .desc').css({
					'margin': '0',
					'color' : '#8391a5'
				});
			}
		}
	});
})(jQuery);