반응형 웹 작업 시 mouseover click 분기 팁 > 퍼블리셔팁

퍼블리셔팁

퍼블리싱과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.

반응형 웹 작업 시 mouseover click 분기 팁 정보

반응형 반응형 웹 작업 시 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>
추천
3

댓글 20개

less 가 답이지요~~~

일단 속도가 빠르고
이단 변수에 담아 뒀다 꺼내 쓰기 빠르고
삼단 나중에 구조파악하기 쉽고
ㅎㅎㅎㅎ


- http://lesscss.org/
구지 무겁게 문서가 로드될때 할필요는 없을것같아요

$("button").bind("mouseover, focus, click", function(){

  if($(window).width() >= "970")
      $("ul ul").css("display", "block");
  else
      $("ul ul").css("display");
});
PC와 터치스크린에서 서브메뉴 펼치는 방식을 다르게 해주려고 쓰는 것입니다.
탑스쿨님 말씀대로 하면, PC나 터치스크린이나 세가지 모두 먹어버리게 되죠.
위에 댓글은 bind 에 세개를 다 묶어놓으셔서 드린 말씀이구요.
처음에 로드될 때는 탑스쿨님 방식대로 해도 되겠네요. 그런데 리사이즈 될 때 어차피 한번 더 처리를 해줘야겠는데요?
사이즈로 이벤트를 체크하셨으니
        if (val >= "970") {
            hdlr = "mouseover focus";
        } else {
            hdlr = "click";
        }

3개 다선언해도 콜백 함수에 사이즈를 지정하면 된다는 말이였어요^^
지운아빠님의 방식은 화면 사이즈가 변경될때마다 리소스가 발생되서 부담이 될수있다는걸 표현해서 임의로 말한거구요

제가 하는 방식은 마우스를 오버하거나 클릭 하는 순간에만 체크하기위한거구요

정확히 소스를 짠건아니구요
대략 저런식으로하면 부화적인 면에서도 좋다.. 라는 말을 한거예용

정확하게 하려면 아래처럼 리턴을 하거나 아니면 동작되는 css를 안넣으면되겠죠
if(e.type == "mouseover")
 return;
네, 제 목표는 화면 사이즈에 따라 오버와 클릭 핸들러를 다르게 하려는 건데, 알려주신 방법은 처음 로드된 문서값만 가지고 있으니(탑스쿨님이 말씀하신 것처럼 오버나 클릭 이외의 이벤트는 없으니까요.) 리사이즈에 관한 처리를 한번 더 해야할 것 같다는 말이었습니다. ^^

효율에 관해 이야기해주시려는 건 이해가 가는데 목표가 무엇인지 다시 한번 생각해봐주세요. 제가 이해력이 딸리는 건가요? ㅠ
그냥 글만보고 때린거라 의미적으로 담은거라 설명이 미흡했네요 정확한 코드는

$("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

목표는 반응형웹에서 해상도별로 클래스를 조정이 가능하다.
근데 스크립트가 들어가니까 요런식으로하면 스크립트 부분에서 더 효율적이지 않겠냐
이걸 말한거였어요
아, $(window).width() 값을 처음에 한번만 가지고 있는 거로 생각했네요.
아주 좋네요. ^^ 킹왕짱 ㅋㅋㅋ

본문은 이벤트 핸들러를 바꿔치는 거구요. 클래스 조정하는 방법도 있겠단 거였어요. ㅎㅎ

그런데, 970 이상일 때는 button 클릭 시 페이지 이동도 되어야 해서 그대로 쓰기는 좀 어렵겠네요. 아무튼 좋습니다. ^^
네 지운아빠님 말 이해하고 댓글단건데 제가 말을 넘 대충한거같아요 ㅎㅎ

제가 처음 코드에서 말하고싶었던것은

1. 소스를 간결하게 해서 속도를 조금더 도움을주자 모바일도 고려한거니까
2. 화면변환이 많은가 , 클릭이 많은가를 비교해서 더 리소스가 적은걸을 사용하는게 어떠냐

이런점까지 고려하면 더좋겠다라는 말을 하고싶은거였어요
외계인 천재들 만에 언어 같습니다..
아는 거라곤 스타일.. 헤드..테일은 재단사? 기타..스펠링만..뭔 암호 기호도..^^

음.. 서당개 3년이면 풍월을 읊는다고..(그러고 보니 3년 하고도 한참 지낫 습니다..^^)
언젠 가는 알고야 말 것 임..^^
요즘 이것때문에미치겠습니다...그리 간단한게 아니더라구요ㅠ...
리사이징 될때마다 마우스오버와 클릭 이벤트가 해상도별로 다르게 나타나야 하는데...
그 이벤트들을 제어하는 게 여러가지 변수들이생겨서...ㅠ

제가 아직 초짜라서 그런가봐요ㅠ
enquire.js 를 사용하시는 방법도 있고, 위 탑스쿨님이 말씀하신 방법이나 저의 방법보다 더 많은 callback 기능을 포함했으면서도 놀랍게도 가볍습니다.
http://sir.co.kr/bbs/board.php?bo_table=pb_tip&wr_id=2578

modernizr 로 touch 기기인지 아닌지를 판별한 후  선택적으로 이벤트를 지정하는 방법도 있습니다.
http://modernizr.com/

여기에 RESS 까지 더하면 PC일 때, 모바일일 때를 구분하여 내용을 전송해줄 수도 있죠.

저도 아직 초짜인 상태에서 작업하려니 힘이 드네요. ㅠㅠ
화... 화이팅 ㅠㅠ
전체 26
퍼블리셔팁 내용 검색 반응형에서

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT