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

회전 목마 모듈 : YUI 3 갤러리에서

회전 목마는 무엇입니까?

회전식 컨트롤은 오버로드된 페이지 영역에 수직 또는 수평으로 arrayed 같은 객체의 집합 중에서 검색을위한 도구를 제공합니다. "회전 목마"은유는 영화 촬영 중 일 carousels을 가지고 달려오는 비유에서 유래; 회전식 컨트롤 콘텐츠 블록의 전체를 통해 지속적인 원형 탐색을 허용하여이 비유에 충실도를 유지할 수 있습니다.

회전 목마가에 "오버로드"페이지에서 공간을, 추가적인 내용을 발견하고 탐색하는 사용자의 쉽고 직관적인 메커니즘을 제공함과 동시에 자사의 치수 이내 면에서보다 그 공간에 대한 더 많은 콘텐츠를 제공할 수있는 위젯의 가족의 일부입니다 . Accordions, 탭, 나무와 ScrollViews이 장르의 다른 예입니다.

왜 또 다른 회전식 제어?

YUI 3 강력하고 기능이 풍부한 회전 목마를 (우리가 필요로 필요로 YUI 2 ). 이 회전 목마를위한 디자인 목표는 그것을 활용, 앞으로 숙이고 청소하고 플러그인을 통해 추가적인 구성을 추가할 수 있도록하는 것이었다 YUI 3 ' 가벼움과 속도를 유지하기 위해 모듈화를위한의 본질 지원.

YUI 세 위젯 프레임 워크

YUI 3을 사용하여 사용자 정의 위젯을 쓰고있는 가장 큰 장점 중 하나는 위젯 프레임 워크 (위젯 프레임 워크에 더 사용자 가이드 , 심층 동영상 소개 ). 비교 YUI 2.8.2에서 회전 목마를 제에 YUI 3 갤러리 회전 목마 , YUI 3 버전은 야위고 우아한이다. 위젯의 특성, 훈련 수명주기, 진보적인 향상 지원 등 일반적인 집합을 제공하는 기초를 제공에 관하여 무거운 대부분의 위젯 클래스와 함께 있기 때문입니다.

YUI 세 위젯 프레임 워크는 UI 업데이트 방법 비교 상태 방법의 분리를 입양 모든 위젯을 추진 일관성 MVC 패턴을 제공합니다. 이 코드는 매우 깨끗하고 maintainable 있습니다. 사실 이것은 YUI 3 회전 목마는 이전 YUI 2 기반 사촌보다 낫다 왜 중요한 요인 중 하나입니다.

YUI 3 플러그인 모델은 개발자들이 객체에 새로운 기능을 추가하거나 기존의 동작을 수정할 수 있습니다. 이것은 동적 그래서, YUI 3 회전 목마가 그것에 구운 애니메이션 코드가없는 에이 젝스 등을 통해 요소를 당길 수있는 회전 목마 위에 추가 기능을 추가할 수 있지만, 대신에 나는 그것이 필요한 경우는 애니메이션 지원을 추가 플러그인을 만들었습니다 . 이것은 구성 요소가 매우 가볍고 유지하는 데 도움이됩니다.

자신의 웹사이트 갤러리 회전 목마

어떤 회전 목마는 무엇이며 어떻게 그것이 당신의 웹사이트를 개선하는 데 도움이 될 수 있습니다 대해 읽은 다음, 당신은 운이 좋다면 당신의 손을 더럽히는 걸 열망 느낍니다. 귀하의 웹사이트에 회전 목마를 구현하는 우리의 YUI 3 갤러리 회전식 확장과 함께 걱정 마 HTML에서 글머리 기호 목록을 제공하는만큼 쉽습니다. 그건 단지 장사가 아니야 - 그건 우리가 최근 야후 스포츠 검색 결과 페이지에 갤러리 회전 목마를 통합 방법입니다.

간단한 예제

