Yui

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.) Напишем в этом файле каркас для работы с фреймворком.

<html>
<head><title>Title</title>

<!-- это секция номер "1" для подключения файлов фреймворка -->

</head>
<body class="yui-skin-sam">

<!-- это секция номер "2" для написания кода JavaScript -->

</body>
</html>

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

<!-- 1 -->

и

<!-- 1 -->

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

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

<!-- 2 -->

и

<!-- 2 -->

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

Animation (Анимация)

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

<!-- 1 -->
<style type="text/css">
#demo {
    background:#ccc;
    margin-bottom:1em;
    overflow:hidden;
    width:200px;
}
</style>
<script type="text/javascript" src="yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="yui/build/animation/animation.js"></script>
<!-- 1 -->

<!-- 2 -->
<div id="demo">Demo</div>
<button id="demo-run">run</button>
<script type="text/javascript">
 (function() {
    var attributes = {
        width: { to: 0 }
    };
    var anim = new YAHOO.util.Anim('demo', attributes);

    YAHOO.util.Event.on('demo-run', 'click', function() {
        anim.animate();
    });
})();
</script>
<!-- 2 -->

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

<!-- 1 -->
<style type="text/css">
#demo {
    background:#ccc;
    margin-bottom:1em;
    height:100px;
    width:100px;
}
</style>
<script type="text/javascript" src="yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="yui/build/animation/animation.js"></script>
<!-- 1 -->

<!-- 2 -->
<div id="demo">Demo</div>
<button id="demo-run">run</button>
<script type="text/javascript">
(function() {
    var attributes = {
        color: { to: '#06e' },
        backgroundColor: { to: '#e06' }
    };
    var anim = new YAHOO.util.ColorAnim('demo', attributes);

    YAHOO.util.Event.on(document, 'click', function() {
        anim.animate();
    });
})();
</script>
<!-- 2 -->

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

<!-- 1 -->
<style type="text/css">
#demo {
    background:#ccc;
    margin-bottom:1em;
    height:30px;
    width:30px;
}
</style>
<script type="text/javascript" src="yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="yui/build/animation/animation.js"></script>
<!-- 1 -->

<!-- 2 -->
<div id="demo"></div>
<button id="demo-run">run</button>

<script type="text/javascript">
(function() {
    var attributes = {
        points: { to: [600, 10], control: [ [300, 100], [800, 800] ] }
    };
    var anim = new YAHOO.util.Motion('demo', attributes);

    YAHOO.util.Event.on('demo-run', 'click', function() {
        anim.animate();
    });
})();
</script>
<!-- 2 -->

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

<!-- 1 -->
<style type="text/css">
#demo {
    height:6em;
    width:20em;
    overflow:auto;
    margin-bottom:1em;
}
</style>
<script type="text/javascript" src="yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="yui/build/animation/animation.js"></script>
<!-- 1 -->

<!-- 2 -->
<style>
#demo {
    height:6em;
    width:20em;
    overflow:auto;
}
</style>
<div id="demo">
    <p>Sed pretium leo a quam. Sed placerat cursus odio. Duis varius mauris luctus enim. Sed augue. 
Vivamus malesuada pretium orci. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique 
senectus et netus et malesuada fames ac turpis egestas. Praesent et ante. Praesent convallis. 
Pellentesque sit amet leo. Ut convallis. Curabitur tincidunt, ipsum facilisis ultricies bibendum, 
eros dolor venenatis odio, id rutrum purus sem ac sem. Donec vel enim. Quisque purus. 
Vivamus fringilla, nibh sit amet blandit suscipit, dui arcu viverra magna, 
id consectetuer dui orci tincidunt neque. Morbi eget libero. Phasellus tempor. 
Duis dapibus. Pellentesque nisi arcu, mollis in, euismod non, fermentum sit amet, neque.</p>
</div>
<button id="demo-run">run</button>

<script>
(function() {
    var attributes = {
        scroll: { to: [0, 200] }
    };
    var anim = new YAHOO.util.Scroll('demo', attributes);

    YAHOO.util.Event.on('demo-run', 'click', function() {
        anim.animate();
    });
})();
</script>
<!-- 2 -->

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

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

<!-- 1 -->
<style type="text/css">
#statesautocomplete,
#statesautocomplete2 {
    width:15em; 
    padding-bottom:2em;
}
#statesautocomplete {
    z-index:9000; 
}
#statesinput,
#statesinput2 {
    _position:absolute; 
}
</style>
<link rel="stylesheet" type="text/css" href="yui/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="yui/build/autocomplete/assets/skins/sam/autocomplete.css" />
<script type="text/javascript" src="yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="yui/build/animation/animation.js"></script>
<script type="text/javascript" src="yui/build/autocomplete/autocomplete.js"></script>
<!-- 1 -->

<!-- 2 -->
<h3>Find a state:</h3>
<div id="statesautocomplete">
	<input id="statesinput" type="text">
	<div id="statescontainer"></div>
</div>
<h3>Find an area code</h3>
<div id="statesautocomplete2">
	<input id="statesinput2" type="text">
	<div id="statescontainer2"></div>
</div>
<script type="text/javascript">
// массив для автозаполнения названия штатов
YAHOO.example.statesArray = [
    "Alabama",
    "Alaska",
    "Arizona",
    "Arkansas",
    "California",
    "Colorado",
    "Connecticut",
    "Delaware",
    "Florida",
    "Georgia",
    "Hawaii",
    "Idaho",
    "Illinois",
    "Indiana"    
];
// массив для автозаполнения zip-кодов штатов
YAHOO.example.areacodesArray = [
    ["201", "New Jersey"],
    ["202", "Washington, DC"],
    ["203", "Connecticut"],
    ["204", "Manitoba, Canada"],
    ["205", "Alabama"],
    ["206", "Washington"],
    ["207", "Maine"],
    ["208", "Idaho"],
    ["209", "California"],
    ["210", "Texas"],
    ["212", "New York"],
    ["213", "California"],
    ["214", "Texas"]
];

