wiki:jquery

참고자료

카운트다운

  •  http://code.google.com/p/jquery-countdown/
    Basic usage: 
      $('#counter').countdown({startTime: "01:12:32:55"});
    Complete usage: 
      $('#counter').countdown({
        stepTime: 60,
        format: 'hh:mm:ss',
        startTime: "12:32:55",
        digitImages: 6,
        digitWidth: 53,
        digitHeight: 77,
        timerEnd: function() { alert('end!!'); },
        image: "digits.png"  });
    

진행바

텍스트 관련 jquery

텍스트 롤링

텍스트 fly 효과

텍스트 효과

툴팁 플러그인

  • 사이트 :  http://craigsworks.com/projects/qtip2
  • 관련코드
    function dialogue(content, title) {
    	/* 
    	 * Since the dialogue isn't really a tooltip as such, we'll use a dummy
    	 * out-of-DOM element as our target instead of an actual element like document.body
    	 */
    	$('#testtip').qtip(
    	{
    		content: {
    			text: content
    		},
    		position: {
    			my: 'center', at: 'center', // Center it...
    			target: $('#apirepo'), // ... in the window
    			adjust: {
    				x: -10, y:-10
    			}
    		},
    		show: {
    //				ready: true, // Show it straight away
    			event: 'click'
    		},
    		hide: false, // We'll hide it maunally so disable hide events
    		events: {
    			// Hide the tooltip when any buttons in the dialogue are clicked
    			render: function(event, api) {
    				var elem = api.elements.bgiframe;
    				$('body').click(api.hide);
    			},
    			// Destroy the tooltip once it's hidden as we no longer need it!
    			hide: function(event, api) { api.destroy(); }
    		}
    	});
    }
    

기능 구현

다운로드

플러그 인

디버깅

validation

탭메뉴 기능

슬라이딩 메뉴 기능

모달 다이얼로그

달력기능

  • jquery UI 프레임웍의 DatePicker 이용
  • 이용시 DatePicker 일부 수정 필요 : 달력 html 생성시 IE6의 경우에 대해 더미 iframe 추가하여 ibsheet 오브젝트 상단에 출력되도록 수정함
  • jquery UI의 다이얼로그 등 화면 최상단에 출력이 필요한 경우 상기와 같이 수정이 필요함......

select box

check box

ajax

JSON 데이터 읽기

FORM 리셋

방법1. 
$("#formId")[0].reset();


방법2.
$("#formId").each(function(){
	this.reset();
})

년도 select box 생성

  /*=======================================================================
    기   능 : 년도 select box 생성
  =======================================================================*/
	var today = new Date();
	var nowyear = today.getFullYear();
	//alert(nowyear);
	
	for (i=0; i < nowyear-1999 ; i++) {
	  $('#CRT_YR').get(0).options[i+1] = new Option(nowyear-i+"년", nowyear-i);
	  //$('#endym').get(0).options[i+1] = new Option(nowyear-i, nowyear-i);
	}

iframe 사이즈 자동조절

createpopup

Attachments