선생님이 알아야 할 거의 모든 것을 다룰 것입 간단한 예제부터 시작하자. 당신이 새로운 갤러리 회전 목마를 사용하기위한 가장 쉬운 방법은 YUI 3 자동적으로 야후의 콘텐츠 전송 네트워크에서로드하게하는 것입니다. 회전 목마가 무엇 불러오기, 항목의 스크롤리스트, 우리는 HTML의 목록을 만듭니다. 우리는 자바 스크립트를 쉽게 찾아서 사용할 수 있도록 사업부의 목록을 포함합니다. 당신이 이미 당신의 마크업의 목록과 같은 방식으로 표현되는 몇 가지 데이터가있다면, 당신은 또한 단지 주변에 회전 목마 사업부를 넣고 행운을 테스트할 수 있습니다! 우리가 여기에 이​​미지 예제를 사용하고 있지만, 당신이 원하는 무엇이든을 위해 갤러리 회전 목마를 사용할 수 있습니다, 그런 말을하는 것은 매우 중요하다!

  <div class="carousel" id="container">
   <ol>
     <li> <img src="img/c1.jpg"> </ 리>
     <li> <img src="img/c2.jpg"> </ 리>
     <li> <img src="img/c3.jpg"> </ 리>
     <li> <img src="img/c4.jpg"> </ 리>
     <li> <img src="img/c5.jpg"> </ 리>
     </ 마셨다>
 </ 사업부> 

이제 작동하기위한 데이터를 가지고있어서, 우리는 회전 목마 위젯을 사용하여 모두 다섯 항목을 보여줌으로써 눈길을 향상 싶습니다. 당신이 이미이 간단한 작업입니다 YUI 3을 사용하고 있다고 가정. 당신은, 당신은 YUI 3 과거 갤러리로 파기되어 있을지에 따라 한번도 보지 않았을 수도있는 유일한 방법은 우리가 명시적으로 갤러리 버전을 지정하는 것입니다. 우리가 YUI의 로더는 기본적으로로드하려고하는 빌드 갤러리에 포함되지 않은 새로운 위젯을 사용하기 때문에 이것이 필요하다. 기본 번호가 증가되고 빌드할 때 그러나, YUI, 그리고 유이 갤러리 성숙시피, 이것은 미래에 더 이상 필요하지 않습니다.

  YUI ({갤러리 '갤러리-2010년 10월 20일 - 19-33'})
  . 사용 ( "갤러리 - 회전 목마", "갤러리 - 회전 목마-anim", "대용품"함수 (Y) {
   VAR 회전 목마 = 새로운 Y.Carousel ({boundingBox : "# 컨테이너"
    contentBox : "# 컨테이너> 마셨다"});
   carousel.plug (Y.CarouselAnimPlugin, {애니메이션 : {속도 : 0.7}});
   carousel.render ();
 }); 

(당신이 새로운 물건을 받고에 관심이있다면 그건 그렇고, 당신은 방문할 수 YUI 3 갤러리 저장소를 github 또는 Gopal의 포크 그가 회전 목마 개발. 당신이 버그를 발견하면 우리가 늘 듣고 드리겠습니다.)

예제로 돌아가기 ... YUI 여기서부터이 소요됩니다. 로더는 자동으로 갤러리 회전 목마와 야후의 콘텐츠 전송 네트워크에서 자사의 종속성을 가져옵니다. 그 후, 회전 목마가 초기화되고 표시되고 있습니다. 사용자는 스크롤할 왼쪽 또는 오른쪽 화살표를 클릭할 수 있습니다. 불필요한 복잡 한 줄에만으로도 용서하세요,하지만 난 저항할 수 없었다. 제가 사용 Y.CarouselAnimPlugin 한 페이지에서 대신 순식간에 다음 페이지를 표시하는 다른 원활하게 우리의 회전 목마 슬라이드를하도록. 원하는 경우 속도 매개 변수와 놀아 주시기 바랍니다.

당신은 위의 스크린샷에서 볼 수 있듯이, 회전 목마가 실행됩니다. 그러나 CSS는 페이지의 나머지 부분에 잘 맞지 않을 수도 있습니다. 이것은 우리 갤러리 회전 목마를 사용자 정의하는 방법에 대해 다루겠습니다 우리의 다음 섹션에서 우리를 이끌고 있습니다.

갤러리 회전식 사용자 정의

당신의 회전 목마까지하고 실행을 귀하의 웹사이트에 대한 유스 케이스를 식별 지금 것을, 당신은 희망적으로 원활하게 그것을 통합 싶습니다. 이전에 언급했듯이, 우리는 스포츠 검색 결과 페이지에 대한 거죠. 당신이 거미의 넷을 예를 들어, 표시 항목의 개수를 늘리려면, 당신은 회전 목마를 인스턴스 라인을 수정하면됩니다.

  VAR 회전 목마 = 새로운 Y.Carousel ({boundingBox : "# 컨테이너"
  contentBox : numVisible, "# 컨테이너가> 마셨다": 4}); 

