Yui: различия между версиями
Содержимое удалено Содержимое добавлено
Moriline (обсуждение | вклад) Нет описания правки |
Foo897897 (обсуждение | вклад) Нет описания правки |
||
Строка 1: | Строка 1: | ||
Я считаю что [[Участник:Самохвалов|Cамохвалов]] тупой [[гомосексуал]]ист-педераст что [[Участник:Lvova|Анастасия Львова]] идиотка и она трахалась со [[Сталин]]ым и за это её ебали нацистские генералы [[Гитлер]]а ещё Самохвалова отъебли немцы-[[фашисты]] в немецком концлагере а потом отправили его в [[газенваген]]! |
|||
[[Изображение:Yahoo_logo.gif]]<br> |
|||
Содержание: |
|||
<h3><span>Введение</span></h3><br> |
|||
'''YUI''' - [[w:JavaScript|JavaScript]] библиотека/фреймворк для создания приложений или/и пользовательского интерфейса.<br> |
|||
[[w:yui|Подробнее>>>]] |
|||
<br> |
|||
Чтобы просмотреть некоторые возможности YUI, лучше всего посетить страницу [http://developer.yahoo.com/yui/examples/ с примерами].<br> |
|||
Также можете посмотреть приложения в конце книги. Они дают общую картину построения приложений и интерфейсов.<br> |
|||
Так можно получить общее представление об этом фреймворке.<br> |
|||
На [http://developer.yahoo.com/yui/ странице фреймворка ] слева в меню «YUI Components» есть список компонентов. |
|||
Все эти компоненты реализуют различные возможности по работе с данными, документами, интерфейсом и т.д. |
|||
<br> |
|||
Справа вверху можно загрузить файлы-справки по компонентам в формате PDF.<br> |
|||
Посмотрим на компоненты внимательнее... |
|||
<h3><span>Обзор компонентов</span></h3><br> |
|||
Вот список компонентов YUI: |
|||
<ul style="margin-top: 0cm"> |
|||
<li>Animation - ''анимация обьектов''<br> |
|||
</li> |
|||
<li>AutoComplete - ''автозавершение данных по мере набора ( поиск, выбор и т.д.)''<br> |
|||
</li> |
|||
<li>Browser History Manager - ''история изменений сделанная пользователем на странице с обьектами''<br> |
|||
</li> |
|||
<li>Button - ''кнопки разных типов и работа с ними''<br> |
|||
</li> |
|||
<li>Calendar - ''отображение календаря и работа с ним''<br> |
|||
</li> |
|||
<li>Color Picker - ''форма для выбора цвета''<br> |
|||
</li> |
|||
<li>Connection Manager - ''работа с данными посредством методов POST и GET''<br> |
|||
</li> |
|||
<li>Container - ''всплывающие окна и контейнеры''<br> |
|||
</li> |
|||
<li>DataSource </li> |
|||
<li>DataTable - ''работа с данными в таблицах(гридах)''<br></li> |
|||
<li>Dom - ''работы с DOM''<br> |
|||
</li> |
|||
<li>Drag & Drop - ''перетаскивание элементов на странице''<br> |
|||
</li> |
|||
<li>Element - ''методы для работы с элементами документа''<br> |
|||
</li> |
|||
<li>Event - ''методы для работы с событиями''<br> |
|||
</li> |
|||
<li>ImageLoader [experimental] - ''загрузка изображений''<br> |
|||
</li> |
|||
<li>Logger - ''ведение логов по событиям''<br> |
|||
</li> |
|||
<li>Menu - ''различные типы и виды меню''<br> |
|||
</li> |
|||
<li>Rich Text Editor - ''текстовый редактор'' <br> |
|||
</li> |
|||
<li>Slider - ''работа со слайдерами(ползунками)''<br> |
|||
</li> |
|||
<li>TabView - ''Табы''<br> |
|||
</li> |
|||
<li>TreeView - ''иерархические деревья''<br> |
|||
</li> |
|||
<li>Yahoo Global Object - ''глобальные обьекты и переменные''<br></li> |
|||
<li>YUI Loader </li> |
|||
<li>YUI Test - ведение статистики и логов при работе с обьектами</li> |
|||
<li>Reset CSS - ''работа со стилями'' <br></li> |
|||
<li>Base CSS - ''работа со стилями'' <br></li> |
|||
<li>Fonts CSS - ''работа со стилями'' <br></li> |
|||
<li>Grids CSS - ''работа со стилями'' <br></li> |
|||
</ul> |
|||
<h3><span>Начало работы</span></h3><br> |
|||
1.) Начало. Содежимое загруженного архива фреймворка YUI (версия 2.3.1) распакуем в директорию /yui |
|||
Создадим такую иерархию: |
|||
/yui/ |
|||
/assets/ |
|||
/build/ |
|||
/docs/ |
|||
/examples/ |
|||
/tests/ |
|||
Readme |
|||
index.html |
|||
test.html |
|||
Файл test.html создан для тестирования работы фреймворка. Сюда надо вставлять код. |
|||
2.) Напишем в этом файле каркас для работы с фреймворком. |
|||
<source lang="javascript"> |
|||
<html> |
|||
<head><title>Title</title> |
|||
<!-- это секция номер "1" для подключения файлов фреймворка --> |
|||
</head> |
|||
<body class="yui-skin-sam"> |
|||
<!-- это секция номер "2" для написания кода JavaScript --> |
|||
</body> |
|||
</html> |
|||
</source> |
|||
В дальнейшем весь код расположенный между <source lang="javascript"><!-- 1 --></source> и <source lang="javascript"><!-- 1 --></source> вставляйте в секцию номер "1" . |
|||
<br> |
|||
И, соответственно, в секцию номер 2 вставляйте код между <source lang="javascript"><!-- 2 --></source> и <source lang="javascript"><!-- 2 --></source> |
|||
Ну и смотреть получившееся будем на http://localhost/test.html |
|||
<h3><span>Animation (Анимация)</span></h3> |
|||
'''Постепенное исчезновение обьекта:''' |
|||
<source lang="javascript"> |
|||
<!-- 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 --> |
|||
</source> |
|||
'''Изменение цвета обьекта:''' |
|||
<source lang="javascript"> |
|||
<!-- 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 --> |
|||
</source> |
|||
'''Движение обьекта по траектории:''' |
|||
<source lang="javascript"> |
|||
<!-- 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 --> |
|||
</source> |
|||
'''Скроллирование текста:''' |
|||
<source lang="javascript"> |
|||
<!-- 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 --> |
|||
</source> |
|||
<h3><span>AutoComplete (Автозаполнение)</span></h3> |
|||
'''Автозаполнение названий штатов и их zip-кодов:''' |
|||
<source lang="javascript"> |
|||
<!-- 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 --> |
|||
</source> |
|||
<h3><span>Browser History Manager (Менеджер истории)</span></h3> |
|||
<h3><span>Button (Кнопка)</span></h3> |
|||
'''Создание элеменов типа "button":''' |
|||
<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"> |
|||
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 --> |
|||
</source> |
|||
'''Создание элеменов меню в виде кнопки:''' |
|||
<source lang="javascript"> |
|||
<!-- 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 --> |
|||
</source> |
|||
<h3><span>Calendar (Календарь)</span></h3> |
|||
'''Простой вывод календаря:''' |
|||
<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/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 --> |
|||
</source> |
|||
<h3><span>Color Picker (Выбор цвета)</span></h3> |
|||
'''Простая реализация выбора цвета:''' |
|||
<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/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 --> |
|||
</source> |
|||
<h3><span>Connection Manager (Менеджер соединений)</span></h3> |
|||
'''Передача скрипту данных методом GET в асинхронном режиме:''' |
|||
<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/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 --> |
|||
</source> |
|||
'''Передача скрипту данных методом POST в асинхронном режиме:''' |
|||
<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/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 --> |
|||
</source> |
|||
<h3><span>Container (Контейнер)</span></h3> |
|||
'''Создание простого tooltip (всплывающей подсказки):''' |
|||
<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/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 --> |
|||
</source> |
|||
'''Создание простой панели:''' |
|||
<source lang="javascript"> |
|||
<!-- 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 --> |
|||
</source> |
|||
<h3><span>DataTable (Таблицы с данными)</span></h3> |
|||
'''Создание простой таблицы с данными(грид):''' |
|||
<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/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 --> |
|||
</source> |
|||
<h3><span>Dom (Работа с DOM)</span></h3> |
|||
'''Определение и установка новых координат обьекта:''' |
|||
<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"> |
|||
#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> |
|||
<!-- 2 --> |
|||
</source> |
|||
<h3><span>Drag & Drop (функции для Drag & Drop)</span></h3> |
|||
'''Перетаскивание и изменение размеров элемента:''' |
|||
<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> |
|||
<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 --> |
|||
</source> |
|||
<h3><span>Event (Событие)</span></h3> |
|||
'''Простое назначение события на элемент:''' |
|||
<source lang="javascript"> |
|||
<!-- 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 --> |
|||
</source> |
|||
<h3><span>ImageLoader (Загрузчик изображений)</span></h3> |
|||
<source lang="javascript"> |
|||
<script type="text/javascript"> |
|||
</script> |
|||
</source> |
|||
<h3><span>Logger (Логи)</span></h3> |
|||
<source lang="javascript"> |
|||
<script type="text/javascript"> |
|||
</script> |
|||
</source> |
|||
<h3><span>Menu (Меню)</span></h3> |
|||
'''Простое динамическое меню:''' |
|||
<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/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 --> |
|||
</source> |
|||
<h3><span>Rich Text Editor (Текстовый редактор)</span></h3> |
|||
'''Текстовый редактор с переключением режимов отображения:''' |
|||
<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/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 --> |
|||
</source> |
|||
<h3><span>Slider (Ползунок)</span></h3> |
|||
'''Движение обьекта по траектории:''' |
|||
<source lang="javascript"> |
|||
<!-- 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 --> |
|||
</source> |
|||
<h3><span>TabView (Табы)</span></h3> |
|||
'''Движение обьекта по траектории:''' |
|||
<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/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 --> |
|||
</source> |
|||
<h3><span>TreeView (Иерархические деревья)</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/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 --> |
|||
</source> |
|||
<h3><span>Yahoo Global Object (Глобальные переменные и обьекты)</span></h3> |
|||
'''Глобальные переменные и обьекты:''' |
|||
<source lang="javascript"> |
|||
<!-- 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 --> |
|||
</source>> |
|||
<h3><span>YUI Loader </span></h3> |
|||
<source lang="javascript"> |
|||
<script type="text/javascript"> |
|||
</script> |
|||
</source> |
|||
<h3><span>YUI Test (Статистика и логи)</span></h3> |
|||
<source lang="javascript"> |
|||
<script type="text/javascript"> |
|||
</script> |
|||
</source> |
|||
<h3><span>Reset CSS </span></h3> |
|||
<source lang="javascript"> |
|||
<script type="text/javascript"> |
|||
</script> |
|||
</source> |
|||
<h3><span>Base CSS </span></h3> |
|||
<source lang="javascript"> |
|||
<script type="text/javascript"> |
|||
</script> |
|||
</source> |
|||
<h3><span>Fonts CSS </span></h3> |
|||
<source lang="javascript"> |
|||
<script type="text/javascript"> |
|||
</script> |
|||
</source> |
|||
<h3><span>Grids CSS </span></h3> |
|||
<source lang="javascript"> |
|||
<script type="text/javascript"> |
|||
</script> |
|||
</source> |
|||
<h3><span>Приложение A (Построение простого приложения)</span></h3> |
|||
<h3><span>Приложение B (Построение среднего приложения)</span></h3> |
|||
<h3><span>Приложение C (Построение сложного приложения)</span></h3> |
Версия от 05:04, 13 июня 2008
Я считаю что Cамохвалов тупой гомосексуалист-педераст что Анастасия Львова идиотка и она трахалась со Сталиным и за это её ебали нацистские генералы Гитлера ещё Самохвалова отъебли немцы-фашисты в немецком концлагере а потом отправили его в газенваген!