基於Bootstrap和jQuery編寫經常使用組件1-Message

一、插件代碼

(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);

二、用法 

$.fn.message();