스토브 훌로구

jQuery 를 이용하면 드럽게 복잡해질 자바스크립트가 매우매우매우매우매우 심플해 진다. 간단한 몇 라인의 코딩만으로 쉽게 간지나는 것을 맨들 수 있다.

고것을 설명하기 위해 접었다 펼쳐졌다 하는 간단한 메뉴를 만들어 보았다. 본인이 디자이너가 아닌 관계로 화면은 쫌 그지같지만 css 만 적용시키면 쓸만한 있어 보이는 메뉴를 바로 맨들 수 있다.

대충 요렇게 하는 것이다 라고 설명을 하는 것이니 디자인 과감히 생략한다.

우선 처음으로 맨들어볼 메뉴는 요렇다.( 클릭하면 접었다 펼쳐졌다 접었다 펼쳐졌다 함 )

요런 모양을 맨들기 위한 html 마크업은 요렇게~ html 태그에 onclick=""; 어쩌고 하는 지저분한 자바스크립트 하나 안들어간 순결하고 *(-_-)* 깔끔한 마크업이다.

<div>
	<ul>
		<li class="menu">
			<a><img src="" alt="상위메뉴이미지1"/></a>
			<ul class="hide">
				<li>메뉴1-1</li>
				<li>메뉴1-2</li>
				<li>메뉴1-3</li>
				<li>메뉴1-4</li>
				<li>메뉴1-5</li>
				<li>메뉴1-6</li>
			</ul>
		</li>

		<li class="menu">
			<a><img src="" alt="상위메뉴이미지2"/></a>
			<ul class="hide">
				<li>메뉴2-1</li>
				<li>메뉴2-2</li>
				<li>메뉴2-3</li>
				<li>메뉴2-4</li>
				<li>메뉴2-5</li>
				<li>메뉴2-6</li>
			</ul>
		</li>
	</ul>
</div>

스타일은 요정도로만

<style>
	.menu a{cursor:pointer;}
	.menu .hide{display:none;}
</style>

중요한 jQuery 를 이용한 자바스크립 소스 부분이다. 심플스럽기 서울역에 그지없다. 주석을 빼면 3~4줄 정도밖에 안된다. 아주 짧으면서도 의미가 쏙쏙 들어오는!

<script>
	// html dom 이 다 로딩된 후 실행된다.
	$(document).ready(function(){
		// memu 클래스 바로 하위에 있는 a 태그를 클릭했을때
		$(".menu>a").click(function(){
			// 현재 클릭한 태그가 a 이기 때문에
			// a 옆의 태그중 ul 태그에 hide 클래스 태그를 넣던지 빼던지 한다.
			$(this).next("ul").toggleClass("hide");
		});
	});
</script>

그냥 뿟뿟 나타났다 사라지는게 허접스럽게 느껴진다면 여기서 한단계 더 나아가

클릭했을때 보드랍게 슬라이딩 되면서 나타났다 사라지는 것을 맨들어 보자. 마크업과 스타일은 손댈필요 없이 자바스크립만 요래 살짝 바꿔 주면 된다.

<script>
	// html dom 이 다 로딩된 후 실행된다.
	$(document).ready(function(){
		// menu 클래스 바로 하위에 있는 a 태그를 클릭했을때
		$(".menu>a").click(function(){
			var submenu = $(this).next("ul");

			// submenu 가 화면상에 보일때는 위로 보드랍게 접고 아니면 아래로 보드랍게 펼치기
			if( submenu.is(":visible") ){
				submenu.slideUp();
			}else{
				submenu.slideDown();
			}
		});
	});
</script>

 바꾼결과( 클릭해 보셈 )


그렇다면 마지막으로 클릭했을때의 기능은 남겨두고 마우스가 오버되면 메뉴가 자동으로 펼쳐지게 맨들어 보자. 자바스크립트를 살짝 요래 수정하면 된다.

<script>
	$(document).ready(function(){
		$(".menu>a").click(function(){
			var submenu = $(this).next("ul");

			// submenu 가 화면상에 보일때는 위로 보드랍게 접고 아니면 아래로 보드랍게 펼치기
			if( submenu.is(":visible") ){
				submenu.slideUp();
			}else{
				submenu.slideDown();
			}
		}).mouseover(function(){
			$(this).next("ul").slideDown();
		});
	});
</script>

 바꾼결과( 마우스를 올려 보셈 )



진짜 진짜 마지막으로,

맨처음 뜰때 부터 두번째 메뉴가 펼쳐진 상태로 뜨게 하고 싶다면? 간단하게 두번째 서브메뉴 ul 에 지정된 hide 클래스를 지우면 되지만,

자바스크립트적인 방법으로는 요렇게 하면 된다.

<script>
	$(document).ready(function(){
		$(".menu>a").click(function(){
			var submenu = $(this).next("ul");

			// submenu 가 화면상에 보일때는 위로 보드랍게 접고 아니면 아래로 보드랍게 펼치기
			if( submenu.is(":visible") ){
				submenu.slideUp();
			}else{
				submenu.slideDown();
			}
		}).mouseover(function(){
			$(this).next("ul").slideDown();
		});


		// menu class 중에 두번째 있는 menu 의 하위에 있는 a태그에 클릭 이벤트를 발생시킨다.
		$(".menu:eq(1)>a").click();
	});
</script>

이것저것 맨들다 보면 datepicker 달력 팝업창의 크기를 바꿔야 될 경우가 있다.

나 같은 경우는 모바일 페이지를 개발하고 있기 때문에 달력팝업창이 너무 쥐똥만한 크기로 나와 사이즈를 훅 키우고 싶었다.