YAHOO.example.ACJSArray = new function() {
    // реализация первой секции для автозаполнения
    this.oACDS = new YAHOO.widget.DS_JSArray(YAHOO.example.statesArray);

    this.oAutoComp = new YAHOO.widget.AutoComplete('statesinput','statescontainer', this.oACDS);
    this.oAutoComp.prehighlightClassName = "yui-ac-prehighlight";
    this.oAutoComp.typeAhead = true;
    this.oAutoComp.useShadow = true;
    this.oAutoComp.minQueryLength = 0;
    this.oAutoComp.textboxFocusEvent.subscribe(function(){
        var sInputValue = YAHOO.util.Dom.get('statesinput').value;
        if(sInputValue.length === 0) {
            var oSelf = this;
            setTimeout(function(){oSelf.sendQuery(sInputValue);},0);
        }
    });
    // реализация второй секции для автозаполнения
    this.oACDS2 = new YAHOO.widget.DS_JSArray(YAHOO.example.areacodesArray);

    this.oAutoComp2 = new YAHOO.widget.AutoComplete('statesinput2','statescontainer2', this.oACDS2);
    this.oAutoComp2.prehighlightClassName = "yui-ac-prehighlight";
    this.oAutoComp2.typeAhead = true;
    this.oAutoComp2.useShadow = true;
    this.oAutoComp2.forceSelection = true;
    this.oAutoComp2.formatResult = function(oResultItem, sQuery) {
        var sMarkup = oResultItem[0] + " (" + oResultItem[1] + ")";
        return (sMarkup);
    };
};
</script>
<!-- 2 -->

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

Button (Кнопка)

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

<!-- 1 -->
<link rel="stylesheet" type="text/css" href="yui/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="yui/build/button/assets/skins/sam/button.css" />
<script type="text/javascript" src="yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="yui/build/element/element-beta.js"></script>
<script type="text/javascript" src="yui/build/button/button-beta.js"></script>

<!-- 1 -->

<!-- 2 -->
<script type="text/javascript">

    YAHOO.example.init = function () {
        function onButtonClick(p_oEvent) {
           alert("click!");
        }
        // Статическое создание кнопок с использованием существующих элементов в элементе с id="pushbuttonsfrommarkup" 
        YAHOO.util.Event.onContentReady("pushbuttonsfrommarkup", function () {
            
            var oPushButton1 = new YAHOO.widget.Button("pushbutton1");
            oPushButton1.on("click", onButtonClick);// вызов ф-ии onButtonClick при событии "click" на кнопке
            var oPushButton2 = new YAHOO.widget.Button("pushbutton2", { onclick: { fn: onButtonClick } });// вызов ф-ии onButtonClick при клике на кнопке 
            var oPushButton3 = new YAHOO.widget.Button("pushbutton3", { onclick: { fn: onButtonClick } });
        });
        // Динамическое создание кнопок с использованием javascript в элементе с id="pushbuttonsfromjavascript"
        var oPushButton7 = new YAHOO.widget.Button({ label:"Add", id:"pushbutton7", container:"pushbuttonsfromjavascript" }); 
        oPushButton7.on("click", onButtonClick); // вызов ф-ии onButtonClick при событии "click" на кнопке
        var oPushButton8 = new YAHOO.widget.Button({ label:"Add", id:"pushbutton8", container:"pushbuttonsfromjavascript", onclick: { fn: onButtonClick } });
        // вызов ф-ии onButtonClick при клике на кнопке 

    } ();

</script>
<form id="button-example-form" name="button-example-form" method="post" action="#">
    <fieldset id="pushbuttons">
        <legend>Push Buttons</legend>
        <fieldset id="pushbuttonsfrommarkup">
            <legend>From Markup</legend>
            <div>
                <button type="button" id="pushbutton1" name="button1" value="Add">Add</button>
                <input type="button" id="pushbutton2" name="button2" value="Add">
                <input type="button" id="pushbutton3" name="button3" value="Add">
            </div>
        </fieldset>
        <fieldset id="pushbuttonsfromjavascript">
            <legend>From JavaScript</legend>
        </fieldset>
    </fieldset>
</form>
<!-- 2 -->

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

<!-- 1 -->
<link rel="stylesheet" type="text/css" href="yui/build/fonts/fonts-min.css1" />
<link rel="stylesheet" type="text/css" href="yui/build/menu/assets/skins/sam/menu.css" />
<link rel="stylesheet" type="text/css" href="yui/build/button/assets/skins/sam/button.css" />
<script type="text/javascript" src="yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="yui/build/container/container_core.js"></script>
<script type="text/javascript" src="yui/build/menu/menu.js"></script>
<script type="text/javascript" src="yui/build/element/element-beta.js"></script>
<script type="text/javascript" src="yui/build/button/button-beta.js"></script>
<style type="text/css">
    #button-example-form fieldset {
        border: 2px groove #ccc;
        margin: .5em;
        padding: .5em;
    }
    #menubutton3menu,
    #menubutton5menu {
        position: absolute;
        visibility: hidden;
        border: solid 1px #000;
        padding: .5em;
        background-color: #ccc;
    }
    #button-example-form-postdata {
        border: dashed 1px #666;
        background-color: #ccc;
        padding: 1em;
    }
    #button-example-form-postdata h2 {
        margin: 0 0 .5em 0;
        padding: 0;
        border: none;
    }