충분히 아직도 좋지 않아? 그래, 맞아. 다행히 CSS는 우리 자신의 스타일 정의를 추가하고 심지어 기존 CSS를 건드리지 않고 초기 것들을 덮어쓸 수 있습니다. 그들이 매우 돌출 때문에 그래서 첫 번째 단계는 아마도 국경을 제거하는 것입니다. 오직 당신의 페이지 헤더에 다음과 같은 CSS를 추가합니다.

  . YUI 3 - 회전 목마 {
   국경 : 없음 중요합니다;
 }
 . YUI 3 - 회전 목마 - 비행 {
   배경 : 없음 중요합니다;
 }
 . 회전 목마 마셨다 리 {
   국경 : 없음 중요합니다;
 } 

자, 잘 보입니다. 나는 또한 나의 회전 목마와 항로 사이의 격차를 줄이기 위해 음수 마진을 사용했습니다. 그러나, 우리는 완전히 아직도 거기에 없습니다. 난 당신이 또한 페이지 레이아웃에 멋지게 통합 사용자 정의 버튼을 사용하고자하는 가정합니다. 이 예를 들어 우리는 또한 야후의 검색 결과 페이지에 사용되는 동일한 버튼을 사용할 것입니다. 이것은 조금 더,하지만 여전히 간단한 CSS를 필요로합니다.

  . YUI 3 - 회전 목마 - 버튼 {
   배경 : URL ( "sprite_button.png") 노 반복 스크롤 투명 0 0 중요합니다;
   높이 : 20px 중요한; 폭 :! 28px 중요한;
 }
 . YUI 3 - 회전 목마 - 항법 항목 {
   배경 : URL ( "sprite_button.png") 노 반복 스크롤 투명 0 0 중요합니다;
   ! 배경 - 위치 :-133px 0 중요합니다;
 }
 . YUI 3 - 회전 목마 - 첫 단추 {
   ! 배경 - 위치 :-90px 0 중요합니다;
   마진 오른쪽 : 35px 중요한;
 }
 . YUI {3 - 회전 목마 - 첫 단추 장애인
   ! 배경 - 위치 :-60px 0 중요합니다;
   마진 오른쪽 : 35px 중요한;
 }
 . YUI 3 - 회전 목마 - 다음 - 버튼을 {
   ! 배경 - 위치 :-30px 0 중요합니다;
 }
 . YUI {3 - 회전 목마 - 버튼 장애인
   배경 위치 : 0 0 중요;!
 }
 . YUI 3 - 회전 목마 - 항법 항목 선택된 {
   ! 배경 - 위치 :-121px 0 중요합니다;
 } 

우리는 오늘 그 그것을두고 당신은 시작할 준비가 기분이 좋겠 것이다. 적어도 우리가 필요한 모든했습니다. 그러나 귀하의 사이트가 얼마나 큰 일에 얼마나 관심이 여러분의 성능에 따라, 또한 여기에서 적용 타사의 콘텐츠 전송 네트워크에서 뭔가를 로딩에 대한 일반적인 생각은 없습니다. 예를 들어, Sidnei 다 실바 이달 초 블로그 게시물에서 몇 가지 흥미로운 생각을 하였다. 우리는 YUI 위젯과 그 의존성은 자신의 웹사이트, 또는 컨텐츠 전송 네트워크로 이동할 수있는 방법을 설명합니다 그렇게하는 방법을 제공 드리겠습니다, 그래서 당신은 가능한 한 낮은 HTTP 요청의 개수를 유지할 수 있습니다. 당신이 관심이있다면 알려주시기, 우리는 여러분의 의견을 기다리고 있습니다!

갤러리 탐방 더

에두아르도 Lundgren 및 Liferay의 불량 카나 우수 팀은 이 뿐만 아니라 갤러리에서 회전 목마 구성 요소 분명히이 종류의 컨트롤을 위해 시장에서라면 체크 아웃 가치를 -.

대화 찾기 : bloglines | 테크노

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