Добавление таблиц стилей CSS на веб-страницу

6.8. Добавление таблиц стилей CSS на веб-страницу

Таблицы стилей CSS, как правило, помещаются в раздел <head> HTML-документа: либо в качестве ссылки на внешний файл (внешние файлы таблиц стилей CSS обычно хранятся в каталоге APP_DIR/public/css).

<link rel="stylesheet" type="text/css" href="/css/style.css">

либо в качестве встроенного элемента <style>

<style>
body {
    padding-top: 60px;
    padding-bottom: 40px;
}
</style>

Для хранения CSS-правил рекомендуются внешние таблицы стилей CSS. Например, базовые CSS-правила, предоставляемые фреймворком Twitter Bootstrap, загружаются из файлов bootstrap.min.css и bootstrap-theme.min.css. Пользовательские CSS-правила для конкретного сайта можно хранить в файле style.css. Так как эти таблицы стилей нужны вам для большинства страниц, лучше поместить ссылку на них в разделе заголовка шаблона лэйаута. Однако, если определенная таблица стилей CSS должна быть загружена лишь для одной страницы, ее размещают на шаблоне представления этой страницы.

Чтобы добавить внешнюю таблицу стилей CSS к шаблону представления, используйте помощник вида HeadLink:

<?php
$this->headLink()->appendStylesheet('/css/style.css'); 
$this->headLink()->appendStylesheet(
       '//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css');

В примере кода выше мы использовали метод appendStylesheet помощника вида HeadLink, чтобы добавить внешнюю таблицу стилей CSS в раздел заголовка документа. Метод принимает путь к локальному CSS-файлу (строка 2) или URL к CSS-файлу, расположенному на другом сервере (строка 3).

Краткое описание методов помощника вида HeadLink представлено в таблице 6.2.

Таблица 6.2. Методы, предоставляемые помощником вида HeadLink

Имя метода	Описание
`appendStylesheet()`	Помещает ссылку на файл таблицы стилей CSS в конец.
`offsetSetStylesheet()`	Вставляет ссылку на файл таблицы стилей CSS в список на заданную позицию.
`prependStylesheet()`	Помещает ссылку на файл внешней таблицы стилей CSS в начало.
`setStylesheet()`	Очищает список и помещает в него один CSS-файл.

Если хотите добавить встроенный элемент <style> в раздел заголовка документа, вы можете использовать помощник вида HeadStyle. Его методы представлены ниже в таблице 6.3:

Таблица 6.3. Методы помощника вида HeadStyle

Имя метода	Описание
`appendStyle()`	Добавляет встроенный CSS-код в конец.
`offsetSetStyle()`	Вставляет файл встроенной таблицы стилей CSS в список на заданную позицию.
`prependStyle()`	Помещает ссылку на файл внешей таблицы стилей CSS в начало.
`setStyle()`	Очищает список и помещает в него один CSS-файл.

6.8.1. Пример

Для демонстрации добавления таблицы стилей CSS на веб-страницу, рассмотрим реальный пример. Допустим, вам нужно, чтобы пользователь мог вводить дату (в формате ГГГГ-ММ-ДД) в поле ввода текста. Кроме того, для удобства пользователя необходимо добавить также всплывающий виджет-календарь, где можно выбрать дату.

Чтобы это сделать, воспользуемся сторонней библиотекой jQuery UI ¹⁷. Для ее интеграции скачайте два файла с официальной страницы проекта:

jquery-ui.min.js -- минифицированная версия JavaScript-кода jQuery UI;
jquery-ui.min.css -- минифицированная версия стилей jQuery UI.

¹⁷⁾ jQuery UI предоставляет набор "взаимодействий с пользовательским интерфейсом, эффектов, виджетов, и тем"; она основана на библиотеке jQuery. jQuery UI, как и Twitter Bootstrap предоставляет многократно используемые компоненты пользовательского интерфейса.

Поместите файл jquery-ui.min.js в APP_DIR/public/js, а файл jquery-ui.min.css в APP_DIR/public/css. Затем добавьте шаблон представления datepicker.phtml в каталог application/index/static под каталогом модуля view:

<?php
$this->headTitle('Datepicker');

$this->headScript()->appendFile('/js/jquery-ui.min.js', 'text/javascript'); 
$this->headLink()->appendStylesheet('/css/jquery-ui.min.css'); 
?>

<h1>Datepicker</h1>

<p>
    Нажмите на окно редактирования ниже, чтобы воспользоваться календарем.
</p>

<input type="text" class="datepicker" title="Type here"/>

<script>      
$(document).ready(function() {
    $("input.datepicker").datepicker({ dateFormat: 'yy-mm-dd' });     
});
</script>

В этом примере мы используем метод appendFile() помощника вида HeadScript (строка 4), чтобы добавить ссылку на файл jquery-ui.min.js в раздел заголовка документа.

В строке 5 мы используем метод appendStylesheet() помощника вида HeadLink (строка 5), чтобы добавить ссылку на таблицу стилей CSS jquery-ui.min.js в раздел заголовка документа.

В строке 14 мы добавили поле ввода текста, которое будет использоваться для ввода даты.

В строках 16-20 мы добавили встроенный JavaScript-код, чтобы привязать обработчик событий jQuery к полю ввода текста. Когда пользователь кликнет на поле, появится виджет-календарь, в котором можно будет выбрать дату.

Чтобы посмотреть на результат, наберите URL "http://localhost/datepicker" в адресной строке браузера (см. рисунок 6.8).

Рисунок 6.8. Календарь