'JQuery'에 해당되는 글 19건

  1. 2018.10.12 jQuery 로 탭 만들어 보기
  2. 2017.01.12 Table 자동 rowspan 처리 jQuery plugin
  3. 2014.10.15 jQuery 로 탭메뉴를 맹글어 보아요~ (8)
  4. 2014.04.10 jQuery 로 탭메뉴 보였다 안보였다 맹글기 (3)
  5. 2012.11.08 jQuery Mobile : select 박스가 안드로이드폰에서 작동하지 않을때

jQuery 로 탭 만들어 보기

예제 소스 다운로드

tab.zip


on, off 이미지로 탭 만들기 (요즘은 거의 이렇게 안 쓰지만 불가피하게 쓸 경우가 있는것 같아서..)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>탭</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="/js/jquery-3.3.1.min.js"></script>

    <style>
        .tabs a {cursor: pointer;}
    </style>
</head>
<body>
    <!-- 탭1 -->
    <div>
        <div class="tabs">
            <a><img src="/img/tab_service01_off.gif"></a>
            <a><img src="/img/tab_service02_off.gif"></a>
        </div>

        <div class="panel">탭1 첫번째 패널<br/><br/><br/><br/><br/><br/><br/><br/><br/>끝</div>
        <div class="panel">탭1 두번째 패널<br/><br/><br/><br/>끝</div>
    </div>

    <!-- 탭2 -->
    <div>
        <div class="tabs">
            <a><img src="/img/tab_service01_off.gif"></a>
            <a><img src="/img/tab_service02_off.gif"></a>
            <a><img src="/img/tab_service02_off.gif"></a>
        </div>

        <div class="panel">탭2 첫번째 패널<br/><br/><br/><br/><br/><br/><br/><br/><br/>끝</div>
        <div class="panel">탭2 두번째 패널<br/><br/><br/><br/>끝</div>
        <div class="panel">탭2 세번째 패널<br/><br/><br/><br/>끝</div>
    </div>

    <script>
        $(".tabs").each(function(){
            var tabs = $(this).find("a");               // 탭버튼
            var panels = $(this).nextAll(".panel");     // 탭패널
    
            tabs.on("click", function(){
                var clk = $(this);
                var idx = tabs.index(clk);  // 클릭한 index
                
                // 모든 패널을 안보이게 한다음 클릭한 idx 에 해당하는 패널만 보이게
                panels.hide();
                panels.eq(idx).show();
    
                // 모든 탭 이미지를 off 이미지로 바꿈
                tabs.find("img").each(function(){
                    var img = $(this);
                    var new_src = img.attr("src").replace("_on", "_off");
                    img.attr("src", new_src);
                });
    
                // 클릭한 idx 해당하는 이미지만 on 이미지로 바꿈
                var img = tabs.eq(idx).find("img");
                var new_src = img.attr("src").replace("_off", "_on");
                img.attr("src", new_src);
            });
    
            // 첫번째 탭 클릭처리
            tabs.eq(0).click();
        });
    </script>
</body>
</html>