</style>

<!-- 1 -->

<!-- 2 -->
<script type="text/javascript">

    YAHOO.example.init = function () {
        // Статическое создание кнопок с использованием существующих элементов в элементе с id="menubuttonsfrommarkup" 
        YAHOO.util.Event.onContentReady("menubuttonsfrommarkup", function () {
            var oMenuButton1 = new YAHOO.widget.Button("menubutton1", { type: "menu", menu: "menubutton1select" });
            var oMenuButton3 = new YAHOO.widget.Button("menubutton3", { type: "menu", menu: "menubutton3menu" });
        });// при загрузке страницы вызывается эта ф-я
        
        function onMenuItemClick(p_sType, p_aArgs, p_oItem) {
            oMenuButton4.set("label", p_oItem.cfg.getProperty("text"));
        }
       // Динамическое создание кнопок с использованием javascript в элементе с id="menubuttonsfromjavascript"
        var aMenuButton4Menu = [

            { text: "one", value: 1, onclick: { fn: onMenuItemClick } }, //вызов ф-ии onMenuItemClick при событии "onclick" на элементе меню
            { text: "two", value: 2, onclick: { fn: onMenuItemClick } },
            { text: "three", value: 3, onclick: { fn: onMenuItemClick } }
        
        ];
        var oMenuButton4 = new YAHOO.widget.Button(
		{ type: "menu", label: "one", name: "mymenubutton", menu: aMenuButton4Menu, container: "menubuttonsfromjavascript" }
		); 
        YAHOO.util.Event.onContentReady("menubuttonsfromjavascript", function () {
            var oOverlay = new YAHOO.widget.Overlay("menubutton5menu", { visible: false });
            oOverlay.setBody("Menu Button 5 Menu");
            var oMenuButton5 = new YAHOO.widget.Button({ type: "menu", label: "Menu Button 5", menu: oOverlay });
            oMenuButton5.appendTo(this);
            oOverlay.render(this);
        });// при загрузке страницы вызывается эта ф-я
        function onExampleSubmit(p_oEvent) {
            var bSubmit = window.confirm("Are you sure you want to submit this form?");
            if(!bSubmit) {
                YAHOO.util.Event.preventDefault(p_oEvent);
            }
        }
        YAHOO.util.Event.on("button-example-form", "submit", onExampleSubmit);
		// если произойдет событие "submit" в форме с id="button-example-form", то нужно вызвать ф-ию onExampleSubmit
    } ();

</script>
<form id="button-example-form" name="button-example-form" method="post" action="#">

    <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>

</form>
<!-- 2 -->

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

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

<!-- 1 -->
<link rel="stylesheet" type="text/css" href="yui/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="yui/build/calendar/assets/skins/sam/calendar.css" />
<script type="text/javascript" src="yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="yui/build/calendar/calendar.js"></script>
<!-- 1 -->

<!-- 2 -->
<div id="cal1Container"></div>
<script type="text/javascript">
	YAHOO.namespace("example.calendar");

	YAHOO.example.calendar.init = function() {
		YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar("cal1","cal1Container");
		YAHOO.example.calendar.cal1.render();
	}

	YAHOO.util.Event.onDOMReady(YAHOO.example.calendar.init);
</script>

<div style="clear:both" ></div>
<!-- 2 -->

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

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

<!-- 1 -->
<link rel="stylesheet" type="text/css" href="yui/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="yui/build/colorpicker/assets/skins/sam/colorpicker.css" />
<script type="text/javascript" src="yui/build/utilities/utilities.js"></script>
<script type="text/javascript" src="yui/build/slider/slider.js"></script>
<script type="text/javascript" src="yui/build/colorpicker/colorpicker-beta.js"></script>
<style type="text/css">
  #container { position: relative; padding: 6px; background-color: #eeeeee; width: 420px; height:220px; }
</style>
<!-- 1 -->

<!-- 2 -->
<div id="container">
</div>
<button id="reset">Reset Color to White</button>

<script type="text/javascript">
(function() {
    var Event = YAHOO.util.Event,
        picker;
 
    Event.onDOMReady(function() { // При загрузке всего дерева DOM вызвать эту ф-ю
			
            picker = new YAHOO.widget.ColorPicker("container", {
                    showhsvcontrols: true,
                    showhexcontrols: true,
					images: {
						PICKER_THUMB: "yui/examples/colorpicker/assets/picker_thumb.png",
						HUE_THUMB: "yui/examples/colorpicker/assets/hue_thumb.png"
                                                // файлы рисунков для указателей при выборе цвета
    				}
                });

			var onRgbChange = function(o) {
								
			}
			picker.on("rgbChange", onRgbChange); // вызываем функцию onRgbChange по событию "rgbChange" 
			
			//вызов ф-ии для установки цвета в белый по событию "click" на элементе с id="reset"
			Event.on("reset", "click", function(e) {
				picker.setValue([255, 255, 255], false); //false here means that rgbChange
													 
			});

        });
})();
</script>
<!-- 2 -->

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

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

<!-- 1 -->
<link rel="stylesheet" type="text/css" href="yui/build/fonts/fonts-min.css" />
<script type="text/javascript" src="yui/build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="yui/build/event/event.js"></script>
<script type="text/javascript" src="yui/build/connection/connection.js"></script>
<!-- 1 -->

<!-- 2 -->
<div id="container"></div>

<script>
var div = document.getElementById('container');

