Шаг 3. Использование jQuery
Курсовой проект
Разработка сайта по теме
«Навигация сайта с помощью вкладок.»
Разработал студент:
__________ Непряхин И.С.
Руководитель:
__________ В.П. Долгачёв
Калининград 2013
Введение:
В этом примере я хочу научить создавать с помощью CSS и JavaScript интерфейс с вкладками. Для каждого фрагмента, отмеченного специальным классом, будет создавать отдельная вкладка; при этом в каждый момент времени открытой будет только одна. Так же мы создадим гибкий дизайн, который позволил бы добавлять сколько угодно вкладок.
1. Назначение и область применения:
1.1. Цель:
Цель моей работы заключается в том, что бы научить пользоваться вкладками для использования их на сайте.
1.2. Область применения:
Иногда нам нужно разместить на сайте несколько однотипных фрагментов контента. Это может быть, к примеру, выражение на нескольких языках или пример кода на нескольких языках программирования. Еще один способ применения использовать вкладки в виде меню для удобного переключения между разным видом информации.
Описание и обоснования
Проект
Структура сайта
Схема логической связи между страницами
Сайт представляет собой иерархическую структуру, представленную в виде разделов. Структуру сайта можно изобразить так:
 |
Содержание сайта
Главная
Главная
· Область применения вкладок:
Иногда нам нужно разместить на сайте несколько однотипных фрагментов контента. Это может быть, к примеру, выражение на нескольких языках или пример кода на нескольких языках программирования. Еще один способ применения использовать вкладки в виде меню для удобного переключения между разным видом информации.
Атрибуты
Атрибуты
· Функция .children().Она применяется в качестве аргумента селектор, выполняет поиск в наборе непосредственных потомков текущей выборки.
o Пример: Тег <div>, в теле которого содержится несколько других тегов <div>.Нужно сделать так, чтобы при щелчке по главному элементу появлялись изначально скрытые элементы, обведенные каким либо цветом.
С помощью функции .find() эту задачу можно решить.
$(‘mainDiv’).click(function() {
$(this).find(‘div’).show().css(‘outline’,’red 2px solid’);})
Однако если в одном из тегов, находящимся внутри основного тега, тоже содержатся теги <div>, возникнет проблема. Код .find(‘div’) выберет абсолютно все теги <div>, в том числе и теги, содержащиеся в других тегах. И получиться что на странице будут обведены все имеющие теги <div>. Для решения данной проблемы мы воспользуемся функцией .children().
$(‘mainDiv’).click(function() {
$(this).children(‘div’).show().css(‘outline’,’red 2px solid’);})
Благодаря этой функций будут выбраны лишь непосредственно дочерние элементы основного тега <div> и пропущены любые теги , размещенные внутри дочерних тегов <div>.
· Функция .parent().Она перемещается по дереву
в поисках родителя текущего элемента. Такая функция удобна, например, если вы присоединяете событие hover к тегам <a>, но при этом необходимо еще обработать тег <div> (например, добавить рамку или изменить цвет фона). В таком случае для поиска тега <div> будет использована функция .parent()
o Пример:
$(‘#gellery a’).hover(
Function() {
//добавление контура к ссылке
$(this).parent().css(‘bsckgroundColor’,’white’);
};
Function() {
//удаление контура ссылке
$(this).css(‘outline’,’’);
//удаление цвета фона тега div
$(this).parent().css(‘backgroundColor’,’’);
}
); //конец hover
В этом примере при наведение указателя мыши на ссылку вокруг ссылки появится рамка, затем будет выбран родительский элемент этой ссылки (тег <div>) и у элемента изменится цвет фона. После того как указатель мыши покинет ссылку, рамка пропадет, и цвет фона снова изменится на исходный.
- (Document Object Model) браузер запоминает теги HTML, и их атрибуты и порядок, в котором они появляются в файле. Такое представление странице и называется объектной моделью документа (DOM).
Создание вкладок
Шаг 1. HTML разметка
Начнем. Для начала создадим контейнер, который будет содержать весь
контент для наших вкладок. Так же создадим неупорядоченный список со
ссылками на соответствующий контент. Мы создали ссылки, но еще не создали сам контент. Для этого создадим контейнеры с идентификаторами, которые и есть ссылки в списке.
<div class="tabbedPanels" id="tabbed1">
<ul class="tabs">
<li><a href="#panel1" tabindex="1">Вкладка 1</a></li>
<li><a href="#panel2" tabindex="2">Вкладка 2</a></li>
<li><a href="#panel3" tabindex="3">Вкладка 3</a></li>
</ul>
<div class="panelContainer">
<div id="panel1" class="panel">
<h2>Содержимое панели 1</h2>
<p>Содержимое вкладки</p>
</div>
<div id="panel2" class="panel">
<h2>Содержимое панели 2</h2>
<p>Содержимое вкладки</p>
</div>
<div id="panel3" class="panel">
<h2>Содержимое панели 3</h2>
<p>Содержимое вкладки</p>
</div>
</div>
</div>
И так мы указали очередность контейнеров <div> и элементов <ul>, <li>. Так же добавили внутри идентификаторы «id» и классы «class» которые будут использованы в таблицах стилей CSS для придания нужного нам дизайна и частично в коде jQuery. В HTML разметке главное следить за открытием и закрытием тегов, иначе проблемы неминуемы.
Шаг 2. Стили CSS
Теперь поработает со стилями. Сначала создадим стиль для основного контейнера, потом приведем в порядок список.
.tabbedPanels {
width: 80%;
float: left;
margin:50px;}
.tabs {
margin: 0;
padding: 0;}
.tabs li {
float: left;
list-style: none;
padding: 0;
margin: 0;}
.tabs a {
display: block;
text-decoration: none;
padding: 3px 5px;
background-color: rgb(110,138,195);
margin-right: 10px;
border: 1px solid rgb(153,153,153);
border-radius:5px 5px 0 0;
margin-bottom: -1px;
color:#fff;}
.tabs .active {
border-bottom: 1px solid white;
background-color: white;
color:#000;
position: relative;}
.panelContainer {
clear: both;
margin-bottom: 25px;
border: 1px solid rgb(153,153,153);
background-color: white;
padding: 10px;}
.panel h2 {
color: rgb(57,78,121);
text-shadow: none;}
.panel p {
color: black;}
Данный код можно как записать в Html файле так и создать отдельный css файл, и прописать к нему путь в хедере.
<link rel="stylesheet" href="путь к css файлу" type="text/css" />
Шаг 3. Использование jQuery
Во-первых, нам надо скачать последнюю версию библиотеки сценариев.
Либо подгружать её, установив этот скрипт в <head>:
< script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js></script>
Так же как и в случае css файла, js файл можно как записать в Html файле так и создать отдельный файл, и прописать к нему путь
в хедере.
<script type="text/javascript" src="путь к js файлу”></script>
$(document).ready(function() {
$('.tabs a').bind('click focus',function() {
var $this = $(this);
$this.parents('.tabbedPanels')
.find('.panel').hide().end()
.find('.active').removeClass('active');
$this.addClass('active').blur();
var panel = $this.attr('href');
$(panel).show();
return false;
});
$('.tabs').find('li:first a').click();
});
$(document).ready (function (){...}); Данный сценарий говорит браузеру о
выполнении всего того, что будет находится внутри этого кода. В нашем случае мы указываем следующие команды:
$(«tabs a»).click (function () {...}); Расшифровывается это так: Если Вы кликаете на вкладку с тегом <a> и внутри него имеется класс «tabs», то задействуются все элементы
в функции click ();
Демонстрация вкладок
Расположить вкладки относительно блоку можно по разному. Внутри, сверху, сбоку это зависит уже от вашей фантазии, так же можно оформить их, изменить форму самих вкладок оформить основной блок с контентом. Я демонстрирую простое оформление и расположение вкладок.
Расположение вкладок сверху
Расположение вкладок с боку
Расположение вкладок внутри блока
План тестирования
1) Проверить работают ли прописанные функции.
2) Отображение текста, не отображается ли вся информация сразу.
3) Проверить появились ли вкладки в указанном месте.
4) Проверить работоспособность вкладок, нармально ли функционируют вкладки при нажатии на них.
5) имеются ли иллюстрации к тексту, соответствует ли они тексту и целям страницы, и сайта.
Реализация
2.2.1. 
Главная
2.2.2. 
Атрибуты
Создание вкладок
2.2.4. 
Демонстрация вкладок