[JQuery] Plugin 만들기

타입 1.

 

//플러그인 함수명 충돌을 피하기 위해 익명 함수로 감싸주는 부분
(function($){
	$.fn.extend({

		mcctree : function(o) {

			var options = {
					root_icon_open : "/images/mcctree/tree_root_open.gif",
					root_icon_close : "/images/mcctree/tree_root_close.gif",
					type_icon_open : "/images/mcctree/tree_folder_close.gif",
					type_icon_close : "/images/mcctree/tree_folder_open.gif",
					type_icon_end : "/images/mcctree/page.gif",
					icon_open : "/images/mcctree/tree_open.gif",
					icon_close : "/images/mcctree/tree_close.gif",
					progress : "/images/mcctree/progress.gif",
					useline : true,
					ajax : true,
					tree_bg : "/images/mcctree/tree_bg.png",
					tree_bg2 : "/images/mcctree/tree_bg2.png"
					
			};
			var $tree = $(this);
			var options = $.extend(options, o);

			return this.each(function() {
				
				treeinit($tree);
				tree_state($tree, 'close');	
				setEvent();
			
				
				//tree_menu.find('li:last-child').addClass('end');
				//alert($tree.html());

            });
			function setUseLine(tree) {
				tree.find('li').css('background', 'url('+options.tree_bg+') no-repeat 7px top');
				tree.find('li:last-child').css('background', 'url('+options.tree_bg2+') no-repeat 7px top');
			}
			function getPrefixImgChildHtml() {
				return '' +
						'' +
						'' +
						' ';
			}
			function getPrefixImgNoChildHtml() {
				return '' +
						'' +
						' ';
			}
			
			/** progress UI HTML Return! */
			function getProgressUl() {
				return '
'+
							'
' +
							'' +
							'Loading... 
';
			}
			
			function treeinit(tree) {
				if(options.useline) 
					setUseLine(tree);
				tree.find('.child_true').prepend(getPrefixImgChildHtml());
				tree.find('.child_false').prepend(getPrefixImgNoChildHtml());
			}
			
			/** 이벤트 등록 */
			function setEvent() {
				$('.control').live("click" ,function(){
					var parent_li = $(this).parent("li");
					if(options.ajax) {
						ajaxClickEvent($(this), parent_li);
					} else {
						spanToggleEvent($(this), parent_li);
					}
				});
			}
			/** args 0 : span */
			function ajaxClickEvent(span, parent_li) {
			
				 if(parent_li.children("ul").size() == 0 && parent_li.hasClass("child_true")) {
					 requestAjax(parent_li.attr("id"), parent_li);
					 ajaxspanToggleEvent(span, parent_li);
				 } else {
					 spanToggleEvent(span, parent_li);
				 }
				 
				
			}
			function ajaxspanToggleEvent(span, parent_li) {
				if(parent_li.children("ul").size() != 0) {
					span.find('.imgleft').attr('src', options.icon_close);
					span.find('.imgright').attr('src', options.type_icon_close);
				} else {
					parent_li.attr('class', 'child_false');
					span.attr('class', 'endcontrol');
					span.find('img').remove();
					span.append('');
				}
			}
			function spanToggleEvent(span, parent_li) {
			
				var temp_el = parent_li.find('>ul');
				if (temp_el.css('display') == 'none'){
					temp_el.slideDown(100);

					span.find('.imgleft').attr('src', options.icon_close);
					span.find('.imgright').attr('src', options.type_icon_close);
					
					return false;
				} else {
					temp_el.slideUp(100);
					span.find('.imgleft').attr('src', options.icon_open);
					span.find('.imgright').attr('src', options.type_icon_open);
					return false;
				}
			}
			function requestAjax(key, parent_li) {
				
				parent_li.append(getProgressUl());
				
				$.ajax({
					type : "POST",
					url : "/Manager/UnderGroup.json",
					data : { "key": key },
					processData : false,
					contentType : "Application/json;",
					dataType : "json"
				}).done(function(data) {
					var html = $('
');
					$.each(data.undergroup, function(key, object) {
						html.append(
								'
 ' + 
								''+object.groupName+'');
					});
					
					treeinit(html);
					tree_state(html, 'close');	
					parent_li.append(html);
					
				}).fail(function() {
					
				}).always(function() {
					parent_li.find(".progress").remove();
				
				});
			}
			
		
			function tree_state(tree, status){
				if (status == 'close'){
					tree.find('ul').hide();
					
					tree.find('.imgleft').attr('src', options.icon_open);
					tree.find('.imgright').attr('src', options.type_icon_open);
					
				} else if (status == 'open'){
					tree.find('ul').show();
					('a.control').find('.imgleft').attr('src', options.icon_close);
					('a.control').find('.imgright').attr('src', options.type_icon_close);
				

				}
			}
		}
	})
})(jQuery);

 

 

타입 2

 

//플러그인 함수명 충돌을 피하기 위해 익명 함수로 감싸주는 부분
;
(function($, window, document, undefined) {
	// Create the defaults once
	var pluginName = "tablesortsheet", defaults = {
		sort : true,
		filter : true,
		srcSortAscImage : "/images/tablesheet/asc.gif",
		srcSortDescImage : "/images/tablesheet/desc.gif"
	};

	// The actual plugin constructor
	function Plugin(element, options) {
		this.element = element;
		this.options = $.extend({}, defaults, options);
		this._defaults = defaults;
		this._name = pluginName;

		this.init();
	}
	function getAjaxData(key) {
		Plugin.prototype.requestAjax(key);
	}
	
	Plugin.prototype = {

		init : function() {
			var o = defaults;
			var table = $(this.element);
			var options = $(this.options);

			if (o.sort == true) {
				setSort(table, options);
			}
			if (o.filter == true) {
				setFilter(table);
			}
			alert("test");
			/**
			 * thead -> tr -> th 의 img class imgSort를 찾아 해당 이미지를 클륵했을 시에 대한 소팅
			 * 이벤트를 걸어 준다.
			 */
			function setSort(table, options) {
				var $nodes = table.children("thead").children("tr").children(
						"th");
				$sortimgs = $nodes.find("#imgSort");

				/**
				 * imgsort에 이벤트를 등록한다.
				 */

				$sortimgs.each(function() {

					var colIndex = $(this).parent().parent().index();
					$(this).on("click",	function() {

						var sortArr = [];
						var rowArr = {};
						var obj = {};
						var index = $(this).parent().index(); // 해당
																// 이미지가
																// 있는
																// 칼럼의
																// 인덱스
						var tbody = table.find('tbody');
						var tr = table.find('tbody tr');
						var sortOrder;

						// Determine Sort Order
						if ($(this).hasClass(
								'table-sort-order-desc')) {
							sortOrder = 'asc';
						} else if ($(this).hasClass(
								'table-sort-order-asc')) {
							sortOrder = 'des';
						} else {
							sortOrder = 'asc';
						}
						tr.each(function() {
							var text = $(this).find(
									'td:eq(' + index + ')')
									.text()
									+ '_' + $(this).index();
							rowArr[text] = [];
							sortArr.push(text);
							$(this).find('td').each(
									function() {
										rowArr[text].push($(
												this).html());
									});
						});
						// Sort Array and Apply Classes
						sortArr = sortArr.sort();
						if (sortOrder === 'asc') {
							sortArr = sortArr.reverse();
							$(this).removeClass(
									'table-sort-order-des');
							$(this).attr("src",
									options.srcSortDescImage);
						} else {
							$(this).removeClass(
									'table-sort-order-asc');
							$(this).attr("src",
									options.srcSortAscImage);
						}

						removeSortOrderClass(table);
						$(this)
								.addClass(
										'table-sort-order-'
												+ sortOrder);

						newBody({
							table : table,
							tr : tr,
							sortArr : sortArr,
							rowArr : rowArr

						});

					});
				})
			}
			function removeSortOrderClass(table) {
				table.find('th').each(function() {
					$(this).removeClass('table-sort-order-asc');
					$(this).removeClass('table-sort-order-des');
				});
			}
			;

			function newBody(arg) {
				var body = $('
');
				for ( var i = 0; i < arg.sortArr.length; i++) {
					var tr = newRow(arg.rowArr[arg.sortArr[i]]);
					body.append(tr);
				};
				arg.tr.remove();
				arg.table.find('tbody').append(body.children());
			}
			;

			function newRow(arr) {
				var row = $('');
				for ( var i = 0; i < arr.length; i++) {
					var td = $('' + arr[i] + '');
					row.append(td);
				};
				return row;
			}
			;
			/**
			 * Searchbox에 키 입력시에 이벤트 등록. tbody -> tr -> td 의 데이터 들 중에 해당 입력 값에
			 * 대한 값이 있으면 해당 해당 글씨에 색? 없으면 해당 tr hidden 처리. 소팅 이벤트를 걸어 준다.
			 */
			function setFilter(table) {
				var $nodes = table.children("thead").children("tr").children(
						"th");
				var $searchBox = $nodes.find(".searchBox"); // searchbox 선택

				// 존재 하면
				$searchBox.each(function() {
					$(this).on("keyup",	function() {
						var tr = table.find('tbody tr'); // tr  모두
						var match = new RegExp($(this).val()); // RegExp에 searchBox의 값 입력
						tr.each(function() {
							var el = $(this); // tr
							 // highlight이벤트가있음 지우고 
							el.find('.table-sort-highlight').contents()
															.unwrap()
															.end()
															.remove();
							//tr 하위으 모든 text
							if (match.test(el.text())) {
								//자식 엘리어먼트가 없다면
								el.find(':not(:has(*))').each(function() { 
									var target = $(this);
									replaced = 
										target.html().replace(match, function(m, e) { 
										return ''+ m	+ '';
									});
								target.html(replaced); //html을 교환한다.
							});
							el.show();
							} else {
								el.hide();
							}
						});
					});
				});
			}
		},

		requestAjax : function(key) {
			$.ajax({
				type : "POST",
				url : "/Manager/GroupUser.json",
				data : { "key": key },
				processData : false,
				contentType : "Application/json;",
				dataType : "json"
			}).done(function(data) {
				
				//alert(data.group);
				//alert(data.online);
				//alert(data.pause);
				$.each(data.group, function(key, object) {
					alert(object.id);
					//이 데이터를 가지고 데이블에 뿌릴것 
				});
			
			
			}).fail(function() {
				
			}).always(function() {
				
			});
		},

		search : function(table, tableSortContainer) {

		},
		count : function(table, tableSortContainer) {

		}
	};

	// A really lightweight plugin wrapper around the constructor,
	// preventing against multiple instantiations
	$.fn[pluginName] = function(options) {
		return this
				.each(function() {
					//$.data  Element를 위한 유니크한 ID가 리턴된다. 
					if (!$.data(this, "plugin_" + pluginName)) {
						$.data(this, "plugin_" + pluginName, new Plugin(this,
								options));
					} else {
						$.fn.extend({
							getAjaxData : function(key){
								getAjaxData(key);
							}
						})
					}
				
				});
	};

})(jQuery, window, document);