基于Bootstrap和jQuery编写常用组件1-Message

2019独角兽企业重金招聘Python工程师标准>>>

1、插件代码

(function($) {
	$.fn.extend( {
		"message" : function(options) {
			options = $.extend( {
				//className 可以有alert,alert-success,alert-info, alert-error 等选项，对应不同的样式
				className: 'alert-success',
				title : '提示',
				msg : '操作成功',
				speed: 1000,
				existTime: 3000
			}, options);

			var pageDIV = $('<div class="'+options.className+'" style="display:none;width:260px;height:80px;left:100%;top:100%;margin-left:-300px;margin-top:-140px;position:fixed;">'
		        +'<button type="button" class="close" data-dismiss="alert">×</button>'
		        +'<h4 style="margin-left:20px;margin-top:16px">'+ options.title+'</h4>' 
		        +'<strong style="margin-left:20px">'+options.msg+'</strong>'
		      	+'</div>');
			$('body').append(pageDIV);
			pageDIV.show(options.speed);
			//隐藏对象
			var temp=setTimeout(function(){pageDIV.toggle(options.speed);},options.existTime);
			//移除对象
			temp=setTimeout(function(){pageDIV.remove();},options.existTime+3000);
 		}
 	});
 	return this;
})(jQuery);

2、用法 

$.fn.message();

转载于:https://my.oschina.net/u/173975/blog/142187