jQuery를 사용하면 페이지에 특정코드 스타일을 사용하게 되는데, 엘리먼트를 확장 집합의 형태로 표현하고 jQuery 커맨드나 커맨드체인을 확장 집합에 사용하는 코드 스타일을 자주 쓰게 된다. 물론 자신만의 코드를 작성할 때는 마음대로 코드를 작성할 수 있다.
자신만의 코드를 패턴화하여 jQuery 확장으로 만들면 좋은 이유는 사이트 전체에 일관된 코드 스타일을 유지하는데 도움을 주고, 재사용이 가능하며, jQuery 가 제공하는 기반코드를 확용할 수 있다.
플러그인이 다른 jQuery 플러그인이나 자바스크립트 라이브러리와 충돌하지 않고 잘 동작하는지가 확실하게 보장되기 위해 알려진 일반적인 지침을 사용한다.
이름을 충돌하지 않도록 만드는 방법은 * 접두어로 jquery. 를 사용한다. * 이어서 플러그인 이름을 적는다. * .js 로 파일 이름을 끝맺는다. 예를 들어서 jquery.ngio.js
그리고, jQuery 대신 $ 를 사용하는 편이 훨씬 편한데, 충돌을 피하기 위해 $ 대신 jQuery를 사용하는 것이다. 하지만 $ 쪽이 훨신 편리하기에 포기하고 싶지 않다. 그래서, $ 라는 매개변수를 정의한 함수에 jQuery를 전달하면 $는 함수 안에서 jQuery의 참조임이 보장된다.
(function($) { // // // 여시에 플러그인을 정의한다. // })(jQuery);'
복잡한 매개변수 목록을 단순하게 만들기. 플러그인은 대부분 매개변수를 몇 개만 요구할 정도로 단순하다. 선택적인 매개변수가 생략되면 적절한 기본값이 제공되며,매개변수가 생략되면 매개변수의 순서에 내포된의미도 변경된다.
function complex(p1,p2,p3,p4,p5){ 이 함수는 매개변수가 5개인데, 이 중에 첫 매개변수를 제외한 모든 매개변수가 선택사항일 경우, 선택적인 매개변수가 너무 많다면 매개변수가 생략되었을 때 호출자의 의도를 합리적으로 추측하기가 어려워진다. 이 함수의 호출자가 마지막 매개변수만 생력했다면 마지막 선택적 인수를 null 값으로 확인할수 있기 때문에 문제되지 않지만, but 호출자가 p5를 명시하고 p2~p4 까지는 기본값으로 지정하고 싶은 경우엔 호출자는 생략된 매개변수 부분에 생략표시를 하고 다음과 같이 작성해야 한다. complex(valueA, null, null, null, valueB);
위와 같은 경우 null 과 매개변수의 순서를 주의깊게 봐야하는 단점이 있다. 일반적으로 이러한 문제를 해결하는 데 선택사항의 해기(option hash)를 많이 사용한다. 선택사항의 해시를 사용하면 선택적인 매개변수 정보를 이름/값 쌍 형식의 프로퍼티로 가지는 자바스크립트의 Object 인스턴스로 전달한다. complex( valueA, { p5:valueB } ); 또는 comlplex( valueA, { p3 : valueC, p5 : valueD } );
위와 같은 방법을 사용하면 null을 사용하여 생략된 매개변수를 표시할 필요가 없고 매개변수의 개수를 세지 않아도 된다. 필수 매개변수 하나와 선택항목을 여섯 개 가진 복잡한 함수 예제를 다시 살펴보자 complex(p1, options) 함수 내에서 $.extend() 유틸리티 함수를 사용해 기본값에 전달된 옵션을 합칠 수 있다. function comlex( p1, options ){ var settings = $.extend({ option1: defaultValue1 ,
option2: defaultValue2 ,
option3: defaultValue3 ,
option4: defaultValue4 ,
option5: defaultValue5 ,
option6: defaultValue6 , options || { } ); // 함수의 나머지 부분 } settings 변수는 페이지 개발자가 options 매개변수로 전달한 값과 기본값을 합친 값을 가진다. 주목할 점은 ||{}를 사용하여 options 객체가 null이거나 undefined 인지를 확인하고 있다는 것이다. 만약 options 변수가 false라면 (null과 undefined는 조건식에서 false이다) 빈 객체가 사용된다.
ex)
$.say = function(what) { alert( 'I say ' + what ); }
jQuery.say = function(what) { alert( 'I say ' + what ); }
(function($) { $.say = function(what) { alert( 'I say ' + what ); } }) (jQuery);
## 데이터를 조작하는 유틸 함수 만들기 고정폭으로 숫자 값을 표시하려면 숫자 값과 고정폭 필드(폭은 문자의 수로 정의)에 맞는 형식이 필요하다. 대개 이러함 형식은 값을 고정폭 필드에 우측 정렬시키고 값의 길이와 필드의 길이 차이를 조정하기 위해 채움 문자( fill character )로 앞 여백을 채운다.
함수 문법 : $.toFixedWidth $.toFixedWidth( value, length, fill ) : 매개변수 - value (Number) 형식화될 값 - length (Number) 결과 필드의 길이 - fill (String) 앞 단의 값을 채울 채움 문자, 생략하면 0을 사용한다.
(function($){ $.toFixedWidth = function( value, length, fill ){ var result = value.toString(); if( !fill ) fill = 0; var padding = length - result.length; if( padding < 0 ){ result = result.substr(-padding); } else{ for(var n = 0; n < padding; n++) result = fill + result; } return result; }; })(jQuery);
This jQuery plugin aims to replace the basic functionality provided by the standard JavaScript alert(), confirm(), and prompt() functions. What’s the benefit of using custom methods? Well, a few good reasons, really.
Implementation
Include the following in the <head> section of your HTML document(s):
Make sure you update the path to the respective files.
If you are already using the jQuery UI Draggable plugin (including the
UI core), simply omit the link to jquery.ui.draggable.js.
For IE to display the dialogs properly, you’ll also need
to make sure that you’re using Standards Mode. Just add the appropriate
DTD at the very top of your page:
This plugin utilizes the $.alerts namespace, but there are three built-in shortcut functions that make implementation easier:
jAlert(message, [title, callback])
jConfirm(message, [title, callback])
jPrompt(message, [value, title, callback])
Unlike their native JavaScript counterparts, you can use HTML in the message parameter. To specify a newline, you can use either \n or <br />.
These methods do not return the same values as confirm() and prompt(). You must access the resulting values using a callback function. (See the demo for more details.)
Compatibility
This plugin requires jQuery 1.2.6 or above and has been tested to work in the following browsers:
Internet Explorer 6 & 7
Firefox 2 & 3
Safari 3
Chrome
Opera 9
Known Issues
ENTER and ESC keys (to accept/cancel) don’t work in WebKit browsers
The draggable plugin doesn’t currently work in Opera
IE6 acts a bit differently as position: fixed isn’t supported.
jQuery는 HTML 문서, 보다 정확하게는 문서 개체 모델(DOM)과 자바스크립트 사이의 상호작용을 간단하게 해주는 오픈 소스 자바스크립트 라이브러리이다.
jQuery는 오픈소스이고, 작으며(최소화버전 18KB), 웹브라우저 간의 차이를 표준화하고, 깔끔한 플러그인 아키텍처를 사용하여 경량으로 제작되었고, 플러그인의 자료실(http://plugin.jquery.com)은 광범위하며, 출시 이후 꾸준히 성장하고 있다. API는 인라인 코드 예제를 포함하여 완전하게 문서화되어 있고, 몇년동안이나 훌륭하게 유지되고 있으며, 상당히 친화적(다른 자바스크립트 라이브러리와의 충돌을 피하는 여러방법을 제공한다. ) 이다. 커뮤니티 지원은 여러 메일링 목록, IRC 채널 그리고 jQuery 커뮤니티의 수 많은 튜토리얼, 아티클, 그리고 플로그의 포스트들을 포함하기에 실제로 꽤 유용하다. 공개적으로 개발되고 있으며, jQuery 개발팀이 업데이트에 대한 출시를 두려워하지 않기 때문에 꾸준하고 일관적이다. 큰 조직(예를 들어 Microsoft, Dell, CBS...)에서 jQuery를 사용하는 것은 꾸준히 늘어날 것이며, 오래도록 지속될 것이다. 브라우저보다도 앞서 W3C의 명세를 수용하고 있다. 일례로 CSS3 셀렉터의 대부분을 지원한다. 최신 브라우저에서 개발을 위한 테스트 및 최적화를 수행하였다. 개발자뿐만 아니라 디자이너에게도 상당히 강력하다. 차별적이지 않다. 자바스크립트의 작성 방식을 바꾸고 있는 jQuery의 간결함, 방법론 그리고 철학은 그 자체가 표준이 되어가고 있다.
jQuery 철학 - "Write less, do more(적게 작성하고, 보다 많이 한다. )" * 몇몇 요소를 찾아서 (CSS Selector 를 이용해서) 그들로 어떤 작업을 수행한다.(jQuery 메서드를 사용하여). * 요소의 집합에 대해 여러 jQuery 메서드를 체인으로 연결한다. * jQuery 래퍼와 암시적인 반복을 사용한다.
The sliding touch panel only shows up on mobile platforms. With a
mouse it feels clunky, but sliding with your finger just feels right.
This article shows you how to implement a sliding touch panel in JavaScript. jQuery
is the only dependency of the touch slider. The rest is pure
JavaScript and HTML. It runs fast, feels natural, and works on every
mobile device with touch support.
새롭게 선보이는 매체인《EPISODE》의 모토는 새로움입니다. 터치 인터페이스라는 새로운 환경에 맞게 컨텐츠, UX, 컨텐츠와
독자와의 관계를 완전히 새롭게 재정의하고자 합니다. 한국을 넘어 아시아 시장에서 아이패드 컨텐츠의 선도적 역할을 해
나가는《EPISODE》가 되겠습니다.
이번호에서는 일본의 대재앙에 대해 살펴보고자 합니다. 데이터와 인포그래픽 그리고 아이패드에서만 가능한 UX를 통해 일본의 대재앙이 일본만의 문제가 아닌 전세계의 문제이며 바로 우리의 문제임을 알아보고자 했습니다.
트위터에서 최고의 미디어 파워를 자랑하는 독설닷컴 고재열 시사인 기자와의 인터뷰 기사도 있습니다. 트위터와 인터넷에서 많은 논쟁을 통해 다듬어진 고재열 기자의 생각과 입장을 들어보시기 바랍니다.
특히 이번호는 디자인이 확 바뀌었습니다. 터치 인터페이스라는 새로운 매체에서 발행되지만 책 혹은 잡지의 기본을 다시 생각하며 디자인에 많은 신경을 썼습니다.
《EPISODE》는 앞으로도 꾸준하게 UX 분야에서의 실험을 진행할 예정입니다. 독자의 움직임에 반응하는 디자인, 사용자와 커뮤니케이션하는 컨텐츠, 그리고 밀도 있고 창조적인 새로운 형식의 미디어를 경험해보시기 바랍니다.
CarouSlide is an easy-to-implement, flexible yet powerful jQuery plugin that allows you to create a wide range of different carousel and slideshow implentations, from a small and semantic list of HTML content.
Some of its optional features include:
Three types of animation: fade, slide vertically and slide horizontally
<!-- ul/li structure can be replaced by any other html structure as div/div, div/span... -->
Some CSS
/* Comments on styles purpose in the source code */ #viewport{ width:240px; overflow:hidden; } #viewport ul{ position: relative; padding:0; } #viewport li{ width:100px; height:50px; float: left; list-style: none; }
Some JavaScript : the magic
$('#viewport').carousel('#previous','#next');
Tips
If you need to activate auto-scrolling on your carousel, simply simulate a click :
//The auto-scrolling function function slide(){ $('#simpleNext').click(); } //Launch the scroll every 2 seconds var intervalId = window.setInterval(slide,2000);
jQuery UI 프로젝트는 새롭고 흥미로운 jQuery 라이브러리로 내년에 빠르게 성장할
것으로 예상된다. 이 UI 라이브러리는 릴리스가 나올 때마다 개발자가 여러 가지 기능과 수정 사항을
추가하고 있기 때문에 jQuery 코어보다 훨씬 빠른 속도로 확장되고 있다. UI 패키지와 관련하여 흥미로운
점은 이 패키지가 실제로 사용자 인터페이스 관련 항목의 모음이고 이러한 항목을 3가지 주요 모듈로
분류할 수 있다는 것이다. 첫 번째는 웹 사이트에 바로 전개할 수 있도록 미리 만들어진 "스킨
교체형" 사용자 인터페이스를 가지고 있는 Widgets 모듈이고, 두 번째는 페이지 요소에 매우 쉽게 직관적으로
적용할 수 있는 Effects 모듈(예: 흔들기, 확대하기 등)이며, 세 번째는 페이지 요소에 대한 개선된 마우스
Interactions(예: 끌어서 놓기) 모듈이다. 마지막으로 UI 패키지는 미리 만들어진 위젯에 대한 테마를 사용자가 직접
작성할 수 있기 때문에 다운로드한 위젯을 사용자의 웹 사이트만을 위한 특별한 위젯으로 만들 수 있다.
jQuery UI 프로젝트의 매우 흥미로운 역사를 알면 프로젝트가 왜 이러한 방식으로
개발되었는지와 라이브러리의 세 부분이 매우 상이한 이유를 어느 정도 이해할 수 있을 것이다. 이
UI 라이브러리는 "처음"(jQuery의 관점에서 보면 수십년 전이라고도 할 수 있는 2007년말)에는 여러
다양한 플러그인의 모습으로 시작되었다. jQuery 커뮤니티의 우수한 개발자들의 노력으로 개발된 이들
플러그인은 모두 매우 유명했으며 다운로드해서 사용하던 사용자도 많았다. jQuery 커뮤니티에서는
이 유명한 플러그인들을 하나의 큰 플러그인으로 통합하여 jQuery 코어 코드의 공식 확장으로 발전시키기로
결정했다. 이러한 과정을 거쳐 2008년초에 UI 버전 1.5가 릴리스되었다. 하지만 이 통합 UI 플러그인이
릴리스된 이후 플러그인을 직접 사용해 본 개발자들로부터 좋기는 하지만 코드가 너무 어렵다는 의견(또는
불만)이 많이 나왔다. 이는 모든 플러그인의 개발자가 각기 달랐을 뿐 아니라 각 개발자의 스타일도
제각각이기 때문에 발생한 당연한 결과였다. 결국 모든 플러그인에 공통된 스타일을 적용하자는 결정이
내려졌으며 이후에 개발된 모든 1.5.x 릴리스는 이러한 노력의 산물이었다. UI 라이브러리의 역사에서 그
발자취를 확인할 수 있다.
하지만 UI 라이브러리의 1.6 버전이 릴리스될 때에는 모든 코드에 대한 리팩토링
작업이 완료되고 공통 스타일과 공통 코드가 적용된 UI 라이브러리를 보게 될 것이다. 하지만 이
릴리스에도 한 가지 단점이 있다. 그것은 바로 UI 팀에서 완벽한 1.6 버전을 릴리스하기 위해 몇
가지 위젯을 코드베이스에서 제외하기로 결정했다는 것이다. v1.5에 포함된 위젯의 수가 3개 더
많기는 하지만 v1.6을 사용하면 더 빠르고 쉽게 작업할 수 있을 것이다. 이러한 절충안이 좋은
결정이었는지에 대한 판단은 사용자에 의해 내려질 것이며 제외된 위젯의 경우 UI 라이브러리의
후속 릴리스에 다시 포함될 것으로 예상된다. (기록을 남기는 의미로 제외된 위젯을 언급하자면
autocomplete combobox, magnifier 및 spinner가 있었다.)
이제 UI 라이브러리의 역사를 모두 살펴보았으므로 이 라이브러리의 장점을 자세히
알아보자. 그러고 나면 jQuery 팀원들이 이 라이브러리에 왜 그렇게 열광하는지 그 이유를 알 수
있을 것이다. jQuery 팀의 일원인 필자 또한 이 라이브러리의 가능성에 열광하지 않을 수 없었다. AWT로
Java™ UI를 작업하던 시절을 기억할 수 있는 사람(또는 그 시절을 잊어버리기로 결정한 사람)이라면
Swing이 처음 모습을 드러내면서 완전히 새로운 위젯이 등장하고 사용자 인터페이스 작업이 실질적으로
한결 쉬워졌던 순간의 흥분을 기억할 수 있을 것이다. UI 라이브러리의 가능성은 Swing과 견주어도
결코 뒤떨어지지 않는다. 이 라이브러리는 웹 디자이너의 도구 창고에 보다 복잡한 위젯을 추가하는 동시에
위젯의 작동 방식을 표준화함으로써 웹 디자인 분야에 완전히 새로운 수준의 사용자 인터페이스를 추가할 수
있을 것이기 때문이다. 현재 UI 라이브러리에 포함된 위젯의 수는 많지 않지만 v1.6의 릴리스를 기준으로 1년
뒤면 웹 애플리케이션에 사용할 수 있는 10 - 20개의 새 위젯이 UI 라이브러리에 추가될 것이다.
UI 라이브러리는 jQuery 코어 또는 플러그인과는 다른 방식으로 다운로드 및
설치하게 된다. 네트워크 트래픽 및 연결을 최소화하기 위해 UI 팀에서는 UI 라이브러리 중에서
사용할 파트와 원하는 압축 스키마를 미리 선택하도록 사용자에게 요청하는 고유한 웹 애플리케이션을
개발했다. 그런 다음 파일을 직접 다운로드할 수 있다. 이 방법의 장점은 UI 라이브러리 중에서
사용할 파트만을 제공하면 되기 때문에 애플리케이션의 성능에 미치는 영향을 최소화할 수 있다는
점이다. 하지만 사용자 정의 파일에 처음부터 포함되지 않은 파트를 나중에 사용하기로 결정한
경우에는 전체 파일을 다시 다운로드해야 하는 단점이 있다. 세상만사 다 그렇듯이 모든 결정에는
일장일단이 있기 마련이다.
UI 라이브러리의 Effects 모듈은 페이지 요소에 적용할 수 있는 "흥미로운"
기능을 제공한다. 필자가 "흥미롭다"고 표현한 이유는 이 모듈을 전체적으로 보았을 때 여러
가지 효과를 별다른 기준 없이 무작위로 모아놓은 것처럼 보이기 때문이다. 마치 누군가가 Microsoft®
PowerPoint의 모든 효과를 살펴본 후 그 중 일부를 선택해서 JavaScript 효과로 만들었다는
생각이 든다. 이들 효과가 어떻게 선정되었는지는 아마도 절대 알 수 없을 것이다. 이러한
효과는 괜찮은 것처럼 보이기는 하지만 일부 효과는 언제 어디에서 사용할 수 있을지 의문이
들기도 하기 때문에 전문 웹 애플리케이션에서 얼마나 유용할 것인지도 여전히 미지수로 남아
있다.
그렇지만 정말 사용하기 쉽다는 장점도 있다. 첫 번째 효과 세트는 페이지의
요소를 숨기거나 표시하는 데 사용할 수 있다. 이들 효과는 jQuery 라이브러리의 내장 함수인
hide()와 show()를 확장한 것으로 페이지의
요소를 숨기거나 표시할 때 사용할 효과의 유형을 지정할 수 있다. 그렇다면 이제 예제를 살펴보자.
그림 1에서는 플로우차트 형식으로 Puff 효과의 적용 전, 적용 중 및 적용 후의 모습을 보여 준다.
이 코드에는 일반적인 코드와 크게 다른 점이 없으며 매우 직관적이기 때문에
show/hide 효과의 작동 방법을 쉽게 알 수 있다. 진짜 문제는 사용자가 "이게 뭐지? 필요 없는거잖아"라는
말을 하지 않도록 이러한 효과를 적절한 방법으로 유용하게 사용할 수 있는 시기를 찾는 것이다.
Effects 모듈에 포함된 다른 효과를 살펴보자. 이러한 효과는, 적어도 이러한 효과 중
일부는 어느 정도 실용적이기 때문에 웹 애플리케이션에서 사용자 경험을 향상시키는 데 사용할 수 있는
방법을 상상할 수 있다. 다시 한번 말하지만 실제로 실행하지 않고서는 예제를 설명하기가 어려우므로
이 기사에서 제공하는 예제를 다운로드하여 직접 확인해 보기를 권장한다.
이 모듈의 효과는 페이지의 특정 요소에 대한 관심을 끌기 위한 것이며 이 관점에서
일부 효과는 효과적으로 사용할 수 있다. 이러한 효과에는 가상의 HTML 트램펄린에 떨어뜨린 것처럼
요소가 글자 그대로 통통 튀는 효과를 제공하는 "bounce", 노란색 배경이 요소에 반짝 표시되는
"highlight"(Mac과 유사함), 요소가 반복적으로 사라졌다가 표시되는 "pulsate", 요소를 50% 축소하는
"scale", 요소를 좌우로 흔드는 "shake" 및 요소를 길고 평평하게 만들어 주는 "size"가 있다. 이러한
효과는 hide/show 효과와 마찬가지로 사용 방법이 매우 간단하다.
마지막으로 필자는 화면에서 DIV를 확대하는 것보다 더 흥미로운 몇 가지 기능을
알게 되었다. Interactions은 한 요소를 다른 요소 위로 끌어왔을 때 발생할 수 있는 상황, 한 요소를
다른 요소 위에 놓았을 때 발생할 수 있는 상황 및 두 HTML 요소를 사용하여 수행할 수 있는 기타 작업에
대한 코드를 작성하는 매우 강력한 방법을 제공한다.
끌기/놓기 요소를 이용한 상호 작용은 웹 애플리케이션 설계와 관련하여 완전히
새로운 분야이다. 대부분의 사용자는 정적 페이지와 정적 페이지 요소에 익숙해 있기 때문에 끌어서
놓기 상호 작용이 지원되는 웹 애플리케이션은 거의 없는 편이다. 잘 생각해 보면 이 고유한 유형의
상호 작용을 지원하는 데스크탑 애플리케이션도 별로 없다는 것을 알 수 있다. 물론 이러한 애플리케이션이
전혀 없지는 않다. 구체적으로 한 예를 들자면 Yahoo Fantasy Sports 페이지가 있다. 끌기/놓기 모델을
거의 완벽하게 활용하고 있는 이 페이지에서는 사용자가 팀 명부를 섞고, 선발 전 플레이어의 순위를
지정하고, 플레이어를 제외 목록으로 이동하는 등의 작업을 수행할 수 있다. 아직까지 Fantasy Sports를
이용해 보지 않았다고 하더라도 이 페이지에 구현된 고유한 사용자 인터페이스 디자인을 확인하는 차원에서
이 애플리케이션을 이용해 보기를 권장한다. 필자는 이 애플리케이션이 웹에서 끌기/놓기 모델을 가장 잘
활용하고 있는 애플리케이션 중 하나라는 견해를 가지고 있다.
Interactions 모듈에는 5가지 유형의 상호 작용이 있다. 처음 3가지 상호 작용은 다음과 같다.
Resizable은 페이지에 있는 요소의 크기를 조정하는 데 필요한 기능을 지원한다.
이 상호 작용을 사용하면 사용자가 요소의 모양을 변경하고 그에 따라 페이지의 다른 모든 요소를
적절하게 조정할 수 있다. 이 상호 작용은 여러 개의 포틀릿을 가지고 있으면서 사용자가 자신의
웹 페이지 디자인을 사용자 정의할 수 있는 웹 애플리케이션을 만들려는 경우에 매우 유용하다. MyYahoo와
iGoogle 모두 사용자가 자신의 페이지를 사용자 정의할 수 있기는 하지만 사용자 정의할 수 있는
항목이 제한되어 있다. 즉, 미리 정해진 수의 열 내에서만 모든 컨텐츠를 사용자 정의할 수 있는
것이다. 사용자가 자신의 페이지 전체를 정의할 수는 없을까?
Selectable은 페이지의 요소를 그룹화한 후 사용자가 그룹 내에서 요소의
서브세트를 선택할 수 있도록 지원한다. 이 유형의 상호 작용은 사용자 정의 목록 또는 선택 위젯을
작성할 때 유용하다.
Sortable 인터페이스는 페이지 요소를 정렬된 순서로 "빠르게" 정렬하는
기능을 지원한다. 5개의 행으로 구성된 테이블이 있을 경우 Sortable 상호 작용을 사용하면 네 번째
행을 두 번째 행으로 끌어놓았을 때 테이블의 나머지 부분이 자동으로 정렬된다. 이러한 세 상호
작용을 사용하면 새로운 방식으로 위젯 및 웹 애플리케이션 상호 작용을 구현할 수 있으므로 좀 더
자세히 살펴보기를 권한다.
이 섹션에서는 앞으로 웹 애플리케이션의 변화를 가져올 것으로 기대되는 다음 두
가지 상호 작용에 대해 자세히 살펴볼 것이다.
Draggable
Droppable
앞으로 설명할 예제에서는 반드시 그래야 하는 것은 아니지만 이 두 상호 작용을 함께 사용한다.
이 예제 웹 애플리케이션에서는 새로운 방식의 온라인 쇼핑 방법을 보여 준다. 단추를
눌러서 상품을 장바구니에 넣는 대신 Draggable/Droppable 상호 작용을 활용하여 많은 사람들이 실제로
상품을 장바구니에 넣을 때의 "느낌을 살릴" 것이다. 즉, 사용자가 선택한 상품을 장바구니에 끌어서
놓게 된다. 상품이 장바구니에 놓여지면 장바구니에 있는 상품 수와 총금액이 자동으로 업데이트된다.
// First, set up the shopping cart
// Give the cart an ID that we can reference in the jQuery code
// Give each span an ID so we can easily update the text in it
<img src="cart.jpg" id=cart>
<p><span id=numItems>0</span> items in your cart.
<p>Your total is $<span id=totalPrice>0</span>.
// Each product has code that looks like this. The entire product
// is wrapped in a DIV with a class of "product" and given a
// unique ID. It also has a span that defines the price of the object.
<p><div class=product id=ban><img src="banana.jpg" align=left> Bananas
<p>$<span class=price>1.99</span></div><br><br>
// define each DIV that has a "product" as "draggable"
// The draggable function has many options that define how the object
// will look and feel when dragged. There are many options, most not
// covered here, but I put a sampling in to whet your appetite.
$(".product").draggable({
'opacity': 0.3, // make the object semi-transparent when dragged
'revert': "valid", // snap the object back after it's been dropped
'delay': 200, // delay 200 ms before starting to drag it
'distance':4, // wait till it's been dragged 4 pixels before starting
'helper':"clone" // keep the object where it is and use a helper to show dragging
});
// just like the draggable has many options, the droppable has many
// options as well. These options provide a variety of ways
// to offer reinforcement to the user about how the draggable/droppable
// relationship is to work
$("#cart").droppable({
'accept':".product", // define which elements will trigger a 'drop'
'activeClass':"border", // what class to add to the droppable while dragging
'drop': function(e,ui){ // this function gets called when something is dropped
// update the number of items in the cart
$("#numItems").text(new Number($("#numItems").text())+1);
var ID = $(ui.draggable).attr("id");
// get the price from the object just placed in the cart
var price = new Number($("#"+ID + " .price").text());
// update the total price in the cart
$("#totalPrice").text(new Number($("#totalPrice").text())+price);
}
});
그렇다. 이 짧은 코드만으로도 이 상호 작용을 수행할 수 있는 것이다. 이 데모를
작성하면서 필자 자신도 정말 쉽다는 생각에 놀라고 말았다. 말할 필요도 없이 이 상호 작용은 매우
쉽고 직관적으로 사용할 수 있기 때문에 이 유형의 상호 작용을 활용하는 사용자 인터페이스를 작성하는
사람들이 많아질 것이다. 이 섹션에서 언급한 다른 상호 작용들도 쉽게 사용할 수 있으며 웹 애플리케이션에서
새로운 상호 작용을 구현할 때 유용하게 활용할 수 있는 고유한 특성을 제공한다.
마지막으로 설명할 내용은 실제 이미지를 보여 줄 수 있는 UI 코드 섹션이다. 필자가
보기에 UI 라이브러리에서 가장 흥미로운 부분은 미리 만들어진 검증된 위젯을 가지고 있는 Widgets
모듈이다. 이 모듈에 포함된 위젯은 개발자가 학수고대하던 웹 애플리케이션의 여러 기능을 제공한다. 개발자는
이러한 위젯을 통해 개발 시간을 단축할 수 있기 때문에 결과적으로 남는 시간을 활용하여 웹에서 필요한
정보를 얻고 이 기사처럼 유용한 기사도 읽을 수 있다. 이러한 위젯을 통해 얻게 된 결과를 보고 나면
경영진에서도 개발자의 노력이 매우 지대했음을 인정하고 임금을 올려 줄 마음이 들 것이다.
Accordian 플러그인은 목록을 그래픽 형태의 목록으로 변환하며 이 경우 사용자는
목록의 각 섹션을 이동하면서 한 번에 한 섹션만을 볼 수 있다. 일부 UI 동아리에서는 수 년 전에
Outlook이라는 프로그램에서 이 위젯이 처음 사용되었기 때문에 이 위젯을 "Outlook 막대"라고도
부른다. 이 위젯을 사용할 때 자주 범하는 실수 중 하나는 2개 이상의 섹션을 동시에 표시하려고
하는 것이다. 이러한 기능이 지원되는 위젯은 Accordian 위젯이 아니다. 이 위젯은 한 번에 한
섹션만을 표시하며 한 섹션에 다른 섹션과는 관련이 없는 수많은 정보를 담고 있을 때 효과적으로
사용할 수 있다.
이 위젯은 HTML이 올바르게 설정되어 있어야만 정상적으로 작동한다. 즉, 사용자가
Accordian 위젯의 사용을 예상하고 HTML을 설정해야 한다. 또한 이 위젯은 "단계적 기능 축소(degrade
gracefully)" 이론을 고려하여 설계된 것이므로 JavaScript를 사용하지 않는 사용자나 Internet Explorer
5를 사용하는 사용자도 페이지를 올바르게 볼 수 있다. Listing 4의 예제에서는 이 위젯을 사용하려는 경우 반드시
따라야 하는 HTML의 구조를 보여 준다.
// The accordian relies on the UL, LI, and A tags to properly configure itself
<ul id="accordianExample" class="ui-accordian-container" style="width:400px;">
<li>
<a href="#">Title 1</a>
<div>Your text would go here</div>
</li>
<li>
<a href="#">Title 2</a>
<div>More text</div>
</li>
</ul>
// yes, it's this simple
$("#accordianExample").accordian();
<div id="sliderExample" class="ui-slider-1">
<div class="ui-slider-handle"></div>
</div>
// this will set up the slider
$("#sliderExample").slider();
// this will set the maximum and minimum values of the slider
$("#sliderExample").slider({
min: 10,
max: 20
});
// this will get the value of the slider
$("#sliderExample").slider("value");
<input type=text id=dateField>
// this will create a date picker, which pops up when the textfield gets focus
$("#dateField").datepicker();
// show the drop-down fields to let the user jump around months and years
$("#dateField").datepicker({
changeMonth: true,
changeYear: true
});
// show two months instead of one
$("#dateField").datepicker({
numberOfMonths: 2
});
// because this widget has to support internationalization, it has a TON of
// functions that let you set every aspect of the calendar, to support any
// possible calendar settings. (Although it doesn't look like the jQuery team
// felt it was necessary to support the Mayan calendar. Guess 2012 is right
// around the corner.)
//
// This function lets you set the date format that will appear in the textfield.
$("#dateField").datepicker({
dateFormat: 'dd/mm/yyyy'
});
// Gets the date back from the datepicker
var date = $("#dateField").datepicker("getDate");
<div id="progressbarExample"></div>
// make this div a progress bar
$("#progressbarExample").progressbar();
// start the progress bar
$("#progressbarExample").start();
// stop the progress bar
$("#progressbarExample").stop();
이 시리즈를 처음부터 읽었다면 "jQuery로 작업하기,
Part 1: 매개체로서의 JQuery: 플러그인을 사용하여 jQuery 함수를 작성하고 확장하기"에서
설명한 BlockUI 플러그인과 Dialog 위젯의 차이점이 궁금할 것이다. 둘 다 원하는 대화 상자 기능을
수행하므로 편한 대로 선택해서 사용하면 된다. BlockUI를 사용할 경우에는 대화 상자의 모습을
구체적으로 지정할 수 있는 유연성이 제공되는 반면 이 Dialog 위젯을 사용할 경우에는 대부분의
작업이 자동으로 수행된다.
<div id="dialogExample" title="Example Dialog">Text here. Warning!!</div>
// turn the DIV into a dialog
$("#dialogExample").dialog();
// open the dialog, then close the dialog
$("#dialogExample").dialog("open").dialog("close");
// make a dialog that the user can't drag around, is modal, and in the center of the page
$("#dialogExample").dialog({
draggable: false,
modal: true,
position: "center"
});
Tabs 위젯은 아마도 필자가 가장 좋아하지 않는 위젯일 것이다. 필자가 사용했을
때 이 위젯은 한번도 올바르게 작동하지 않았으며 필자는 이 특별한 위젯이 CSS에 대한 의존성이
매우 높다는 것을 알게 되었다. 그리고 이 CSS는 위젯의 올바른 작동을 위해 사용자가 제공해야
한다. 예제가 길고 복잡할 뿐만 아니라 필자가 이 위젯에 대한 편견을 가지고 있기 때문에 이
기사에서는 이 위젯에 대한 예제를 다루지 않는다. 개인적으로 필자는 별도의 DIV를 직접 만들어서
사용해도 이 위젯을 사용하는 것과 마찬가지로 쉽게 작업할 수 있다는 생각을 가지고 있다.
UI 라이브러리의 마지막 기능은 "ThemeRoller"이다. 이름이 이상하기는 해도
라이브러리의 위젯을 코드에서 사용하기로 선택한 경우에는 이 기능을 매우 유용하게 사용할 수
있다. 지금까지 설명한 위젯에는 기본 디자인이 지정되어 있다. 하지만 이 디자인은 사용자의
페이지 디자인과 일치하지 않을 확률이 높다. 따라서 이러한 위젯을 사용하기로 결정했다면 위젯의
디자인을 사이트의 디자인에 맞추고 싶을 것이다. 이러한 요구 사항을 파악한 UI 라이브러리의
제작자들은 사용자가 자신의 사이트에 맞게 CSS 파일을 수정한 후 저장할 수 있는 CSS 생성기를
지난 수 개월 동안 심혈을 기울여서 만들었다. 이렇게 생성된 CSS 파일이 모든 위젯의 디자인을
사용자 사이트의 디자인과 일치시켜 주므로 누구라도 이러한 위젯을 부담 없이 사용할 수 있을
것이다.
일반적으로 CSS 전문가가 아닌 작업자(필자처럼)가 수행하기에는 어려운 작업임에도
불구하고 ThemeRoller를 사용하면 그러한 작업에 필요한 CSS를 어렵지 않게 작성할 수 있다. 예를 들어,
위젯의 임의의 부분에 둥근 모서리를 지정할 수 있으며 그림자를 만들 수도 있다. 실제로 이 기능을
사용하면 UI 라이브러리를 사용할 때 CSS 파일의 복잡한 코딩 부분이 없어도 되기 때문에 그래픽을 잘
다루지 못하는 개발자라도 위젯을 쉽게 사용하고 수정할 수 있다. 어려운 CSS 파일 작업을 수행하고서
평범한 디자인의 위젯을 만드는 대신 ThemeRoller를 통해 비프로그래밍 방식으로 작업을 수행할 수 있다.
마지막으로 ThemeRoller에는 위젯을 꾸미는 데 사용할 수 있는 미리 작성된 여러
가지 테마가 있다. 필자와 비슷한 수준의 개발자라면 미리 작성된 테마를 보고서 자신이 직접 디자인한
테마보다도 훨씬 더 근사하다고 느낄 것이다. 사이트의 CSS를 ThemeRoller에 배치하는 대신 ThemeRoller
CSS를 사이트에 배치할 수 있다. 이 방법은 전문가가 디자인한 듯한 멋진 웹 애플리케이션을 무료로 얻을 수
있는 "경제적인" 방법이다.
(0) 
(0)
