달력

09

« 2010/09 »

  •  
  •  
  •  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  •  
  •  
2007/07/10 11:37

[JS] OS 알아내기 (with js & jQuery) 작은 팁2007/07/10 11:37

new function() {
    var b = navigator.userAgent.toLowerCase(); // jQuery.browser 아래에 추가하시면 이 줄은 삭제

    jQuery.os = {
        Linux: /linux/.test(b),
        Unix: /x11/.test(b),
        Mac: /mac/.test(b),
        Windows: /win/.test(b)
    }
}


사실 jQuery.browser 아래에 추가해주셔도 되지만, Compress되었을 경우에는, 위의 소스를 별도의 js파일로 혹은, html안에 넣어주시면 됩니다.

Windows, Mac, Linux에서 테스트 해 봤으며,
Linux의 경우 (Gentoo에서만 확인해봤습니다.) Unix와 Linux 모두 뜹니다.
Unix에서는 안타깝게도 테스트를 못해봤습니다.

사용법은 간단합니다.
if($.os.Windows){
    alert("Window~");
}

이렇게 사용하시면 됩니다.

그리고, jQuery가 아니고 일반적인 Javascript라면

var agent = navigator.userAgent.toLowerCase();

os = {
    Windows : /win/.test(agent),
    Mac : /mac/.test(agent),
    Linux : /linux/.test(agent),
    Unix : /x11/.test(agent)
};

if(os.Windows){
    alert("Window~");
}

하시면 됩니다.
크리에이티브 커먼즈 라이선스
Creative Commons License

'작은 팁' 카테고리의 다른 글

[JS] timestamp 를 date 형식으로 보여주기(as like php date())  (0) 2007/08/08
[JS] HTML Attribute Parser  (0) 2007/07/13
[JS] OS 알아내기 (with js & jQuery)  (0) 2007/07/10
[js] FireFox, Safari 에서도 16진수 컬러코드 사용하기.  (1) 2007/04/18
[jQuery] interface > sortable 스크롤이 바닥일경우 drag시 스크롤 움직이는 버그  (0) 2007/04/17
[jQuery] interface > sortable > onChange > SortSerialize Bug  (0) 2007/04/17
TAG JavaScript, jQuery, OS
Trackback (0) : Comment (0)
Posted by Johan Kim 기다림
2007/04/17 17:53

[jQuery] interface > sortable 스크롤이 바닥일경우 drag시 스크롤 움직이는 버그 작은 팁2007/04/17 17:53

움직일 item을 길게 늘여놓고서..
스크롤을 맨 아래로 놓은 다음
아무 item을 drag할려고 하면, 화면이 움직입니다.

아마도, helper 때문에 item들이 움직이다보니. 그로 인해 생기는 증상인것 같더군요.

이 문제는 아래와 같은 방법으로 해결 할 수 있습니다.
onStart : function(){
	$('body').append("<div id='autoHeight' style='height:20px'></div>");
}
onStop : function(){
	$('#autoHeight').remove();
}

아래에 빈 공간을 만들어 줌으로서 화면이 안움직이게 하는거죠.
여기서 주의할 점은 height를 drag Item의 height 이상으로 해주셔야 한다는 것입니다.
크리에이티브 커먼즈 라이선스
Creative Commons License

'작은 팁' 카테고리의 다른 글

[JS] OS 알아내기 (with js & jQuery)  (0) 2007/07/10
[js] FireFox, Safari 에서도 16진수 컬러코드 사용하기.  (1) 2007/04/18
[jQuery] interface > sortable 스크롤이 바닥일경우 drag시 스크롤 움직이는 버그  (0) 2007/04/17
[jQuery] interface > sortable > onChange > SortSerialize Bug  (0) 2007/04/17
[js]현재 스크롤 위치 알아내기  (4) 2007/04/13
EditPlus v2.30 눈에 확띄는 업데이트 8가지  (4) 2007/01/26
TAG bug, interface, jQuery, scroll, sortable
Trackback (0) : Comment (0)
Posted by Johan Kim 기다림
2007/04/17 17:47

[jQuery] interface > sortable > onChange > SortSerialize Bug 작은 팁2007/04/17 17:47

jQuery에 interface 라는 Plugin이 있습니다.
다양한 효과를 내는 Plugin이죠.

이 중 sortable 기능도 제공을 합니다.
근데 이 sortable은 테이블에서 목록 재정렬을 의미하는 sortable이 아니라,
Drag&Drop으로 직접 목록을 컨트롤하는..재정렬이 아닌 "재정의" 개념의 기능입니다. (예제보기)


여기서 목록이 다른 block으로 재정의 되었을때 onChange를 사용하는데, 이 때
처음에 있던 block과, 추가된 block. 즉 변화가 있는 block을 Object로 넘겨줍니다.
이걸 이용해서, 움직인 item이 어디서 어디로 갔는지 알 수 있습니다.

같은 block안에 있을떈 onChange가 실행이 안되어야 하는데 실행이 되는 bug가 있습니다.
그 경우는, SortSerialize를 사용했을 경우인데.
실제로 어디서 어디로 움직였는지 직관적으로 보거나, Ajax를 사용할땐 SortSerialize를 사용해야 편합니다.
그런데 이걸 쓰니, 작동이 안되야 할 상황에서 작동이 돠고, 제대로 된 Object를 넘겨주는게 아니라.엄한 Object를 넘겨 주 더 군요..