이미지 대신 class 로 간단하게 on/off 탭메뉴 만들기

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>탭</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="/js/jquery-3.3.1.min.js"></script>

    <style>
        .tabs a { background:#666; color:#fff; font-weight:bold; padding:10px; 
                  border:solid 2px #fff;  display:inline-block; width:200px; 
                  text-align: center; cursor: pointer;  }
        .tabs a:hover { background:#c00; }
        .tabs a.on { background:#c00; }
    </style>
</head>
<body>
    <div>
        <!-- 탭1 -->
        <div class="tabs">
            <a>첫번째메뉴</a>
            <a>두번째메뉴</a>
        </div>

        <div class="panel">첫번째 패널<br/><br/><br/><br/><br/><br/><br/><br/><br/>끝</div>
        <div class="panel">두번째 패널<br/><br/><br/><br/>끝</div>
    </div>

    <div>
        <!-- 탭2 -->
        <div class="tabs">
            <a>첫번째메뉴</a>
            <a>두번째메뉴</a>
            <a>세번째메뉴</a>
        </div>

        <div class="panel">첫번째 패널<br/><br/><br/><br/><br/><br/><br/><br/><br/>끝</div>
        <div class="panel">두번째 패널<br/><br/><br/><br/>끝</div>
        <div class="panel">세번째 패널<br/><br/><br/><br/>끝</div>
    </div>

    <script>
        $(".tabs").each(function(){
            var tabs = $(this).find("a");
            var panels = $(this).nextAll(".panel");
    
            tabs.on("click", function(){
                var clk = $(this);
                var idx = tabs.index(clk);
                
                // 아래쪽 탭 패널을 싹 안보이게 한다음 클릭한 순서에 해당하는 탭패널만 보여지게
                panels.hide();
                panels.eq(idx).show();
    
                // on 클래스를 싹 빼고 클릭한 a 에 on 클래스 추가
                tabs.removeClass("on");
                tabs.eq(idx).addClass("on");
            });
    
            tabs.eq(0).click();
        });
    </script>
</body>
</html>


Trackback 0 Comment 0

Table 자동 rowspan 처리 jQuery plugin



요렇게 Table에서 rowspan 을 처리해주는게 필요해서 관련 훌러그인이 있나 찾아 보다가 어떤 친절한 사람이 github에 만들어 놓은것을 발견하였다.


https://github.com/marcosesperon/jquery.rowspanizer.js


하지만 살짝 문제가 있었는데


어떤 특정컬럼에 대해 rowspan 할지 지정하는 옵션이 없어서 모든 td 들에 대해서 rowspan 을 해버리는게 쪼금 아쉬웠다.


나는 특정 컬럼에만 적용하고 싶었는데... 뭐 어쩌나~ 그 친절한 사람이 만들어 놓은 훌러그인을 살짝 수정했다.


본의 아니게 친절한 분의 깔끔한 소스코드에 나의 더러운 코드를 쪼금 넣었다.


jquery.rowspanizer.js


사용법은 기존대로 요렇게 하면 모든 컬럼에 대해서 적용하는 것이고

$("#target-table").rowspanizer();

1, 2, 5번째 컬럼에 대해서 적용하려면 요렇게 하면 된다.

$("#target-table").rowspanizer({
    cols : [0, 1, 4],
    vertical_align: "middle"
});


Trackback 0 Comment 0

jQuery 로 탭메뉴를 맹글어 보아요~


최종적으로 맹글어질건 아래와 같은, 사이트 메인화면 중간중간에 들어가는 탭메뉴들이다.(클릭하면 클릭됨)


html

※ 버튼의 롤오버 이미지 파일명은 ***_on.* ***_off.* 요렇게 해야 클릭했을때 이미지가 바뀐다.

<div class="tabmenu">
    <h2>첫번째 탭메뉴</h2>  

    <ul>
        <li><a href="#link"><img src="img/menu_01_off.gif" alt="메뉴01" /></a>
            <ul class="tabcontent">
                <li><a href="#">1 제목이 나오는부분.....</a></li>
                <li><a href="#">2 제목이 나오는부분.....</a></li>
            </ul>
            <p class="morebtn"><a href="#"><img src="img/more.gif" alt="MORE" /></a></p>
        </li>
        <li><a href="#link"><img src="img/menu_02_off.gif" alt="메뉴02" /></a>
            <ul class="tabcontent">
                <li><a href="#">무우우우우우우우.....</a></li>
                <li><a href="#">5무우우우우우우우ㄴ.....</a></li>
            </ul>
            <p class="morebtn"><a href="#"><img src="img/more.gif" alt="MORE" /></a></p>
        </li>
            <li><a href="#link"><img src="img/menu_03_off.gif" alt="메뉴03" /></a>
            <ul class="tabcontent">   
                <li><a href="#">요농이 요느마</a></li>
                <li><a href="#">요농이 요느마</a></li>
            </ul>       
            <p class="morebtn"><a href="#"><img src="img/more.gif" alt="MORE" /></a></p>
        </li>
        <li><a href="#link"><img src="img/menu_04_off.gif" alt="메뉴04" /></a>
            <ul class="tabcontent">
                <li><a href="#">ㄷㄹㄴㄹㄴㄹㄴㄷㄹㄴㄹ</a></li>
                <li><a href="#">ㄷㄹㄴㄹㄴㄹㄴㄷㄹㄴㄹ</a></li>
            </ul>
            <p class="morebtn"><a href="#"><img src="img/more.gif" alt="MORE" /></a></p>
        </li>
    </ul>
</div>




css

<style>
	.tabmenu {position:relative; width:400px; height:200px;
             font-family:dotum,"",verdana;line-height:17px;font-size:12px;color:#555;}
	.tabmenu img {border:none;vertical-align:top;}
	.tabmenu ul {margin:0px;padding:0px;list-style:none;margin-top: 15px;}
	.tabmenu ul li {float:left}
	.tabmenu .tabcontent {display:none; width:240px;height:125px;position:absolute; left:0px;top:60px }
	.tabmenu .morebtn {position:absolute;right:0;top:30px;}
</style>




javascript (설명은 주석으로 대체함)

<script>
	$(document).ready(function(){
		$(".tabmenu").each(function(){
			var tab = $(this).children("ul");
			var tabBtn = tab.children("li").children("a");
			var content = tabBtn.nextAll();
			
			// 탭버튼을 클릭했을때
			tabBtn.click(function(){
				// 이미 on 상태면 pass
				if( $(this).hasClass("on") ) return;

				// 모든 컨텐츠 부분을 안보이게 한뒤
				content.hide();

				// 클릭한 tab 버튼(a태그) 옆의 모든 태그들은 보이도록
				$(this).nextAll().show();
				
				// 모든탭 버튼에 있던 on 클래스를 빼고
				// 현재 클릭한 탭메뉴 버튼에 on 클래스 추가
				tabBtn.removeClass("on");
				$(this).addClass("on");
				
				// 탭버튼를 쭉 돌면서 on 클래스가 있는 버튼만 on 이미지로 바꾸고
				// 나머지 버튼들은 off 이미지로 바꾼다.
				tabBtn.each(function(){
					var src;
					var img = $(this).children("img");
					if( $(this).hasClass("on") ){
						src = img.attr("src").replace("_off.", "_on.");
					}else{
						src = img.attr("src").replace("_on.", "_off.");
					}
					
					img.attr("src", src);
				});
			});
			
			// 맨첫번째 탭버튼 클릭처리
			tabBtn.eq(0).click();
		});
	});
</script>




※ 요렇게 tabmenu 클래스만 지정해서 똑같은 html 구조면 동시에 여러게 탭메뉴를 맹글수 있다.

<div class="tabmenu">
    <h2>첫번째 탭메뉴</h2>  

    <ul>
        <li><a href="#link"><img src="img/menu_01_off.gif" alt="메뉴01" /></a>
            <ul class="tabcontent">
                <li><a href="#">1제목이 나오는부분.....</a></li>
                <li><a href="#">2제목이 나오는부분.....</a></li>
            </ul>
            <p class="morebtn"><a href="#"><img src="img/more.gif" alt="MORE" /></a></p>
        </li>
        <li><a href="#link"><img src="img/menu_02_off.gif" alt="메뉴02" /></a>
            <ul class="tabcontent">
                <li><a href="#">무우우우우우우우.....</a></li>
                <li><a href="#">5무우우우우우우우ㄴ.....</a></li>
            </ul>
            <p class="morebtn"><a href="#"><img src="img/more.gif" alt="MORE" /></a></p>
        </li>
            <li><a href="#link"><img src="img/menu_03_off.gif" alt="메뉴03" /></a>
            <ul class="tabcontent">   
                <li><a href="#">요농이 요느마</a></li>
                <li><a href="#">요농이 요느마</a></li>
            </ul>       
            <p class="morebtn"><a href="#"><img src="img/more.gif" alt="MORE" /></a></p>
        </li>
        <li><a href="#link"><img src="img/menu_04_off.gif" alt="메뉴04" /></a>
            <ul class="tabcontent">
                <li><a href="#">ㄷㄹㄴㄹㄴㄹㄴㄷㄹㄴㄹ</a></li>
                <li><a href="#">ㄷㄹㄴㄹㄴㄹㄴㄷㄹㄴㄹ</a></li>
            </ul>
            <p class="morebtn"><a href="#"><img src="img/more.gif" alt="MORE" /></a></p>
        </li>
    </ul>
</div>

<div class="tabmenu">
    <h2>두번째 탭메뉴</h2>   
    <ul>
        <li><a href="#link"><img src="img/menu_01_off.gif" alt="메뉴01" /></a>
            <ul class="tabcontent">
                <li><a href="#">제목이 나오는부분.....</a></li>
                <li><a href="#">제목이 나오는부분.....</a></li>
            </ul>
        </li>
        <li><a href="#link"><img src="img/menu_02_off.gif" alt="메뉴02" /></a>
            <ul class="tabcontent">
                <li><a href="#">무우우우우우우우.....</a></li>
                <li><a href="#">무우우우우우우우ㄴ.....</a></li>
            </ul>
        </li>
            <li><a href="#link"><img src="img/menu_03_off.gif" alt="메뉴03" /></a>
            <ul class="tabcontent">   
                <li><a href="#">ㄷㄹㄴㄹㄴㄹㄴㄷㄹㄴㄹ</a></li>
                <li><a href="#">ㄷㄹㄴㄹㄴㄹㄴㄷㄹㄴㄹ</a></li>
            </ul>
        </li>
        <li><a href="#link"><img src="img/menu_04_off.gif" alt="메뉴04" /></a>
            <ul class="tabcontent">
                <li><a href="#">ㄷㄹㄴㄹㄴㄹㄴㄷㄹㄴㄹ</a></li>
                <li><a href="#">ㄷㄹㄴㄹㄴㄹㄴㄷㄹㄴㄹ</a></li>
            </ul>
        </li>
    </ul>
</div>


Trackback 0 Comment 8
  1. ^^ 2014.11.18 15:29 address edit & del reply

    감사합니다. 도움이 될 것 같아요~^^

  2. 참비 2014.12.05 18:27 address edit & del reply

    에고 똑같이 맹글어 봤는데 안되요..좀 봐 주세요...ㅜ.ㅜ
    http://grayhair.dothome.co.kr

  3. 참비 2014.12.05 18:57 address edit & del reply

    블로그 소스를 통째로 받아서 뺄꺼 다 빼고보니.. jquery-1.7.min.js 문서가 있어야만 되네요..
    http://grayhair.dothome.co.kr/index02.html

    js문서를 삭제하면 안되고.. 어디가 잘못된걸까요?
    아참 인사를 빼먹었네... 좋은 소스 감사 드립니다~

    • 스토브 2014.12.11 22:26 신고 address edit & del

      잘못된건 없으시고~

      위 자바스크립트가 돌아갈려면 jquery 라는 js 파일을 불러와야 정상적으로 작동이 되요~

      만드신 소스 보니
      <script src='https://ts.daumcdn.net/custom/blog/28/285810/skin/images/jquery-1.7.min.js' type='text/javascript'></script>

      요렇게 불러오셨네요~

  4. 리리카 2014.12.19 11:56 address edit & del reply

    질문드려요~
    저는 똑같이 스크립트랑 스타일 지정해줬는데요.
    예제에서는 비활성화된ul (tabcontent)에 인라인스타일로 display:none 이 지정됐다가 활성화 되면 display:block 으로 전환되는데
    저는 인라인스타일 지정되는것 없이
    .tabmenu .tabcontent {display:none; width:240px;height:125px;position:absolute; left:0px;top:20px } 요내용만 먹히네요?

    탭을 눌러도 안에 컨텐츠내용이 none으로 되어서 안보입니다.

  5. 인티브 2016.03.22 11:10 address edit & del reply

    좋은 소스 정말 너무 감사하게 사용하는데요..

    내용의 높이가 자동으로 안되어서 페이지 중간에 넣으니 탭마다 내용높이가 달라서 보기가 좀 그러네요..
    높이를 자동으로 구할 순 없을까요?

  6. 시군 2016.11.30 18:03 address edit & del reply

    덕분에 문제해결을 잘했습니다. 정말 감사합니다. ^^

  7. 2016.12.13 15:14 address edit & del reply

    소스 정말 유용하게 써요! 감사합니다!

jQuery 로 탭메뉴 보였다 안보였다 맹글기


탭을 클릭할때 탭메뉴 이미지가 on, off 되고 해당되는 서브메뉴 div 가 보였다 안보였다 하는 샘플을 맹글어 보았다.


주석을 싹 달아놨으니 응용하는데 큰 문제는 없을것이다.


※ 롤오버 이미지 이름은 프로그램 편의상 xxxxxx.png, xxxxxx_on.png 요렇게 해야 쪽바로 작동한다.


※ png 파일이 아니라 gif 나 뭐 다른 확장자면 소스중에 .toggle() 요부분에다 옵션으로 지정할 수는 있다. 고건 주석으로 설명되 있음.




html

<div id="wrap">
	<div id="tabMenu">
	    <ul>
		    <li><a href="#" title="메뉴1"><img src="images/tab_01.png" alt="메뉴1" /></a></li>
		    <li><a href="#" title="메뉴2"><img src="images/tab_02.png" alt="메뉴1" /></a></li>
		    <li><a href="#" title="메뉴3"><img src="images/tab_03.png" alt="메뉴2" /></a></li>
		    <li><a href="#" title="메뉴4"><img src="images/tab_04.png" alt="메뉴3" /></a></li>
		    <li><a href="#" title="메뉴5"><img src="images/tab_05.png" alt="메뉴4" /></a></li>
		    <li><a href="#" title="메뉴6"><img src="images/tab_06.png" alt="메뉴5" /></a></li>
		    <li><a href="#" title="메뉴7"><img src="images/tab_07.png" alt="메뉴6" /></a></li>
    	</ul>
    </div>
	<div id="tabSubMenu">
		<div>서브1<div>룰루랄라~</div></div>
		<div>서브2</div>
		<div>서브3</div>
		<div>서브4</div>
		<div>서브5</div>
		<div>서브6</div>
		<div>서브7</div>
	</div>
</div>



javascript

var tabMenu = $("#tabMenu ul>li>a");
var tabSubMenu = $("#tabSubMenu>div");

// 모든 서브메뉴 안보이게
tabSubMenu.hide();

// 탭메뉴 a 를 클릭했을때
tabMenu.on("click", function(e){
	// 클릭한 메뉴가 몇번째 메뉴인지 가져옴
	var idx = tabMenu.index($(this));

	// 모든 서브메뉴 안보이게
	tabSubMenu.hide();
	// 서브메뉴중에서 클릭한 메뉴에 해당하는 서브메뉴만 보이게
	tabSubMenu.eq(idx).show();

	// 현재 on 이미지를 off 이미지로 변경
	tabMenu.find("img.on").removeClass("on").toggle();
	// 클릭한 탭 이미지만 on 이미지로 변경
	$(this).find("img").addClass("on").toggle({to:"on"});
});



/**
	이미지 토클 훌러그인
	$("img").toggle();				// on이면 off로, off면 on 이미지로
	$("img").toggle({to:"on"});		// 무조건 on 이미지로
	// on, off 이미지 패턴설정
	$("img").toggle({to:"on", on:"_on.gif", ".gif"});
*/
$.fn.toggle = function(opt){
	var base = {
		to : null,
		on : "_on.png",
		off : ".png"
	};

	$.extend(base, opt);

	this.each(function(){
		var el = $(this);
		
		if(!el.is("img")) return;
		
		var src = conv = el.attr("src");
		
		// to 옵션이 있을때
		if( base.to ){
			if( base.to=="on" && (src.indexOf(base.on)<0) ) conv = src.replace(base.off,base.on);
			else if( base.to=="off" ) conv = src.replace(base.on,base.off);
		}
		// to 옵션이 없으면 토글 처리
		else{
			conv = (src.indexOf(base.on) < 0) ? src.replace(base.off,base.on) : src.replace(base.on,base.off);
		}
		
		el.attr("src", conv);
		el.data("orgimg", conv);
	});
	
	return this;
};


// 페이지 로딩시 맨 첫번째 메뉴 튀어나와 있게 함.
tabMenu.eq(0).click();


전체소스

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>

<body>
<div id="wrap">
	<div id="tabMenu">
	    <ul>
		    <li><a href="#" title="메뉴1"><img src="images/tab_01.png" alt="메뉴1" /></a></li>
		    <li><a href="#" title="메뉴2"><img src="images/tab_02.png" alt="메뉴1" /></a></li>
		    <li><a href="#" title="메뉴3"><img src="images/tab_03.png" alt="메뉴2" /></a></li>
		    <li><a href="#" title="메뉴4"><img src="images/tab_04.png" alt="메뉴3" /></a></li>
		    <li><a href="#" title="메뉴5"><img src="images/tab_05.png" alt="메뉴4" /></a></li>
		    <li><a href="#" title="메뉴6"><img src="images/tab_06.png" alt="메뉴5" /></a></li>
		    <li><a href="#" title="메뉴7"><img src="images/tab_07.png" alt="메뉴6" /></a></li>
    	</ul>
    </div>
	<div id="tabSubMenu">
		<div>서브1<div>룰루랄라~</div></div>
		<div>서브2</div>
		<div>서브3</div>
		<div>서브4</div>
		<div>서브5</div>
		<div>서브6</div>
		<div>서브7</div>
	</div>
</div>

<script>
	var tabMenu = $("#tabMenu ul>li>a");
	var tabSubMenu = $("#tabSubMenu>div");
	
	// 모든 서브메뉴 안보이게
	tabSubMenu.hide();

	// 탭메뉴 a 를 클릭했을때
	tabMenu.on("click", function(e){
		// 클릭한 메뉴가 몇번째 메뉴인지 가져옴
		var idx = tabMenu.index($(this));

		// 모든 서브메뉴 안보이게
		tabSubMenu.hide();
		// 서브메뉴중에서 클릭한 메뉴에 해당하는 서브메뉴만 보이게
		tabSubMenu.eq(idx).show();

		// 현재 on 이미지를 off 이미지로 변경
		tabMenu.find("img.on").removeClass("on").toggle();
		// 클릭한 탭 이미지만 on 이미지로 변경
		$(this).find("img").addClass("on").toggle({to:"on"});
	});



	/**
		이미지 토클 훌러그인
		$("img").toggle();				// on이면 off로, off면 on 이미지로
		$("img").toggle({to:"on"});		// 무조건 on 이미지로
		// on, off 이미지 패턴설정
		$("img").toggle({to:"on", on:"_on.gif", ".gif"});
	*/
	$.fn.toggle = function(opt){
		var base = {
			to : null,
			on : "_on.png",
			off : ".png"
		};

		$.extend(base, opt);

		this.each(function(){
			var el = $(this);
			
			if(!el.is("img")) return;
			
			var src = conv = el.attr("src");
			
			// to 옵션이 있을때
			if( base.to ){
				if( base.to=="on" && (src.indexOf(base.on)<0) ) conv = src.replace(base.off,base.on);
				else if( base.to=="off" ) conv = src.replace(base.on,base.off);
			}
			// to 옵션이 없으면 토글 처리
			else{
				conv = (src.indexOf(base.on) < 0) ? src.replace(base.off,base.on) : src.replace(base.on,base.off);
			}
			
			el.attr("src", conv);
			el.data("orgimg", conv);
		});
		
		return this;
	};


	// 페이지 로딩시 맨 첫번째 메뉴 튀어나와 있게 함.
	tabMenu.eq(0).click();
</script>

</body>
</html>


※ 마우스 오버될때도 적용할려면~~?

// 탭메뉴 a 를 클릭했을때
tabMenu.on("click", function(e){
	// 클릭한 메뉴가 몇번째 메뉴인지 가져옴
	var idx = tabMenu.index($(this));

	// 모든 서브메뉴 안보이게
	tabSubMenu.hide();
	// 서브메뉴중에서 클릭한 메뉴에 해당하는 서브메뉴만 보이게
	tabSubMenu.eq(idx).show();

	// 현재 on 이미지를 off 이미지로 변경
	tabMenu.find("img.on").removeClass("on").toggle();
	// 클릭한 탭 이미지만 on 이미지로 변경
	$(this).find("img").addClass("on").toggle({to:"on"});
}).on("mouseover", function(){
	// 마우스 오버됬을때 클릭한것처럼 동작
	$(this).click();
});



메뉴 심플하기 그지 없다.

Trackback 0 Comment 3
  1. Readiz 2014.04.10 17:54 신고 address edit & del reply

    css hover나 active속성으로 구현해보시는건 어떤가요? ^^;
    참고삼아 보시라고 글 남겨요.. jQuery가 한두개는 괜찮은데 방대해지면 참 느려져서 ㅠㅠ

    • 스토브 2014.04.10 18:44 신고 address edit & del

      아직 제가 css 를 깊이있게는 잘 몰라서요 ㅠㅠ

  2. sue202 2014.07.03 20:05 address edit & del reply

    마우스가 오버됬을때 다른 메뉴로 가지 않고서 펼쳐진 2차메뉴가 사라지게 하는 건 어떻게 하는건가요??
    머리에 쥐가나네요...ㅜㅜ

jQuery Mobile : select 박스가 안드로이드폰에서 작동하지 않을때


보통 개발할때 굳이 모바일 기기에서 테스트를 많이 안하고 개발을 해서 이런 오류가 있는줄은 몰랐다.


막상 실제 모바일웹으로 올린 후 직접 안드로이드 폰을 이용해서 이것저것 해보니 안드로이드 ICS 와 아이폰에서는 셀렉트박스가


잘 작동했는데 진저브레드 안드로이드 폰에서는 셀렉트 박스를 눌러도 작동을 하지 않았다 -_-



이유를 알아보니 전혀 예상하지 못했던 HTML 쪽 때문에 오류가 발생했던 것이였다 -.-


jQuery Mobile 을 적용할때 HTML 코드는

<html>
	<head>
		.....
	</head>
	<body>
		<div data-role="page">
			...
		</div>
	</body>
</html>

요런식으로 body 태그 바로 아래 <div data-role="page"> 가 위치해야 한다.



기존 셀렉트 박스가 작동안했던 코드는 요랬다 -_-

<html>
	<head>
		.....
	</head>
	<body>
		<div class="wrap">
			<div data-role="page">
				...
			</div>
		</div>
	</body>
</html>

위 코드 처럼 body 태그의 child 로 다른게 얼쩡거리면 아마 셀렉트 박스가 안될것이다. 진저브레드에서 -,-

Trackback 0 Comment 0
prev 1 2 3 4 next