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

675 байт добавлено ,  1 год назад
м
<source> -> <syntaxhighlight> (phab:T237267)
м (орфография)
м (<source> -> <syntaxhighlight> (phab:T237267))
 
 
2.) Напишем в этом файле каркас для работы с фреймворком.
<sourcesyntaxhighlight lang="javascript">
<html>
<head><title>Title</title>
</body>
</html>
</syntaxhighlight>
</source>
В дальнейшем весь код расположенный между <sourcesyntaxhighlight lang="javascript"><!-- 1 --></sourcesyntaxhighlight> и <sourcesyntaxhighlight lang="javascript"><!-- 1 --></sourcesyntaxhighlight> вставляйте в секцию номер "1" .
<br />
И, соответственно, в секцию номер 2 вставляйте код между <sourcesyntaxhighlight lang="javascript"><!-- 2 --></sourcesyntaxhighlight> и <sourcesyntaxhighlight lang="javascript"><!-- 2 --></sourcesyntaxhighlight>
Ну и смотреть получившееся будем на http://localhost/test.html
 
<h3><span>Animation (Анимация)</span></h3>
'''Постепенное исчезновение объекта:'''
<sourcesyntaxhighlight lang="javascript">
<!-- 1 -->
<style type="text/css">
</script>
<!-- 2 -->
</syntaxhighlight>
</source>
'''Изменение цвета объекта:'''
<sourcesyntaxhighlight lang="javascript">
<!-- 1 -->
<style type="text/css">
</script>
<!-- 2 -->
</syntaxhighlight>
</source>
 
'''Движение объекта по траектории:'''
<sourcesyntaxhighlight lang="javascript">
<!-- 1 -->
<style type="text/css">
</script>
<!-- 2 -->
</syntaxhighlight>
</source>
'''Скроллирование текста:'''
<sourcesyntaxhighlight lang="javascript">
<!-- 1 -->
<style type="text/css">
</script>
<!-- 2 -->
</syntaxhighlight>
</source>
 
<h3><span>AutoComplete (Автозаполнение)</span></h3>
'''Автозаполнение названий штатов и их zip-кодов:'''
<sourcesyntaxhighlight lang="javascript">
<!-- 1 -->
<style type="text/css">
</script>
<!-- 2 -->
</syntaxhighlight>
</source>
 
<h3><span>Browser History Manager (Менеджер истории)</span></h3>
<h3><span>Button (Кнопка)</span></h3>
'''Создание элеменов типа "button":'''
<sourcesyntaxhighlight lang="javascript">
<!-- 1 -->
<link rel="stylesheet" type="text/css" href="yui/build/fonts/fonts-min.css" />
</form>
<!-- 2 -->
</syntaxhighlight>
</source>
'''Создание элеменов меню в виде кнопки:'''
<sourcesyntaxhighlight lang="javascript">
<!-- 1 -->
<link rel="stylesheet" type="text/css" href="yui/build/fonts/fonts-min.css1" />
</form>
<!-- 2 -->
</syntaxhighlight>
</source>
 
<h3><span>Calendar (Календарь)</span></h3>
'''Простой вывод календаря:'''
<sourcesyntaxhighlight lang="javascript">
<!-- 1 -->
<link rel="stylesheet" type="text/css" href="yui/build/fonts/fonts-min.css" />
<div style="clear:both" ></div>
<!-- 2 -->
</syntaxhighlight>
</source>
 
<h3><span>Color Picker (Выбор цвета)</span></h3>
'''Простая реализация выбора цвета:'''
<sourcesyntaxhighlight lang="javascript">
<!-- 1 -->
<link rel="stylesheet" type="text/css" href="yui/build/fonts/fonts-min.css" />
</script>
<!-- 2 -->
</syntaxhighlight>
</source>
 
<h3><span>Connection Manager (Менеджер соединений)</span></h3>
'''Передача скрипту данных методом GET в асинхронном режиме:'''
<sourcesyntaxhighlight lang="javascript">
<!-- 1 -->
<link rel="stylesheet" type="text/css" href="yui/build/fonts/fonts-min.css" />
<form><input type="button" value="Send a GET Request" onClick="makeRequest();"></form>
<!-- 2 -->
</syntaxhighlight>
</source>
 
'''Передача скрипту данных методом POST в асинхронном режиме:'''
<sourcesyntaxhighlight lang="javascript">
<!-- 1 -->
<link rel="stylesheet" type="text/css" href="yui/build/fonts/fonts-min.css" />
<form><input type="button" value="Send a POST Request" onClick="makeRequest();"></form>
<!-- 2 -->
</syntaxhighlight>
</source>
 
<h3><span>Container (Контейнер)</span></h3>
'''Создание простого tooltip (всплывающей подсказки):'''
<sourcesyntaxhighlight lang="javascript">
<!-- 1 -->
<link rel="stylesheet" type="text/css" href="yui/build/fonts/fonts-min.css" />
</script>
<!-- 2 -->
</syntaxhighlight>
</source>
'''Создание простой панели:'''
<sourcesyntaxhighlight lang="javascript">
<!-- 1 -->
<link rel="stylesheet" type="text/css" href="yui/build/container/assets/container.css" />
</div>
<!-- 2 -->
</syntaxhighlight>
</source>
 
 
<h3><span>DataTable (Таблицы с данными)</span></h3>
'''Создание простой таблицы с данными(грид):'''
<sourcesyntaxhighlight lang="javascript">
<!-- 1 -->
<link rel="stylesheet" type="text/css" href="yui/build/fonts/fonts-min.css" />
</script>
<!-- 2 -->
</syntaxhighlight>
</source>
 
