2010»8월»야후 사용자 인터페이스 블로그 (YUIBlog)

YUI 극장 - 더글러스 Crockford : "자바 스크립트에 대한 Crockford - 장면 6 : Loopage"(52 분).

2010년 8월 30일 3시 47분 오후의 에릭 Miraglia에 의해 |에서 YUI 극장 | 8 개의 댓글

"의 더글러스 Crockford의 최신 할부 자바 스크립트에 대한 Crockford "시리즈, 그 이벤트 루프의 역할과 서버 쪽 자바 스크립트의 중요성을 다루고있는 이야기는 이제 비디오에서 사용할 수 있습니다. 플래시 비디오는 아래에 포함되어있는, 또는 당신이 수있는 HD 비디오 (480p ~ 370메가바이트)을 다운로드 . 처음 다섯 강연에서 비디오에서 사용할 수있는 JavaScript 페이지에서 Crockford .

기타 최근 YUI 극장 동영상 :

니콜라스 Zakas와 빅터 Tsaran : 야후 홈페이지에 대한 접근성 - 니콜라스 Zakas, 야후 홈페이지의 주요 개발자, 그리고 빅터 Tsaran의, 야후의 수석 접근성 매니저에서 가장 방문한 웹 사이트 중 하나를 만들 전략과 방법을 논의 세계를 완벽하게 이동할 수 있습니다. 이야기는 야후에서 2010년 6월 BayJax meetup에서 열렸다.
데니스 Lembree : JavaScript가 편리하게 이용할 수 있도록 - 데니스 Lembree, 접근성 전문가와 AccessibleTwitter의 창조자는 JS를 사용하는 사이트들이 편리하게 이용할 수 있도록의 도전에 대해 설명합니다. 이야기는 야후에서 2010년 6월 BayJax meetup에서 열렸다.
라이언 달 : NodeJS 소개 - 라이언 달, NodeJS의 창조자는, 프로젝트 및 성능 개선 및 새로운 아키텍처에 대해 이야기를 소개합니다. 이야기는 야후에서 2010년 5월 BayJax meetup에서 열렸다.
엘리야 Insua : jsdom : DOM의 CommonJS 구현 - 엘리야 Insua는 야후에서 2010년 5월 BayJax meetup에서 자바 스크립트 DOM의 서버측 구현을 소개합니다.
니콜라스 Zakas, Stoyan Stefanov, 로스 Harmes 줄리앙 Lecomte, 매트 스위니 : 고성능 자바 스크립트 - O'Reilly의 고성능 자바 스크립트를 논의 고급 JavaScript 및 야후에서 2010년 4월 BayJax meetup에서 DOM 스크립팅 최적화에 대한 다섯 기여자.

YUI 극장에 가입 :

공유하고 확장할 수 : del.icio.us에 북마크 | 디그 그것! | reddit!

소개 예티 : YUI 쉬운 테스트 인터페이스

2010년 8월 25일 오후 3시 16분에서 리드 벅에 의해 |에 개발 | 16 코멘트

시험 자바 스크립트는 웹 개발의 중요한하지만 종종 간과 부분입니다. 웹을위한 개발하는 것은 하나 이상의 브라우저를 대상으로 의미 때문에 한 가지 이유입니다. YUI 현재 분류 11 가지 환경에 가장 높은 지원 수준을 즐길 수 있습니다. 또한, 우리는 또한 모바일 장치와 같은 신흥 X-등급 환경에서 YUI를 테스트합니다. 당신이 지원하는 많은 다른 환경을 가지고하면, 그냥 로컬로 발전하면서 최선을 기대하는 몇 가지 중요한 것들을 선택하는 끌리긴.

YUI에서, 우리가 사용하는 셀레늄 과 허드슨을 실행하기위한 YUI 테스트 다양한 브라우저 기반 단위 테스트와 지속적인 통합 전략의 일환으로 시스템 구성 운영. 이것은 복잡한 소프트웨어 스택의 나머지와 함께 작업을 통합의 문제가 그 결과를 잡기위한 아주 좋습니다. 그것은 가격과 함께 제공 : 다음과 같은 CI 도구는 설정하고 유지하기 위해 복잡하고 있습니다. 당신이 커밋하기 전에 코드와 테스트를 개발하는 동안 어떤 경우라도, 그들은 당신을 도움이되지 않습니다.

오늘, 나는 출시될 흥분 예티 0.1.0, 당신은 코드 라인을 커밋하기 전에 쉽게 크로스 브라우저 테스트하도록 설계된 실험적인 명령줄 도구를.

예티는 자동으로 브라우저에서 자바 스크립트 단위 테스트를 실행하고 터미널을 떠나지 않고 결과를보고합니다. 그것은 사용하기 매우 간단합니다 : 그냥 실행 yeti test.html 에서 YUI 테스트 기반 시험의 결과를 얻을 test.html . 당신은 한 번에 여러 개의 구성 요소를 테스트하는 여러 HTML 문서를 전달할 수 있습니다.

 $ yeti dom/tests/dom.html attribute/tests/attribute.html json/tests/json.html ✔ DOM Tests from Safari (Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_4; en-us) AppleWebKit/533.16 (KHTML, like Gecko) Version/5.0 Safari/533.16) 20 passed 0 failed ✔ Y.JSON (JavaScript implementation) from Safari (Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_4; en-us) AppleWebKit/533.16 (KHTML, like Gecko) Version/5.0 Safari/533.16) 68 passed 0 failed ✔ Attribute Unit Tests from Safari (Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_4; en-us) AppleWebKit/533.16 (KHTML, like Gecko) Version/5.0 Safari/533.16) 106 passed 0 failed 194 tests passed! (3217ms)

예티의 진정한 능력은 동시에 여러 브라우저에서 테스트를 실행 중입니다. 예티가 귀하의 컴퓨터에서 테스트 하나씩을 열 수 있지만, 설인 (雪人) 어떤 일에 모든 브라우저에서 테스트를 실행할 수 장치 모두 같은 시간에.

당신은 인수없이 예티를 실행하면, 당신이에서 액세스할 수있는 웹 서버를 시작합니다 http://localhost:8000 . 그런 다음 테스트 페이지를 방문하는 모든 브라우저에서 실행됩니다 해당 URL과 해당 지점에서 실행 모든 테스트 네트워크에서 브라우저 또는 장치를 가리킬 수 있습니다.

탁월한과 결합하면 localtunnel , 자네와 다른 컴퓨터 사이에 방화벽이 덜 고통스러울 수 있습니다. 당신이 중요한 정보와 협력하지 않으면 인터넷에 예티를 사용할 수 있도록하는 간단한 방법은 다음과 같습니다

 $ localtunnel 8000 Port 8000 is now publicly accessible from http://example.localtunnel.com

