notification

Author: zhang156

jquery.notification.js

@@ -0,0 +1,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);