Преподавание
Новости
Ссылки
|
Задание по JavaScript - устанавливаем JQuery-слайдер Feature ListНеобходимо на сайт, разрабатываемый вами на предыдущих занятиях, установить красивый js-слейдер, который создан для совместного использования с библиотекой Jquery (Пример работы слайдера: http://jqueryglobe.com/labs/feature_list/) и адаптировать его под ваше оформление и ваше содержимое. Для этого нужно проделать следующие шаги:
1. Данный слайдер будет работать только в том случае, если на сайте установлена библиотека jquery. Таким образом, первоначально необходимо ее установить. Для этого: 1.1. Зайдите на сайт библиотеки (http://jquery.com), нажмите Download (скачать), сохраните файл jquery-1.5.2.min.js в корне той папки, где содержатся файлы вашего сайта. 1.2. Подключите библиотеку в индексный файл вашего сайта. Для этого в блоке head (между тегами <head> и </head>) добавьте подключение библиотеки: <script type="text/javascript" src="jquery-1.5.2.min.js"></script> 1.3. Библиотека подключена! Теперь можно пользоваться всеми ее возможностями и устанавливать любые скрипты, созданные на основе jquery. 2. Начинаем установку слайдера на индексную страницу сайта.
2.1. Скопируйте файл (архив) с библиотекой слайдера на свой компьютер (http://jqueryglobe.com/article/feature-list - ссылка с текста download the complete source code with examples from here) Разархивируйте архив.
2.2. Посмотрите, что в архиве:
· html-файл - пример · набор изображений jpg и png - для оформления · стилевой файл. Запустите html-файл, проверьте, что все работает. 2.3. Скопируйте файлы изображений и файл js в папку с вашим проектом. 2.4. Подключите JavaScript файл слайдера. Для этого в блоке head (между тегами <head> и </head>, после добавленного в 1.2) добавьте подключение библиотеки: <script type="text/javascript" src="jquery.featureList-1.0.0.js"></script> 2.5. Добавьте стилевое оформление слайдера и код, запускающий слайдер в блоке head (между тегами <head> и </head>, после добавленного в 2.4): <style type="text/css"> h3 {
margin: 0; padding: 7px 0 0 0; font-size: 16px; text-transform: uppercase; }
div#feature_list { width: 750px; height: 240px; overflow: hidden; position: relative; }
div#feature_list ul { position: absolute; top: 0; list-style: none; padding: 0; margin: 0; }
ul#tabs {
left: 0; z-index: 2; width: 320px; }
ul#tabs li {
font-size: 12px; }
ul#tabs li img {
padding: 5px; border: none; float: left; margin: 10px 10px 0 0; }
ul#tabs li a {
color: #222; text-decoration: none; display: block; padding: 10px; height: 60px; outline: none; }
ul#tabs li a:hover { text-decoration: underline; }
ul#tabs li a.current { background: url('feature-tab-current.png');
color: #FFF; }
ul#tabs li a.current:hover { text-decoration: none; cursor: default; }
ul#output {
right: 0; width: 463px; height: 240px; position: relative; }
ul#output li {
position: absolute; width: 463px; height: 240px; }
ul#output li a {
position: absolute; bottom: 10px; right: 10px; padding: 8px 12px; text-decoration: none; font-size: 11px; color: #FFF; background: #000; -moz-border-radius: 5px; }
ul#output li a:hover { background: #D33431; }
</style>
<script language="javascript"> $(document).ready(function() { $.featureList(
$("#tabs li a"), $("#output li"), { start_item:1
}
);
});
</script>
2.6. Добавляем html-код для отображения слайдера:
<div id="feature_list"> <ul id="tabs"> <li>
<a href="javascript:;"> <img src="services.png" /> <h3>Services</h3>
<span>Lorem ipsum dolor sit amet consect</span> </a>
</li>
<li>
<a href="javascript:;"> <img src="programming.png" /> <h3>Programming</h3>
<span>Lorem ipsum dolor sit amet consect</span> </a>
</li>
<li>
<a href="javascript:;"> <img src="applications.png" /> <h3>Applications</h3>
<span>Lorem ipsum dolor sit amet consect</span> </a>
</li>
</ul>
<ul id="output"> <li>
<img src="sample1.jpg" /> <a href="#">See project details</a> </li>
<li>
<img src="sample2.jpg" /> <a href="#">See project details</a> </li>
<li>
<img src="sample3.jpg" /> <a href="#">See project details</a> </li>
</ul>
</div>
2.7. Проверяем, как что получилось.
3. Модифицируем код и оформление под вашу предметную область: туристические объекты. Для этого вносите изменения в код, добавленный в 2.5 (оформление) и 2.6 (содержимое). |
Поиск по сайту
Пользовательского поиска
Мой микроблог
|
Марахтанов Алексей
персональный сайт
