jQuery 사용자 정의 플러그인

1. 플러그인 메커니즘 소개 jquery 라이브러리로 확장하는 방법, 이런 방법이 바로 jquery 플러그인
2. json의 세 가지 형식(jQuery 학습의 기초)
2.1 대상

$(function() {  //jQuery    
    var jsonObj1={
		   sid:'001',
		   sname:'00A'
   }
})

2.2 목록/배열

$(function() {
    var jsonObj2=[1,2,3,4,5]
})

2.3 블렌드 모드

$(function() {
    var jsonObj3={
    		 sid:'003',
  		 sname:'00Z',
    		 hobby:['a','b','c']
     }
 //    alert(jsonObj3);
 //    alert(jsonObj3.sid+","+jsonObj3.sname+","+jsonObj3.hobby);
 //    console.log(jsonObj3);  // json                 
})

3. $.extend

$(function() {
           // $.extend：     (   ) /    jQuery       
           var jsonObj4={}
              //*             ,            ，       ，                
               $.extend(jsonObj4,jsonObj3,jsonObj1);
               console.log(jsonObj4);
               
               //    
               $.extend({
            	   hello:function(){
            		   alert("hello jQuery");
            	   }
               })
               //    
               $.hello();
})

4. $.fn.extend

$(function() {
   /* 2.2 $.fn.extend (    jQuery        )
          $.fn.extend(obj1)//$.fn.method=function(options){...}; */
            //      
            $.fn.extend({
         	   helloa:function(){
         		   alert("hello--a jQuery");
         	   }
            })
            //      
            $("#abc").helloa();
})

-----------------------------------------------------------------------------------------

jQuery

5, 사용자 정의 jQuery 플러그인 - 코드
5.1 1단계 최적화

 
  
  






	$(function(){
		//        
		$("table").bgColor(
	    defaults={
				head:'blue',
				 out:'white',
				even:'orange'
		 });
		
		
		//     --1.2
		/* $("table").each(function() {
			
			//    
			$("tr:eq(0)",this).addClass('head');
			$("tr:gt(0)",this).addClass('out');
			
			//      
			$("tr:gt(0)",this).hover(function(){
				$(this).removeClass().addClass('over');
			},function(){
				$(this).removeClass().addClass('out');
			});
				
			}) */ //--->     jQuery  jquery/table/js/jquery.table.js (   jQuery      )
		
	})



	

		

			
  
			
  
			
   
		
		

			
java    
			
   
			
10 
		
		

			
C++
			
     
			
8 
		
		

			
java      
			
   
			
2 
		
		

			
   
			
  
			
18 
		
		

			
    
			
  
			
20 
		
	
	

		

			
  
			
  
			
   
		
		

			
java    
			
   
			
10 
		
		

			
C++
			
     
			
8 
		
		

			
java      
			
   
			
2 
		
		

			
   
			
  
			
18 
		
		

			
    
			
  
			
20 
		
	

5.1.1 사용자 정의 css 파일

@charset "UTF-8";  /*    css     */
.blue {
	background: blue;
}

.orange {
	background: orange;
}

.red {
	background: red;
}

.yellow {
	background: yellow;
}

.green {
	background: #bbff99;
}
.gray {
	background: gray;
}
.white {
	background: white;
}

5.1.2 사용자 정의 jQuery 플러그인

//   jQuery  
$(function() {
	//      
	var defaults={
			head:'blue',
			 out:'white',
			even:'orange'
	}
	
	$.fn.extend({
		bgColor:function(option) {
			//  $.extend                           
			$.extend(defaults,option);
		        //return               ，  Stringbuffer
			//this：       ，      jQuery   
			return this.each(function() {
				//    ，this：    
				$("tr:eq(0)",this).addClass(defaults.head);
				$("tr:gt(0)",this).addClass(defaults.out);
				//      
				$("tr:gt(0)",this).hover(function(){
					$(this).removeClass().addClass(defaults.even);
				},function(){
					$(this).removeClass().addClass(defaults.out);
				});
					
				})
			
	        }
		
		})
	
})

5.2 단계 최적화

 








 --%>
 
 
 


	$(function(){
		//        
		$("table").bgColor(
			    defaults={
						head:'orange',
						 out:'green',
						even:'blue'
				 });
		
	})



	

		

			
  
			
  
			
   
		
		

			
java    
			
   
			
10 
		
		

			
C++
			
     
			
8 
		
		

			
java      
			
   
			
2 
		
		

			
   
			
  
			
18 
		
		

			
    
			
  
			
20 
		
	
	

		

			
  
			
  
			
   
		
		

			
java    
			
   
			
10 
		
		

			
C++
			
     
			
8 
		
		

			
java      
			
   
			
2 
		
		

			
   
			
  
			
18 
		
		

			
    
			
  
			
20 
		
	

5.2.1 공용 플러그인 코드 인용 간소화(HTML5 형식의 jsp 파일 만들기)

6. 최적화된 jQuery 코드

 



 
 

	$(function(){
		//        
		$("table").bgColor(
			    defaults={
						head:'orange',
						 out:'green',
						even:'blue'
				 });
	})



	

		

			
  
			
  
			
   
		
		

			
java    
			
   
			
10 
		
		

			
C++
			
     
			
8 
		
		

			
java      
			
   
			
2 
		
		

			
   
			
  
			
18 
		
		

			
    
			
  
			
20 
		
	
	

		

			
  
			
  
			
   
		
		

			
java    
			
   
			
10 
		
		

			
C++
			
     
			
8 
		
		

			
java      
			
   
			
2 
		
		

			
   
			
  
			
18 
		
		

			
    
			
  
			
20