그런 다음 예티에 액세스하고 테스트를 실행 시작하려면 해당 URL을 방문할 수 :

이것은 휴대 장치에 특히 유용합니다 : 당신은 개발 컴퓨터와 동일한 네트워크에 장치를하지 않고 통신사의 인터넷 연결을 사용할 수 있습니다.

예티는 자바 스크립트 테스트를 더 쉽게하는 것을 목표로하지만, 이것은 너무나 완벽하게되는에서 나온 거에요. , 예티 당신이 YUI Test를 사용하는 가정 (. 가볍게 0.1.0 버전 번호를 받아들이 지마) 만 Mac OS X에서 테스트되었으며 테스트 시나리오의 일부 때로는 작동하지 않을 수 있습니다. 이러한 단점에도 불구하고, 설인 우리가 YUI 커뮤니티들과 공유하기 위해 더 이상 기다릴 싶지 않았던 것을 내부적으로 너무 유용했습니다.

코드 얻기

예티는 GitHub에서 사용 가능한 아래에 제공하는 YUI는 BSD 라이선스 .

설치하기

예티는 JavaScript로 완전히 작성되었으며 위에서 실행되는 NodeJS . 당신이 이미 NodeJS와라면 npm의 사용자, 설치는 매우 간단하다 :

 $ npm install yeti@stable

당신 NodeJS과 npm를 설치하지 않았으며 최근 맥에 처했다면, 당신은 여전히 편리한 설치와 예티를 설치할 수 있습니다.

예티 0.1.0 설치 프로그램 다운로드 2.7 MB를
맥 OS X 10.6 및 인텔 코어 2 프로세서 이상 필요

컴퓨터 설치 프로그램의 요구 사항을 충족하지 않는 경우 npm를 설치할 수있다면, 당신은 여전히 예티를 사용할 수 있습니다. 그외의 설치 및 사용 지침에 사용할 수있는 예티의 README 파일 .

여러분의 참여를 환영합니다

예티는 우리가 시작된 처음 프로젝트 YUI 연구소 , 새로운 아이디어와 이니셔티브 형태를 취할 것입 우산 카테고리. 따라서 예티는 다른 프로젝트와 같은 지원을 동일한 수준없이 제공됩니다. 우리는 아직도 당신이 질문하고에 피드백을 제공하는 것이 좋습니다 예티의 포럼 과 예티 쉽고 재미있게 시험있게되기를 바랍니다. 그렇지 않다면 제발 알려주 , 버그를 제출 하거나 고려 예티에 기여 .

해피 테스트!

저자 소개 : 레이드 버크 ( @ 리드 ) YUI 팀의 새로운 멤버입니다. 그는 히말라야 눈 괴물과 JavaScript를 사랑한다.

공유하고 확장할 수 : del.icio.us에 북마크 | 디그 그것! | reddit!

이용 등급 평가의 위젯을 개발

년 | 9 시에 2010년 8월 24일 티에리 Koblentz하여 오전 접근성 , 개발 | 18 코멘트

서둘러에서? 로 이동 데모 페이지 .

많은 전자 상거래 사이트, 소셜 네트워킹 서비스, 온라인 커뮤니티 등급이나 평가 기능을 포함합니다. 사람들의 의견을 모집하는 것은 심지어 비즈니스 모델이되었다, 평가 제품, 서비스, 기업 등 전용 사이트가 지금은 없습니다.

투표를 표시하는 데 사용되는 가장 일반적인 인터페이스는 포인트의 특정 번호는 (종종 별빛으로 표현) 각 검토자가 항목에 할당되는 "별 등급 시스템"입니다. 우리는 아마존에서 옐프로 많은 사이트에이 모델을 찾으십시오.

에서 그림 A. 별 등급은 예제 아마존 과 옐프 .

마찬가지로 그림 들이 마크업 기반 쇼를 두 시각적 인터페이스는 비슷합니다,하지만 만약이 두 솔루션은 재미있는 것입니다. 하나에 의존 <map> 에서 다른 <img> .

당신은 대부분의 평가 시스템은 다양한 사용자 에이전트에 걸쳐 의미와 "경영"이라고 입증 일부 마크업을 기반으로됩니다 생각할 수도 있겠지만 - 그 평가 시스템이 하나가 동작을 적용하는 HTML 요소와 속성의 특정 집합에 기초하고있을 수도있다는 것입니다 JS와 CSS를 통한 스타일. 말도 것이지만, 그것은 깨어날 것입니다. 그것이 마크업 측면에서 본다면 저자 막 모든 것을 시도하십시오

<a> ,
<img> ,
<span> ,
<li> ,
<map> ,
<div> ,
<input> ,
등 ...

마이크로 포맷의 경우

등급을 표시하는 몇 가지 이미지 기반 기법을 제시하기 전에, 난 그것이 기본적이고 간단 접근법 (에서 언급할 가치가있다 생각하는 마이크로 포맷 문자를 사용합니다) :

 <abbr class="rating" title="3 stars">***</abbr>

프로: 그것은 간단하고 의미입니다.; 이윤은 최소이다.; 방법은 CSS에 의존하지 않습니다.; 방법은 이미지에 의존하지 않습니다.; 어떤 HTTP 요청은 없습니다.
단점: 그것은 반 값 (예 : 3.5 별들을)를 대표하는 것은 불가능; 그것은 오직 별표 ( "별 등급")와 "작동".; 스크린 리더는 기본적으로 약자를 (이 경우에는 큰 문제가 아닐 수도 있음) 확장되지 않습니다.

참고 : 스크린 독자가 (적어도 때문에 오히려 ★ (★)보다 "*"를 사용 JAWS 및 NVDA ) HTML 엔티티를 무시하는 것 같습니다.

이윤은 이미지 기반의 등급을 표시하는 방법

그것이 이미지를 표시되면, 저자는 많은 옵션이 있습니다.

등급마다 하나의 이미지

단일 이미지를 사용 :

 <img src="4stars.png" alt="4 out of five">

한 별
두명의 스타
별세
네 별빛
별 다섯개

프로: 등급마다 하나의 이미지를 사용하면 간단하고 의미입니다.; 방법은 CSS에 의존하지 않습니다.; 최소 마크업.
단점: 여러 이미지가있는대로 많은 HTTP 요청을 만듭니다.; 저자는 더 많은 자산을 처리하는 (만드는 CDN을 강요하는 때, 사이트 색상 변경 등 수정 이미지)을 가지고로서 성능 문제 우선, 그것은 유지 보수 악몽이 될 수 있습니다.; 대체 텍스트가 무시되기 때문에 텍스트를 선택하면 오페라 (적어도 버전 9.52에서)으로 불가능

