学习 jQuery 插件开发 2

大多数插件开发都是在 $.fn 命名空间下添加方法,这种插件是基于选择器的。也就是说,用 jQuery 选择器选择一些元素后,然后紧接着调用插件下的方法。但是有些时候,我们需要的插件无须基于选择器。

例如,我想在页面上弹出一个信息提示框(不是 alert 那种),就不需要基于选择器吧。

其实,如果要开发不基于选择器的插件,只要在 $ 下添添加对象或方法即可。例如,我要开发的插件名称为 KBox,我想要的调用方法是 $.KBox.show('Hello World!');,那么插件的代码结构就可能是这样的:

(function( $ ){
	$.KBox = {
		show: function( option ) {
			// do something here
		}
	};
})( jQuery );

顺这这个思路,开始编码。其实就是用 jQuery 在页面上添加几个 div,然后按照自己的需求显示出来。而且还要支持各种自定义选项,例如宽度、高度、字体、背景色等。

Demo:http://jsfiddle.net/akasuna/rasEv/2/embedded/result/

最终效果图如下:

jQuery KBox plugin

显示效果勉强说得过去,可以点击右上角“X”关闭,也支持 ESC 键关闭。

源码及使用方法:https://github.com/libuchao/KBox

(function( $, window, document ){
	$.KBox = {
		// Default setting of this plugin.
		opts: {
			boxContent   : 'Hello KBox!',
			boxWidth     : '400px',
			boxHeight    : '200px',
			boxBgColor   : '#fff',
			boxSdColor   : '#666',
			boxFontFamily: 'Arial',
			boxFontColor : '#000'
		},

		// Show the box
		show: function( options ) {
			if (typeof options === 'string') {
				$.extend(this.opts, {
					boxContent: options
				});
			} else {
				$.extend(this.opts, options);
			}

			// Make a background for page
			$('<div id="kboxback"></div>').css({
				'position'      : 'fixed',
				'top'           : '0px',
				'left'          : '0px',
				'width'         : '100%',
				'height'        : '100%',
				'background'    : '#000',
				'z-index'       : '9999',
				'opacity'       : '0'
			}).appendTo($('body')).animate({'opacity': '.5'}, 300, 'linear');

			// The box we want to show
			$('<div id="kboxfront"></div>').css({
				'position'      : 'fixed',
				'top'           : (($(window).height() - this.opts.boxHeight.replace('px', '')) / 2) + 'px',
				'left'          : (($(window).width()  - this.opts.boxWidth.replace('px', '')) / 2) + 'px',
				'width'         : this.opts.boxWidth,
				'height'        : this.opts.boxHeight,
				'background'    : this.opts.boxBgColor,
				'margin'        : '0px',
				'padding'       : '13px 10px 10px 10px',
				'border-radius' : '9px',
				'box-shadow'    : '10px 10px 5px ' + this.opts.boxSdColor,
				'z-index'       : '10000',
				'opacity'       : '0',
				'word-wrap'     : 'break-all',
				'font-family'   : this.opts.boxFontFamily,
				'color'         : this.opts.boxFontColor
			}).html('<p style="line-height:1.4">' + this.opts.boxContent + '</p>').appendTo($('body')).animate({'opacity': '1'}, 300, 'linear');;

			// CLose button
			$('<div id="kboxclose"></div>').css({
				'position'      : 'absolute',
				'right'         : '10px',
				'top'           : '7px',
				'cursor'        : 'pointer',
				'font-family'   : 'Arial',
				'font-weight'   : 'bold',
				'color'         : '#000'
			}).html('X').appendTo($('#kboxfront')).click(function() {
				$('#kboxfront, #kboxback').animate({'opacity':'0'}, 300, 'linear', function() {
					$(this).remove();
				});
			});

			// Handle the 'ESC' key
			$(document).keyup(function( e ) {
				if (e.keyCode === 27) {
					$('#kboxfront, #kboxback').animate({'opacity':'0'}, 300, 'linear', function() {
						$(this).remove();
					});
				}
			});

			// Retset the #kboxfront's position when window is resizing...
			$(window).resize(function() {
				$('#kboxfront').css({
					'top'       : (($(window).height() - $.KBox.opts.boxHeight.replace('px', '')) / 2) + 'px',
					'left'      : (($(window).width()  - $.KBox.opts.boxWidth.replace('px', '')) / 2) + 'px'
				});
			});
		}
	};
})( jQuery, window, document );
Posted on 2012-04-26

No Comments

Leave a Comment