Yui (original) (raw)

YUI - JavaScript-библиотека/фреймворк для создания приложений или/и пользовательского интерфейса. Разработка этого продукта в Yahoo прекращена в 2014 году.

Введение

Чтобы просмотреть некоторые возможности YUI, лучше всего посетить страницу с примерами. Также можете посмотреть приложения в конце книги. Они дают общую картину построения приложений и интерфейсов. Так можно получить общее представление об этом фреймворке.

На странице фреймворка слева в меню «YUI Components» есть список компонентов. Все эти компоненты реализуют различные возможности по работе с данными, документами, интерфейсом и т.д.

Справа вверху можно загрузить файлы-справки по компонентам в формате PDF.

Посмотрим на компоненты внимательнее...

Обзор компонентов

Вот список компонентов YUI:

• Animation - анимация объектов
• AutoComplete - автозавершение данных по мере набора ( поиск, выбор и т.д.)
• Browser History Manager - история изменений сделанная пользователем на странице с объектами
• Button - кнопки разных типов и работа с ними
• Calendar - отображение календаря и работа с ним
• Color Picker - форма для выбора цвета
• Connection Manager - работа с данными посредством методов POST и GET
• Container - всплывающие окна и контейнеры
• DataSource
• DataTable - работа с данными в таблицах(гридах)
• Dom - работы с DOM
• Drag & Drop - перетаскивание элементов на странице
• Element - методы для работы с элементами документа
• Event - методы для работы с событиями
• ImageLoader [experimental] - загрузка изображений
• Logger - ведение логов по событиям
• Menu - различные типы и виды меню
• Rich Text Editor - текстовый редактор
• Slider - работа со слайдерами(ползунками)
• TabView - Табы
• TreeView - иерархические деревья
• Yahoo Global Object - глобальные объекты и переменные
• YUI Loader
• YUI Test - ведение статистики и логов при работе с объектами
• Reset CSS - работа со стилями
• Base CSS - работа со стилями
• Fonts CSS - работа со стилями
• Grids CSS - работа со стилями

Начало работы

1.) Начало. Содержимое загруженного архива фреймворка YUI (версия 2.3.1) распакуем в директорию /yui Создадим такую иерархию:

/yui/

/assets/ /build/ /docs/ /examples/ /tests/ Readme index.html

test.html

Файл test.html создан для тестирования работы фреймворка. Сюда надо вставлять код.

2.) Напишем в этом файле каркас для работы с фреймворком.

В дальнейшем весь код расположенный между

и

вставляйте в секцию номер "1" .

И, соответственно, в секцию номер 2 вставляйте код между

и

Ну и смотреть получившееся будем на http://localhost/test.html

Animation (Анимация)

Постепенное исчезновение объекта:

Изменение цвета объекта:

Движение объекта по траектории:

Скроллирование текста:

AutoComplete (Автозаполнение)

Автозаполнение названий штатов и их zip-кодов:

Find a state:

Find an area code

Browser History Manager (Менеджер истории)

Button (Кнопка)

Создание элеменов типа "button":

Создание элеменов меню в виде кнопки:

<fieldset id="menubuttons">
    <legend>Menu Buttons</legend>

    <fieldset id="menubuttonsfrommarkup">
        <legend>From Markup</legend>
        
        <input type="submit" id="menubutton1" name="menubutton1_button" value="Menu Button 1">
        <select id="menubutton1select" name="menubutton1select">
            <option value="0">One</option>
            <option value="1">Two</option>
            <option value="2">Three</option>                
        </select>
        <input type="button" id="menubutton3" name="menubutton3_button" value="Menu Button 3">
        <div id="menubutton3menu" class="yui-overlay">
            <div class="bd">Menu Button 3 Menu</div>
        </div>
    </fieldset>

    <fieldset id="menubuttonsfromjavascript">
        <legend>From JavaScript</legend>
    </fieldset>
    
</fieldset>

Calendar (Календарь)

Простой вывод календаря:

Color Picker (Выбор цвета)

Простая реализация выбора цвета:

Connection Manager (Менеджер соединений)

Передача скрипту данных методом GET в асинхронном режиме:

Передача скрипту данных методом POST в асинхронном режиме:

Container (Контейнер)

Создание простого tooltip (всплывающей подсказки):

Hover over me to see a Tooltip!

Hover over me to see a Tooltip!

Создание простой панели:

DataTable (Таблицы с данными)

Создание простой таблицы с данными(грид):

Dom (Работа с DOM)

Определение и установка новых координат объекта:

Нахождение элементов по их классу:

p class="bar"

Drag & Drop (функции для Drag & Drop)

Перетаскивание и изменение размеров элемента:

Event (Событие)

Простое назначение события на элемент:

ImageLoader (Загрузчик изображений)

Logger (Логи)

Простое динамическое меню:

Show Menu

Rich Text Editor (Текстовый редактор)

Текстовый редактор с переключением режимов отображения:

Change mode view of editor

Slider (Ползунок)

Движение объекта по траектории:

Pixel value: 0

Converted value:

TabView (Табы)

Движение объекта по траектории:

TreeView (Иерархические деревья)

'''Простое иерархическое дерево:'''

Yahoo Global Object (Глобальные переменные и объекты)

Глобальные переменные и объекты:

>

YUI Loader

YUI Test (Статистика и логи)

Reset CSS

Base CSS

Fonts CSS

Grids CSS

Приложение A (Построение простого приложения)

Приложение B (Построение среднего приложения)

Приложение C (Построение сложного приложения)