Преподавание

Новости

Все новости
RSS лента новостей

Ссылки

Наземные экосистемы таежной зоны | Учебное пособие

Версия для печати Версия для печати

Задание по 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 (содержимое).

Поиск по сайту

Пользовательского поиска

    Мой аккаунт в Twitter: @alikrpk

    Форум

    Последнее сообщение
    • Темы докладов, 2018 - 2019 уч. год
      Автор: Марахтанов Алексей
      Сообщение: Закрепить выбор темы можно
      будет на след. занятии. Одну
      тему можно делать
      самостоятельно или в паре. ...

    Перейти в раздел

    Если нашли ошибку

    Система Orphus


    Статистика

    Rambler's Top100