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

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


<h3><span>Browser History Manager (Менеджер истории)</span></h3>
<h3><span>Browser History Manager (Менеджер истории)</span></h3>
'''Автозаполнение названий штатов и их зип-кодов:'''
<source lang="javascript">
<source 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/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">
<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>
</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" -->
</source>
</source>



Версия от 09:32, 9 ноября 2007


Содержание:

Введение


YUI - JavaScript библиотека/фреймворк для создания приложений или/и пользовательского интерфейса.
Подробнее>>>
Чтобы просмотреть некоторые возможности YUI, лучше всего посетить страницу с примерами.
Так можно получить общее представление об этом фреймворке.
На странице фреймворка слева в меню «YUI Components» есть список компонентов. Все эти компоненты реализуют различные возможности по работе с данными, документами, интерфейсом и т.д.
Посмотрим на них внимательнее...

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


Вот список компонентов 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 -->

. И, соответственно, в секцию номер 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 (Автозаполнение)

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

<!-- секция "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"    
];
// массив для автозаполнения зип-кодов штатов
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 (Менеджер истории)

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

<!-- секция "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" -->

Button (Кнопка)

<script type="text/javascript">

</script>

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

<script type="text/javascript">

</script>

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

<script type="text/javascript">

</script>

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

<script type="text/javascript">

</script>

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

<script type="text/javascript">

</script>

DataSource

<script type="text/javascript">

</script>

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

<script type="text/javascript">

</script>

Dom (Работа с DOM)

<script type="text/javascript">

</script>

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>