단위 당 하나의 이미지

whatwg의에서 작업 초안 :

 <img alt="4 out of 5" src="one-star.png"> <img alt="" src="one-star.png"> <img alt="" src="one-star.png"> <img alt="" src="one-star.png"> <img alt="" src="no-star.png">

한 별
두명의 스타
별세
네 별빛
별 다섯개

프로: 이 사용 img 등급 당 요소 것은 HTTP 요청의 수를 감소.; 방법은 CSS에 의존하지 않습니다.
단점: 오페라에서는 이미지가 비활성화된 경우, 대체 텍스트가 선택되지이며, (작은 화면보기에서) 해당 텍스트는 덜 판독하게 테두리로 렌더링됩니다.

이것은 논란의 작업 초안에서 가져 않습니다. 대체 텍스트를 정확하고 간결하여 이미지를 표현하지 못하기 때문에 제 생각에는,이 방법은 허용되지 않습니다. 이 방법에 근거하여 해당 이미지 내용을 표현하는 경우 그리고,, 그때는 왜없이 그 중 일부를 떠나 alt 텍스트?

에서 Ajaxian 예를 들어, 저자가 그 각각의 콘텐츠는 것을 고려한다면 이해 되네요마다 하나의 이미지로 대체 텍스트를 사용하고 있습니다 :

 <img [snip] alt="+" src="star1.png"/> <img [snip] alt="+" src="star1.png"/> <img [snip] alt="+" src="star1.png"/> <img [snip] alt="-" src="star0.png"/> <img [snip] alt="-" src="star0.png"/>

어떤 경우에는 하나의 요소를 (사용하는 대 별이가 많은 이미지로 사용 img 아니면 다른 문제)이 투표 메커니즘을 촉진의 주요 장점이 있습니다 - 사용자가 자신의 투표를 위해 스타 중 하나를 선택 어디. 그래서 우리가 염두에 두어야합니다 ...

배경 이미지에 대한 요정

다음과 같은 기술의 개발자에 의해 원래 구현 전략의 적응은 야후! 음악 :

마크업

 <span class="rating r1 stars">1 of 5</span> <span class="rating r2 stars">2 of 5</span> <span class="rating r3 stars">3 of 5</span> <span class="rating r4 stars">4 of 5</span> <span class="rating r5 stars">5 of 5</span>

CSS

 .stars { background: transparent url(img/sprite.png) no-repeat; } .rating { font-size: 0; height: 19px; overflow: hidden; vertical-align: middle; width: 96px; display: block; } .r1 { background-position: -385px 0; } .r2 { background-position: -288px 0; } .r3 { background-position: -192px 0; } .r4 { background-position: -96px 0; }

한 별: 5 단계 중 1
두명의 스타: 5 단계 중 2
별세: 5 단계 중 3
네 별빛: 5 단계 중 4
별 다섯개: 5 개 중 5

프로: 이 방법은 하나의 스프 라이트 이미지에 의존로 단일 HTTP 요청이 필요합니다.; 최소 "걸어서 인쇄".
단점: 콘텐츠는 이미지를 드러낸 채 공개되지 않습니다.; 아무것도 페이지 (인쇄 스타일 시트가이 문제 돌볼 수) 인쇄할 때 표시됩니다 없다.; 오페라에서 높은 콘트라스트 스타일 시트는 모든 별들이을 사라지게하는, 동일에 해당하는 고대비 모드 최적화 .; 텍스트 선택이 가능하지만 (강조 경유) 분명 아니에요.

마크업의 요정

이러한 접근 방식은 기반으로하는 팁 메소드 사용 요정 이미지 로 <img> 요소보다는 배경 이미지 :

마크업

 <span title="1 of 5" class="rating r1"><img width="0" height="1" src="sprite.gif" alt=""/>1 out of 5</span> <span title="2 of 5" class="rating r2"><img width="0" height="1" src="sprite.gif" alt=""/>2 out of 5</span> <span title="3 of 5" class="rating r3"><img width="0" height="1" src="sprite.gif" alt=""/>3 out of 5</span> <span title="4 of 5" class="rating r4"><img width="0" height="1" src="sprite.gif" alt=""/>4 out of 5</span> <span title="5 of 5" class="rating r5"><img width="0" height="1" src="sprite.gif" alt=""/>5 out of 5</span>

