Создание интерфейсов с вкладками неожиданно становится несложным делом при использовании функции вкладок в библиотеке пользовательского интерфейса jQuery. Его можно использовать для создания совершенно уникальных интерфейсов без необходимости быть богом кодирования — используя только одну строку кода!
Шаг 1 — Основы
Чтобы создать эффекты jQuery позже в этом уроке, вам сначала потребуется
последняя библиотека jQuery и
Пользовательский интерфейс jQuery с элементами «Core» и «Tabs». Если вы предпочитаете, вы можете
возьмите эти файлы из исходных файлов этого учебника.
Поместите эти два файла в каталог на вашем сервере. Также создайте следующие файлы:
- index.html
- style.css
- sprinkle.js
index.html будет для вашего HTML, style.css для стиля страницы
в CSS и sprinkle.js для нашей анимации jQuery.
Внутри index.html , давайте откроем документ:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>
<html xmlns=»http://www.w3.org/1999/xhtml»>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ />
<title>jQuery UI Tabs Demo</title>
<link href=»style.css» rel=»stylesheet» type=»text/css» />
<script type=»text/javascript» src=»jquery-1.2.6.min.js»></script>
<script type=»text/javascript» src=»jquery-ui-personalized-1.5.2.packed.js»></script>
<script type=»text/javascript» src=»sprinkle.js»></script>
</head>
<body>
</body>
</html>
|
Здесь мы устанавливаем наш DOCType в XHTML 1 Transitional и импортируем наши файлы CSS и JS.
Обязательно измените «jquery-1.2.6.min.js» и «jquery-ui-personalized-1.5.2.packed.js».
если ваши файлы jQuery имеют другое имя файла.
Часть A — Ванильный интерфейс с вкладками
Это одно из наиболее распространенных вариантов использования интерфейса с вкладками:
Шаг а.1 — HTML
Между тегами <body> в нашем индексном файле введите следующее:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
<div id=»tabvanilla» class=»widget»>
<ul class=»tabnav»>
<li><a href=»#popular»>Popular</a></li>
<li><a href=»#recent»>Recent</a></li>
<li><a href=»#featured»>Featured</a></li>
</ul>
<div id=»popular» class=»tabdiv»>
<ul>
<li><a href=»#»>Welsh Zombie Sheep Invasion</a></li>
<li><a href=»#»>Sheep Rising From The Dead</a></li>
<li><a href=»#»>Blogosphere Daily Released!</a></li>
<li><a href=»#»>Aliens Infiltrate Army Base In UK Town</a></li>
<li><a href=»#»>U2 Rocks New York’s Central Park</a></li>
<li><a href=»#»>TA Soldiers Wear Uniforms To Work</a></li>
<li><a href=»#»>13 People Rescued From Flat Fire</a></li>
<li><a href=»#»>US Troops Abandon Afghan Outpost</a></li>
<li><a href=»#»>Are We Alone?
<li><a href=»#»>Apple iPhone 3G Released</a></li>
</ul>
</div><!—/popular—>
<div id=»recent» class=»tabdiv»>
<p>Lorem ipsum dolor sit amet.</p>
</div><!—/recent—>
<div id=»featured» class=»tabdiv»>
<ul>
<li><a href=»#»>Aliens Infiltrate Army Base In UK Town</a></li>
<li><a href=»#»>Are We Alone?
<li><a href=»#»>U2 Rocks New York’s Central Park</a></li>
<li><a href=»#»>TA Soldiers Wear Uniforms To Work</a></li>
<li><a href=»#»>13 People Rescued From Flat Fire</a></li>
<li><a href=»#»>US Troops Abandon Afghan Outpost</a></li>
<li><a href=»#»>Sheep Rising From The Dead</a></li>
<li><a href=»#»>Blogosphere Daily Released!</a></li>
<li><a href=»#»>Apple iPhone 3G Released</a></li>
<li><a href=»#»>Welsh Zombie Sheep Invasion</a></li>
</ul>
</div><!—featured—>
</div><!—/widget—>
|
Мы начнем с открытия элемента DIV с идентификатором «tabvanilla» и классом «widget».
Идентификатор будет использоваться jQuery для определения области, на которую он должен воздействовать, и
класс предназначен для простоты использования при моделировании.
Далее идет неупорядоченный список с классом ‘tabnav’. Список содержит три
разные названия вкладок, каждая со ссылкой в стиле «#xxxxx». Это важно
поскольку это будут идентификаторы следующих разделов.
Следующий div имеет идентификатор «популярные», это соответствует ссылке во вкладках
над. «Недавние» и «популярные» DIV также включены. Эти разделы, что будет
будет показан / скрыт jQuery, когда соответствующая ссылка выбрана.
В зависимости от того, какой контент у вас есть, у вас должно быть что-то вроде этого:
Давайте сделаем это немного лучше, не так ли?
Шаг а.2 — Стайлинг
Добавьте следующее в ваш файл style.css . Это будет объяснено ниже.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
|
* {
margin: 0;
padding: 0;
}
body {
font-size: 75%;
color: #222;
background: #ffffff;
font-family: «Helvetica Neue», Helvetica, Arial, sans-serif;
line-height: 1.6em;
}
.widget {
width: 310px;
margin: 20px;
padding: 10px;
background: #f3f1eb;
border: 1px solid #dedbd1;
margin-bottom: 15px;
}
.widget a {
color: #222;
text-decoration: none;
}
.widget a:hover {
color: #009;
text-decoration: underline;
}
.tabnav li {
display: inline;
list-style: none;
padding-right: 5px;
}
.tabnav li a {
text-decoration: none;
text-transform: uppercase;
color: #222;
font-weight: bold;
padding: 4px 6px;
outline: none;
}
.tabnav li a:hover, .tabnav li a:active, .tabnav li.ui-tabs-selected a {
background: #dedbd1;
color: #222;
text-decoration: none;
}
.tabdiv {
margin-top: 2px;
background: #fff;
border: 1px solid #dedbd1;
padding: 5px;
}
.tabdiv li {
list-style-image: url(«star.png»);
margin-left: 20px;
}
.ui-tabs-hide {
display: none;
}
|
- * — Удаляет настройки браузера по умолчанию для полей и отступов.
- Тело — добавляет некоторые основные стили текста.
- .widget — — Немного цвета для различения
Tab Areaa. - .widget a — Стиль ссылок.
- .tabnav li — отображает список в «встроенном» (горизонтальном)
манера. Дает немного отступов между ними. - .tabnav li a — это помогает выделить вкладки из любого
другой контент. - .tabdiv — Придает разделу контента немного больше стиля.
отделить его от вкладок. - .tabdiv li — добавляет пользовательское изображение для списков внутри
область контента. Файл star.png можно загрузить из этого руководства
исходные файлы. - .ui-tabs-hide — jQuery будет применять класс ‘ui-tabs-hide’
div не используется Это устанавливает его так, что они не будут отображаться, когда JQuery говорит об этом
к.
Теперь у вас должно быть что-то вроде следующего:
Он не получит никаких наград за дизайн, но нам интересна функциональность
в; так что давайте погрузимся в JQuery.
Шаг а.3 — Посыпать jQuery
По сути, jQuery позволяет пользователю изменять стили элементов на странице
в реальном времени. Поэтому в нашем случае мы хотим, чтобы jQuery скрывал все элементы внутри div # tabvanilla.
кроме той, которая соответствует выбранной вкладке.
Откройте sprinkle.js и вставьте следующее:
|
1
2
3
|
$(document).ready(function() {
$(‘#tabvanilla > ul’).tabs({ fx: { height: ‘toggle’, opacity: ‘toggle’ } });
});
|
ЭТО ОНО! Но что это значит?
|
1
|
$(document).ready(function() {
|
В этой строке написано «Когда документ готов, сделайте следующее …» — «готово»
означает, когда загружены самые основы страницы (т.е. просто необработанный HTML); это будет
не ждите изображений и видео, как если бы вы использовали вместо ‘onload’ .
|
1
|
$(‘#tabvanilla > ul’).tabs({ fx: { height: ‘toggle’, opacity: ‘toggle’ } });
|
Это говорит браузеру, чтобы выглянуть из списка ul внутри элемента
с идентификатором tabvanilla , и использовать вкладки
функция для взаимодействия с. Мы также определяем два анимационных эффекта ( fx:)
Переключение высоты и непрозрачности. Это заставит область «исчезать и скользить»
при переключении вкладок.
Попробуйте. Теперь у вас должно быть что-то похожее на изображение ниже; с
плавная анимация при переключении вкладок.
Часть B — Выбор видео
Именно здесь вы можете увидеть большие эффекты, сделанные с использованием того же кода. Следующий,
мы создадим простой ‘Video Selector’, который можно было увидеть во многих WordPress
шаблоны недавно.
Шаг б.1 — HTML
Исходя из предыдущего интерфейса, добавьте следующее в ваш index.html
файл.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
|
<div id=»featuredvid» class=»widget»>
<div class=»fvid» id=»vid-1″>
<object width=»270″ height=»152″> <param name=»allowfullscreen» value=»true» /> <param name=»allowscriptaccess» value=»always» /> <param name=»movie» value=»http://www.vimeo.com/moogaloop.swf?clip_id=1211060&server=www.vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=00ADEF&fullscreen=1″ /> <embed src=»http://www.vimeo.com/moogaloop.swf?clip_id=1211060&server=www.vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=00ADEF&fullscreen=1″ type=»application/x-shockwave-flash» allowfullscreen=»true» allowscriptaccess=»always» width=»270″ height=»152″></embed></object>
</div>
<div class=»fvid» id=»vid-2″>
<object width=»270″ height=»219″><param name=»movie» value=»http://www.youtube.com/v/gPwmG3VuO_E&hl=en&fs=1″></param><param name=»allowFullScreen» value=»true»></param><embed src=»http://www.youtube.com/v/gPwmG3VuO_E&hl=en&fs=1″ type=»application/x-shockwave-flash» allowfullscreen=»true» width=»270″ height=»219″></embed></object>
</div>
<div class=»fvid» id=»vid-3″>
<object width=»270″ height=»219″><param name=»movie» value=»http://www.youtube.com/v/p86BPM1GV8M&hl=en&fs=1″></param><param name=»allowFullScreen» value=»true»></param><embed src=»http://www.youtube.com/v/p86BPM1GV8M&hl=en&fs=1″ type=»application/x-shockwave-flash» allowfullscreen=»true» width=»270″ height=»219″></embed></object>
</div>
<ul class=»vidselector»>
<li><a href=»#vid-1″><span>Where The Hell Is Matt?
<li><a href=»#vid-2″><span>Clint Eastwood’s The Office
<li><a href=»#vid-3″><span>Pale Blue Dot
</ul>
</div><!—/featuredvid—>
|
Мы начинаем с создания другого div .widget, но на этот раз с идентификатором featuredvid
(важно, чтобы у него был другой идентификатор, так как это то, что jQuery использует для различения
вкладка разделов друг от друга).
Далее у нас есть три элемента .fvid с их собственными уникальными идентификаторами. Внутри каждого есть
Вставить код для видео.
Наконец, внизу находится наш список «.vidselector», который будет действовать как наша вкладка. В качестве
в предыдущем примере ссылка каждого элемента списка соответствует одному из
Идентификаторы.
У вас должно быть что-то похожее на это:
Шаг б.2 — Стайлинг
В файле style.css , следуя CSS из нашего предыдущего примера,
вставить следующее:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
|
#featuredvid {
text-align: center;
}
.fvid {
margin-bottom: 5px;
}
.vidselector li {
text-align: left;
list-style: none;
padding: 5px;
background: #ffffff;
border: 1px solid #dedbd1;
text-transform: uppercase;
margin-bottom: 5px;
}
|
- .vidselector li — создает эффект в штучной упаковке для видео
ссылка, чтобы войти.
Шаг б.3 — Посыпать jQuery
Внутри sprinkle.js добавьте следующее перед строкой, содержащей });
из предыдущего примера.
|
1
|
$(‘#featuredvid > ul’).tabs();
|
Это говорит вашему браузеру использовать функцию вкладок для взаимодействия со списком ul внутри
элемент #featuredvid. На этот раз мы не определяем анимационные эффекты, так как
из-за характера содержимого в этих полях (видео) эффекты обычно не работают
очень хорошо.
Одна из проблем, возникающих с этим эффектом, заключается в том, что Internet Explorer не делает паузу
видео на вкладке при переключении на другую, что приводит к продолжению воспроизведения звука
фон. Этого не происходит в Firefox, Opera или Safari.
Резюме
Надеюсь, этот урок показал вам, что с помощью jQuery можно сделать гораздо больше
функции, чем вы изначально думали. Проверьте
из официальной документации для jQuery UI / Tabs .
Оба эти эффекта были включены в CocoaNews —
первый в семействе тем WordPress от vivaWP
наступает середина августа.