var handleSuccess = function(o){

	if(o.responseText !== undefined){
		div.innerHTML = "<li>Transaction id: " + o.tId + "</li>";
		div.innerHTML += "<li>HTTP status: " + o.status + "</li>";
		div.innerHTML += "<li>Status code message: " + o.statusText + "</li>";
		div.innerHTML += "<li>HTTP headers: <ul>" + o.getAllResponseHeaders + "</ul></li>";
		div.innerHTML += "<li>Server response: " + o.responseText + "</li>";
		div.innerHTML += "<li>Argument object: Object ( [foo] => " + o.argument.foo +
						 " [bar] => " + o.argument.bar +" )</li>";
	}
}// ф-я обрабатывающая возвращенный результат. Выводит информацию в элемент с id="container"

var handleFailure = function(o){
	if(o.responseText !== undefined){
		div.innerHTML = "<ul><li>Transaction id: " + o.tId + "</li>";
		div.innerHTML += "<li>HTTP status: " + o.status + "</li>";
		div.innerHTML += "<li>Status code message: " + o.statusText + "</li></ul>";
	}
}

var callback =
{
  success:handleSuccess, // вызвов ф-ии при положительном результате возвращаемых значений
  failure:handleFailure, // вызвов ф-ии при ошибке
  argument: { foo:"foo", bar:"bar" }
};// ф-я обрабатывающая возвращенный скриптом get.php результат

var sUrl = "yui/examples/connection/assets/get.php?username=anonymous&userid=0"; 
//параметры для скрипта get.php передаваемые методом GET

function makeRequest(){
	var request = YAHOO.util.Connect.asyncRequest('GET', sUrl, callback);
} //ф-я отправляющая данные скрипту get.php 

</script>
<form><input type="button" value="Send a GET Request" onClick="makeRequest();"></form>
<!-- 2 -->

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

<!-- 1 -->
<link rel="stylesheet" type="text/css" href="yui/build/fonts/fonts-min.css" />
<script type="text/javascript" src="yui/build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="yui/build/event/event.js"></script>
<script type="text/javascript" src="yui/build/connection/connection.js"></script>
<!-- 1 -->

<!-- 2 -->
<div id="container"></div>

<script>
var div = document.getElementById('container');

var handleSuccess = function(o){
	
	if(o.responseText !== undefined){
		div.innerHTML = "<li>Transaction id: " + o.tId + "</li>";
		div.innerHTML += "<li>HTTP status: " + o.status + "</li>";
		div.innerHTML += "<li>Status code message: " + o.statusText + "</li>";
		div.innerHTML += "<li>HTTP headers received: <ul>" + o.getAllResponseHeaders + "</ul></li>";
		div.innerHTML += "<li>PHP response: " + o.responseText + "</li>";
		div.innerHTML += "<li>Argument object: Array ([0] => " + o.argument[0] +
						 " [1] => " + o.argument[1] + " )</li>";
	}
};

var handleFailure = function(o){
		YAHOO.log("The failure handler was called. tId: " + o.tId + ".", "info", "example");

	if(o.responseText !== undefined){
		div.innerHTML = "<li>Transaction id: " + o.tId + "</li>";
		div.innerHTML += "<li>HTTP status: " + o.status + "</li>";
		div.innerHTML += "<li>Status code message: " + o.statusText + "</li>";
	}
};

var callback =
{
  success:handleSuccess,
  failure:handleFailure,
  argument:['foo','bar']
};

var sUrl = "yui/examples/connection/assets/post.php";
var postData = "username=anonymous&userid=0";

function makeRequest(){

	var request = YAHOO.util.Connect.asyncRequest('POST', sUrl, callback, postData);
	
}
</script>
<form><input type="button" value="Send a POST Request" onClick="makeRequest();"></form>
<!-- 2 -->

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

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

<!-- 1 -->
<link rel="stylesheet" type="text/css" href="yui/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="yui/build/container/assets/skins/sam/container.css" />
<script type="text/javascript" src="yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="yui/build/container/container.js"></script>
<style>
	#tool { background:orange;width:100px;height:100px; }
</style>
<!-- 1 -->

<!-- 2 -->

<p id="tool">Hover over me to see a Tooltip!</p>

<p><a id="link" href="http://www.yahoo.com/" title="Second tooltip for link">Hover over me to see a Tooltip!</a></p>

<script type="text/javascript">
	YAHOO.namespace("example.container");
	YAHOO.example.container.tt1 = new YAHOO.widget.Tooltip("tt1", { context:"tool", text:"First tooltip for element id='tool'" });
//динамическое назначение подсказки	
	YAHOO.example.container.tt2 = new YAHOO.widget.Tooltip("tt2", { context:"link" });
// подсказка взятая из 'title'
</script>
<!-- 2 -->

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

<!-- 1 -->
<link rel="stylesheet" type="text/css" href="yui/build/container/assets/container.css" />
<link rel="stylesheet" type="text/css" href="yui/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="yui/build/container/assets/skins/sam/container.css" />
<script type="text/javascript" src="yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="yui/build/dragdrop/dragdrop.js"></script>
<script type="text/javascript" src="yui/build/container/container.js"></script>
<!-- 1 -->

<!-- 2 -->
<div id="container"></div>
<script>
YAHOO.namespace("example.container");