jquery-ui-xxx.css 파일에서 요부분을 찾아

.ui-datepicker { width: 17em; padding: .2em .2em 0; display: none; }

font-size 를 원하는 크기로 요렇게 바꿔주면 된다. 달력 팝업 사이즈를 크게 하고 싶을때는 font 크기를 크게하고 작게 하고 싶을때는 font 크기를 작게 해주면 팝업창이 쥐똥만하게 뜬다.

.ui-datepicker { width: 17em; padding: .2em .2em 0; display: none; font-size: 20px;}

뿌잉뿌잉~ 크게 크게

대부분의 경우 별다른짓을 안해도 div 팝업창에서 datepicker 가 잘 뜬다.

그런데 어째 하다보면 div 로 띄운 팝업창의 z-index 보다 datepicker 의 z-index 가 적어서 팝업창 위로 datepicker 가 뽓 튀어나오지 않는다.

요걸 해결하기 위해서 간단하게 jQuery UI 의 js 파일 한군데를 살짝 수정해 주면 된다.



에디터로  소스가 압축된 jquery-ui-xxxx.min.js 파일이나 아니면 압축안된 버전의 jquery.ui.datepicker.js 파일을 연 후

압축버전의 경우 요부분을 찾고,

b.dpDiv.zIndex(d(a).zIndex()+1);

압축안된 버전의 경우 요부분을 찾아서

inst.dpDiv.zIndex($(input).zIndex()+1);

요렇게 +1 부분을 적당히 큰 숫자로 바꿔주면 달력이 뽓 잘 뜰것이다.

b.dpDiv.zIndex(d(a).zIndex()+999);

뭐 대부분의 브라우져에서는 앵간해서는 ajax 로 로딩될 페이지에 있는 자바스크립트가 무난하게 실행된다.

그런데 오늘 문득 이때까지 맹근게 모바일에서도 잘 될까하는 궁금함에 아이패드로 접속을 해 보았다.

그런데 이건뭐 지대로 되는게 하나도 없었다.


※ ajax 로 div 안에 다른 페이지 로딩하기

// 요래 하면 여러가지 다양한 ajax 옵션을 줄수 있어서 개인적으로 더 선호한다.
$.ajax({
    url : "로딩할 페이지 URL, ex)/common/list.jsp",
    dataType : "html",
    type : "post",  // post 또는 get
    data : { a:"값1", b:"값2"},   // 호출할 url 에 있는 페이지로 넘길 파라메터
    success : function(result){
        $("#div 아이디").html(result);
    }
});

// 간단하게 요렇게 써도 됨
$("#div 아이디").load("로딩할 페이지 URL", {넘길 파라메터});

왜 그런가 하고 계속 문제를 따라가보니

ajax 로 로딩되는 페이지에 있는 자바스크립트가 전~~~혀 실행이 안됬기 때문에 이벤트 걸어놨던거 등등이 하나도 적용이 안됬기 때문이었다.

구글링과 오만 이상한 짓을 다 해봤는데 아무리 해도 안되서 요만 포기할까 했는데

문득 마지막 순간에 촉이 와서 고걸 해보니까 정상적으로 실행되었다. -_-;;



문제는 바로...........

ajax 로 로딩될 페이지에 <html><head>...</head><body>...</body></html>  요 시리즈 태그가 있었기 때문이었다.

<html><head>...</head><body>...</body></html> 요것들을 다 제거하고



<script>......</script> 

<body></body> 태그를뺀 나머지 원래 소스...


요렇게 바꿔주면 아마 정상적으로 <script></script> 에 있는 스크립트들이 실행될것이다. 

음 그리고 <DOCTYPE> 어쩌고 하는것도 ajax 로 로딩될 페이지에 있으면 빼야 될것이다.~



오만 삽질을 다 한거에 비하면 허무한 결말이다. 

이빠이 사소하지만 그렇다고 해서 해결할 방법을 찾아내기가 쉽지는 않은 그런 꾸리한 문제들 중의 하나로 기억할것 같다. -_-;

앞으로 모바일웹용이던 아니던 프로젝트를 시작할때부터 공지를 잘해서

ajax 로 로딩될 페이지에는 <html><head>...</head><body>...</body></html> 요것을 빼고 코딩을 해야겠다.

일단 뭐하는 것인가에 대한 스크린샷

요렇게 간단하게 년도-월 을 선택해 주게 하는 훌러그인이다.

input 박스를 클릭하면 월을 선택할수 있는 달력 비스무리한게 팝업되서

원하는 달을 클릭하면 input 박스에 클릭한 월을 보여주는 짖을 한다.

필요에 의해 급하게 맹그느라 기능도 쫌 허접하고 소스역시 허접하다. 언제가 될진 모르겠지만

0.2로 버전업을 한다면 테마기능과 여러가지 쓸만하면서도 있어보이는 옵션을 추가할 예정이다.




호환성 : IE7+, 크롬에서 확인해 보았다. IE6는 마땅히 확인해 볼 방법이 없어서;

필요한것 : jQuery 1.4.3 이상?

설치 : jquery.monthpicker-0.1.js, jquery.monthpicker-0.1.css 두개를 추가시킨다.

<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="jquery.monthpicker-0.1.js"></script>
<link type="text/css" href="jquery.monthpicker-0.1.css" rel="stylesheet"/>

사용

$(".month").monthPicker();
$("#mp").monthPicker();

<input class="month"/>
<input class="month"/>
<input id="mp"/>

jquery.monthpicker-0.1.zip