<h3><span>Dom (Работа с DOM)</span></h3>
'''Определение и установка новых координат объекта:'''
<sourcesyntaxhighlight lang="javascript">
<!-- 1 -->
<link rel="stylesheet" type="text/css" href="yui/build/fonts/fonts-min.css" />
</script>
<!-- 2 -->
</syntaxhighlight>
</source>
'''Нахождение элементов по их классу:'''
<sourcesyntaxhighlight lang="javascript">
<!-- 1 -->
<link rel="stylesheet" type="text/css" href="yui/build/fonts/fonts-min.css" />
</script>
<!-- 2 -->
</syntaxhighlight>
</source>
 
<h3><span>Drag & Drop (функции для Drag & Drop)</span></h3>
'''Перетаскивание и изменение размеров элемента:'''
<sourcesyntaxhighlight lang="javascript">
<!-- 1 -->
<link rel="stylesheet" type="text/css" href="yui/build/fonts/fonts-min.css" />
</script>
<!-- 2 -->
</syntaxhighlight>
</source>
 
 
<h3><span>Event (Событие)</span></h3>
'''Простое назначение события на элемент:'''
<sourcesyntaxhighlight lang="javascript">
<!-- 1 -->
<script type="text/javascript" src="yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
</div>
<!-- 2 -->
</syntaxhighlight>
</source>
 
<h3><span>ImageLoader (Загрузчик изображений)</span></h3>
<sourcesyntaxhighlight lang="javascript">
<script type="text/javascript">
 
</script>
</syntaxhighlight>
</source>
 
<h3><span>Logger (Логи)</span></h3>
<sourcesyntaxhighlight lang="javascript">
<script type="text/javascript">
 
</script>
</syntaxhighlight>
</source>
 
<h3><span>Menu (Меню)</span></h3>
'''Простое динамическое меню:'''
<sourcesyntaxhighlight lang="javascript">
<!-- 1 -->
<link rel="stylesheet" type="text/css" href="yui/build/fonts/fonts-min.css" />
<div id="rendertarget"></div>
<!-- 2 -->
</syntaxhighlight>
</source>
 
<h3><span>Rich Text Editor (Текстовый редактор)</span></h3>
'''Текстовый редактор с переключением режимов отображения:'''
<sourcesyntaxhighlight lang="javascript">
<!-- 1 -->
<link rel="stylesheet" type="text/css" href="yui/build/fonts/fonts-min.css" />
</script>
<!-- 2 -->
</syntaxhighlight>
</source>
 
<h3><span>Slider (Ползунок)</span></h3>
'''Движение объекта по траектории:'''
<sourcesyntaxhighlight lang="javascript">
<!-- 1 -->
<link rel="stylesheet" type="text/css" href="yui/build/fonts/fonts-min.css" />
</script>
<!-- 2 -->
</syntaxhighlight>
</source>
 
<h3><span>TabView (Табы)</span></h3>
'''Движение объекта по траектории:'''
<sourcesyntaxhighlight lang="javascript">
<!-- 1 -->
<link rel="stylesheet" type="text/css" href="yui/build/fonts/fonts-min.css" />
</script>
<!-- 2 -->
</syntaxhighlight>
</source>
 
<h3><span>TreeView (Иерархические деревья)</span></h3>
<sourcesyntaxhighlight lang="javascript">
'''Простое иерархическое дерево:'''
<sourcesyntaxhighlight lang="javascript">
<!-- 1 -->
<link rel="stylesheet" type="text/css" href="yui/build/fonts/fonts-min.css" />
</script>
<!-- 2 -->
</syntaxhighlight>
</source>
 
<h3><span>Yahoo Global Object (Глобальные переменные и объекты)</span></h3>
'''Глобальные переменные и объекты:'''
<sourcesyntaxhighlight lang="javascript">
<!-- 1 -->
<!-- 1 -->
</script>
<!-- 2 -->
</sourcesyntaxhighlight>>
 
<h3><span>YUI Loader </span></h3>
<sourcesyntaxhighlight lang="javascript">
<script type="text/javascript">
 
</script>
</syntaxhighlight>
</source>
 
<h3><span>YUI Test (Статистика и логи)</span></h3>
<sourcesyntaxhighlight lang="javascript">
<script type="text/javascript">
 
</script>
</syntaxhighlight>
</source>
 
<h3><span>Reset CSS </span></h3>
<sourcesyntaxhighlight lang="javascript">
<script type="text/javascript">
 
</script>
</syntaxhighlight>
</source>
 
<h3><span>Base CSS </span></h3>
<sourcesyntaxhighlight lang="javascript">
<script type="text/javascript">
 
</script>
</syntaxhighlight>
</source>
 
<h3><span>Fonts CSS </span></h3>
<sourcesyntaxhighlight lang="javascript">
<script type="text/javascript">
 
</script>
</syntaxhighlight>
</source>
 
<h3><span>Grids CSS </span></h3>
<sourcesyntaxhighlight lang="javascript">
<script type="text/javascript">
 
</script>
</syntaxhighlight>
</source>
<h3><span>Приложение A (Построение простого приложения)</span></h3>
 
583

правки