포럼


최근 cookie 사용 방법을 알게 되어서


열심히 이곳 저곳에 적용하고 있습니다 :)


그 중 가장 잘했다고 생각하는 것은!


바로 XE위젯 채팅(srchat 사용중)입니다!


어떤 기능을 적용했냐면요~


제 사이트의 경우 반응형으로 구축되어 있습니다.


1300px 이하 해상도의 경우 위젯 레이어가 하단으로 이동합니다. ( 1300px 이상은 우측에 고정)


그곳에 채팅 위젯까지 같이 있다보니 유일한 회원분께서 불편함을 느끼셔서..ㅜ.ㅜ


어떻게 하면 좋을까 ~? 하다가


cookie를 이용하여 상단으로 고정하는 기능을 추가했습니다.


방식은 대충 이러이러합니다.


위젯 창 위에 별도의 function을 걸어주고....('채팅창 고정'라고 명명함)


해당 레이어를 클릭하게 되면 우선 jquery를 이용하여


position을 fixed로 바꾸고 left를 0으로 top은 상단 header 크기 만큼 추가하고 여유롭게 170px 정도 줬습니다.


항상 위에 있을 수 있도록 하기 위해 z-index를 적당히 주고요~ (전 90 정도 줬네요 header가 아마 100인가 그래서..)


그런데! 그냥 이렇게 하면 페이지 이동하면 다시 원위치로 돌아가겠죠?!


그래서 위의 css 를 변경 하기전에 해당 값을 모조리! 쿠키로 저장합니다.


jquery.cookie.js 플러그인을 이용하면 보다 쉽게 쿠키를 요리조리 구울 수 있습니다.(플러그인 말고 그냥 쓰는 방법을 몰라용)


그래서 해당 값을 모조리~ 저장하고...


페이지가 시작될때마다 쿠키를 체크합니다.


$(document).ready(function(){


//대충 요안에 넣어주면 페이지가 시작될때마다 작동합니다.


});


적당한 if문으로 쿠키값이 있으면!


강제적으로 고정값을 추가해줍니다. absolute 라던지~ left 라던지 이런 값들을요!


그럼..


페이지를 이리저리 움직여도~~


항상 스크린 위에 고정되어 있습니다~


고정을 했으면 반대로 취소하는 기능을 만들어야겠죠...


맨첨에 만든 function에 if문을 걸어서 cookie가 있으면~ 기존 쿠키값을 지우는 작업을 해줍니다.


쿠키를 지우기 전에! 아까 쿠키로 저장했단 변경전 값을 전부 매칭해주고요! (jquery.css() 이용)


기존 쿠키를 날려버리면!


다시 초기화가 되고 페이지 이동을 해도 쿠키값이 없으니 기존 상태를 유지할 수 있겠죠...?




단순히 위치만 고정하면.. 재미 없고.. 또 불편할 수 있습니다.


따라서 jquery.ui를 이용하여 드래그하여 원하는 위치로 이동할 수 있도록 기능을 추가하면


매우 유용하겠죠?



기본적으로 xe에서 jquery.ui를 불러올 겁니다. 따라서 별도로 script를 불러올 필요가 없지요!


그리고.. 드래그 하는 방법은


http://jqueryui.com/draggable/


이곳에 아주 잘~ 설명되어 있습니다.


저같은 경우 다른 건 다 필요없고


stop 요녀석이 중요합니다.


드래그가 끝나면 함수를 실행할 수 있는 녀석입니다.



    $( "#targetID" ).draggable({
      stop: function() {

        //이곳에서 현재 위치값을 쿠키로 저장!

      }
    });



대충 이런식으로 구현이 되는데


    $( "#targetID" ).draggable();


단순히 이렇게만 해도 드래그가 됩니다!


하지만 저희는 해당 값을 쿠키로 저장해서 페이지를 이동하더라도 마지막으로 멈춘 위치값을 기억해야하기 때문에



$( "#targetID" ).draggable({
      stop: function() {

        //이곳에서 현재 위치값을 쿠키로 저장!

      }
});


이렇게 이벤트를 주는 겁니다!


이곳에서 현재 위치값을 쿠키로 저장!~ 이곳에 쿠키로 현재 위치값을 구해서..


쉽게 하면 뭐 대충 이렇게 되겠네요


