designPattern example - factory

fiddle.css

*{
	margin:0;
	padding:0;
}
body{
	padding:30px;
}
.face{
	border:1px solid #000;
	position:relative;
	float:left;
	margin:5px;
	padding:.5em .8em;
}
.happy{
	background:#fff;
	color:#000;
}
.unhappy{
	background:#000;
	color:#fff;
}

fiddle.html

fiddle.js

(function(){

	/* faces */
	var faces_happy = [ '(・∀・)', '∩( ・ω・)∩', '(^o^)' ];
	var faces_unhappy = [ '(；´Д｀)', '(-_-;)', '(´；ω；｀)' ];

    /* create face element from received info.
       This is why I called this "factory" */
	window.generateFace = function(msg, isHappy){
		var $el = $('<div class="face"></div>');
		var nth = randomNum(0,2);
		var face = isHappy ? faces_happy[nth] : faces_unhappy[nth];
		$el.addClass(isHappy ? 'happy' : 'unhappy');
		$el.text(face + ' ' + msg).bind('mouseenter', function(){
			$el.shake();
		});
		return $el;
	};
	
	/* just shake it */
	$.fn.shake = function(){
		return this.each(function(){
			$(this).stop()
				.animate({ left: "-6px" }, 40).animate({ left: "6px" }, 40)
				.animate({ left: "-6px" }, 40).animate({ left: "6px" }, 40)
				.animate({ left: "0px" }, 40);
		});
	};
	/* util */
	function randomNum(from, to) {
		return from + Math.floor( Math.random() * (to - from + 1) );
	}

})();

$(function(){
	generateFace('ひゃっほーい', true).appendTo('body');
	generateFace('やたー', true).appendTo('body');
	generateFace('うれぴー', true).appendTo('body');
	generateFace('感激', true).appendTo('body');
	generateFace('もうだめ', false).appendTo('body');
	generateFace('あばばば', false).appendTo('body');
	generateFace('死ぬ', false).appendTo('body');
	generateFace('徹夜', false).appendTo('body');
});

fiddle.manifest

name: designPattern example - factory
description: http://jsfiddle.net/gh/gist/jQuery/1.6.2/1191790/ https://gist.github.com/1191790
authors:
  - Takeshi Takatsudo
normalize_css: no