반응형 웹 작업 시 mouseover click 분기 팁
팁이라고 쓰고 꼼수라고 읽는...
다른 작업에 밀려서 머리 속으로 고민만 하던 것이 실제 구현을 해보니 의외로 빨리 풀렸습니다.
고민 과정에서 언제나 조언 주시고 도움 주신 전진님께 다시 한번 감사드립니다. :)
jquery 는 g4s 에서 사용 중인 1.8.3 버전을 기준으로 작업했습니다.
하이브리드 개발자님과 의논해보니, 이벤트핸들러 말고 클래스 바꿔치기도 되겠습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>테스트</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=0,maximum-scale=10,user-scalable=yes">
<meta name="HandheldFriendly" content="true">
<meta name="format-detection" content="telephone=no">
<script src="js/jquery-1.8.3.min.js"></script>
<style>
ul {margin:0;padding:0;list-style:none}
ul ul {display:none}
button {cursor:pointer}
</style>
</head>
<body>
<p></p>
<ul>
<li>
<button type="button">테스트</button>
<ul>
<li>
<a href="">테스트 서브</a>
</li>
</ul>
</li>
</ul>
<script>
// 무엇을 구현할 것인가?
// gnb
// 구조는 어떤가?
// ul > li > button
// ul > li > a
// 어떻게 동작하는가?
// min-width 970px 에서 button 클릭 시 페이지 이동 (script 이용하여 event 추가)
// 오버/포커스 시 서브메뉴 출력
// max-width 969px 에서 button 클릭 시 서브메뉴 출력
// PC 모바일을 검사하여 PC 면 + 포커스 오버 시 서브메뉴 출력 및 클릭해도 페이지 이동은 하지 않음 (예정)
$(function() {
$(window).load(function(){
var doc_width = document.width; // 문서 로드될 때 문서 넓이 감지
hdlr_switch(doc_width);
});
$(window).resize(function(){
var doc_width = document.width; // 리사이즈 될 때 문서 넓이 감지
hdlr_switch(doc_width);
});
function hdlr_switch(val) {
var hdlr = "";
if (val >= "970") {
hdlr = "mouseover focus";
} else {
hdlr = "click";
}
$("button").unbind();
$("button").bind(""+hdlr+"", function(){
$("ul ul").css("display", "block");
});
/* 970px 이상일 때만
$("button").click(function(){
$(location).attr('href','http://www.sir.co.kr');
});
*/
}
});
</script>
</body>
</html>
댓글 20개
Terrorboy
12년 전
less 가 답이지요~~~
일단 속도가 빠르고
이단 변수에 담아 뒀다 꺼내 쓰기 빠르고
삼단 나중에 구조파악하기 쉽고
ㅎㅎㅎㅎ
- http://lesscss.org/
일단 속도가 빠르고
이단 변수에 담아 뒀다 꺼내 쓰기 빠르고
삼단 나중에 구조파악하기 쉽고
ㅎㅎㅎㅎ
- http://lesscss.org/
12년 전
번지수를 잘못 찾으신 거 같아요 ㅠ
Terrorboy
12년 전
그르게요 ㅋㅋㅋㅋ
TopSchooL
12년 전
구지 무겁게 문서가 로드될때 할필요는 없을것같아요
$("button").bind("mouseover, focus, click", function(){
if($(window).width() >= "970")
$("ul ul").css("display", "block");
else
$("ul ul").css("display");
});
$("button").bind("mouseover, focus, click", function(){
if($(window).width() >= "970")
$("ul ul").css("display", "block");
else
$("ul ul").css("display");
});
12년 전
PC와 터치스크린에서 서브메뉴 펼치는 방식을 다르게 해주려고 쓰는 것입니다.
탑스쿨님 말씀대로 하면, PC나 터치스크린이나 세가지 모두 먹어버리게 되죠.
탑스쿨님 말씀대로 하면, PC나 터치스크린이나 세가지 모두 먹어버리게 되죠.
TopSchooL
12년 전
아닌데요
if($(window).width() >= "970") 이게 동작해야 이벤트가 끝나는거예요
if($(window).width() >= "970") 이게 동작해야 이벤트가 끝나는거예요
12년 전
위에 댓글은 bind 에 세개를 다 묶어놓으셔서 드린 말씀이구요.
처음에 로드될 때는 탑스쿨님 방식대로 해도 되겠네요. 그런데 리사이즈 될 때 어차피 한번 더 처리를 해줘야겠는데요?
처음에 로드될 때는 탑스쿨님 방식대로 해도 되겠네요. 그런데 리사이즈 될 때 어차피 한번 더 처리를 해줘야겠는데요?
TopSchooL
12년 전
사이즈로 이벤트를 체크하셨으니
if (val >= "970") {
hdlr = "mouseover focus";
} else {
hdlr = "click";
}
3개 다선언해도 콜백 함수에 사이즈를 지정하면 된다는 말이였어요^^
지운아빠님의 방식은 화면 사이즈가 변경될때마다 리소스가 발생되서 부담이 될수있다는걸 표현해서 임의로 말한거구요
제가 하는 방식은 마우스를 오버하거나 클릭 하는 순간에만 체크하기위한거구요
정확히 소스를 짠건아니구요
대략 저런식으로하면 부화적인 면에서도 좋다.. 라는 말을 한거예용
정확하게 하려면 아래처럼 리턴을 하거나 아니면 동작되는 css를 안넣으면되겠죠
if(e.type == "mouseover")
return;
if (val >= "970") {
hdlr = "mouseover focus";
} else {
hdlr = "click";
}
3개 다선언해도 콜백 함수에 사이즈를 지정하면 된다는 말이였어요^^
지운아빠님의 방식은 화면 사이즈가 변경될때마다 리소스가 발생되서 부담이 될수있다는걸 표현해서 임의로 말한거구요
제가 하는 방식은 마우스를 오버하거나 클릭 하는 순간에만 체크하기위한거구요
정확히 소스를 짠건아니구요
대략 저런식으로하면 부화적인 면에서도 좋다.. 라는 말을 한거예용
정확하게 하려면 아래처럼 리턴을 하거나 아니면 동작되는 css를 안넣으면되겠죠
if(e.type == "mouseover")
return;
12년 전
네, 제 목표는 화면 사이즈에 따라 오버와 클릭 핸들러를 다르게 하려는 건데, 알려주신 방법은 처음 로드된 문서값만 가지고 있으니(탑스쿨님이 말씀하신 것처럼 오버나 클릭 이외의 이벤트는 없으니까요.) 리사이즈에 관한 처리를 한번 더 해야할 것 같다는 말이었습니다. ^^
효율에 관해 이야기해주시려는 건 이해가 가는데 목표가 무엇인지 다시 한번 생각해봐주세요. 제가 이해력이 딸리는 건가요? ㅠ
효율에 관해 이야기해주시려는 건 이해가 가는데 목표가 무엇인지 다시 한번 생각해봐주세요. 제가 이해력이 딸리는 건가요? ㅠ
TopSchooL
12년 전
그냥 글만보고 때린거라 의미적으로 담은거라 설명이 미흡했네요 정확한 코드는
$("button").bind("mouseover click", function(e){
//alert(e.type);
if($(window).width() >= "970" && e.type == "mouseover"){
$("p").html("970px 보다"+ $(window).width() + "이기 때문에 오버로 동작 css");
}else if($(window).width() < "970" && e.type == "click"){
$("p").html("970px 보다 작은"+ $(window).width() + "이기 때문에 클릭으로 동작 css");
}
});
테스트 사이트
http://huddak.net/aa.php
목표는 반응형웹에서 해상도별로 클래스를 조정이 가능하다.
근데 스크립트가 들어가니까 요런식으로하면 스크립트 부분에서 더 효율적이지 않겠냐
이걸 말한거였어요
$("button").bind("mouseover click", function(e){
//alert(e.type);
if($(window).width() >= "970" && e.type == "mouseover"){
$("p").html("970px 보다"+ $(window).width() + "이기 때문에 오버로 동작 css");
}else if($(window).width() < "970" && e.type == "click"){
$("p").html("970px 보다 작은"+ $(window).width() + "이기 때문에 클릭으로 동작 css");
}
});
테스트 사이트
http://huddak.net/aa.php
목표는 반응형웹에서 해상도별로 클래스를 조정이 가능하다.
근데 스크립트가 들어가니까 요런식으로하면 스크립트 부분에서 더 효율적이지 않겠냐
이걸 말한거였어요
12년 전
아, $(window).width() 값을 처음에 한번만 가지고 있는 거로 생각했네요.
아주 좋네요. ^^ 킹왕짱 ㅋㅋㅋ
본문은 이벤트 핸들러를 바꿔치는 거구요. 클래스 조정하는 방법도 있겠단 거였어요. ㅎㅎ
그런데, 970 이상일 때는 button 클릭 시 페이지 이동도 되어야 해서 그대로 쓰기는 좀 어렵겠네요. 아무튼 좋습니다. ^^
아주 좋네요. ^^ 킹왕짱 ㅋㅋㅋ
본문은 이벤트 핸들러를 바꿔치는 거구요. 클래스 조정하는 방법도 있겠단 거였어요. ㅎㅎ
그런데, 970 이상일 때는 button 클릭 시 페이지 이동도 되어야 해서 그대로 쓰기는 좀 어렵겠네요. 아무튼 좋습니다. ^^
TopSchooL
12년 전
네 지운아빠님 말 이해하고 댓글단건데 제가 말을 넘 대충한거같아요 ㅎㅎ
제가 처음 코드에서 말하고싶었던것은
1. 소스를 간결하게 해서 속도를 조금더 도움을주자 모바일도 고려한거니까
2. 화면변환이 많은가 , 클릭이 많은가를 비교해서 더 리소스가 적은걸을 사용하는게 어떠냐
이런점까지 고려하면 더좋겠다라는 말을 하고싶은거였어요
제가 처음 코드에서 말하고싶었던것은
1. 소스를 간결하게 해서 속도를 조금더 도움을주자 모바일도 고려한거니까
2. 화면변환이 많은가 , 클릭이 많은가를 비교해서 더 리소스가 적은걸을 사용하는게 어떠냐
이런점까지 고려하면 더좋겠다라는 말을 하고싶은거였어요
12년 전
네 탑스쿨님 덕에 하나 배웁니다. 감사합니다. ㅎㅎ
TopSchooL
12년 전
저도 얼마전에 공부한 내용중에 응용할수있는 예시가 나온거같아서 간만에 공부댓글 다네요
12년 전
아니 이렇게 훌륭한 토론은... 스크랩합니다. ^^
12년 전
뱁새가 황새 따라가려니 가랭이가 찢어질 거 같아요. ㅠㅠ
왜 이렇게 잘해놓은 황새들이 많은지 ㄷㄷㄷ
왜 이렇게 잘해놓은 황새들이 많은지 ㄷㄷㄷ
12년 전
외계인 천재들 만에 언어 같습니다..
아는 거라곤 스타일.. 헤드..테일은 재단사? 기타..스펠링만..뭔 암호 기호도..^^
음.. 서당개 3년이면 풍월을 읊는다고..(그러고 보니 3년 하고도 한참 지낫 습니다..^^)
언젠 가는 알고야 말 것 임..^^
아는 거라곤 스타일.. 헤드..테일은 재단사? 기타..스펠링만..뭔 암호 기호도..^^
음.. 서당개 3년이면 풍월을 읊는다고..(그러고 보니 3년 하고도 한참 지낫 습니다..^^)
언젠 가는 알고야 말 것 임..^^
12년 전
역시 개발자들은 코드로 말을하는군요!! 굳 토론~+_+
12년 전
요즘 이것때문에미치겠습니다...그리 간단한게 아니더라구요ㅠ...
리사이징 될때마다 마우스오버와 클릭 이벤트가 해상도별로 다르게 나타나야 하는데...
그 이벤트들을 제어하는 게 여러가지 변수들이생겨서...ㅠ
제가 아직 초짜라서 그런가봐요ㅠ
리사이징 될때마다 마우스오버와 클릭 이벤트가 해상도별로 다르게 나타나야 하는데...
그 이벤트들을 제어하는 게 여러가지 변수들이생겨서...ㅠ
제가 아직 초짜라서 그런가봐요ㅠ
12년 전
enquire.js 를 사용하시는 방법도 있고, 위 탑스쿨님이 말씀하신 방법이나 저의 방법보다 더 많은 callback 기능을 포함했으면서도 놀랍게도 가볍습니다.
http://sir.co.kr/bbs/board.php?bo_table=pb_tip&wr_id=2578
modernizr 로 touch 기기인지 아닌지를 판별한 후 선택적으로 이벤트를 지정하는 방법도 있습니다.
http://modernizr.com/
여기에 RESS 까지 더하면 PC일 때, 모바일일 때를 구분하여 내용을 전송해줄 수도 있죠.
저도 아직 초짜인 상태에서 작업하려니 힘이 드네요. ㅠㅠ
화... 화이팅 ㅠㅠ
http://sir.co.kr/bbs/board.php?bo_table=pb_tip&wr_id=2578
modernizr 로 touch 기기인지 아닌지를 판별한 후 선택적으로 이벤트를 지정하는 방법도 있습니다.
http://modernizr.com/
여기에 RESS 까지 더하면 PC일 때, 모바일일 때를 구분하여 내용을 전송해줄 수도 있죠.
저도 아직 초짜인 상태에서 작업하려니 힘이 드네요. ㅠㅠ
화... 화이팅 ㅠㅠ
게시글 목록
| 번호 | 제목 |
|---|---|
| 18790 |
JavaScript
공백제거
|
| 18788 |
PHP
셀렉트박스 간편하게 만들기
1
|
| 18786 | |
| 18783 |
PHP
게시판의 페이징 방법
2
|
| 18780 |
PHP
이미지에 워터마크 처리하기
2
|
| 18769 |
Mobile
Chrome 를 이용한 모바일모드
10
|
| 5549 | |
| 27272 | |
| 27267 | |
| 30785 | |
| 30782 | |
| 27264 | |
| 18767 |
JavaScript
스크립트오류 제거
1
|
| 18765 |
JavaScript
간단한 쿠키지원 팝업 스크립트
1
|
| 18764 | |
| 18763 |
JavaScript
대소문자변환
|
| 5546 | |
| 18760 | |
| 18758 | |
| 18755 |
JavaScript
홈페이지 브라우저 크기 고정시키기
2
|
| 18752 |
JavaScript
iframe 아이프레임 투명처리
2
|
| 27256 | |
| 27247 | |
| 5539 | |
| 18750 | |
| 27244 | |
| 27243 | |
| 18749 |
JavaScript
금액 입력시 자동으로 천단위구분기호(,) 붙여주는 함수
|
| 18747 | |
| 18745 |
JavaScript
출생년도에 따른 나이 계산 자바스크립트
1
|
| 18741 | |
| 18740 | |
| 18738 |
JavaScript
iframe에서 페이지를 닫을 때
1
|
| 18731 |
JavaScript
iframe 높이 자동조절 스크립트
6
|
| 18730 |
JavaScript
자바스크립트 인공지능 장기게임-Minimax
|
| 27240 | |
| 5535 | |
| 18728 |
JavaScript
금액을 한글로 표기 해주는 스크립트;
1
|
| 18726 |
JavaScript
전화번호 입력시 자동 하이픈 넣기
1
|
| 18724 |
JavaScript
사업자번호체크스크립트 간단버전
1
|
| 5532 | |
| 26500 |
견적서
홈페이지 제작 견적서
14
|
| 27237 | |
| 5529 | |
| 30776 | |
| 18721 |
jQuery
플러그인 만들기 간단 예제
2
|
| 20725 | |
| 27232 | |
| 18719 |
JavaScript
퀵메뉴
1
|
| 18717 | |
| 18714 |
JavaScript
입력박스안에 왠 아이콘?
2
|
| 18712 |
JavaScript
게시판 글작성시 일부 태그막기
1
|
| 18709 |
jQuery
랜덤한 레이아웃과 효과
2
|
| 27213 | |
| 27200 | |
| 18706 |
JavaScript
자동으로 textarea 크기 조절하기
2
|
| 18704 |
JavaScript
textarea 자동 늘려주기 2
1
|
| 18702 |
JavaScript
해당 브라우저에 지원하는 이벤트 확인
1
|
| 18701 |
JavaScript
자바스크립트로 논리적인 XOR 연산하기.
|
| 18700 |
JavaScript
동적 셀렉트박스 다루기.
|
| 18698 |
JavaScript
자바스크립트 이벤트 핸들러 (Event Handler)
1
|
| 18697 |
JavaScript
함수명을 변수로 해야할 때
|
| 18696 |
JavaScript
이메일 유효성 정규식 - 자바스크립트
|
| 18694 | |
| 5525 | |
| 27199 | |
| 18691 | |
| 5515 | |
| 5510 | |
| 5501 | |
| 18690 | |
| 18687 | |
| 5496 | |
| 18686 | |
| 18676 | |
| 26496 |
서식
영수증 양식
3
|
| 18675 | |
| 30773 | |
| 18671 |
JavaScript
이미지 슬라이드 관련입니다.(자바,제이쿼리)
3
|
| 30767 | |
| 18667 |
JavaScript
롤오버시 서브메뉴가 나타나는 기본 스크립트
3
|
| 18658 |
jQuery
회사에 히스토리에 써먹을 만한 자료
8
|
| 18650 | |
| 18648 |
MySQL
고수님들 도와주세요!
1
|
| 5494 | |
| 5490 | |
| 20705 | |
| 5485 | |
| 18645 |
Mobile
json 파싱방법
2
|
| 27194 | |
| 20684 |
정규표현식
정규표현식 의 핵심. 패턴변경자 1
20
|
| 18642 | |
| 5482 | |
| 27185 | |
| 5478 | |
| 5473 | |
| 5467 | |
| 18636 | |
| 5462 | |
| 5443 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기