최근 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로 사용해도 됩니다.