function init() {
// статическое создание панели
YAHOO.example.container.panel1 = new YAHOO.widget.Panel("panel1", { width:"300px", visible:false, constraintoviewport:true } );
YAHOO.example.container.panel1.render();
// динамическое создание панели
YAHOO.example.container.panel2 = new YAHOO.widget.Panel("panel2", { width:"300px", visible:false, constraintoviewport:true } );
YAHOO.example.container.panel2.setHeader("<div class='tl'></div><span>Panel #2 from Script</span><div class='tr'></div>");
YAHOO.example.container.panel2.setBody("This is a dynamically generated Panel.");
YAHOO.example.container.panel2.setFooter("<span>End of Panel #2</span>");
YAHOO.example.container.panel2.render("container");

YAHOO.util.Event.addListener("show1", "click", YAHOO.example.container.panel1.show, YAHOO.example.container.panel1, true);
YAHOO.util.Event.addListener("hide1", "click", YAHOO.example.container.panel1.hide, YAHOO.example.container.panel1, true);
//назначение вызовов ф-ий для событий над элементами для статически созданной панели
YAHOO.util.Event.addListener("show2", "click", YAHOO.example.container.panel2.show, YAHOO.example.container.panel2, true);
YAHOO.util.Event.addListener("hide2", "click", YAHOO.example.container.panel2.hide, YAHOO.example.container.panel2, true);
//назначение вызовов ф-ий для событий над элементами для динамически созданной панели
}

YAHOO.util.Event.addListener(window, "load", init);
</script>

<div>
	<button id="show1">Show panel1</button>
	<button id="hide1">Hide panel1</button>
</div>

<div id="panel1">
	<div class="hd"><div class="tl"></div><span>Panel #1 from Markup</span><div class="tr"></div></div>
	<div class="bd">This is a Panel that was marked up in the document.</div>
	<div class="ft"><div class="bl"></div><span>End of Panel #1</span><div class="br"></div></div>
</div>

<div>
	<button id="show2">Show panel2</button>
	<button id="hide2">Hide panel2</button>
</div>
<!-- 2 -->

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

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

<!-- 1 -->
<link rel="stylesheet" type="text/css" href="yui/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="yui/build/datatable/assets/skins/sam/datatable.css" />
<script type="text/javascript" src="yui/build/utilities/utilities.js"></script>
<script type="text/javascript" src="yui/build/datasource/datasource-beta.js"></script>
<script type="text/javascript" src="yui/build/datatable/datatable-beta.js"></script>
<!-- 1 -->

<!-- 2 -->
<div id="basic"></div>
<script type="text/javascript">

YAHOO.example.Data = {
    bookorders: [
        {id:"po-0167", date:new Date(1980, 2, 24), quantity:1, amount:4, title:"A Book About Nothing"},
        {id:"po-0783", date:new Date("January 3, 1983"), quantity:null, amount:12.12345, title:"The Meaning of Life"},
        {id:"po-0297", date:new Date(1978, 11, 12), quantity:12, amount:1.25, title:"This Book Was Meant to Be Read Aloud"},
        {id:"po-1482", date:new Date("March 11, 1985"), quantity:6, amount:3.5, title:"Read Me Twice"}
    ]
}
YAHOO.util.Event.addListener(window, "load", function() {
    YAHOO.example.Basic = new function() {
        var myColumnDefs = [
            {key:"id", sortable:true, resizeable:true},
            {key:"date", formatter:YAHOO.widget.DataTable.formatDate, sortable:true, resizeable:true},
            {key:"quantity", formatter:YAHOO.widget.DataTable.formatNumber, sortable:true, resizeable:true},
            {key:"amount", formatter:YAHOO.widget.DataTable.formatCurrency, sortable:true, resizeable:true},
            {key:"title", sortable:true, resizeable:true}
        ];

        this.myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.bookorders);
        this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
        this.myDataSource.responseSchema = {
            fields: ["id","date","quantity","amount","title"]
        };

        this.myDataTable = new YAHOO.widget.DataTable("basic",
                myColumnDefs, this.myDataSource, {caption:"DataTable Caption"});
    };
});
</script>
<!-- 2 -->

Dom (Работа с DOM)

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

<!-- 1 -->
<link rel="stylesheet" type="text/css" href="yui/build/fonts/fonts-min.css" />
<script type="text/javascript" src="yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<style type="text/css">
#demo {
    background-color:#00f;
    height:10px;
    width:10px;
    margin-bottom:1em;
}
</style>
<!-- 1 -->

<!-- 2 -->
<style type="text/css">
#foo {width:10px; height:10px;background-color:#00f;}
</style>

<div id="foo"></div>

<script>
(function() {
    var move = function(e) {
        YAHOO.util.Dom.setXY('foo', YAHOO.util.Event.getXY(e));
    };

    YAHOO.util.Event.on(document, "click", move);

})();

</script>
<!-- 2 -->

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

<!-- 1 -->
<link rel="stylesheet" type="text/css" href="yui/build/fonts/fonts-min.css" />
<script type="text/javascript" src="yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<style type="text/css">
#foo {
    margin-bottom:1em;
}
</style>
<!-- 1 -->

<!-- 2 -->
<div class="bar">div class="bar"</div>
<div class="bar-baz">div class="bar-baz"</div>
<div class="bar ">div class="bar "</div>
<div class=" bar ">div class=" bar "</div>
<div class="bar baz">div class=" bar baz"</div>
<div class="bar2 baz">div class=" bar2 baz"</div>
<div class="foo">div class="foo"</div>
<div class="foo" id="bar">div class="foo" id="bar"</div>
<div class="foo bar baz">div class="foo bar baz"</div>
<p class="bar">p class="bar"</p>
<button id="demo-run">run</button>

<script type="text/javascript">
(function() {
    var getByClass = function(e) {
        alert('found: ' + YAHOO.util.Dom.getElementsByClassName('bar', 'div').length + ' elements');
    };
    YAHOO.util.Event.on('demo-run', 'click', getByClass);
})();
</script>
<!-- 2 -->

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

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