$( "#targetID" ).draggable({
      stop: function() {

        //이곳에서 현재 위치값을 쿠키로 저장!

  $.cookie('chatter_move_style_left',$(this).css('left'));
  $.cookie('chatter_move_style_top',$(this).css('top'));
      }
});



이렇게 하면 'widget_move_left'와 'widget_move_top'의 마지막 위치가 저장됩니다~


그럼 다시 처음으로 돌아가서 페이지가 로드 될 때! 그곳 가장 끝에다가.. - > $(document).ready()



   if($.cookie('chatter_move_style_left')) $('#targetID').css('left',$.cookie('chatter_move_style_left'));
   if($.cookie('chatter_move_style_top')) $('#targetID').css('top',$.cookie('chatter_move_style_top'));


이런식으로...  하면 페이지가 로드 될 때마다 해당 쿠키값이 있을 경우 해당 값을 입력해주기 때문에


페이지를 이동하더라도 이동했던 위치에 항상 고정할 수 있게 됩니다~




저는 이것 외에도 쿠키 기능을 이용하여


확장변수값을 고정하는 기능을 추가하여 여러번 같은 확장변수를 동일하게 입력해야 할 경우


편리하게 쿠키값을 체크하여 자동으로 입력되도록 하고 있습니다 :)




여러분도 쿠키의 매력에 빠져보세요~~


참고로 위처럼 쿠키를 사용하게 되면 브라우저가 열려있는 동안만 유지가 됩니다~


기간을 지정할 수도 있지만 굳이 그럴 필요성은 못느끼기에~~


이상 자기전에 주저리였습니다.





ps. 그냥  $()~ 이런식으로 쓰면 에러 납니다~~


jQuery(function($){


});


이런식으로 감싸주거나


$ 이거 대신 jQuery로 사용해도 됩니다.


글쓴이 제목 최종 글
이즈야 common_layout을 불러오지 않을 방법? [13] 2014.07.26 by Ray
웹엔진 XML 쿼리 에러인데 뭐가 문제인지 잘 모르겠네요.. [22] 2014.06.03 by gu
DoorWeb xe_v4 레이아웃 재구성 [32] file 2014.06.03 by jjuunnaa
곰탕lol왕자 공포사이트를 운영중입니다.(조언좀) [3] 2014.06.03 by GG
강공혁s 엘러브호스팅사용해보신분계신가요? [8] 2014.06.03 by qwms
곰탕lol왕자 다들 웹호스팅 뭐쓰세요? [16] 2014.06.02 by 엘러브1
mAKEkr 현재 텍스타일을 이용해 제대로 된 블로깅을 하는건 무리인것같습니다. [1] file 2014.06.02 by teguh100
gu xe 1.7.5.1 업뎃후 한가지 문제 [2] 2014.06.02 by akasima
likepulip 이번 버전에서 파비콘 등록 정상으로 되는가요? [4] 2014.06.02 by likepulip
너마늘위해 회원정보관리애드온 쓰니 스팸이 없어졌습니다... [4] 2014.06.02 by 애니즌
orangehome 회원 이메일은 관리자와 본인만 볼 수 있도록... [1] 2014.06.02 by GG
GG 게시판 메일링 기능을 만들고 있습니다. [5] file 2014.06.01 by 혼마_메이코
XE XE 오픈 세미나 - 5월 31일 xdebug, XE 개발 전반에 대한 Q&A [4] 2014.06.01 by natura
티지로 스팸관련 팁이라고 해야하나, 너무 성의 없어 보일지 걱정되지만 [1] 2014.06.01 by 혼마_메이코
ひりゅう. NGINX+ 라는게 있네요 [5] 2014.06.01 by teguh100
こさき! 채팅형 실시간 댓글을 사용하려니 고민이 있습니다 [7] 2014.05.31 by こさき!
mAKEkr 텍스타일에는 확장변수가 안들어가네요. [1] 2014.05.31 by 혼마_메이코
ひりゅう. 통큰아이 DDOS 대응이 좀 미흡하네요 [19] file 2014.05.31 by ひりゅう.
큰돌♡ 리퍼러 통계를 넘겨받긴 했는데... [12] 2014.05.31 by 콩까기
geogeo123 hostinger.kr 여기서 무료 홈페이지 만드는거로 만들면 장기간 접속이나 방문자없으면 아예 없애버리나요? 아시는분? [9] 2014.05.30 by 도메인8295