# Code snippet for Web Programming at 2012/12/24,
# slide at http://zoro.ee.ncku.edu.tw/wp2012/res/12-photoshop.pdf
################################################################################
# index.html
jQuery plugin
################################################################################
# jquery.animenu.js
// * A simecolon (;) before the plugin to close the previous plugin (if existed)
// when compressing.
// * A self executing anonymous function to wrap the entire plugin, which give
// the plugin a private scope.
// * Passing the jQuery object to this anonymous function as $, so that $ could
// be used within the plugin without confliction.
// * Passing 'undefined' to prevent overrided 'undefined' outside. Pass other
// common objects, such as 'window' and 'document', if needed.
;(function($,undefined){
var plugin='animenu'; // easy to change
// Attach your plugin as a property to $.fn. a['b'] equals to a.b. Check
// the JavaScript associative array.
$.fn[plugin]=function(options){
// $.extend() is a jQuery facility for object merge.
// Starting from {} to prevent changing defaults.
var options=$.extend({},$.fn[plugin].defaults,options);
return this.each(function(){ // Return this to preserving chaining.
var $el=$(this); // Associate the DOM element with the plugin instance.
// Actual code here. Here should be like the non-plugin version.
$el.find('li:even').addClass('even');
$el.find('li').hover(function(){
$(this).animate({marginLeft:options.shift},
{queue:false,duration:options.duration});
},function(){
$(this).animate({marginLeft:'0'},
{queue:true,duration:options.duration});
});
});
};
// Declare the default options as a property of $.fn[plugin] to expose it.
$.fn[plugin].defaults={
duration:300,
shift:20,
};
})(jQuery); // Appending a semicolon (;) to close the plugin for compressing.
// vi:nowrap:sw=2:ts=2