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

YUI 3.2.0에서 예정 : SimpleYUI

이 문서에서 설명하는 기능은 YUI 3.2.0pr2의로 사용할 수 있으며, 그것은 곧 3.2.0 릴리스의 일부 것입니다. 이 문서에 나와있는 코드를 따라 오늘 가지고 노는 시작할 수 있습니다.

SimpleYUI는 로딩과 인스턴스의 새로운 방법입니다 YUI 3 . DOM 작업, 이벤트 추상화, UI 효과, 그리고 에이 잭스 : SimpleYUI 파일은 기본적인 에이 잭스 라이브러리 기능의 롤업이 포함되어 있습니다. 로딩 YUI의 다른 방법과는 달리, SimpleYUI가 로딩 즉시 YUI ​​인스턴스를 만들고 세계에 포함된 모든 구성 요소를 바인딩 Y 변수. SimpleYUI를 사용하면 쉽습니다 :

 <스크립트 유형 = "텍스트 / 자바 스크립트"
  SRC = "http://yui.yahooapis.com/3.2.0pr2/build/simpleyui/simpleyui-min.js"> </ SCRIPT>

 <SCRIPT>
  / / Y는 사용할 수 없으며 필요도 인스턴스화 :
  . Y.one은 ( "# foo는") addClass ( "강조");
 </ SCRIPT>

이 isn'ta "라이트"또는 YUI의 드 만족 버전은 - 당신이 SimpleYUI 파일을 시작할 때 당신은 여전히​​ 전체 라이브러리의 능력과 모든 기능에 액세스할 수 있습니다. 그러나, SimpleYUI은 몇 가지 일반적인 기능을 압연하고 글로벌 인스턴스 (생성하여 좋은 편의를 제공합니다 Y 즉시 사용할 수있어.)

DOM와 함께

: SimpleYUI 당신에게 YUI 3 API의 표준 DOM의 상호 작용을 모두 제공합니다

 / / 요소 참조를 얻을 클릭 처리기를 추가합니다
 Y.one ( '# 데모').에서 ( '다음', 기능 (E) {/ * 핸들을 클릭 */});

 / / 요소에 내용을 추가
 . Y.one ( '# 데모') 추가 ( '추가 콘텐츠 # 데모에 추가됩니다.');

 / / # 데모에서 내려 모든 <li>에 대한 클릭에 대해 들어보세요
 Y.one ( '# 데모') 대의원 ( '다음', 기능 (E) {/ * 핸들 클릭 * /} '리').;

 / / 문서에 대한 클릭의 위치를​​ # 데모 이동
 Y.one ( '문서').에서 ( '다음', 기능 (E) {
    	 . Y.one ( '# 데모') setXY ([e.pageX, e.pageY]);
	 }
 );

UI 효과 만들기

(새위한 - 3.2.0)의 일부되는 UI 효과의 모든 YUI 추이 모듈 SimpleYUI에서 사용할 수 있습니다 :

 / / # 데모를 퇴색 후 DOM에서 제거 :
 Y.one ( '# 데모'). 전환 ({
     완화 : '용이 아웃'
     기간 : 2, / /​​ 초
     불투명도 : 0
 } 함수 () {
     this.remove ();
 });

에이 잭스

SimpleYUI는 IO 모듈의 기본 에이 잭스 기능을 제공합니다 :

 / / 'get.php'으로 HTTP 요청을합니다 :
 Y.io ( 'get.php', {
     에서 : {
         전체 : 기능 (ID, 응답) {
             var에 데이터 = response.responseText; / / 응답 데이터입니다.
             / / ...  응답을 처리 ...
         }
     }
 });

YUI의 나머지 부분은 단 사용 ()입니다

당신은 SimpleYUI 함께 번들로 제공됩니다 무엇 제한되지 않습니다. 당신은 다른 YUI 3 구성 요소에 제공할 수 YUI 3 갤러리 모듈, 또는 YUI이 간단한 구성 요소와 함께 use() 언제든지 진술.

 SimpleYUI 롤업에 포함되지 않습니다 / /를 사용하여 드래그 앤 드롭, :
 Y.use ( 'DD - 드래그'기능 (Y) {
     var에 DD = 새로운 Y.DD.Drag ({
         노드 : '# foo는'
     });
 });

YUI 3 당신이 그것을 필요할 때마다 필요한 아무것도로드에 대한 좋은, 그냥 마스터 use() 구문을하고 당신이 필요로하는 라이브러리에 아무것도 떨어져 항상 코드의 한 라인이야.

언제 SimpleYUI를 사용하여 ...

• 당신이 빠르게 시작하기 원하는 YUI의 밧줄을 배울;
• 당신은 새로운 YUI 인스턴스를 만들지 않고 페이지의 생활에 언제든지 사용 가능한 기본 에이 잭스 라이브러리 기능을 갖고 싶어.

때 SimpleYUI를 사용하지 마십시오 ...

• ... 성능은 더 편리하게 이상의 문제;
• 당신은 별도의 인스턴스로 샌드 박스 구현의 일부를 원하는;
• 넌 다른 컴포넌트로드하고 무엇 정확한 모듈 / submodule 메이크업이 페이지에있는 경우에 대한 심의가되고 싶어요.

: 대화 찾기 bloglines | 테크노을

공유하고 확장 : del.icio.us와 스크랩 | 디그 그것! | 레딧!