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

YUI 3 빠른 팁 : 너의 자신의 굉장 추가

2010년 9월 29일 오후 12시 22분에서 에릭 Miraglia으로 |에 개발 | 3 개의 댓글

루크는 ( @ ls_n ) 질문 저번에 대응이 인간을 게시, 나는 그것이 빠른 팁 여기에 공유하는 가치가 알았는데.

당신이 보통을 통해 얻을 노드 참조, 데 의미 YUI 3에 - 대부분의 셀렉터 기반 숙어와 마찬가지로, YUI 3의 표현 능력의 많은 하나 이상 HTMLElements에 대한 참조를 찾으면 뭘 할 수 있는지에서 나온 Y.one( selector string ) 또는 Y.all( selector string ) . 그래서, Y.one("#foo"). doSomethingInteresting 일반적인 패턴이다.

그것은 노드 (및 / 또는 NodeList)에 자신의 마술을 추가하여 YUI 3의 표현력을 확장 쉽습니다. 여기 확장 모듈 및 재사용하게 한 방법은 다음과 같습니다.

먼저, 새 사용자 지정 모듈을 만들려면 (우리가 전화 할게 그걸 node++ ) :

  YUI.add ( '노드 + +'기능 (Y) {
	
	 / /이의 컨텍스트에서 실행됩니다 함수를 정의
	 / / 노드 인스턴스 :
	 함수 doSomethingAwesome () {
		 Y.log ( "여기 멋진 뭔가를 해주세요.");
	 }

	 / / 노드 프로토 타입 doAwesomeThing를 추가할 addMethod를 사용
	 Y.Node.addMethod ( "doAwesomeThing", doSomethingAwesome);
	
	 / /이 NodeLists이 기능을 확장할 수 :
	 Y.NodeList.importMethod (Y.Node.prototype, "doAwesomeThing");
	
 } '0 .0.1 ', {필요합니다 ['노드 ']});

루크의 요점은 여기 .

페이지에서 해당 정의, node++ 수 있습니다 use 하는 인스턴스에서 D를. 귀하의 구현 코드에서, 당신은 할 것이다 :

  YUI (). 사용 ( '노드 + +'기능 (Y) {
	
	 / / 하나의 노드에서 사용
         . Y.one ( '# foo는') doAwesomeThing ();

	 / / NodeList에서 사용
	 . Y.all ( 'P') doAwesomeThing ();
	
 });

단지 YUI 인스턴스 (들)이있는 당신의 바인딩합니다 node++ 모듈에 액세스해야합니다 doAwesomeThing . 당신은 복잡한 애플 리케이션을 구축으로 원하는거야이 디자인 중 하나는 기능은 구현 로직은 변경할 필요하지 않을 경우에 대한 의존성 목록에 node++ 발전 -에서 자동으로 처리 얻을 것을 use() 시간 및 종속성 선언은 관계된에 코드를 유지.

공유 및 확장 : del.icio.us로 스크랩 | 디그 그것! | 레딧!

YUI 극장 - DAV 유리 : "Node.js 및 YUI 3 사용"(36 분).

년 | 11시 34분에서 2010년 9월 29일 에릭 Miraglia에 의해 오전 YUI 극장 | 11 코멘트

라이언 달의 Node.js 작업 - 그 프로젝트 주위에 성형 커뮤니티 - 2010 년 큰 이야기의 하나로서 HTML5에 합류했다. YUI 엔지니어 DAV 유리 YUI 3 Node.js implementers위한 강력한 동맹을하기 위해 노력하고 있으며,이 비디오에서 그는 지금까지 한 짓을을 보여줍니다 - 클라이언트와 서버에 동일한 코드를 실행 점진적으로 향상된 위젯의 데모를 포함합니다. 이 하나를 놓치지 마세요.

동영상 아래에 삽입 경우 RSS 리더에서 제대로 표시되지 않습니다, YUI 극장에서 비디오의 고해상도 버전을 보거나 다운로드를 클릭 .

기타 최근 YUI 극장 동영상 :

