Yui: различия между версиями
Содержимое удалено Содержимое добавлено
м Правки ГрознаяРазводнаяЛьвова (обсуждение) откачены к версии |
D'ohBot (обсуждение | вклад) м робот косметические изменения |
||
Строка 1:
[[
Содержание:
<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
</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
Создадим такую иерархию:
Строка 97:
</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
Строка 473:
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 });
Строка 593:
Event.on("reset", "click", function(e) {
picker.setValue([255, 255, 255], false); //false here means that rgbChange
});
Строка 687:
var handleFailure = function(o){
YAHOO.log("The failure handler was called.
if(o.responseText !== undefined){
Строка 1136:
}
</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>
Строка 1177:
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');
Строка 1203:
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 />'));
}
});
| |||