Hu Gb

jQuery DropDown Plugin CoffeeScript-el

Már egy ideje szemezgetek a CoffeeScript-el, úgyhogy készítettem vele egy legördülő menü plugint jQuery-hez. A CoffeScript egy új programnyelv ami a Javascript fölé épül, egy Ruby-hoz hasonló szintakszissal. Ha ki szeretnénk próbálni, akkor szükségünk lesz node.js-re, ezért először telepitsük fel azt: https://github.com/joyent/node/wiki/Installation. A node.js hivatalos package manager-e az npm amit az itt leírtak szerint tudsz telepíteni:http://npmjs.org/. Ha ezzel megvagyunk akkor a CoffeScript telepítését az alábbi parancs-al tudjuk megtenni:

npm install coffee-script

Leírom hogyan készült a plugin, egyfajta CoffeeScript ismertetőként.
A jQuery plugin fejlesztési irányelveket követve a kódunk egy closure-ba lesz csomagolva, hogy a változóink ne zavarjanak be a globális névtérbe. Ezt CoffeScript-el ígz tudjuk megvalósítani:

$ = jQuery

Ha ezt a kódot átfuttatjuk a fordítónk ezt kapjuk:

(function() {
  var $;
  $ = jQuery;

}).call(this);

Ebből is látható, hogy a CoffeScript-el kevesebb kóddal, többmindent tudunk megvalósítani, amit án nagyon szeretek. A plugin fejlesztési irányelvek alapján, összeraktam egy boilerplate szerűséget, és ezt átírtam CoffeeScriptre:

###
Licence goes here
###
$ = jQuery

#settings for the plugin
settings = {
	
}

methods = 
	###
	initializes the plugin
	###
	init: (options) ->
		if options
	        $.extend settings, options
	###
	helper method to use the console.log if available
	###			 
	log: (message) ->
		try
			console.log message
		catch e

$.fn.dropdown = ( method ) ->	
	if methods[method]
		methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ))
	else if typeof method == 'object' || ! method
		methods.init.apply( this, arguments )
	else
		$.error( 'Method ' +  method + ' does not exist on jQuery.tooltip' )
A fenti kód támogatja a metódusok meghívását, a chainability-t, és a konfigurálását a pluginnak. Ezekről itt olvashatsz részletesebben: http://docs.jquery.com/Plugins/Authoring
A dropdown plugin elég egyszerű működés szempontjából. Mouseenter event-re láthatóvá tesszük az almenüt, mouseleave-re pedig elrejtjük. Szükségünk lesz még arra, hogy a felső szintű navigaciós elemeknek relative position-t adjunk, a bennük lévő almenünek pedig absolute position-t:
<style>
nav li{
	float:left;
	padding:2px 5px;
	list-style:none;
	position:relative;
}
nav li ul {
	position:absolute;
	top:15px;
	left:0;
	padding:0;
}
nav li ul li{
	clear:both;
}
<nav>
	<ul>
		<li>
			<a href="#">Main element 1</a>
			<ul>
				<li>Sub element 1</li>
			</ul>
		</li>
		<li>
			<a href="#">Main element 2</a>
			<ul>
				<li>Sub element 2</li>
			</ul>
		</li>
	</ul>
</nav>
 

Ezután visszatérhetünk a pluginhoz és az init metódusban megvalósítjuk a funkcionalitást:

init: (options) ->
	return $(this).children('li').each  -> 
		if options
	        $.extend settings, options
		$this = $(this)
		##hide all subnav element
		$this.children('ul').hide()
		$this.mouseenter  -> 
			if settings.effect_in?
				eval "$(this).children('ul')." + settings.effect_in + "(" + settings.options_in + ")"
			else
				$(this).children('ul').show()
		$this.mouseleave  -> 
			if settings.effect_in?
				eval "$(this).children('ul')." + settings.effect_out + "(" + settings.options_out + ")"
			else
				$(this).children('ul').hide()

Végigmegyünk a selector-al kiválasztott elem li elemein és mindegyikre ráakasztunk egy mouseenter és egy mouseleave eseménykezelőt. Ellenőrizzük, hogy a plugin meghívásánál be lett e állítva barmilyen effect és ha igen, akkor egy eval segítségével azt használjuk, ha nem, akkor egy sima hide/show effectet.

A kész plugin egy mintafájl-al letölthető a github-ról:

https://github.com/gregmolnar/jquery-dropdown

Szólj Hozzá