Alois Reitbauer : dynaTrace 아약스 에디션 - dynaTrace Internet Explorer에서 웹 응용 프로그램의 성능을 분석하는 가장 강력한 도구 중 하나를 제공합니다. 이 이야기에서는, dynaTrace 엔지니어 Alois Reitbauer은 dynaTrace 인터페이스를 사용하여 네 구체적인 분석 시나리오를 통해 안내합니다.
라이언 그루브 : YUI 3 성능 선종을 달성 - 다음 codified 지침 은 빠른 웹 사이트를 구축할 수 있습니다,하지만 깨끗하고 신속하고 확장 아르 건물 응용 프로그램 또한 F2E 작업의 모든 수준에서 성능에 균형 접근 방식을 복용 포함됩니다. YUI 3 성능 마법과 생산에 빠른 프론트 엔드 코드는 쉽고 재미있게 만들 수있는 다양한 도구가 내장된 마우스 오른쪽 단추 크기의 추상화 계층을 제공,이 과정에서 당신을 도울 수 있도록 설계되었습니다. 이 세션에서는, 우리는 YUI 3 세계 performant 자바 스크립트의 선종을 탐험 테니 YUI 3 당신이 쓰는 모든 응용 프로그램에 처리에두고 강력한 도구의 일부로 소개합니다.
더글러스 Crockford : JavaScript를 Crockford - 장면 6 : Loopage - 소프트웨어 개발은 최초의 프로그래밍 언어로 만든 이후 완료되어 모든 것을 반복되었습니다 설계 실수의 특정 집합에 의해 방해합니다. 그리고 다소 기적적으로, JavaScript는 근본적으로 우리가 응용 프로그램을 작성하는 방법을 변형, 제대로 만들려고합니다. 다시. 역사의 루프에서는 모든 일이 처음이 있지만, 이렇게 된 적이있다. 이것은 서버 사이드 자바 스크립트와 Node.js 같은 프로젝트 주변의 흥분의 출현 걱정해야하는 이유입니다 - 그들은 경향의 날카로운 끝에 때문에 아니라 그들은 다음 큰 혁명쪽으로 도로를 포장하기 때문에 소프트웨어 인치

YUI 극장에 가입 :

공유 및 확장 : del.icio.us로 스크랩 | 디그 그것! | 레딧!

구현 포커스 : 렌터카 익스프레스

년 | 6시 1분에서 2010년 9월 28일는 스테판 Klopp에 의해 오전 야생에서 , YUI 구현 | 2 개의 댓글

에 대한 저자 : 스테판 Klopp를 위해 개발 이사를 맡고있다 ExpressITech 의 모회사인 렌터카 익스프레스 . 스테판은 지난 6 년 동안 다양한 역할에서 렌터카 업계에 대한 높은 사용 가능한 웹 솔루션을 개발했습니다. 그는 현재 살고 밴쿠버, 브리티시 컬럼비아, 캐나다에서 사용할 수 있습니다.

렌터카 Express는 인터넷에서 최고의 독립 렌터카 비교 웹사이트입니다. 그것은 전 세계 1000 개 이상의 도시와 공항에서 사용자의 임대 차량 온라인 수 있습니다.

우리의 사용자 기반이 크게되지 않은 기술이며, 이는 그들이 가능한 한 쉽게 가격과 임대료 자동차를 비교하려는 의미합니다. 2010 년 6 월 우리의 웹사이트의 다시 시작을 통해 우리는 직관적인 경험을 고객에게 제공하기 위해 YUI 2의 여러 구성 요소를 구현합니다.

우리는 어떤 YUI 구성 요소를 사용하고 있습니까?

우리가 사용하고있는 구성 요소가 포함 연결 관리자 , 자동 완성 , 데이터 원본 , 일정 , 애니메이션 , JSON , 그리고 컨테이너를 .

우리는 YUI를 선택한 이유

우리가 잠재적에서 사용할 수있는 다른 자바 스크립트 라이브러리 검토할 때 렌트카 Express를 , 우리는 YUI 우리의 요구에 가장 완벽한 것으로 나타났습니다. 우리의 가장 큰 판매 기능은 YUI 다른 디자인 패턴을 구현했다 매우 모듈식 접근뿐만 아니라, 그들이 제공하는 강력한 설명서 및 예제를했습니다. 개발 관점에서 이것은 도서관과 함께 투쟁하지 않고 우리의 응용 프로그램의 신속한 개발되었다.

우리는 YUI를 사용하는 방법

우리는 여러 가지 방법으로 YUI를 활용. 우리 4 가장 많이 사용되는 구성 요소는 자동 완성, 일정, 컨테이너 및 연결 관리자입니다. 다음은 이러한 각각의 구성 요소를 사용하는 몇 가지 방법이 있습니다.

자동 완성

자동 완성 구성 요소는 사용자가 차를 임대하고있는 도시 또는 공항을받는 데 도움을 저희 사이트에서 광범위하게 사용됩니다. 우리는 정말이 구성 요소를 구현하는 것이 얼마나 쉬운 좋아, 그리고 얼마나 빨리 그것은 응답합니다. 우리 캐시 검색 검색 결과를 개선하는 데 도움이되는 결과 서버측 있지만, 클라이언트 측 캐싱은 또한 구성 요소의 응답 속도에 엄청난 도움이 필요. 우리가 진짜로 데려 또 다른 기능은 결과가 스타일에 얼마나 쉽게되었습니다. 우리가 어떤 도시에서 발견되는 위치는 공항에서 발견된 식별하는 데 필요한 사용자에게 위치를 표시할 때이 결정되었습니다.

