Одна из проблем, с которой ежедневно сталкиваются веб-дизайнеры, — это ограничения, которые накладываются на размер вашего «холста». Большие экраны с более высоким разрешением очень помогли в этом отношении, но проблема определенно не исчезла.
Однако, когда вы начинаете искать способы сохранения экранной недвижимости с помощью JavaScript, работа становится намного проще. В этом уроке мы рассмотрим, как показывать и скрывать фрагменты контента, используя комбинацию CSS и потрясающую библиотеку jQuery, и просто для удовольствия я собираюсь использовать версию 1.3 jQuery.
ПРИМЕЧАНИЕ. Здесь все можно сделать и с помощью jQuery версии 1.2.
Давайте начнем тогда. Первым делом скачайте последнюю версию jQuery . Затем я создал простой проект, содержащий две папки: одну для JavaScript и одну для CSS. Затем я создал файл HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Playing Accordion With CSS and jQuery</title>
</head>
<body>
</body>
</html>
Сценарий, который мы собираемся разыграть здесь, представляет собой страницу с часто задаваемыми вопросами. Как правило, у вас будет заголовок, который является вопросом, и после этого один или несколько параграфов, дающих ответ на вопрос. Проблема в том, что по мере увеличения количества вопросов пользователю необходимо все больше и больше прокручивать, чтобы найти вопрос, на который ему нужно ответить.
Конечно, вы можете создать оглавление с якорными ссылками на вопросы, или пользователь может просто использовать функцию поиска браузера, но для целей данного урока мы представим, что наш клиент не хочет оглавления и Мы определенно не хотим, чтобы наши пользователи прибегали к внешним «инструментам», чтобы найти ответы на свои вопросы.
Сразу после открывающего тега body добавьте на страницу три тега заголовка следующим образом:
<h2>Question 1</h2>
<h2>Question 2</h2>
<h2>Question 3</h2>
Теперь после каждого заголовка добавьте несколько абзацев с произвольным текстом, вы можете взять немного толку с этого очень полезного сайта, чтобы ускорить процесс. После добавления некоторых параграфов моя страница выглядит следующим образом:
[Img_assist | NID = 7411 | название = | убывание = | ссылка = нет | Align = нет | ширина = 550 | высота = 269]
Наш следующий шаг — обернуть каждый из наших ответов либо в span, либо в div, причем каждый из них имеет класс ответа . Нам также нужно дать им идентификатор, который совпадает с якорной ссылкой, которую мы использовали в заголовке:
<h2><a href="#answer1">Question 1</a></h2>
<span id="answer1" class="answer">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</span>
В завершение мы заключаем весь раздел FAQ в div с идентификатором #faq .
На первый взгляд, ничего не изменилось, но, как уже упоминалось, мы теперь настроены как стилизовать наши часто задаваемые вопросы, так и добавить необходимую интерактивность. Давайте начнем с добавления некоторого стиля. Создайте новый CSS-файл с именем default.css в своей папке CSS, а затем свяжите его со своей HTML-страницей следующим образом:
<link rel="stylesheet" href="css/default.css" type="text/css" media="screen">
Теперь мы собираемся изменить размер шрифта и добавить некоторые значки и стили к заголовкам.
Для иконок я использовал набор иконок Sweetie, который вы можете бесплатно загрузить с сайта sublink.ca . Две иконки, которые я использовал в этом уроке: 16-квадрат-зеленый-add.png и 16-квадрат-зеленый-remove.png
После того, как вы скопировали две иконки в папку внутри вашего проекта, мы можем начать с первого из наших правил стиля. Сначала я изменил цвет и размер наших заголовков, чтобы лучше соответствовать иконкам.
h2
{
background-color:#fff;
color:#94AE6B;
font-size:1.1em;
}
Далее нам нужно сделать ссылки на наши заголовки, чтобы было более очевидно, что они кликабельны и обеспечивают запасной вариант, когда JavaScript не включен. В основном ссылки будут действовать как якорные ссылки и переходят к ответу. Добавьте следующее к своим тегам заголовков:
<h2><a href="#answer1">Question 1</a></h2>
Затем дайте вашим ссылкам стиль:
h2 a:link, h2 a:visited
{
color:#94AE6B;
text-decoration:none;
}
h2 a:hover, h2 a:focus
{
color:#CBB052;
}
Мы почти готовы добавить слой поведения, но прежде чем сделать это, нам нужно добавить еще два правила стиля. В настоящее время мы не использовали иконки. Для этого нам нужно создать два состояния для заголовков: одно — когда контент скрыт, а другое — когда контент отображается. Добавьте следующее в ваш файл CSS:
h2.maximized
{
background:#fff url('../media/icons/maximize.png') center left no-repeat;
padding-left:20px;
}
h2.minimized
{
background:#fff url('../media/icons/minimize.png') center left no-repeat;
padding-left:20px;
}
Затем измените теги вашего заголовка следующим образом:
<h2 class="maximized"><a href="#answer1">Question 1</a></h2>
Теперь, когда вы обновляете страницу, она должна выглядеть следующим образом:
[Img_assist | NID = 7413 | название = | убывание = | ссылка = нет | Align = нет | ширина = 550 | высота = 189]
Теперь вы можете спросить, какого чёрта мы увидим минимизированный стиль? Хорошо, jQuery и наш уровень поведения приходят на помощь. Прежде чем мы сможем начать использовать jQuery, нам нужно связать библиотеку с нашей HTML-страницей следующим образом:
<script src="js/jquery-1.3.min.js" type="application/javascript"></script>
Теперь, когда у нас есть подключенная библиотека, нам нужно создать собственный маленький js-файл для хранения наших скриптов. Создайте новый файл .js и свяжите его с HTML-страницей, как мы делали предыдущий. Наша первая задача — скрыть все параграфы.
Когда мы хотим написать сценарий HTML с помощью JavaScript, мы в основном манипулируем объектной моделью документа (DOM), но прежде чем мы сможем это сделать, браузер должен проанализировать HTML и создать DOM. Так как же узнать, когда DOM готов начать манипулирование? Пусть jQuery справится с этим для вас. Внутри нашего файла .js добавьте следующее:
$(document).ready( {
});
Эта функция jQuery выполняет опрос браузера, чтобы определить, когда браузер выполнил его анализ, и DOM готов к работе. Здесь важно помнить, что он не ждет, пока браузер загрузит все изображения и другие носители, но вызовет функцию внутри ready (), как только DOM будет готов.
Следующим шагом является добавление нашей функции, которая будет скрывать все абзацы, как только jQuery определит, что DOM готов. Измените приведенный выше код следующим образом:
$(document).ready(function()
{
$('.answer').hide();
});
Когда вы обновите страницу, все изменилось!
[Img_assist | NID = 7415 | название = | убывание = | ссылка = нет | Align = нет | ширина = 128 | высота = 110]
Потрясающие! Таким образом, через эту простую строку JavaScript jQuery выделил все элементы в документе с классом ответа и применил отображение CSS: нет; собственность к нему. Теперь нам нужно применить требуемые функции к заголовкам, чтобы при нажатии на них отображался ответ, а при повторном нажатии он скрывал ответ.
Вы можете подумать, что это будет комбинация функций .show () и .hide (), верно? Неправильно! jQuery и здесь делает все намного проще для нас. jQuery предоставляет нам функцию .toggle (), которая, как вы уже догадались, переключается между скрытым и показанным состоянием.
Функция .toggle () принимает два параметра, которые будут функциями, выполняемыми при показе и скрытии. Измените ваш скрипт на следующее:
$(document).ready(function()
{
$('.answer').hide();
$('#faq h2').toggle(
function() {
},
function() {
}
);
});
Это наш скелет, где произойдут все действия. Чтобы показать и скрыть наши ответы, мы добавим две простые строки в каждый из пустых методов function ():
$(document).ready(function()
{
$('.answer').hide();
$('#faq h2').toggle(
function() {
$(this).next('.answer').show();
},
function() {
$(this).next('.answer').hide();
}
);
});
Вернитесь на свою HTML-страницу, нажмите «Обновить» и нажмите на любой из трех заголовков. Первый щелчок покажет ответ, следующий щелчок скроет ответ. Но как узнать, какой ответ показывать или скрывать? Магия — это ключевое слово $ (this). $ (this) Относится к текущему элементу, отвечающему на событие, которое в нашем случае является заголовком, по которому щелкают в данный момент.
Итак, как мы увидим минимизированное правило стиля? Для этого мы будем использовать два новых метода, которые jQuery предоставляет нам, а именно .addClass () и .removeClass (). Теперь есть два способа справиться с этим. Первый вариант:
$(this).removeClass('maximized')
$(this).addClass('minimized');
Это будет хорошо работать, но jQuery дает нам еще одну мощную опцию, которая экономит нам время при наборе текста. Измените ваш скрипт на следующее:
$(document).ready(function()
{
$('.answer').hide();
$('#faq h2').toggle(
function() {
$(this).next('.answer').show();
$(this).removeClass('maximized').addClass('minimized');
},
function() {
$(this).next('.answer').hide();
$(this).removeClass('minimized').addClass('maximized');
}
);
});
То, как мы добавляем и удаляем наши классы в приведенном выше коде, — это то, что называется цепочкой методов, и это еще один способ, с помощью которого jQuery упрощает кодирование. Если вы сейчас вернетесь в браузер и нажмете на заголовок, вы увидите, что значок меняется, как и ожидалось:
[Img_assist | NID = 7418 | название = | убывание = | ссылка = нет | Align = нет | ширина = 276 | Высота = 217]
Вот и все! У jQuery есть много других способов показать и скрыть контент, чтобы сделать ваш веб-сайт или приложение еще более интерактивным. Я бы посоветовал вам посетить сайт jQuery , прочитать документацию и посмотреть примеры . Но самое главное, получайте удовольствие!