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

Материал из Викиучебника — открытых книг для открытого мира
Содержимое удалено Содержимое добавлено
Нет описания правки
Нет описания правки
Строка 302: Строка 302:
"Indiana"
"Indiana"
];
];
// массив для автозаполнения зип-кодов штатов
// массив для автозаполнения zip-кодов штатов
YAHOO.example.areacodesArray = [
YAHOO.example.areacodesArray = [
["201", "New Jersey"],
["201", "New Jersey"],

Версия от 10:26, 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 -->

вставляйте в секцию номер "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 (Календарь)

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