자동 완성 구성 요소 스타일

달력

세입자가 검색을 수행할 날짜를 입력하면 달력 구성 요소는 사이트 전반에 걸쳐 사용됩니다. 우리는 존 Peloquin의 사용자 지정 버전을 사용하는 간격 선택 일정 과에 표시 YUI 대화 상자 . 기본적으로 우리가 원했던 것은뿐만 아니라 시각적으로 그들이 현재 선택 범위를 어떤 날짜를 보여주 그들의 날짜를 선택할 때 임차인에게 두 달간보기를 제공했다. 다시, 이것은 YUI이 캘린더를 사용하여 구현하는 매우 간단한 있었고, 그것은 기본적으로 해당 사업부로 YUI 간격 일정을 장착, 캘린더 사업부를 포함하는 신체를 설정, YUI 대화 상자를 생성하기 위해 내려왔다.

컨테이너

우리는 다른 여러 가지 방법으로 웹 사이트를 통해 YUI 컨테이너를 사용합니다. 위의 예제에서 우리는 사용자가 날짜를 선택할 때 우리가 간격 일정을 표시할 수 있도록 대화 상자를 사용했다. 우리의 속도 검색 결과 페이지에서 우리는 임차인에게 더 렌터카 기관의 다양한 측면에 대한 정보들이 잠재적으로 임대 수있는 차량을 제공하기 위해 컨테이너 많이 사용합니다. 이 페이지에서 컨테이너의 대부분은 패널 우리가 각기 다른 목록을 다시 사용하는 것이. 예를 들어, 자동차 디스플레이 패널 기능 :

표준 패널

상황이 기관 평가를 평가 관리원과 함께 좀 더 재미 있어요. 등급을 표시하면, 저희는 정말 기관이받은 점수에 대한 사용자의 관심을 집중하고 깨끗한, 쉽게보기 방식으로이 정보를 표시 싶었어요. 대화 상자 컨트롤을 이용하여 우리는이 목표를 달성하는 데 도움이 쉽게 뷰포트 및 센터 대화 상자를 제한 할 수 있었다. 빈 머리글과 바닥글을 설정하여 그것은 단지 우리의 CSS에 적절한 스타일을 추가하여 스타일링은 간단했다. 최종 결과는 그들이 원하는 정보와 세입자를 제공하는 깨끗한 등급 컨테이너했습니다.

대화 상자 컨테이너 스타일

연결 관리자

우리가 XHR 요청을 통해 데이터를 끌어 할 때마다 연결 관리자는 사이트 전반에 걸쳐 사용됩니다. 위의 예제 중 일부에서는 자동 완성 implementaitons에 대한 도시와 공항을 요청하고 대화 상자 평가 관리원에 대한 평가 정보를 당기는이 구성 요소를 활용합니다.

우리는 연결 관리자를 이용 한 흥미로운 방법은 대부분의 페이지에 앉아 우리의 대여 센터 블록이다. 성능하기 위해 우리는 우리의 콘텐츠 페이지에 많은 전체 페이지 캐싱을 많이 해. 그러나, 우리는 여전히 해당 페이지에 동적 대여 센터 블록을 표시합니다 싶었어요. 이것은 우리가 연결 관리자 해결할 수있었습니다 문제가 우리를 발표했다. 오히려 우리가 완전히 캐시된 페이지와 우리는 그것이 단순한 비동기 요청을 통해 대여 센터 블록을 포함하는 것이 더 쉽습되었다 찾은 페이지의 캐시에만 측면을 헤어져야하는 데보다. 우리는 우리가 완전히 캐시된 페이지를 필요에서 성능을 유지하면서도 여전히 우리 대여 센터 상자에서 동적 콘텐츠를 표시할 수있는 것으로 나타났습니다.

대여 센터는 연결 구성 요소를 통해 포함된

최종 사상

전반적으로 우리는 YUI를 사용하기 위해 선택과 매우 행복했습니다. 그것은 사용하고 구현하기가 쉽고, 잘 문서화되어있다 모듈러 라이브러리를 제공.

공유 및 확장 : del.icio.us로 스크랩 | 디그 그것! | 레딧!

매트 테일러의 RaphaelJS 모듈 : YUI 3 갤러리

2010년 9월 27일 오후 1시 5분에서 매튜 테일러 |에서 개발 , YUI 3 갤러리 | 9 개의 댓글