<!-- 1 -->
<link rel="stylesheet" type="text/css" href="yui/build/fonts/fonts-min.css" />
<script type="text/javascript" src="yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="yui/build/dragdrop/dragdrop.js"></script>
<style type="text/css">
    #dd-panel {
        position: relative; 
        height: 200px; 
        width: 150px;
        top: 0px; 
        left: 20px; 
        border: 1px solid #333333;
        background-color: #f7f7f7;
    }

    #dd-resize-handle {
        cursor: se-resize;
        position: absolute; 
        bottom: 0px; 
        right: 0px; 
        width: 10px; 
        height: 10px;
        background-color: blue;
        font-size: 1px;
    }
</style>

<!-- 1 -->

<!-- 2 -->
<div id="dd-panel">
    <div id="dd-resize-handle"></div>
</div>

<script type="text/javascript">

YAHOO.example.DDResize = function(panelElId, handleElId, sGroup, config) {
    YAHOO.example.DDResize.superclass.constructor.apply(this, arguments);
    if (handleElId) {
        this.setHandleElId(handleElId);
    }
};

YAHOO.extend(YAHOO.example.DDResize, YAHOO.util.DragDrop, {

    onMouseDown: function(e) {
        var panel = this.getEl();
        this.startWidth = panel.offsetWidth;
        this.startHeight = panel.offsetHeight;

        this.startPos = [YAHOO.util.Event.getPageX(e),
                         YAHOO.util.Event.getPageY(e)];
    },

    onDrag: function(e) {
        var newPos = [YAHOO.util.Event.getPageX(e),
                      YAHOO.util.Event.getPageY(e)];

        var offsetX = newPos[0] - this.startPos[0];
        var offsetY = newPos[1] - this.startPos[1];

        var newWidth = Math.max(this.startWidth + offsetX, 10);
        var newHeight = Math.max(this.startHeight + offsetY, 10);

        var panel = this.getEl();
        panel.style.width = newWidth + "px";
        panel.style.height = newHeight + "px";
    }
});

(function() {
    var dd, dd2, dd3;
    YAHOO.util.Event.onDOMReady(function() {
        dd = new YAHOO.example.DDResize("dd-panel", "dd-resize-handle", "panelresize"); 
        dd2 = new YAHOO.util.DD("dd-panel", "paneldrag");

        dd2.addInvalidHandleId("dd-resize-handle"); 
    });
})();
</script>
<!-- 2 -->

Event (Событие)

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

<!-- 1 -->
<script type="text/javascript" src="yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<!-- 1 -->

<!-- 2 -->
<script>

(function() {
var helloWorld = function(e) {
    alert("This click on element!");
}

YAHOO.util.Event.addListener("container", "click", helloWorld);// При событии "click" на элементе с id="container" вызвать ф-ю helloWorld 

})();
</script>

<style>
#container {background-color:#00CCFF; border:1px dotted black; padding:1em; cursor:pointer;}
</style>
<div id="container">
<p>Click for Hello World alert.</p>
</div>
<!-- 2 -->

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

<script type="text/javascript">

</script>

Logger (Логи)

<script type="text/javascript">

</script>

Menu (Меню)

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

<!-- 1 -->
<link rel="stylesheet" type="text/css" href="yui/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="yui/build/menu/assets/skins/sam/menu.css" />
<script type="text/javascript" src="yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="yui/build/container/container_core.js"></script>
<script type="text/javascript" src="yui/build/menu/menu.js"></script>
<!-- 1 -->

<!-- 2 -->
<script type="text/javascript">
   
    YAHOO.util.Event.onDOMReady(function () {
        var oMenu = new YAHOO.widget.Menu("menuwithgroups", { fixedcenter: true });

        oMenu.addItems([

            [
                { text: "Yahoo! Mail", url: "http://mail.yahoo.com" },
                { text: "Yahoo! Address Book", url: "http://addressbook.yahoo.com" },
                { text: "Yahoo! Calendar", url: "http://calendar.yahoo.com" },
                { text: "Yahoo! Notepad", url: "http://notepad.yahoo.com" }
            ],

            [

                { text: "Yahoo! Local", url: "http://local.yahoo.com" },
                { text: "Yahoo! Maps", url: "http://maps.yahoo.com" },
                { text: "Yahoo! Travel", url: "http://travel.yahoo.com" },
                { text: "Yahoo! Shopping", url: "http://shopping.yahoo.com" } 
            
            ],

            [

                { text: "Yahoo! Messenger", url: "http://messenger.yahoo.com" },
                { text: "Yahoo! 360", url: "http://360.yahoo.com" },
                { text: "Yahoo! Groups", url: "http://groups.yahoo.com" },
                { text: "Yahoo! Photos", url: "http://photos.yahoo.com" }
            
            ]
        
        ]);

        oMenu.showEvent.subscribe(function () {

            this.focus();
        
        });
        oMenu.render("rendertarget");
        YAHOO.util.Event.addListener("menutoggle", "click", oMenu.show, null, oMenu);
    });
    
</script>

<button id="menutoggle" type="button">Show Menu</button>
<div id="rendertarget"></div>
<!-- 2 -->

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

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

<!-- 1 -->
<link rel="stylesheet" type="text/css" href="yui/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="yui/build/container/assets/skins/sam/container.css" />
<link rel="stylesheet" type="text/css" href="yui/build/menu/assets/skins/sam/menu.css" />
<link rel="stylesheet" type="text/css" href="yui/build/button/assets/skins/sam/button.css" />
<link rel="stylesheet" type="text/css" href="yui/build/editor/assets/skins/sam/editor.css" />
<script type="text/javascript" src="yui/build/utilities/utilities.js"></script>
<script type="text/javascript" src="yui/build/container/container.js"></script>
<script type="text/javascript" src="yui/build/menu/menu.js"></script>
<script type="text/javascript" src="yui/build/button/button-beta.js"></script>
<script type="text/javascript" src="yui/build/editor/editor-beta.js"></script>
<!-- 1 -->