어디서 이 Sample Code를 본건지 모르겠지만..Sample Code에서는
function(obj){
serial01 = $.SortSerialize(obj[0]);
serial02 = $.SortSerialize(obj[1]);
...
}
로 되어 있더군요..
평상시에는 문제가 없지만 언급한대로, 작동이 안되어야 할 상황에서 오작동을 일으키더군요.
해결책은 으외로 간단합니다.
function(obj){
serial01 = $.SortSerialize(obj[0].id);
serial02 = $.SortSerialize(obj[1].id);
...
}

쩝;;
크리에이티브 커먼즈 라이선스
Creative Commons License

'작은 팁' 카테고리의 다른 글

[js] FireFox, Safari 에서도 16진수 컬러코드 사용하기.  (1) 2007/04/18
[jQuery] interface > sortable 스크롤이 바닥일경우 drag시 스크롤 움직이는 버그  (0) 2007/04/17
[jQuery] interface > sortable > onChange > SortSerialize Bug  (0) 2007/04/17
[js]현재 스크롤 위치 알아내기  (4) 2007/04/13
EditPlus v2.30 눈에 확띄는 업데이트 8가지  (4) 2007/01/26
FireFox 2.x 에서 Alt+S 즉, AccessKey가 안되는것 수정하기  (0) 2007/01/22
TAG bug, interface, jQuery, onchage, sortable, sortSerialize
Trackback (0) : Comment (0)
Posted by Johan Kim 기다림
2007/04/17 17:28

[jQuery] jQuery 간단한 소개 및 prototype, yui와 간단 비교 웹/프로그래밍2007/04/17 17:28

우선 jQuery에 대해 간단히 설명을 하자면,
prototype.js같은 javascript framework(혹은 library)종류중 하나인데, XPath 라는 것을 지원한다.
사실 jQuery하면 대표되는것이 XPath인데, 간단하게 설명하면..

$("/html/body//p")

이런거다 ㅎㅎ.

jQuery는 yui처럼 화려한 기능과, Demo를 제공하지 않는다. 이건 단점일 수 도 있겠지만 장점일 수 도 있다.
이를 다른말로 하면 가볍다라는 말로도 표현 할 수 있기 때문이다.
물런, yui도 원하는 js만 빼서 쓰면 되지만, 너무 많은 js 들이 있고, 어떤게 어떤걸 사용하고 호출하고..@_@; 완전 다단계다 ㅠ,.ㅠ
(물런 필자가 yui를 많이 안써봐서 그렇게 느끼는 걸 수 도 있다)

jQuery의 가벼움은 prototype.js 보다도 가볍다.
정말 딱 뼈다귀만 구현해놓은 Library라고 할 수 있다.
prototype.js처럼 class틱하게 코딩도 가능하다.

필자는 처음에
그럼 yui처럼 구현할려면 삽질해야 겠네..
라고 걱정했다. 하지만 이 걱정은 곧 접어야 했다. 왜냐면 수많은 Plugin들이 존재하고 자신이 필요로 하는 Plugin만 다운받아 적용하면 되기 때문이다.

jQuery의 Plugin이 많은 이유를 추측해보자면..
간단하고 직관적인 구성때문에, jQuery는 쉽게 사용할 수 있다.
그렇다 보니..당연히 많은 사람들이 사용하게 될 것 이고..
그럼 결국 필요에 의해 여러 종류의 Plugin들이 나오게 된것이 아닐까..?

그리고 기본적으로 jQuery 는 Compression 되어서 나오기 때문에, 더욱더 용량이 줄어든다.
prototype.js : 66,529 byte
jQuery.js : 20,975 byte

용량 jQuery의 압승~
하지만 prototype.js 은 Compression 을 안했기 때문에 불공정한 시합이었다.
그래서 prototype.js도 Compression 하고 난 후 용량을 비교해 보았다.
결과는 역시나 jQuery의 승리였다.
prototype.js : 27634 byte
jQuery.js : 20975 byte


jQuery의 단점은 수많은 Plugin들 중에 자신이 원하는것을 찾는다는게 쉽지 않다는 것정도..?
검색해보고 쓸만한거 직접 써보고, 아니면 다시 찾아보는 검증(?)작업, 일명 삽질을 해야 한다.
하지만 이것도 유익한 삽질이다.
이런식으로 여러 Plugin들에 대해 알아놓으면, 훗날 Plugin을 찾을때 좀 더 쉽게 찾을 수 있지 않은가?



총 정리를 하자면.
  1. prototype.js 의 가벼움 보다 더욱 가볍다.
  2. yui는 그 자체에서 골라내서 사용할 수 있고, jQuery는 뼈대만 가지고 살(Plugin)은 알아서 붙이는 형태.
  3. XPath 라는 Selector가 재밌다.
  4. 거기다 수많은 Plugin이 존재한다.
  5. 물런 원하는 Plugin을 찾기 위해선 노가다를 좀 해야 한다.
크리에이티브 커먼즈 라이선스
Creative Commons License

'웹/프로그래밍' 카테고리의 다른 글

DAUM 메인페이지 CSS 날라가다~  (2) 2007/07/11
미투데이, 플레이톡 사용시 주의점.  (0) 2007/04/25
[jQuery] jQuery 간단한 소개 및 prototype, yui와 간단 비교  (12) 2007/04/17
CSS Naked Day라서 CSS 뺏더니..  (1) 2007/04/05
Prototype 1.5.1 release candidate  (2) 2007/03/13
글로벌 웹 기술 워크샵  (0) 2007/03/09
TAG jQuery, Prototype.js, xpath, YUI
Trackback (0) : Comment (12)
Posted by Johan Kim 기다림