매트 테일러 ( @ rhyolight , 블로그 ) 내부 브라우저 측 자바 스크립트 프레임 워크에 야후에 대한 작동합니다. 그는 그래픽 작업 누리고, 그는 사용하기 전에 드로잉과 애니메이션 작용 Java2d 라이브러리. 야후를 위해 일할 실리콘 밸리로 이동하기 전에, 매트는 소프트웨어 계약자로 세인트 루이스 지역에서 근무했습니다. 그는 또한 폭 근무의 멋져요 과 Grails 스프링에 대한 기술. 그는 YUI2 기반의 원래 리드 프로그래머되었다 GrailsUI의 Grails 웹 프레임 워크를위한 플러그인.

RaphaelJS가 관리하는 강력한 자바 스크립트 라이브러리입니다 SVG 그림과 애니메이션을. 그것은 당신이 쉽게도 세트로 그들을 그룹화하여 하나 또는 여러 벡터 변환을 적용, 쉽게 기본적인 형태와 경로를 SVG canvases를 만들고 그릴 수 있습니다. 당신은 모양을 그릴 이미지를 조작하고, 모든 애니메이션 수 있습니다. RaphaelJS 좋은 제공하는 API를 쉽게 SVG 요소를 생성하고 수정할 수 있습니다.

도서관이 인상적입니다,하지만 난 YUI3 함께 RaphaelJS 라이브러리의 요소에 몇 가지 중요한 기능을 추가할 수있는 것으로 나타났습니다 동안. 나는 새와 함께 이러한 노력을 시작했습니다 RaphaelJS 갤러리 모듈 .

게으른 로딩 RaphaelJS 및 플러그인

첫 번째 기능은 RaphaelJS 라이브러리뿐만 아니라의 게으른 로딩이지만, 모든 RaphaelJS의 플러그인 이 필요 할 수도 있습니다. RaphaelJS 갤러리 모듈은 여러분이 YUI 모래 이내에 사용됩니다 선언할 때 이러한 파일을로드합니다. 예를 들면 다음과 같습니다

 
 YUI ({갤러리 : '갤러리 - 2010년 9월 22일 - 20-15'}). 사용 ( '갤러리 - 라파엘'기능 (Y) {
 
	 Y. 라파엘은 (). (기능 (라파엘) {사용
		
		 / / 그냥 당신이 YUI 드러내는처럼 여기 라파엘를 사용하여
		 var에 용지 = 라파엘 ( 'myPaper', 500, 500);
 
	 });
 
 });

당신이 RaphaelJS 플러그인을 사용하는 경우, 배열에서 경로를 지정하고 Y를 라파엘의 첫 번째 매개 변수 () () 함수를 사용하는 것이 보낼 수 있습니다. :

 
 YUI ({갤러리 : '갤러리 - 2010년 9월 22일 - 20-15'}). 사용 ( '갤러리 - 라파엘'기능 (Y) {
 
	 var에의 myPlugins = [ '플러그인 / raphael.awesomePlugin.js', '플러그인 / raphael.wickedPlugin.js'];
 
	 Y. 라파엘은 (). (myPlugins, 기능 (라파엘) {사용
 
		 / / 그냥 당신이 YUI 드러내는처럼 여기 라파엘를 사용하여
		 var에 용지 = 라파엘 ( 'myPaper', 500, 500);
		 / / '종이'는 이제 플러그인에 의해 추가된 모든 새로운 기능을해야합니다
	 });
 
 });

당신의 콜백 함수가 유일한 매개 변수로 라파엘 개체 실행되기 전에 RaphaelJS 라이브러리가 처음 로드된 후 어떤 특정 플러그인이로드됩니다.

사용자 정의 이벤트

일단 라파엘 개체 드로잉 공간을 만든 다음, 바로 그림을 다운받을 수 있습니다. 당신이 좋아하는 방법을 호출하면 rect , circle , 그리고 path 그리기 공간을, 당신은 SVG 벡터를 나타내는 개체를 다시 받게됩니다. 일반적으로, 당신은을 통해 해당 DOM 요소에 액세스할 수 있습니다 겁니다 node 속성을. 예를 들면 다음과 같습니다

 
 var에 용지 = 라파엘 ( 'myPaper', 500, 500);
 var에 제곱 = paper.rect (0, 0, 100, 100);

이것은 좌표에 사각형 벡터 개체를 만듭니다 [0,0] 100 픽셀의 너비와 높이와 함께. 당신은 기본 DOM 요소 (SVG되는에 액세스할 수 있습니다 rect 이렇게를 요소) :

 
 var에 rectNode = square.node;
 rectNode.onclick = 함수 () {
	 알림 ( '축하합니다, 당신이 사각형을 클릭!');
 };

당신이 열렬한 YUI 사용자인 경우, 당신은 아마 이것보다 좀 더하고 싶습니다. 방법의 기본에 대해 Y.Node 뿐만 아니라? 마치 node 속성은 SVG 객체 뒤에있는 HTMLElement를 말합니다, $node 속성을 나타냅니다 Y.Node 해당 요소에 대한 래퍼. 그래서 당신은 이런 일을 할 수 있습니다 :

 
 광장. node.on $ ( 'mouseover', 기능 () {
	 알림 ( '축하합니다, 당신은 마우스를 이동할 수 있습니다!');
 });