<!-- 2 -->
<style>
    #toggleEditor {
        margin: 1em;
    }
</style>
<button type="button" id="toggleEditor">Change mode view of editor</button><br />
<form method="post" action="#" id="form1">
<textarea id="editor" name="editor" rows="20" cols="75">
This is some more test text.<br />This is some more test text.<br />
This is some more test text.<br />This is some more test text.<br />
</textarea>
</form>

<script>

(function() {
    var Dom = YAHOO.util.Dom,
        Event = YAHOO.util.Event;
    
    YAHOO.log('Create Button Control (#toggleEditor)', 'info', 'example');
    var _button = new YAHOO.widget.Button('toggleEditor');
    _button.addClass('toggleEditor');

    var myConfig = {
        height: '300px',
        width: '530px',
        animate: true,
        dompath: true,
        focusAtStart: true
    };

    var state = 'on';
    YAHOO.log('Set state to on..', 'info', 'example');

    YAHOO.log('Create the Editor..', 'info', 'example');
    var myEditor = new YAHOO.widget.Editor('editor', myConfig);
    myEditor.render();

    _button.on('click', function(ev) {
        Event.stopEvent(ev);
        if (state == 'on') {
            YAHOO.log('state is on, so turn off', 'info', 'example');
            state = 'off';
            myEditor.saveHTML();
            YAHOO.log('Save the Editors HTML', 'info', 'example');
            var stripHTML = /<\S[^><]*>/g;
            myEditor.get('textarea').value = myEditor.get('textarea').value.replace(/<br />/gi, '\n').replace(stripHTML, '');
            YAHOO.log('Strip the HTML markup from the string.', 'info', 'example');
            YAHOO.log('Set Editor container to position: absolute, top: -9999px, left: -9999px. Set textarea visible', 'info', 'example');
            Dom.setStyle(myEditor.get('element_cont').get('firstChild'), 'position', 'absolute');
            Dom.setStyle(myEditor.get('element_cont').get('firstChild'), 'top', '-9999px');
            Dom.setStyle(myEditor.get('element_cont').get('firstChild'), 'left', '-9999px');
            myEditor.get('element_cont').removeClass('yui-editor-container');
            Dom.setStyle(myEditor.get('element'), 'visibility', 'visible');
            Dom.setStyle(myEditor.get('element'), 'top', '');
            Dom.setStyle(myEditor.get('element'), 'left', '');
            Dom.setStyle(myEditor.get('element'), 'position', 'static');
        } else {
            YAHOO.log('state is off, so turn on', 'info', 'example');
            state = 'on';
            YAHOO.log('Set Editor container to position: static, top: 0, left: 0. Set textarea to hidden', 'info', 'example');
            Dom.setStyle(myEditor.get('element_cont').get('firstChild'), 'position', 'static');
            Dom.setStyle(myEditor.get('element_cont').get('firstChild'), 'top', '0');
            Dom.setStyle(myEditor.get('element_cont').get('firstChild'), 'left', '0');
            Dom.setStyle(myEditor.get('element'), 'visibility', 'hidden');
            Dom.setStyle(myEditor.get('element'), 'top', '-9999px');
            Dom.setStyle(myEditor.get('element'), 'left', '-9999px');
            Dom.setStyle(myEditor.get('element'), 'position', 'absolute');
            myEditor.get('element_cont').addClass('yui-editor-container');
            YAHOO.log('Reset designMode on the Editor', 'info', 'example');
            myEditor._setDesignMode('on');
            YAHOO.log('Inject the HTML from the textarea into the editor', 'info', 'example');
            myEditor.setEditorHTML(myEditor.get('textarea').value.replace(/\n/g, '<br />'));
        }
    });
})();
</script>
<!-- 2 -->

Slider (Ползунок)

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

<!-- 1 -->
<link rel="stylesheet" type="text/css" href="yui/build/fonts/fonts-min.css" />
<script type="text/javascript" src="yui/build/utilities/utilities.js"></script>
<script type="text/javascript" src="yui/build/slider/slider.js"></script>
<!-- 1 -->

<!-- 2 -->
<style type="text/css">

    #slider-bg {
        position: relative;
        background:url(yui/examples/slider/assets/bg-v.gif) 12px 0 no-repeat;
        height:228px;
        width:48px; 
    }

    #slider-thumb {
        cursor:default;
        position: absolute;
    }
</style>
<div id="slider-bg" tabindex="-1" title="Slider">
    <div id="slider-thumb"><img src="yui/examples/slider/assets/thumb-bar.gif"></div>
</div>

<p>Pixel value: <span id="slider-value">0</span></p>

