Click here to Skip to main content
15,892,537 members
Articles / Web Development

Creating a simple jQuery plug-in

Rate me:
Please Sign up or sign in to vote.
4.86/5 (7 votes)
26 Sep 2010CPOL5 min read 41.1K   530   27  
This article demonstrates the steps in creating a simple jQuery plug-in with a sample called Map Scroller.
/*!
 * Map Scroller v1.0.0
 * A jQuery Plugin that makes any html element scrollable in a custom way.
 * Copyright 2010, Anand, Vijaya .M
 * Date: Thursday, September 18th 2010
 *
 * Usage:
 * 		$(selector).mapScroll(direction); //enable scrolling
 *					direction - which direction the scrolling is allowed
 * 								vertical, horizontal or both(default)   		
 *
 */
 
 
(function($){

	var eventHandlers = {
		mousemove: function(e){
			var $this = $(this), 
			    scroll = $this.data("scroll"), 
				prevPos = $this.data("position"),
				scrollFn = $this.data("scrollFn");
			
			if(scroll){			
				var diffX = prevPos.x - e.pageX, 
				    diffY = prevPos.y - e.pageY;
						
				scrollFn($this, diffX, diffY);
				
				$this.data("position", {x:e.pageX, y:e.pageY});
			}
		},
		
		mouseupout: function(e){
			$(this).data("scroll", false);
					
			$(this).removeClass("closedhand")
				   .addClass("openhand");
		},
		
		mousedown: function(e){						   
			$(this).data("scroll", true)
				   .data("position", {x : e.pageX, y : e.pageY});
				   
			$(this).removeClass("openhand")
				   .addClass("closedhand");				   
		}
	};
		
	$.fn.mapScroll = function(direction){

		//assigning scroll function
		var scrollFn = (function(){
			switch(direction || "both")
				{
					case "vertical":
						return function($this,x,y){ 
							$this.scrollTop( $this.scrollTop() + y ); 
						};
   				    case "horizontal":
						return function($this,x,y){ 
							$this.scrollLeft( $this.scrollLeft() + x ); 
						};
					case "both":
						return function($this,x,y){ 
							$this.scrollTop( $this.scrollTop() + y).scrollLeft($this.scrollLeft() + x );
						};				
				}		
		})();		
		
		return this.each(function(){
			//disabling text selection
			$(this).disableTextSelect();
			
			//binding event-handlers
			$(this).bind("mousemove", eventHandlers.mousemove)
				   .bind("mouseup mouseout", eventHandlers.mouseupout)
				   .bind("mousedown", eventHandlers.mousedown);
			
			//adding class
			$(this).addClass("openhand");	
			
			//caching the scroll function.
			$(this).data("scrollFn", scrollFn);			
		});
	};
		
})(jQuery);

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer Trigent Software Private Limited
India India
I'm a software developer from south tip of India. I spent most of the time in learning new technologies. I've a keen interest in client-side technologies especially JavaScript and admire it is the most beautiful language ever seen.

I like sharing my knowledge and written some non-popular articles. I believe in quality and standards but blames myself for lagging them.

I believe in small things and they makes me happy!

Comments and Discussions