자, 이제 좀 더 복잡한 무언가를보십시오. 한 벡터와 상호 작용은 다른 그려진 벡터 바로 그들의 스타일을 업데이 트시킬 수 있어야한다? 어때 우리 모두가 마우스가 페이지에 원형에 위치에 자신의 색깔에 의존하는 일부 렌더링 막대를 만들려면 :

 
 var에 용지 = 라파엘 ( 'rcanvas', 600, 800);
 
 . var에 유통 = paper.circle (350, 200, 100) attr ({작성 : '핑크'를, 뇌졸중 : '블랙'});
 
 / / 배열에 직사각형을 잔뜩 밀어
 var에 나는 = 0; 직사각형 = [];
 에 대한 (; 나는 <10; I + +) {
	 . rectangles.push (paper.rect (0, 40 * I, 200, 20) attr은 ({작성 : 뇌졸중, '빨간색': '노란 '}));
 }
 
 / / 각각에 대해 구체적인 원형 mousemove 처리기를 추가, 사각형을 통해 루핑
 Y.Array.each (사각형, 기능 (rect, 색인) {
	 var에 I = 인덱스 + 1;
	 유통. node.on $ ( 'mousemove'기능 (evt) {
		 / / 채우기 색상이 사각형의 위치에 따라 동적이다
		 / / 배열에서뿐만 아니라, 마우스의 위치
		 만약 var는 = circ.attrs.cx - circ.attrs.r,
			 RT = 2 * circ.attrs.r +면,
			 X = evt.clientX -면,
			 상단 = circ.attrs.cy - circ.attrs.r,
			 btm = 2 * circ.attrs.r + 위로,
			 Y = evt.clientY - 최고;
			 빨간색 = (((128 * X) / (2 * circ.attrs.r)) -1) * I / 6,
			 녹색 = 256 - ((((128 * X) / (2 * circ.attrs.r)) -1) * I / 6)
			 파란색 = (((128 * Y) / (2 * circ.attrs.r)) -1) * I / 6;
		 rect.attr ( '입력', 'RGB ('+ 적색 + ''+ 녹색 + ''+ 파란색 + ')');
	 });
 });

이 예제는 실행 여기 지만, 아래 스냅샷에서 볼 수 있듯, 각 막대의 색상은 원형 마우스 위치뿐만 아니라 막대의 순서에 따라 달라집니다.

마우스 커서가 원 위에 위치에 따라 막대 색상은 개별적으로 변경할 수 있습니다.

그래서 당신은 것을 볼 수 있습니다 $node 유용한 지름길이지만, 아무것도 탁월합니다. 정말 될 환상 이 RaphaelJS 함께 만드는 각 SVG 개체가 불이있다면 사용자 정의 이벤트를 . 그게 당신의 개인적인 그림 요소 사용자 정의 이벤트를 해고 시키는데 도움이 될 것, 그리고 페이지에 뭔가 들어 응답 수 있습니다. 이것은 여러 가지 방법으로 유용할 수 있습니다. 우선, 네 그림 사이의 풍부한 상호 작용을 제공합니다. 한 벡터와 사용자 상호 작용은 이제 수요의 상호 작용의 다른 벡터를 통보하실 수 있습니다. 이것은 특정 조건이 충족 때 programatically 귀하의 그림에서 이벤트를 불 수있다는 것을 의미합니다. 뿐만 아니라 이것은 당신의 그림을 다른 벡터를 통보 수 없지만 페이지에 아무것도 안으로들을 수

 
 var에 용지 = 라파엘 ( 'rcanvas', 600, 800);
 
 . var에 유통 = paper.circle (350, 200, 100) attr ({작성 : '핑크'를, 뇌졸중 : '블랙'});
 
 / /이 사각형과 동그라미의 배열 만들기
 var에 나는 = 0, 사각형 = [], 동그라미 = [];
 에 대한 (; 나는 <10; I + +) {
	 . rectangles.push (paper.rect (0, 40 * I, 40 * I, 20) attr ({작성 : '빨강', 뇌졸중 '노란 '}));
	 circles.push (. paper.circle (0,0,20)는 () 숨기기);
 }
 Y.Array.each (사각형, 기능 (rect, 색인) {
	 var에 I = 인덱스 + 1;
	 유통. node.on $ ( 'mousemove'기능 (evt) {
		 만약 var는 = circ.attrs.cx - circ.attrs.r,
			 RT = 2 * circ.attrs.r +면,
			 X = evt.clientX -면,
			 상단 = circ.attrs.cy - circ.attrs.r,
			 btm = 2 * circ.attrs.r + 위로,
			 Y = evt.clientY - 최고;
			 newWidth = (((256 * X) / (2 * circ.attrs.r)) -1) * I / 6,
			 빨간색 = (((128 * X) / (2 * circ.attrs.r)) -1) * I / 6,
			 녹색 = 256 - ((((128 * X) / (2 * circ.attrs.r)) -1) * I / 6)
			 파란색 = (((128 * Y) / (2 * circ.attrs.r)) -1) * I / 6;
		 / / 이번에만 색상을 변경뿐만 아니라 사각형 너비 아니
		 rect.attr ({
			 폭 : newWidth,
			 작성 : 'RGB를 ('+ 적색 + ''+ 녹색 + ''+ 파란색 + ')'
		 });
		 / / 사용자 지정 이벤트를 해고하는이 사각형의 너비가 변경되었다는 통지
		 rect.fire ( '너비 - 변경', {폭 : newWidth, 소스 : rect, 주문 색인});
	 });
	
	 / / 각 사각형은 가로 - 변경에 화재 수신기를 얻을 수
	 rect.on ( '너비 - 변경'기능 (evt) {
		 var에 attrs = evt.source.attrs;
		 / /는 해당 동그라미를 그리고 사각형의 오른쪽 끝에으로 이동
		 동그라미 [evt.order]. attr ({
			 CX : attrs.x + attrs.width,
			 싸이 : attrs.y,
			 작성 : 'cornflowerblue'을
		 .}) 표시 ();
		
	 });
	
 });