<p>Converted value:
<input autocomplete="off" id="slider-converted-value" type="text" value="0" size="4" maxlength="4" />
</p>
<script type="text/javascript">
(function() {
    var Event = YAHOO.util.Event,
        Dom   = YAHOO.util.Dom,
        lang  = YAHOO.lang,
        slider, 
        bg="slider-bg", thumb="slider-thumb", 
        valuearea="slider-value", textfield="slider-converted-value"

    var topConstraint = 0;

    var bottomConstraint = 200;

    var scaleFactor = 1.5;

    var keyIncrement = 20;

    Event.onDOMReady(function() {

        slider = YAHOO.widget.Slider.getVertSlider(bg, 
                         thumb, topConstraint, bottomConstraint);

        slider.getRealValue = function() {
            return Math.round(this.getValue() * scaleFactor);
        }

        slider.subscribe("change", function(offsetFromStart) {

            var valnode = Dom.get(valuearea);
            var fld = Dom.get(textfield);

            valnode.innerHTML = offsetFromStart;

            var actualValue = slider.getRealValue();

            fld.value = actualValue;

            Dom.get(bg).title = "slider value = " + actualValue;

        });

        slider.subscribe("slideStart", function() {
                YAHOO.log("slideStart fired", "warn");
            });

        slider.subscribe("slideEnd", function() {
                YAHOO.log("slideEnd fired", "warn");
            });

        slider.setValue(20);

        
        Event.on(textfield, "keydown", function(e) {

            
            if (Event.getCharCode(e) === 13) {
                var v = parseFloat(this.value, 10);
                v = (lang.isNumber(v)) ? v : 0;
               
                slider.setValue(Math.round(v/scaleFactor));
            }
        });
        
       
        Event.on("putval", "click", function(e) {
            slider.setValue(100, false); 
        });
                
        Event.on("getval", "click", function(e) {
            YAHOO.log("Current value: "   + slider.getValue() + "\n" + 
                      "Converted value: " + slider.getRealValue(), "info", "example"); 
        });
    });
})();
</script>
<!-- 2 -->

TabView (Табы)

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

<!-- 1 -->
<link rel="stylesheet" type="text/css" href="yui/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="yui/build/tabview/assets/skins/sam/tabview.css" />
<script type="text/javascript" src="yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="yui/build/element/element-beta.js"></script>
<script type="text/javascript" src="yui/build/tabview/tabview.js"></script>
<!-- 1 -->

<!-- 2 -->
<div id="container"></div>
<script type="text/javascript">
(function() {
    var tabView = new YAHOO.widget.TabView();

    tabView.addTab( new YAHOO.widget.Tab({
        label: 'One Tab',
        content: 'Content of One Tab', // содержание таба должно быть только в одной строке ! 
        active: true
    }));

    tabView.addTab( new YAHOO.widget.Tab({
        label: 'Two tab',
        content: 'Content of Two Tab'

    }));

    tabView.addTab( new YAHOO.widget.Tab({
        label: 'Three Tab',
        content: 'Content of Three Tab'

    }));
   

    tabView.appendTo('container');
})();
</script>
<!-- 2 -->

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

'''Простое иерархическое дерево:'''
<syntaxhighlight lang="javascript">
<!-- 1 -->
<link rel="stylesheet" type="text/css" href="yui/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="yui/build/treeview/assets/skins/sam/treeview.css" />
<script type="text/javascript" src="yui/build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="yui/build/event/event.js"></script>
<script type="text/javascript" src="yui/build/treeview/treeview.js"></script>

<style>
    #treeDiv1 {background: #fff; padding:1em;}
</style>
<!-- 1 -->

<!-- 2 -->
<div id="treeDiv1"></div>

<script type="text/javascript">

var tree;

(function() {


    function treeInit() {
        buildRandomTextNodeTree();
    }

    function buildRandomTextNodeTree() {
	
        tree = new YAHOO.widget.TreeView("treeDiv1");

        for (var i = 0; i < Math.floor((Math.random()*4) + 3); i++) {
            var tmpNode = new YAHOO.widget.TextNode("label-" + i, tree.getRoot(), false);

            buildLargeBranch(tmpNode);
        }

       tree.subscribe("expand", function(node) {
              YAHOO.log(node.index + " was expanded", "info", "example");

           });

       tree.subscribe("collapse", function(node) {
              YAHOO.log(node.index + " was collapsed", "info", "example");
           });


       tree.subscribe("labelClick", function(node) {
              YAHOO.log(node.index + " label was clicked", "info", "example");
           });


        tree.draw();
    }


    function buildLargeBranch(node) {
        if (node.depth < 10) {
            YAHOO.log("buildRandomTextBranch: " + node.index, "info", "example");
            for ( var i = 0; i < 5; i++ ) {
                new YAHOO.widget.TextNode(node.label + "-" + i, node, false);
            }
        }
    }

    YAHOO.util.Event.onDOMReady(treeInit);

})();

</script>
<!-- 2 -->

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

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

<!-- 1 -->
<!-- 1 -->

<!-- 2 -->
<script type="text/javascript">
// Создание namespace для "myproduct1"
YAHOO.namespace ("myproduct1");
YAHOO.myproduct1.Class1 = function(info) {
    alert(info);
};

// Создание namespace для "myproduct2", и для "mysubproject1"
YAHOO.namespace ("myproduct2.mysubproject1");
YAHOO.myproduct2.mysubproject1.Class1 = function(info) {
    alert(info);
};
</script>
<!-- 2 -->

>

YUI Loader

<script type="text/javascript">

</script>

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

<script type="text/javascript">

</script>

Reset CSS

<script type="text/javascript">

</script>

Base CSS

<script type="text/javascript">

</script>

Fonts CSS

<script type="text/javascript">

</script>

Grids CSS

<script type="text/javascript">

</script>

Yui

Содержание

Введение

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

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

Animation (Анимация)

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

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

Button (Кнопка)

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

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

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

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

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

Dom (Работа с DOM)

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

Event (Событие)

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

Logger (Логи)

Menu (Меню)

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

Slider (Ползунок)

TabView (Табы)

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

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

YUI Loader

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

Reset CSS

Base CSS

Fonts CSS

Grids CSS

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

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

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