Yahoo! User Interface Blog (YUIBlog)

Очаквайте в Юи 3.2.0: SimpleYUI

Функцията, описана в тази статия е на разположение както на Юи 3.2.0pr2, и тя ще бъде част от предстоящия 3.2.0 освобождаване . Можете да започнете да играете с него днес, като след кода в тази статия .

SimpleYUI е нов начин на товарене и инстанциира Юи 3 . SimpleYUI Файлът съдържа кумулативен пакет с основна функционалност на Аякс библиотека: DOM задачи, събитие абстракция, UI ефекти, и Аякс. За разлика от други начини за зареждане Юи, SimpleYUI създава Юи например веднага след товарене и свързва всички компоненти на глобалната променлива Y . Използването на SimpleYUI е лесно:

 <Скрипт тип = "текст / JavaScript"
  SRC = "http://yui.yahooapis.com/3.2.0pr2/build/simpleyui/simpleyui-min.js"> </ SCRIPT>

 <script>
  / / Y е готов за използване, без инстанцииране необходимо:
  . AddClass y.one ("# Foo") ("Highlight");
 </ SCRIPT>

Това не е "лайт", или де-доволен версия на Yui - все още имате достъп до всички мощност и характеристики на цялата библиотека, когато започват с SimpleYUI файла. Въпреки това, SimpleYUI дава хубав удобство, като някои обща функционалност и създаването на глобален Y (Y), че е готов за употреба веднага.

Работа с на DOM

SimpleYUI ви дава всичко на стандарта DOM взаимодействия в Юи 3 API:

 / / Препратка елемент, добави кликнете манипулатор
 Y.one ("# демо") на ("клик", функция (д) {/ * дръжка кликнете */});

 / / Добавяне на съдържание на елемента
 Y.one ("# демо") за добавяне ("Допълнителна съдържание # демо.");

 / / Слушам за всяко кликване върху <li>, че слиза от # демо:
 Y.one ("# демо") делегат ("клик" функция (д) {/ * кликнете на дръжката * /}, 'li').

 / / # Демо местоположението на всяко кликване върху документа
 Y.one ("документ") на ("клик", функция (д) {
    	 Y.one ("# демо") setXY ([e.pageX, e.pageY]);
	 }
 );

Създаване на UI Ефекти

Всички UI ефекти, които са част от (нови за 3.2.0) Юи Преход модул са на разположение в SimpleYUI:

 / / Избледняват # демо, след което го отстрани от на DOM:
 Y.one ('# демо "). Прехода ({
     облекчаване на: "лекота",
     Продължителност: 2, / / ​​сек.
     непрозрачност: 0
 }, Функция () {
     this.remove ();
 });

Аякс

SimpleYUI осигурява основните модула IO Аякс функционалност:

 / / HTTP молба да "get.php":
 Y.io ("get.php", {
     на: {
         завършена: функция (ID, отговор) {
             Var данни = response.responseText; / / данни за отговора.
             / / ...  да се справят с отговор ...
         }
     }
 });

Останалата част на Юи е само използването ()

Вие не сте ограничени до това, което идва в комплект с SimpleYUI. Вие може да донесе всяка друга Юи 3 компонент, Юи 3 Галерия модул или Юи 2 компонент с обикновена use() по всяко време.

 / / Използвайте влачите и пускате, който не е включен в кумулативен SimpleYUI:
 Y.use (DD-Drag ', функция (Y) {
     Var дд = нова Y.DD.Drag ({
         възел: "# Foo"
     });
 });

Юи 3 е добро за зареждане всичко, което имате нужда, когато имате нужда от него use() използването () и винаги сте просто един ред код, далеч от всичко, в библиотеката, от което имате нужда.

Използвайте SimpleYUI когато ...

• ... Вие искате да започнете бързо и да научат въжета от Юи;
• ... Ако искат да имат основни Аякс библиотека функционалност, налична по всяко време в живота на страницата, без да се създава нова инстанция Юи.

Да не се използват SimpleYUI когато ...

• ... Изпълнение е по-важна, отколкото удобство;
• ... Искате да пясъчника части на вашето изпълнение в отделни случаи;
• ... Искате да бъде умишлено, когато различните компоненти натоварване и какво точно модул / грим submodule на страницата.

Намери разговори: Bloglines | Technorati

Споделете и разширяване: Bookmark с del.icio.us | Digg | Reddit!