Yui: различия между версиями

Материал из Викиучебника — открытых книг для открытого мира
Содержимое удалено Содержимое добавлено
Нет описания правки
Нет описания правки
Строка 850: Строка 850:


<h3><span>Dom (Работа с DOM)</span></h3>
<h3><span>Dom (Работа с DOM)</span></h3>
'''Определение и установка новых координат обьекта:'''
<source lang="javascript">
<source lang="javascript">
<!-- 1 -->
<script type="text/javascript">
<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 -->
</source>
'''Нахождение элементов по их классу:'''
<source lang="javascript">
<!-- 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>
</script>
<!-- 2 -->
</source>
</source>



Версия от 12:44, 9 ноября 2007


Содержание:

Введение


YUI - JavaScript библиотека/фреймворк для создания приложений или/и пользовательского интерфейса.
Подробнее>>>
Чтобы просмотреть некоторые возможности 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)

<script type="text/javascript">

</script>

Element (Элемент)

<script type="text/javascript">

</script>

Event (Событие)

<script type="text/javascript">

</script>

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

<script type="text/javascript">

</script>

Logger (Логи)

<script type="text/javascript">

</script>

Menu (Меню)

<script type="text/javascript">

</script>

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

<script type="text/javascript">

</script>

Slider (Ползунок)

<script type="text/javascript">

</script>

TabView (Табы)

<script type="text/javascript">

</script>

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

<script type="text/javascript">

</script>

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

<script type="text/javascript">

</script>

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>

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

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

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