이 실행되는 예를 살펴보세요 여기 . 당신은 또한 그 원 아래 스냅샷에서 볼 수있는 사각형의 오른쪽 끝을 발행한되고있다. 이것은 사각형의 현재 속성에 대한 상대적인 위치로 이동 원을 핸들러에 의해 체포되고, 각 사각형의 사용자 지정 이벤트 발사에 대한 응답으로 발생합니다.

이것은 YUI3 이내 RaphaelJS위한 몇 가지 흥미로운 possiblities을 엽니다. 예를 들어, 우리가 외부 세계에 이벤트를 발생시킵니다 법인되는 그룹 자체의 벡터 도형의 그룹을 만들 수있다면? 내부적으로, 각 벡터 그리기 사용자 정의 이벤트를 통해 자사의 컨테이너와 통신할 수 있고 컨테이너는 외부 세계에 화재가 어떤 데이터에 대한 결정을 내릴 것입니다. 이것은 완전히 캡슐, 대화형 SVG 컨트롤의 아이디어를 열립니다.

개요

HTML5와 위성 기술의 ascendance과 함께, 풍부한 상호 작용에 대한 플래시 이외 있도록 더 많은 옵션이 있습니다. 이상적으로, 페이지에있는 모든 요소는 완벽하게 vectored 접근하고 표준화해야합니다. 이것은 플래시 resorting없이 액세스할 수, 표준 웹 컨트롤을 만드는 데 우리가 훌륭한 possiblities를 열립니다. 페이지에서 발행한 모든 벡터는 우리가 다른 DOM 노드와 같은 YUI와 수정할 수있는 DOM 노드에 의해 백업이기 때문에 SVG는 매력적인 옵션입니다. 그것은 허용 뭐가 RaphaelJS 갤러리 모듈 RaphaelJS 만든되는 모든 SVG 개체를 증가시키기 위해, 그것은 다른 페이지에 이러한 elments 풍부한 상호 작용하는 열쇠입니다.

공유 및 확장 : del.icio.us로 스크랩 | 디그 그것! | 레딧!

숨겨진 Demystified : clearfix가 + 오버플로를 리로디드

년 | 6시 27분에서 2010년 9월 27일 티에리 Koblentz하여 오전 CSS 101 | 12 코멘트

저자 소개 : 티에리 Koblentz 야후에서 프론트 엔드 엔지니어
그는 소유 TJK 설계 및 EZ - css.org을 . 당신의 트위터에 티에리 따를 수 @ thierrykoblentz .

clearfix 및 overflow : hidden 구조적 마크업없이 수레를 취소하고 두 가장 인기있는 기법을 수도 있습니다.

이 짧은 기사는 첫 번째 방법을 강화하고 두 번째의 실제 의미를 몇 가지 빛을 흘리기에 관한 것입니다.

clearfix

에서 당신이 clearfix에 대해 알고 모든 잘못 이 방법은 브라우저에서 생성 문제를 설명하고 저자로 우리가 아직 붕괴 여백 처리 있지만 나는 단지 수레 (예 : 모달 창) 옆에되지 않은 요소에 clearfix를 사용하는 것이 좋습니다 . 이 데모 페이지는 문제를 보여줍니다.