CSS

 .rating { position: relative; height: 1.6em; width: 8.1em; overflow: hidden; vertical-align: middle; display: block; } .rating img { position: absolute; width: 40.5em; height: 1.55em; top: 0; border: 1px solid #fff; } .r1 img { right: 0; } .r2 img { left: -24.4em; } .r3 img { left: -16.2em; } .r4 img { left: -8.1em; }

한 별: 5 10 분
두명의 스타: 5 밖으로이
별세: 5 밖으로 3
네 별빛: 4 5 밖으로
별 다섯개: 5 5

프로: 이 방법은 단일 HTTP 요청이 필요합니다.; 이 기술은 파이어 폭스 사용자는 "이미지 숨기기"또는 "이미지가 보이지 만들기를"(개발자의 도구 모음에서)를 선택하면 내용을 밝히지 위의 4 가지 방법 중 하나입니다.; 그것에 의존하는 다른 솔루션과 사건으로 이미지를 사용할 때는 빨간색 "X"는 각각의 대신 최고 등급 (5 예 5)에서만 나타나는 img 요소.
단점: 이미지 디스플레이는 CSS에 의존합니다.

그것은 다른 이미지 대체 기법과는 달리이 방법 있도록 협조할 것입니다 :

이미지는 텍스트 크기 설정에 따라 확장할 수 있습니다.
이미지를 인쇄할 수 있습니다.
전체 이미지 (파이어 폭스) 강조 표시되는 대체 텍스트가 쉽게 선택할 수 있습니다.
이미지 고대비 설정 / 스타일 시트에서 사라지지합니다.
오페라의 대체 텍스트 선택 (이미지를 비활성화하는 경우).
Opera의 작은 화면보기의 국경 대체 텍스트입니다.

투표를하기위한 마크업

기본 메커니즘으로 시작

투표를하기 위해, 우리는 간단한 사용자 선택과 제출을 허용 낮은 수준의 투표 메커니즘이 필요합니다. 이를 위해, 우리는 라벨과 컨트롤과 양식을 사용에 의존하고 있습니다 :

마크업

 <fieldset> <legend>Rating</legend> <label><input type="radio" name="movie" value="1_5">1/5</label> <label><input type="radio" name="movie" value="2_5">2/5</label> <label><input type="radio" name="movie" value="3_5">3/5</label> <label><input type="radio" name="movie" value="4_5">4/5</label> <label><input type="radio" name="movie" value="5_5">5/5</label> </fieldset>

결과

추가 휴식과 공백

더 읽기 쉬움에 대해서는 추가 <br> 와 공백을.

마크업

 <fieldset> 
 <legend>Rating</legend> <label><input type="radio" name="movie" value="1_5"> 1/5</label><br> <label><input type="radio" name="movie" value="2_5"> 2/5</label><br> <label><input type="radio" name="movie" value="3_5"> 3/5</label><br> <label><input type="radio" name="movie" value="4_5"> 4/5</label><br> <label><input type="radio" name="movie" value="5_5"> 5/5</label> </fieldset>

결과

마크업에 스프 라이트 이미지를 소개합니다

이 솔루션의 경우 우리는 위의 예제에서보다 작은 스프 라이트를 사용하고 있습니다. 그것은 현재로 구성되어 2 개의 싱글 별이 ( "ON"과 "OFF").

우리는 배치 img 레이블 내부 요소를. 우린 그들이 우리가 그들을 통해 구체적인 규격을 설정하여 그들을 "숨기기"따라서, CSS 지원없이 아무런 가치가 없습니다 가정 width 및 height 속성. 를 사용합니다 0 모두 속성으로 일부 UA-s에 깨진 이미지를 보여줄 것이다.

 <form ...> <fieldset> <legend>Rating</legend> <label class="one" title="1 out of 5"><input name="LandOf" value="1" checked="checked" type="radio"> 1/5<img src="star-sprite.gif" alt="" height="0" width="0"></label> <label class="two" title="2 out of 5"><input name="LandOf" value="2" type="radio"> 2/5<img src="star-sprite.gif" alt="" height="0" width="0"></label> <label class="three" title="3 out of 5"><input name="LandOf" value="3" type="radio"> 3/5<img src="star-sprite.gif" alt="" height="0" width="0"></label> <label class="four" title="4 out of 5"><input name="LandOf" value="4" type="radio"> 4/5<img src="star-sprite.gif" alt="" height="0" width="0"></label> <label class="five" title="5 out of 5"><input name="LandOf" value="5" type="radio"> 5/5<img src="star-sprite.gif" alt="" height="0" width="0"></label> </fieldset> </form>

위의 마크업과 함께, 우리는 (대부분의 브라우저에서) 라벨 선택을 통해 필드 선택을 기대할 수 있습니다.

접근성을 고려

:이기 때문에 불행하게도,이 마크업은 적어도 두 개의 스크린 리더에 문제를 만들고 JAWS 및 NVDA (보고 테스트 케이스 이러한 버그를.) 문제의 사용과 관련되어 title 속성 및 대체 텍스트에 대한 빈 문자열입니다.

스크린 리더 사용자를 혼동하지 않는 해결 방법은 대체 텍스트 (로 "별이"를 사용하는 것입니다 alt )를 삽입하는 자바 스크립트를 사용하여 title mouseover에.

더 나은 마크업

 <fieldset> 
 <legend>Rating</legend> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="1_5"> 1/5</label><br> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="2_5"> 2/5</label><br> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="3_5"> 3/5</label><br> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="4_5"> 4/5</label><br> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="5_5"> 5/5</label> </fieldset>

결과

스타일링

CSS를 통해 이미지 크기가 주어진다

우리가 사용하는 em 이미지 글꼴 크기에 따라 성장 또는 축소하도록.

마크업

변하지 않은

CSS

 img { width:2.8em; height:1.4em; }

결과

당신이 이미 볼 수 있듯이, 이미지를 클릭하면 해당 라디오 버튼을 선택합니다. 암시적 라벨이 문제를 (IE에서 제외) 생산으로 스크립팅 필요는 없습니다.

흐름에서 이미지 제거

스타일링 label 과 position:relative 하고있는 이미지 position:absolute 으로 top / left 값 것은 숨길 정도로 충분 input 라벨 내부와 텍스트를.

마크업

변하지 않은

CSS

  레이블 { 
    위치 : 상대적;
 } 
 IMG {
   폭 : 2.8em;
   높이 : 1.4em;
    위치 : 절대; 
    상단 : 0; 
    왼쪽 : 0; 
 }

결과

레이블 당 하나의 별표를 표시

우리는 스타일 라벨의 크기는 단일 스타의 높이와 너비와 일치하도록합니다.

마크업

변하지 않은

CSS

 label { position:relative;   높이 : 1.4em;
  폭 : 1.4em;
  오버플로우 : 숨겨진;
  디스플레이 : 블록; 
 }
 IMG {
   폭 : 2.8em;
   높이 : 1.4em;
   위치 : 절대;
   상단 : 0;
   왼쪽 : 0;
 }

결과

수평 별을 표시

우리는 제거 br 을 우리는 레이블을 떠.

마크업

변하지 않은

CSS

  BR {
  디스플레이 : 없음;
 } 
 레이블 {
   위치 : 상대적;
   높이 : 1.4em;
   폭 : 1.4em;
   오버플로우 : 숨겨진;
    디스플레이 : 블록; 
    플로트 : 왼쪽; 
 }
 IMG {
   폭 : 2.8em;
   높이 : 1.4em;
   위치 : 절대;
   상단 : 0;
   왼쪽 : 0;
 }

결과

등급에 따라 요정 이미지를 표시하기

평가 "5 단계 중 3 아웃"을 설정하려면, 우리는 마지막 두 레이블에 동일한 클래스를 적용합니다. 이 클래스는 라벨 내부 이미지의 위치를 이동합니다.

마크업

 <fieldset> <legend>Rating</legend> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="1_5"> 1/5</label><br> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="2_5"> 2/5</label><br> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="3_5"> 3/5</label><br> <label   클래스 = "no_star"   > <img src="img/small-sprite.gif" width="0" height="1" alt="stars"> <input type="radio" name="movie" value="4_5"> 4 / 5 </ 라벨> <BR>
 <라벨   클래스 = "no_star"   > <img src="img/small-sprite.gif" width="0" height="1" alt="stars"> <input type="radio" name="movie" value="5_5"> 5 / 5 </ 레이블>
 </ fieldset>

CSS

 br { display:none; } label { position:relative; height:1.4em; width:1.4em; overflow:hidden; float:left; } img { width:2.8em; height:1.4em; position:absolute; top:0; left:0; }   . no_star IMG {
  왼쪽 :-1.4em;
 }

결과

정보를 표시 혼자 이미지에 의존하지

그것은 이미지가 사용할 수없는 경우에 별이의 표시에 대한 대안을 제공하는 것이 중요합니다. 라벨 및 라디오 버튼이 서로 맨 먼저 스타일을하고 있기 때문입니다. 간단한 해결책은 이동하는 것입니다 input 과 텍스트 오프 스크린 (즉, 사용 text-indent:-999em 하고있는 레이블에 배경 색상을 적용).

마크업

변화 없음

CSS

 br { display:none; } label { position:relative; height:1.4em; width:1.4em; overflow:hidden; float:left;   배경 : 물오리;
  마진 오른쪽 : 1px;
  텍스트 들여쓰기 : - 999em; 
 }
 IMG {
   폭 : 2.8em;
   높이 : 1.4em;
   위치 : 절대;
   상단 : 0;
   왼쪽 : 0;
 }
  . no_star {
  배경 : # CCC;
 } 
 . no_star IMG {
   왼쪽 :-1.4em;
 }

참고 :

text-indent 도 위쪽은 이미지의 컨트롤이 포커스를받을 때마다 점프 수정합니다.
오른쪽 여백은 배경색이 사각형이 아닌 직사각형을 (같은 배경색을 공유하는 인접 레이블 일어날하는) 만들 수 있는지 확인하는 것입니다.

결과

터치 마감

우리는 의사 - 클래스를 사용 :hover 일부 롤오버 효과를 생성하기 위해서,
우리는 fieldset 테두리를 숨길,
우리는 범례를 숨기려면
우리는 스타일 커서를.

마크업

변하지 않은

CSS

 br { display:none; } label { position:relative; height:1.4em; width:1.4em; overflow:hidden; float:left; background:teal; margin-right:1px; text-indent:-999em; } input { position:absolute; left:-999em; top:.5em; } img { width:2.8em; height:1.4em; position:absolute; top:0; left:0;   커서 : 포인터; 
 }
 . no_star {
   배경 : # CCC;
 }
 . no_star IMG {
   왼쪽 :-1.4em;
 }
  레이블 : 가져가 {
  불투명도 : 0.5;
  필터 : 알파 (불투명도 = 50);
 }
 fieldset {
  국경 : 0;
 }
 전설 {
  텍스트 들여쓰기 : - 999em;
 }

참고 : label:hover 영상을 통해 배경 컬러가 흘러요 IE6에서와 오페라에서 무시됩니다. 에서 데모 페이지 대신 사용하는 opacity , 제가 사용하고 다른 요정 네 상태를 보여줍니다.

결과

사용자 상호 작용을 허용하지 않고 등급 표시

우리는 추가하여 등급이 "읽기 전용"할 수 disabled 하고 checked 적절한에 속성을 input 필드.

마크업

 <fieldset> <legend>Rating</legend> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="1_5"   비활성화   > 5분의 1 </ 레이블> <br>
   <label> <img src="img/small-sprite.gif" width="0" height="1" alt="stars"> <입력 유형 = "라디오"이름 = "영화"값 = "2_5"   비활성화   > 5분의 2 </ 레이블> <br>
   <label> <img src="img/small-sprite.gif" width="0" height="1" alt="stars"> <입력 유형 = "라디오"이름 = "영화"값 = "3_5"선택 = "   체크   "> 5분의 3 </ 레이블> <br>
   <label class="no_star"> <img src="img/small-sprite.gif" width="0" height="1" alt="stars"> <입력 유형 = "라디오"이름 = "movie"라는 가치 = "4_5"   비활성화   > 5분의 4 </ 레이블> <br>
   <label class="no_star"> <img src="img/small-sprite.gif" width="0" height="1" alt="stars"> <입력 유형 = "라디오"이름 = "movie"라는 가치 = "5_5"   비활성화   > 5분의 5 </ 레이블>
 </ fieldset>

CSS

사용 규칙 :hover 삭제되었습니다

H4> 결과

프로세스에 더 많은 생각을주는

이때는 스크립트를 지원하지 않고 투표를하는 것이 가능하지만, 시력 사용자는 자신의 선택에 대해 모릅니다. 그래서 우리는 JavaScript를 사용하십시오

그의 선택과 관련하여 사용자에게 피드백을 제공
그들이 라디오 단추를 탐색하는 동안 키보드 사용자에게 시각적인 실마리를 제공합니다.

동시에, 우리는 삽입 스크립트를 사용을 활용 title 사용자가 라벨 / 별을 위로 마우스를 가져가면 때 "툴팁"를 생성합니다 특성을.

스크립트가 지원이있을 경우에만 있기 때문에 자바 스크립트없이는 피드백에 관한 선택의 부족, 우리 스타일의 라벨 및 양식 제어합니다. 우리에 플래그를 설정하는 자바 스크립트를 사용할 수 있도록하려면 html 요소 그리고 우리는 그 고리를 포함하는 자손의 선택자을 기반으로 규칙을 만듭니다. 플래그가없는 경우, 그 규칙은 적용되지 않으며 요소 스타일되지 않습니다.

이것은 데모 페이지 , 최종 제품. 이 솔루션은 다양한 설정에 따라 동작하는 방법을 확인하려면, 당신은 CSS를 해제 JavaScript를 사용 중지, 이미지 경로를 깰, 텍스트 크기를 증가 좋아하는 개발자 도구를 사용하려면, 그리고 더 있습니다 ...

싸다

"허용"해결책을 세우는 것은 사용자의 요구, 사용자 에이전트 '특성, 사용자 에이전트'설정 및 자세한 내용을 파악해야합니다 - 이것은 광범위한 테스트를 의미합니다.

모범 사례를 따르는 것이 항상 확실한되지 않기 때문에이 과정에서 사용자의 피드백이 필수적입니다. 예를 들어, 등에 대한 값을 설정도, 앞서 언급한 alt 라벨 내에서 이미지의 속성은 하는게 안전하게 될 것 같다,하지만 그것이 최소한 두 screenreaders (참조 문제를 만드는 것이 밝혀졌 테스트 케이스를 ).

또한, 보조 장치 '사용자의 의견은 어떤 검증 오류 메시지를 무시하도록 허용 - 하나로서 그 파이어 폭스의 접근성 툴바 보고서 (에 따라 http://bestpractices.cita.uiuc.edu/html/nav/form/ ).

여기서 목표는하지만, 모든 문제를 해결하는 데 아니었어요. 포인팅 장치없이 투표를 할 수있는 것은 나의 우선순위 중 하나지만, 이미지가 비활성화되어 오페라의 솔루션의 모양과 느낌을 개선하는 것은 정말 필수적인 고려 일이 아니다.

이 "여행"의 가장 흥미로운 부분은 같은 문제에 대응, 다양한 상황에서 여러 사용자가 액세스할 솔루션을 만드는 것이었다 :

이미지 해제,
자바 스크립트 오프,
CSS 끄기,
상기의 조합.

그것은이 기술에 의존하는 것을 알고도 좋은 img 오히려 별이가 있습니다 배경 이미지보다 요소 :

, 사용자의 설정에 따라 자신의 크기를 조정
고대비 모드로 표시,
기본적으로 인쇄 (배경 이미지와는 달리).

이 솔루션이 하나의 스프 라이트에 의존로이 모든 성능을 희생하지 않고 온다 :

늦은 찾기

저는 최근에 아마존이 자사의 투표 페이지에 구축한 시스템을 발견했다. 그들은 스크립트 지원에 따라 서로 다른 솔루션을 제공로서 그것은 매우 흥미롭습니다. 스크립트가 지원이있다면, 그들은 이미지를 사용 <map> 그들이 라디오 단추를 사용하여 어떤 스크립트가 지원이없는 경우, (흥미있는 접근을). 두 경우 솔루션은 키보드 사용자가 액세스할이며, 이것은 아마존의 플랫폼을위한 차별 핵심은 기능에 대한 액세스를 극대화하는 데 도움이됩니다.

그들은 이미지와 라디오 버튼을 대체하는 자바 스크립트를 사용하지 않습니다 <map> , 대신에, 그들이 사용하는 noscript 테이블 마크업이 라디오 버튼을 포함하는 요소.

"밖으로 상자의"솔루션

드림위버 ^®: 활발한 등급 위젯
YUI: YUI를위한 등급 스크립트; YUI와 등급 스크립트
JQuery: 하프 등급 플러그인; 측정자 jQuery 아약스; 단순 등급 제도; PHP, MySQL과 jQuery의 5 성급 평가 시스템
워드 프레스: 워드 프레스를위한 GD 등급 시스템; GD 등급 평가; 리뷰에 대한 등급
플래시: 5 성급 평가 시스템 구성 요소
기타.: 별 등급은 어떻게해야; 별이 빛나는 위젯 2

특별 감사

빅터 Tsaran과 소중한 피드백을위한 토드 Kloots에 대한 특별 감사합니다.

공유하고 확장할 수 : del.icio.us에 북마크 | 디그 그것! | reddit!

YUI 3.1.2 발표 : 모든 YUI 3.1.x/3.2.0pr1 사용자를위한 중요 보안 업데이트

2010년 8월 19일 오후 12시 35분에서 에릭 Miraglia에 의해 |에 개발 | 코멘트 끄기

YUI 팀은 3.1.2 YUI를 발표 오늘.이 YUI 3.1.x와 3.2.0pr1의 모든 사용자를위한 중요 보안 업데이 트입니다. 귀하의 사이트에서 YUI 3.1.x 또는 3.2.0pr1를 호스팅하는 경우 YUI 3.1.x/3.2.0pr1 IO의 도메인 간 기능을 사용하는 경우, 또는, 당신은 영향을받습니다.

YUI의 IO 유틸리티에서 XDR은 기본 XDR을 지원하지 않는 브라우저를위한 대체로서 플래시 전송을 구현합니다. YUI 버전 3.1.x와 3.2.0pr1에서 플래시 대체 우리의 구현에 오류가 있습니다 io.swf 파일이 야후 CDN이나 자신의 서버에서 제공 여부 unsafely 작동합니다. 이 문제에 대한 치료는 이중입니다 :

당신은 전체 YUI 3.1.x/3.2.0pr1가 귀하의 서버에 디렉토리를 여러분의 손으로 만들어 배포한 경우, 교체 build/io/io.swf YUI 3.1.2에 포함된 버전으로 영향을받는 버전. 않도록 사용하고 있는지 여부 IO 유틸리티 또는 XDR 기능.
당신의 3.1.2 버전으로 업그레이 드 IO의 XDR 기능을 사용하고있다면 io-swf 보안 문제를 해결합니다. 의 호스트 버전 3.1.2을 io.swf 자신의 서버에서 (이 파일은 CDN에서 안전하게 작동할 수 없으며 그것은 3.1.2 현재 CDN에 포함되지 않습니다.) 당신이 그리는되었을 경우 io.swf 에서 http://yui.yahooapis.com 여러분의에서이 도메인을 제거하는 crossdomain.xml 파일을 만듭니다.

이 문제에 대한 자세한 내용은에서 찾을 수 IO 유틸리티 설명서 .

공유하고 확장할 수 : del.icio.us에 북마크 | 디그 그것! | reddit!

YUI 두 DataTable의를위한 빠른 편집 모드

년 | 8시 42분에서 2010년 8월 19일 존 Lindal하여 오전 개발 | 9 개의 댓글

YUI 두 DataTable의이 약은 인라인 편집을 제공합니다. 언제 disableBtns 열 구성에 켜져있다면, 문자열이나 숫자와 같은 간단한 값을 수정하는 것은 엑셀 것 같아요. 각각의 변화는 일반적으로 서버에 XHR 호출 (또는 거부!) 새 값을 저장하기 위해 필요하지만,이 경험은 데스크톱 애플 리케이션처럼 응답 수 없습니다. 사용자가 표시된 값을 많이 변경해야 할 경우, 그것은 느리고 좌절 경험이 될 수 있습니다. 이러한 문제를 해결하기 위해, 나는 QuickEditDataTable를 개발하였습니다. 이렇게하면 DataTable의 모든 가능한 값을 하나의 일괄 작업에서 변경할 수 있도록 빠른 편집 모드를 추가하는 확장 :

( 이 예제와 함께 재생 화면을 클릭하십시오 .)

개요

빠른 편집 모드를 입력하려면 전화 startQuickEdit() . 빠른 편집 모드를 종료하려면 전화 cancelQuickEdit() .

그것은 호출하기 전에 변경 사항을 저장하는 것은 귀하의 책임입니다 cancelQuickEdit() . 이 작업을 단순화하기 위해 QuickEditDataTable 제공 getQuickEditChanges() . 이것은 개체의 배열, 각 행에 대해 하나를 반환합니다. 각 개체는 열 ID의 해제 조율 그 행에서 변경되었습니다 전용 값이 포함되어 있습니다. 테이블 4 열 (제목, 저자, 연도 수량)가 있으며, 예를 들어, 사용자가 불과 20 한 행에 수량을 변경하고 해당 행에 대한 개체가 될 {quantity:20} . 다른 값은 생략됩니다.

QuickEditDataTable 쉽게 확장할 수 있습니다 YAHOO.widget.ScrollingDataTable 그 기능이 필요하다면. 이 필요한 경우, 단순히 소스 파일의 복사본을 만들고 기본 클래스를 변경합니다.

구성

빠른 편집은 편집 가능한 열에 대한 셀 formatters이 밖으로 바꿔치기하고 생성 특별 formatters로 대체되는 모달 상태입니다 input , textarea , 또는 select 요소. 이 열만 quickEdit 구성을 수정할 수 있습니다. 구성 옵션은 다음과 같습니다

copyDown

true이면 열의 상단 셀에 행의 나머지 값을 복사하는 버튼이 있습니다.

formatter

<input type="text">, <textarea> 또는 <select> : 해당 양식 필드를 렌더링 세포 포맷터. 기본적으로 셀 포맷의 YAHOO.widget.QuickEditDataTable.textQuickEditFormatter 입력 요소를 생성하기 위해 모든 세포에 사용됩니다. 얻으려면 textarea 요소를 사용하여 열을 구성 YAHOO.widget.QuickEditDataTable.textareaQuickEditFormatter 대신합니다. 당신은 또한 사용자 정의 빠른 편집 포맷을 작성할 수 있습니다 - 아래를 참조하십시오.

validation

열에있는 각 필드에 대한 유효성 검사 구성.

css

기본 유효성 검사 규칙을 인코딩 CSS 클래스 :

yiv-required: 값이 비어있을 수 없습니다.
yiv-length:[x,y]: 문자열은 최소한이어야합니다 x 문자와 대부분의 y 글자. x와 y 중 하나 이상을 지정해야합니다.
yiv-integer:[x,y]: 정수 값은 최소한이어야 x 및 대부분의 y . x 와 y 모두 선택 사항입니다.
yiv-decimal:[x,y]: 소수점 값은 최소한이어야 x 및 대부분의 y . 지수는 허용되지 않습니다. x 와 y 모두 옵션입니다.

fn

인자로서의 범위와 세포의 형태 요소로 DataTable의와 함께 호출됩니다 함수. 값이 유효한 경우 true 반환합니다. 그렇지 않으면, 전화 this.displayQuickEditMessage(...) 오류를 표시하고 false를 반환합니다.

msg

기본 또는 정규식 유효성 검사 규칙이 실패할 때 표시되는 메시지 유형의지도. 유효한 유형은 다음과 같습니다 required , min_length , max_length , integer , decimal , 그리고 regex . 유형에 대한 기본값은 없습니다 regex 당신이 정규식 유효성 검사를 구성하는 경우, 그럼 당신이 메시지를 지정해야합니다. 다른 유형에 대한 기본 오류 메시지에 저장됩니다 YAHOO.widget.QuickEditDataTable.Strings 와 재정 및 / 또는화된 될 수 있습니다.

regex

값이 순서대로 만족해야하는 정규 표현식은 유효한 것으로 간주되어야합니다.

때로 아닌 편집 가능한 컬럼은 빠른 편집 모드 중에 다르게 렌더링해야합니다. 가장 좋은 예제는 빠른 편집 모드에서 악영향이있을 수 있지만 페이지에서 멀리 이동 있기 때문에, 링크를 포함하는 컬럼입니다. 빠른 수정 중에 링크를 제거하려면 구성 qeFormatter 될 칼럼을위한 YAHOO.widget.QuickEditDataTable.readonlyLinkQuickEditFormatter . 이메일 주소의 경우 사용 YAHOO.widget.QuickEditDataTable.readonlyEmailQuickEditFormatter . 당신은 또한 당신에게 사용자 지정, 읽기 전용 포맷을 쓸 수 있습니다. 간단히있는 DataTable 셀 포맷을 구축을위한 일반적인 규칙을 따르십시오.

사용자 지정 빠른 수정 Formatters

QuickEdit 모드를위한 사용자 정의 셀 포맷을 작성하려면 다음과 같이 함수를 구조화해야합니다

 함수 myQuickEditFormatter (oColumn 엘 oRecord, oData) {
   VAR 마크업 =
     '<input type="text" class="{yiv} yui-quick-edit yui-quick-edit-key:{key}"/>'+
     YAHOO.widget.QuickEditDataTable.MARKUP_QE_ERROR_DISPLAY;
     el.innerHTML = lang.substitute (마크업, {
       키 : oColumn.key,
       yiv : oColumn.quickEdit.validation?  (oColumn.quickEdit.validation.css | | '') ''
     });
     el.firstChild.value = extractMyEditableValue (oData);
     (이, 인자) YAHOO.widget.QuickEditDataTable.copyDownFormatter.apply;
 };

당신이 사용할 수있는 textarea 하거나 select 대신 input 하지만 당신은 단지 하나의 필드를 만들 수 있습니다.

extractMyEditableValue() 별도의 함수가 될 필요하지 않으며 그것에만 사용하도록 제한해야 oData . 작품은 일반적으로 포맷 함수에 인라인 만들어졌지만 예제 함수의 이름, 목적이 명확하게해야합니다.

소개 저자 : 존 Lindal는 ( @ jafl5272 트위터)에 토대 구축 리드 엔지니어 중 하나입니다 야후! APT가 내장되어 있습니다. 이전에, 그는 야후 제작사 네트워크에서 근무했습니다.

공유하고 확장할 수 : del.icio.us에 북마크 | 디그 그것! | reddit!

DuckDuckGo 검색 엔진에서 YUI 2를 사용

년 | 5시 41분에서 2010년 8월 19일 가브리엘 와인버그에 의해 오전 YUI 구현 | 2 개의 댓글

DuckDuckGo는 광범위하게 YUI를 사용하는 검색 엔진입니다. 이곳은 특히 사용은 다음과 같습니다

ImageLoader. 매트 Mlinac의 YUI 2 ImageLoader는 제가 구현 제일 먼저이고 무엇이 원래이 프로젝트에 대해 YUI에 내 줬습니다. DuckDuckGo 결과 옆에 favicons을 가지고 있으며, 흔히 일반적으로 포함된 결과 페이지 상단에 '제로 클릭 정보'가 이미지 . 나는 가능한 한 빨리 결과가 궁극적인 목표이다 점점로서, 로드할 때 이러한 이미지는 결과와 경쟁하고 싶지 않았어.
ImageLoader 유틸리티 잘 페이지 로딩 후 이미지를로드하여이 작업을 처리합니다. 당신은 아래로 스크롤하면 DDG는 또한 결과의 다음 페이지를 자동으로로드합니다. 때로 favicons 아이콘 그러므로 숨겨져 있으며, ImageLoader 자신의 부하가 필요 때까지 (때로는 무기한) 지연될 수 있습니다. 이를 위해 (내부) 각 페이지마다 다른 이미지 그룹 자체 사용자 정의 트리거가 각각 있습니다.
```
  div.event = 새로운 YAHOO.util.CustomEvent ( '그');
     VAR ig1 = 새로운 YAHOO.util.ImageLoader.group (사업부, '클릭');
     ig1.addCustomTrigger (div.event);
     = ig1을 div.ig;
```
쿠키. DuckDuckGo은 많이 가지고 설정을 통해 쿠키와 번갈아 통해 저장되며 홈페이지 매개 변수를 . 쿠키가 사용되는 때, 니콜라스 Zakas의 사용 YUI 2 쿠키 유틸리티를 쉽게 얻고 값을 설정합니다.
```
  YAHOO.util.Cookie.set (쿠키, 가치, {만기 : 새로운 날짜 ( "2025년 1월 12일")});
   X = 죽이지 | | YAHOO.util.Cookie.get ( "I"); 
```
스타일 시트. 일부 DDG 설정 모양을 변경하고 사이트 느낍니다. 이러한 변경은 실제로 루크 스미스의를 통해 페이지 로딩 후 교양있는 YUI이 스타일 시트 유틸리티 . 이러한 변화 중 일부는 직관적이고 난 그냥 사용할 수있는 setStyle 돔 기능을 .
```
  YAHOO.util.Dom.setStyle ( 'B2', '표시', '블록'); 
```
다른 사람들은 내가해야하는 유틸리티를 사용하여 실제 수업 변경을 필요로합니다.
```
  . YAHOO.util.StyleSheet ( 'DDG') 세트 ( 'CI.', {디스플레이 : "블록"}).
             세트 (, {디스플레이 : "블록"} 'CID.').
             세트 (, {디스플레이 : "블록"} 'ci2.').
             () 활성화; 
```
돔. 나는 또한 매트 스위니의 자료의 일부 기능을 사용 YUI 2 돔 구성 요소를 . 나는 참조된 setStyle 상기하고, 또 관련 사용 getStyle , addClass 과 removeClass 기능을. 또한, 나는 찾을 getViewportHeight , getViewportWidth , getX 와 getY 상황뿐만 아니라 모바일 화면에 이제 크로스 브라우저를 작동하고, 만들 상당히 유용할하는 기능.
KeyListener . DDG has a bunch of keyboard shortcuts that let you navigate results without the mouse. I use the YUI 2 KeyListener component to enable these shortcuts.
```
 kl14 = new YAHOO.util.KeyListener(document, { keys:[70] }, { fn:not } );kl14.enable(); 
```
AutoComplete . I'm currently working on adding search suggestions to the search engine, and will be using Jenny Donnelly's YUI 2 AutoComplete component for the front-end. I understand that AutoComplete is getting introduced in YUI 3 soon. Everything else I use has already been introduced in YUI 3, though I still use YUI 2. However, I will be exploring the migration to YUI 3 soon.

About the author: Gabriel Weinberg is the founder of the DuckDuckGo search engine, based out of Valley Forge, PA. Gabriel has been a startup founder for over ten years, and his last company was sold in 2006. Gabriel holds degrees from MIT in Physics and the Technology and Policy Program.

공유하고 확장할 수 : del.icio.us에 북마크 | 디그 그것! | reddit!

Implementing YUI on the Assembla.com Agile Planner

August 18, 2010 at 6:35 am by Joachim Larsen | In YUI Implementations | Comments Off

Fast and fun – that was the user requirement for the new Assembla.com Agile Planner – an AJAX interface for adding development tasks, building story/feature outlines, and scheduling them into releases. We were lucky to have YUI 3 to make it fast and fun to implement as well.

I had used YUI 2 for a number of prior projects and I had been impressed by the engineering of the UI components and the underlying library infrastructure. I wanted to learn more about YUI 3, with its compact syntax and deeper focus on DOM manipulation and CSS3-style selectors. This project, with a low dependence on 'prebuilt widgets,' was a perfect opportunity to get my feet wet with YUI 3. The facilities for 'large app' implementation via custom modules and integration with YUI loader made it a natural choice.

The Agile Planner supports a number of drag and drop user interactions with multiple interaction groups and context based behaviors. At the same time, it handles a complex set of interactions with the server, including merging in new data from the server, and propagating changes to the server.

We improved on the existing Planner which was based on Rails handlers and Prototype.js. YUI's sandbox philosophy and strong OOP facilities made coexisting with Prototype.js a breeze.

We used a large number of YUI components, including:

Async-Queue to offer a responsive experience on a page that can involve 1000+ simultaneous tickets
Drag and Drop with interaction groups.
IO as a connection manager to queue and massage server interaction.
Event-delegate to allow simply hydrating html templates and forgetting about them.
Event-key for keyboard interaction and navigation.
Collection for giving us a consistent implementation experience across browsers.
Cookie for easy short-term UI persistence.
Profiler to find the biggest speed gains
YUI Doc to leave information for the rest of the team

Working with YUI 3 on an app like this has been fun, and I am looking forward to hearing what our users will urge us to do next!

About the author: Joachim Larsen is a frontend engineer with Assembla.com.

공유하고 확장할 수 : del.icio.us에 북마크 | 디그 그것! | reddit!

다음 페이지»

에서 제공하는 워드 프레스 에서 야후! 웹 호스팅 .

기타 최근 YUI 극장 동영상 :

YUI 극장에 가입 :

코드 얻기

설치하기

여러분의 참여를 환영합니다

마이크로 포맷의 경우

이윤은 이미지 기반의 등급을 표시하는 방법

등급마다 하나의 이미지

단위 당 하나의 이미지

배경 이미지에 대한 요정

마크업

CSS

마크업의 요정

마크업

CSS

투표를하기위한 마크업

기본 메커니즘으로 시작

마크업

결과

추가 휴식과 공백

마크업

결과

마크업에 스프 라이트 이미지를 소개합니다

접근성을 고려

더 나은 마크업

결과

스타일링

CSS를 통해 이미지 크기가 주어진다

마크업

CSS

결과

흐름에서 이미지 제거

마크업

CSS

결과

레이블 당 하나의 별표를 표시

마크업

CSS

결과

수평 별을 표시

마크업

CSS

결과

등급에 따라 요정 이미지를 표시하기

마크업

CSS

결과

정보를 표시 혼자 이미지에 의존하지

마크업

CSS

결과

터치 마감

마크업

CSS

결과

사용자 상호 작용을 허용하지 않고 등급 표시

마크업

CSS

프로세스에 더 많은 생각을주는

싸다

늦은 찾기

"밖으로 상자의"솔루션

특별 감사

개요

구성

사용자 지정 빠른 수정 Formatters

트위터에서 YUI 라이브러리

번역

신디케이트

최근 게시물

YUI 라이브러리

아카이브 :

blogroll을

정책 코멘트

야후되기

메타 :