Использование в собственных веб-страницах
Одна вещь, которую нужно проверить при использовании различных элементов управления и утилит от библиотеки, которая, если таковые имеются, другие услуги будут необходимы компоненты, которые вы хотите использовать, к счастью, в Сети документацию и шпаргалок выведет список всех зависимостей любой компонент, который вы выберете, так что узнать не сложно. Существует только один файл, который должен быть использован в любой реализации любого из различных компонентов: объект YAHOO Global. Эта утилита создает пространство имен, в котором весь код YUI библиотека находится, а также содержит некоторые дополнительные методы, которые используются другими файлами по всей библиотеке. Он должен предстать перед любым другим файлам библиотеки, потому что если ссылки на другие файлы компонента предстать перед глобального объекта, ни одно из имен, используемые будет признан сценарий. Это приведет к ошибке JavaScript, заявив, что Yahoo является неопределенным. CSS файлы должны быть связаны в разделе <head> странице, как и любой другой файл CSS будет. Для SEO целей, а также поддерживать понятия прогрессивного улучшения, JavaScript, который вызывает и настраивает компоненты библиотеки должны быть как можно ближе к нижней части страницы, как это возможно. Кроме того, вы можете легко отделить от вашего JavaScript HTML вообще и держать скрипты в отдельные файлы. Для использования утилиты анимации из серверов Yahoo!, например, следующий тег сценария потребуется:
<script type="text/javascript" src="http://yui.yahooapis.com/
current_version/build/animation/animation-min.js">
</script>
Как анимация утилита, так же зависит от YAHOO глобального объекта, а так же события и DOM коммунальные услуги, Yahoo-dom-event программа должна быть также использованы (но не забывайте, что YAHOO глобального объекта должен появиться первый), так что тег показанный ниже, на самом деле должен предстать перед одним:
<script src="http://yui.yahooapis.com/current_version/build/
yahoo-dom-event/yahoo-dom-event.js">
</script> Как только эти теги были добавлены на вашу страницу, код, войдет в свой тег в <body> разделе страницы. Теперь мы возьмем наш первый взгляд на одну из библиотек компонентов в деталях: Календарь контроля. Мы можем взять быстрый взгляд на его поддержку классов, чтобы увидеть, какие методы и свойства доступны для нас, и можно переходить к осуществлению контроля в первом из наших примеров кодирования.
Код размещения
Хорошая практика кодирования должно всегда соблюдаться, будь то проектирование с YUI или нет. Поддержание вашей JavaScript и CSS код в отдельном файле помогает свести к минимуму объем кода, который поисковый робот должного индекса, который может помочь способствовать лучшему списку страниц результатов. Но у него есть свои недостатки , и каждый файл, который ссылается ваша страница добавляет еще один HTTP-запрос к взаимодействию между посетителем и сервером, который может привести к снижению производительности. В реальной реализации, мы будем всегда держать как можно больше наших JavaScript и CSS в отдельные файлы, возможно, сохраняя четкое различие между содержанием, поведения и уровня представления. Для целей этой книги тем не менее, мы будем держать HTML и JavaScript код в одном файле. Я подчеркиваю, что это не правильный способ сделать, что-то и делается чисто, так что примеры не становятся раздутой с многочисленными файлами.
Наша первая страница содержит пример простого текстового поля изображения, которые когда-то нажатии отображает календарь управления на странице, тем самым позволяя даты должны быть выбраны и добавлены к входу. Начните со следующими основными HTML страницы:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;
charset=utf-8">
<title>YUI Calendar Control Example</title>
<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-min.js"></script>
<style type="text/css">
input {
margin:0px 10px 0px 10px;
}
</style>
</head>
<body class="yui-skin-sam">
<div>
<label>Please enter your date of birth:</label>
<input type="text" name="dobfield" id="dobfield">
<img id="calico" src="icons/cal.png"
alt="Open the Calendar control">
</div>
<div id="mycal"></div>
</body>
</html> В действительности, мы можем добавить атрибут язык для открытия тега <html> и для хорошей мерой, применять UTF-8 набор символов.
Многое взято из книги Дан Вельмона и из сайта http://www.htmlcss.kz/webdev/vvedenie-v-yui/