작은악마`s Blog

jquery를 이용한 QR코드를 생성하는 오픈 소스를 소개해 드리겠습니다.

라이센스는 MIT 라이센스이며 소스는 github와 제작자의 홈페이지에서 다운로드 받으실 수 있습니다.

제작자의 사이트 좌측 하단에 보면 "Buy me a beer"라는 후원 베너가 있네요. 제작자의 위트가 엿보입니다. ^^

제작자의 홈페이지 화면입니다.

라이센스 정보와 github 주소등의 정보가 있으며 사용 설명도 잘 되어 있습니다.

저는 github에서 소스를 다운받아 demo폴더에서 실행을 했더니 처음에는 동작을 하지 않았습니다.

데모 폴더의 index.html을 열어보니

<script src="../jquery.qrcode-{{pkg.version}}.js"></script>

란 코드가 보입니다. 그래서 해당 코드에서 -{{pkg.version}} 부분을 삭제하였습니다.

그러나 역시 동작하지 않았습니다. ㅡㅡ;

다시 폴더들을 확인하였더니 src 폴더에 있는 "jquery.qrcode.js" 파일의 크기와

dist 폴더에 있는 "jquery.qrcode.js" 파일의 크기가 다릅니다.

그래서 dist 폴더에 있는 파일을 복사한 후 실행하였더니 이번엔 성공~~

위와 같이 QR코드가 잘 보입니다. ^^

참고로 전 크롬브라우저에서 테스트를 하였으며

위 이미지를 보시면 우측 항목중 "LABEL"이라는 항목에 적은 문구가 QR코드 중간에 있습니다.

그런데 좌측 상단에 있는 "REDER MODE"를 DIV로 하게되면 "LABEL"이 적용되지 않습니다.

QR코드 관련한 작업을 할때 유용할것 같습니다.^^

jquery를 사용하여 동적으로 하위 리스트를 숨김/표시 하는 기능을 만들던 중

"object is not a function" 이라는 에러를 만났다.

그룹1
 

  
맴버1
  
맴버2
  
맴버3


그룹2
 

  
맴버4
  
맴버5
  
맴버6

위와 같은 html코드가 있을때 브라우저에서는 다음과 같이 나타난다.

(코드는 Syntax Highlighter가 적용되어 모바일에서는 안보일 수 있습니다.)

여기서 jquery를 사용하여 그룹1, 그룹2를 클릭할때 그 하단의 맴버 목록을 숨김/표시하는 기능을 넣고

처음 페이지가 보여질때 목록이 숨겨진 상태로 표시하려 하였다.

그래서 코드를 다음과 같이 작성하였다.

(코드는 Syntax Highlighter가 적용되어 모바일에서는 안보일 수 있습니다.)

위와 같이 하면 "object is not a function" 이라는 에러가 난다.

그래서 alert으로 다음과 같이 찍어보았다. 그 결과는

1. alert($(this)); -> [object Object]
2. alert($(".group").get(0)); -> [object HTMLLIElement]

결과적으로 두 방식은 서로 다른 타입의 object를 반환하여 생기는 문제...

그래서 아래와 같이 처리하였다.

(코드는 Syntax Highlighter가 적용되어 모바일에서는 안보일 수 있습니다.)

다른 해결 방법도 있겠지만 일단 패스~~~ ^^;

* 추가 사항

위 코드에서

(코드는 Syntax Highlighter가 적용되어 모바일에서는 안보일 수 있습니다.)

var obj_id= $(".group").get(i).id;
$("#"+obj_id).children("ul").css("display", "none");

부분을 아래와 같이 해도 된다.

(코드는 Syntax Highlighter가 적용되어 모바일에서는 안보일 수 있습니다.)

$($(".group").get(i)).children("ul").css("display", "none");

사용자가 마우스로 드래그하여 영역의 크기를 조정하는 기능을 구현하던중

3개의 DIV를 가지고 테스트를 할때는 별 무리가 없었는데

실제 좀 복잡한 UI에서 적용을 하니 이상한 동작이 일어났다..

마우스로 드래그를 하는데 left 값이 순차적으로 변하는게 아니라 널뛰기 하듯 튀는 현상이 발생!!!

여러가지로 확인을 해보았으나 이해할 수가 없었는데...

브라우저의 개발자 도구로 확인을 해보니 draggable을 적용한 DIV에 내가 지정하지 않은 값이 들어가 있는것을 확인.

결론은 div 에 draggable을 적용하면 draggable에서 해당 div의 여러가지 값을 변경하거나 지정한다.

이번 경우는 draggable에서 해당 DIV 에 position값을  relative로 변경하여서 발생하였던것..

그래서 draggable을 적용하고 바로 다음줄에서 해당 DIV에 position 값을 변경하여 해결!!

$('#div_b').draggable({
  axis : 'x',
  containment : [
   41,
   0,
   300,
   0
  ],
  drag : splitter
 });
 
 //draggable 함수가 position을 강제로 relative로 변경해서..
 $('#div_b').css("position","static");