의 여백 - 붕괴 동작 첫 두 상자 는 상자 (딱 들어맞는있는 내부의 바닥 마진을 유지 생성 (비어 있지 않은) 콘텐츠는 것을 보여주는 사양에 따라 ).

그럼, 우리 둘 다 의사 요소를 사용하여 컨텐츠를 생성하여 원래의 방법을 향상시킬 수 브라우저에서 동일한 상자 레이아웃 작성 :before 하고 :after :

  . clearfix : 전에,
 . clearfix : {이후
   내용 :; "."    
   디스플레이 : 블록;    
   높이 : 0;    
   오버플로 : 숨겨진;	
 }
 . clearfix : 후 {취소 : 모두;}
 . clearfix {줌 : 1;} / * IE <8 * /

단순히 다른 방법을 통해 무너지고 여백에 관련된 이미 패치가 문제가있을 수 있으므로,하지만, 기존의 프로젝트에서 이러한 새로운 것들로 clearfix 규칙을 대체하지 마십시오.

`overflow`

삭제에 대한 대부분의 논의에서 수레 overflow:hidden 방법은 와서, 그것은 항상 "에 의해 격추 수 있습니다 당신은 사업부 내부에 절대 위치 요소를 배치하는 경우, 이러한 요소를 잘라내는 겁니다 . " .하지만, 이것은 필요가 사실이 아니 overflow:hidden 항상 위치가 상대적으로 요소를 클립되지만 항상 절대적 위치 것들을 숨길 수 없습니다. 그것이 모두 포함된 블록에 달려 있기 때문입니다 :

"포함하는 블록"의 10.1 정의 :

4. 요소가 '위치 : 절대'을있다면, 포함하는 블록과 가장 가까운 조상에 의해 설립 '위치' '상대적'또는 '고정', '절대'의 ...

이것은 절대적으로 위치 요소와 스타일의 상자 밖으로 게재됩니다 overflow:hidden 자신이 포함된 블록 상자 자체 또는 고 말했다 상자 안에 요소 않는.

당신이 확인할 수 있습니다 이 데모 페이지를 가지 작업 방식을 볼 수 있습니다.

더 나은 대안

당신이 수레를 포함하는 요소 너비를 적용할 수있다면, 당신의 최선의 선택은 사용하는 것입니다 :

  디스플레이 : 인라인 블록;
 폭 : <any 명시 value>;

추가 읽기

공유 및 확장 : del.icio.us로 스크랩 | 디그 그것! | 레딧!

YUI : 개관 시간 수요일 9월 29일

루크 스미스에 의해 오후 1시 50분에 2010년 9월 24일 |에 개발 | 1 코멘트

YUI의 다음 할부 : 개관 시간은 다음주 수요일, 29 것입니다.

YUI 3 차트는 다음 버전에서오고, 일부 초기 작품의 미리보기 이미 갤러리에 . 트립의 브리지는 새로운 구조를 소개하고 YUI 2의 차트 패키지에서 learnings이 새로운 아키텍처에 대한 정보를 어떻게 보여주는, 유연성 및 단순 사이에 멋진 균형을 찾고, 전화에있을 것입니다. 아, 그리고 난 전혀 Flash를 언급하지 않았다?

또한 갑판 것입니다 앨런 Rabinovich는 그가 yuilibrary.com 재설계에하고 있었 놀라운 작업에 업데이 트를 제공. 우리는 여기서, 모든 이야기 : 홈페이지, 사용자 가이드, 데모, 튜토리얼, API 문서. 작동합니다. 여러 면에서 이것은 완전히 새로운 이야기, 그리고 더 하나.

우리는 오전 10 시부터 태평양 서머 타임 오후 12시로 온라인 상태가됩니다. 연결 내용은 정상적으로 동일합니다.

(스카이 프가 아닌 미국 참가자 *에 대한 훌륭한 작품) 1-888-371-8922에 전화
참석자 코드 47188953을 입력합니다 #
화면 공유 세션에 참가 (이것은 그것을 처음 사용하는 경우 이것이 당신이 어도비 연결 플러그인을 설치하라는 메시지가 나타납니다)

그리고 마지막으로,이 개관 시간에 대한 yuilibrary.com 포럼 스레드는 여기 . 노트, 흥미로운 테이크 아웃, 그리고이 일을 후 통화 녹음도보세요. 또는 게시 문의 사항, 주제에 대한 제안, 또는 리뷰를하려는 코드 일찍 퇴근 대화를 시작합니다.

에 가입하는 것을 잊지 마세요 YUI 일정 및 수행 @ yuilibrary을 개관 시간 및 기타 YUI의 interestingness에 대한 최신 업데이 트를 트위터에.

거기서 당신을보고 싶습니다!

* - 스카이 프가 옵션이 아닌 경우에는 지역 번호를 내게 이메일로 보내십시오.

공유 및 확장 : del.icio.us로 스크랩 | 디그 그것! | 레딧!

2010년 9월 24일에 대한 야생에서

에서는 | 오후 1시에서 에릭 Miraglia에 의해 2010년 9월 24일 야생에서 | 코멘트 끄기

우리가 준비로서 YUIConf 2010 과 앞으로 몇 달 안에 더 많은, 우리가 큰 YUI 세계에서 주목을 받았죠 다른 것들 중 일부입니다 :

YUI 극장의 NetTuts 목록을 탑스해야 -보고 F2E 포드 캐스트 : 앤드류 버지스에 대해 쓰기 YUI 극장 : "그것은 자주 여러 번 같은 달, 야후 직원를 유지하기 위해 웹 기술의 최첨단 개발자에 가져다 것으로 보인다 날짜입니다. 우리의 나머지 부분의 이익을 위해 이러한 회담이 기록과 출판하고 있습니다. 당신은 잘 알려진 더글라스 Crockford와 니콜라스 Zakas 같은 devs, 성능 및 접근성에서 자바 스크립트와 DOM을에 이르기까지에 대한 회담을 확인할 수 있습니다. " #
YUI 3 전원 DigitalInsurance.com는 (@ apipkin 사이트) : 다작 갤러리 기여 앤소니 작은 옹기병은 새로운 생산있었습니다 DigitalInsurance.com 포털 YUI 3 전원을. #
아무것도 아니지만 JS (@ davglass에 @ codepo8)를 사용하지 그레시브 향상 : 기독교 Heilmann는 Ajaxian에 대한 글을 참고하세요 : "프로 그레시브 강화가 여전히 현대적인 브라우저 환경에서 자바 스크립트의 기능에 대해 매우 기쁘게 생각 많은 사람들에게 혼란 문제입니다. 그것은 한 번 더 자바 스크립트 강화 다음 비 - JS 환경에 대한 솔루션을 작성하고 시대 착오 느낄 수 있습니다. 그 때문에 나를 위해 그것이 옳은 일을하고있는 간단한 문제가 있지만 같은 자바 스크립트 라이브러리 오늘날의 세계와 자라 밖에서 - 더 - 박스 위젯 그것은 드래그 보일 수있다. YUI 팀의 DAV 유리를 입력하십시오. 그의 머리에 주위 진보 향상의 개념을 돌려 JS 애호가와 백엔드 코드 "endurer"로 그는 순수한 자바 스크립트 방식으로 한번에이 문제를 해결하기 위해 밖으로 설정 됐어요. " 자세한 내용은 전체 문서를 체크 아웃 . #
올리버 Andrich에서 YUI 3에 대한 더 많은 중첩 플러그인 : 올리버의 GitHub 페이지에서 '오버레이 플러그인은 내가 일반적으로 YUI 3 플러그인 developement을 배울 수 있도록 쓴 다섯 플러그인의 모음입니다. 세 밖으로 다섯 플러그인 더 많거나 적은 모방 오버레이 부가 만든 에릭 Ferraiuolo을 .... 다섯 플러그인은 다음과 같습니다
- BaseOverlayPlugin
- ModalOverlay
- KeepAligned
- HideOnEscape
- ConstrainDimensions "
( 원본. ) #
카네기 멜론에서 HackU위한 레이드 버크 YUI 슬라이드 : YUI 엔지니어 (그리고 설인의 작성자) 리드 버크 일부 슬라이드를 채찍질하고 YUI 3 기반의 슬라이드쇼 엔진 카네기 멜론에서 그의 최근 대화하십시오. #
YUI 극장에서 Crockford 및 기타 Gurus에서 JS 학습에 Devcurry Suprotim Agarwal 오늘 아침 devcurry의 글을 참고하세요 : : "이 게시물에서, 난 정보가 가득 들어 몇 가지 매우 유용한 자바 스크립트 동영상과 자바 스크립트 Gurus에 의해 제공되는 강의 링크, 재미있는 관찰과 공유합니다 물론 무료! 인터넷 무료 동영상 가득이지만, 내가 가장 유용한 발견 그것만이 몇을 선택하셨습니다. 당신이 배우로 메모를 준비 .. 자바 스크립트에 대한 Crockford의 동영상 강의 - 더글러스 Crockford는 자바 스크립트 건축가와 연극 언어의 새로운 기능을 설계에서 중요한 역할을합니다. 그의 비디오는 '해야 -가'모든 자바 스크립트 개발자를위한. YUI 극장 - 자바 스크립트 및 웹 개발에 gurus을 통해 무료로 프로그래밍 회담에 대한 액세스를 제공하는 "Suprotim 다른 YUI 극장 제목을 포함하여 콘텐츠의 다른 소스를, 목록에갑니다.. #