Скрипт меню с контентом “почти как флэш” своими руками. Часть 2. Программирование.

« Предыдущая запись
 
  Следующая запись »
 

Мы продолжаем работу над меню с контентом, реализованным на сайте художницы Марии Берсеневой. В первой части статьи была произведена вёрстка меню, а в этой части мы оживим его при помощи javascript и ajax-библиотеки jQuery.

11123 thumb Скрипт меню с контентом “почти как флэш” своими руками. Часть 2. Программирование.

Прежде чем говорить о функции, которая позволит нам сделать всё то, что мы хотим, прокрутим в голове, как это должно работать. При наведении на неактивный пункт меню должна происходить следующая последовательность действий:

  1. На кнопке, на которую мы навели, изменяется цвет бэкграунда на светло-серый (как помните, её левой и правой части, т.е. в первом и втором столбце таблицы)
  2. На кнопке, на которую мы навели, изменяется изображение с именованием кнопки (во втором столбце таблицы).
  3. На кнопке, которая была активной, изменяется цвет бэкграунда на тёмно-серый (в первом и втором столбце таблицы).
  4. На кнопке, которая была активной, изменяется изображение с именованием кнопки (во втором столбце таблицы).
  5. Предыдущий контент исчезает и заместо него появляется новый.

Итого: нужно изменить 8 элементов (во 1, 2 и 5 пунктах по два элемента).

Cкрипт меню только на JavaScript
var check_lmen = '1'; /*номер пункта меню, который сейчас активен*/
function menuchange(imagename,divid,number){
if (check_lmen!=number){ /*проверка*/
var colorr = '#efeff5'; /*номер активного цвета*/
var colorr2 = '#d8dadd'; /*номер неактивного цвета*/

/*Определяем префикс текущей кнопки и имя её изображения*/
if (check_lmen=='1'){
divid2 = 'lb_fanart';
imagename2 = 'lbut_fanart.png';
}
else if (check_lmen=='2'){
divid2 = 'lb_colls';
imagename2 = 'lbut_collects.png';
}
else if (check_lmen=='6'){
divid2 = 'lb_other';
imagename2 = 'lbut_other.png';
}
/*Определяем список элементов, которые нам надо изменить*/

var div_content = divid+'_cont'; /*Блок с текущим контентом*/
var div_content2= divid2+'_cont'; /*Блок с будущим конт.*/
var name_img = divid+'_img'; /*Блок с текущей картинкой*/
var name_img2 = divid2+'_img'; /*Блок с будущей картинкой*/
var div_name1_1 = divid; /*Текущая правая часть кнопки*/
var div_name1_2 = divid+'2'; /*Текущая левая часть кнопки*/
var div_name2_1 = divid2; /*Будущая правая часть кнопки*/
var div_name2_2 = divid2+'2'; /*Будущая левая часть кнопки*/
/*Производим измненения */
document.getElementById(div_name1_1).style.background=colorr;
document.getElementById(div_name1_2).style.background=colorr;
document.getElementById(div_name2_1).style.background=colorr2;
document.getElementById(div_name2_2).style.background=colorr2;
document.getElementById(name_img).style.background="url(images/"+imagename+") no-repeat";
document.getElementById(name_img2).style.background="url(images/"+imagename2+") no-repeat";
document.getElementById(div_content).style.display="block";
document.getElementById(div_content2).style.display="none";
/*Указываем номер теперь уже новой текущей кнопки*/
check_lmen=number;
}
}

Разберём скрипт попунктно.

  1. Прежде всего создаём переменную, в которой будет хранится номер текущей кнопки (переменная check_lmen). [строка 1]
  2. Определяем функцию menuchange, которая и будет вызываться при наведении на кнопки. Ей будет передано три аргумента, которые определяют ту кнопку, на которое будет сделано наведение мышкой: а) полное имя активного изображения с именем кнопки; б) префикс идентификаторов контейнеров (id-шки div-ов) – вы ведь помните, что для каждой кнопки они начинаются одинаково; в) номер кнопки. [строка 2]
  3. Первым делом функция проверяет номер текущей кнопки и номер кнопки, на которую была наведена мышь. Если они совпадают, то ничего происходить не будет.[строка 3]
  4. Создаём переменные с номерами цветов бэкграундов для активной и неактивной кнопок.[строки 4-5]
  5. Для текущей кнопки определяем префикс id-шек div-ов и полное имя неактивного изображения кнопки. Если пунктов в меню будет больше трёх, то нужно будет их сюда дописать.[строки 8-19]
  6. Создаём переменные, которые содержат имена всех элементов, которые надо изменить (как было сказано ранее – восемь штук). [строки 21-28]
  7. Производим изменения, используя функцию getElementById. Сначала изменяем цвет кнопок [строки 30-33], затем изображения с именами кнопок [строки 34-37], а затем сменяя блок с контентом [строки 38-39]
  8. Изменяем номер текущей кнопки (ведь теперь у нас новая активная кнопка).[строка 41]

Осталось последнее, в коде HTML поставить на нужные элементы обработчик событий onMouseOver и поставить ссылку на скрипт, который мы написали выше (положим его в папку js под именем js_left_menu.js).

Для начала зайдём в первую часть статьи и посмотрим html-код. Нам нужно проставить событие onMouseOver на левую и правую части кнопок. Для этого изменяем 5, 6, 7 строчки (для левой части кнопок) и 12,16 и 20 (для правой части кнопок).

<div id="lb_fanart2" onMouseOver="javascript:menuchange ('lbut_fanart_act.png','lb_fanart','1')">&nbsp;</div>
<div id="lb_colls2" onMouseOver="javascript:menuchange ('lbut_collects_act.png','lb_colls','2')">&nbsp;</div>
<div id="lb_other2" onMouseOver="javascript:menuchange ('lbut_other_act.png','lb_other','6')">&nbsp;</div>
<div id="lb_fanart" onMouseOver="javascript:menuchange ('lbut_fanart_act.png','lb_fanart','1')">
<div id="lb_colls" onMouseOver="javascript:menuchange ('lbut_collects_act.png','lb_colls','2')">
<div id="lb_other" onMouseOver="javascript:menuchange ('lbut_other_act.png','lb_other','6')">

И прописываем в хидере html-документа строку.

<script type="text/javascript" src="js/js_left_menu.js"></script>

Всё замечательно, всё работает. Но хотелось бы, чтобы контент появлялся не мгновенно, как сейчас, а как бы затухая и возникая. В этом нам поможет библиотека jQuery.

 

Cкрипт меню с помощью jQuery.

Итак, как было сказано ранее, jQuery поможет нам сделать плавное затухание. Но помимо затухания, с помощью этой библиотеки можно сделать и другие изменения. Собственно раз уж мы используем её, то почему бы и нет, плюс практика лишняя:).

Итак, смотрим код скрипта выше. Мы будем менять 21-41 строчки, изменив немного сначала значения переменных, а потом изменив участок кода, отвечающего за изменения.

/*Определяем список элементов, которые нам надо изменить*/
var div_content = '#'+divid+'_cont';
var div_content2= '#'+divid2+'_cont';
var name_img = '#'+divid+'_img';
var name_img2 = '#'+divid2+'_img';
var div_name1_1 = '#'+divid;
var div_name1_2 = '#'+divid+'2';
var div_name2_1 = '#'+divid2;
var div_name2_2 = '#'+divid2+'2';
/*Проводим изменения*/
$(document).ready(function(){
$(div_name1_1).css('background',colorr);
$(div_name1_2).css('background',colorr);
$(div_name2_1).css('background',colorr2);
$(div_name2_2).css('background',colorr2);
$(name_img).css('background',"url(images/"+imagename+") no-repeat");
$(name_img2).css('background',"url(images/"+imagename2+") no-repeat");
$(div_content2).css('display','none');
$(div_content).fadeIn(200);
return false;
});
  1. Строки 2-9 почти не отличаются, кроме того, что к каждой переменной добавляется знак идентификатора – #.
  2. В строке 11 вызывается функция jQuery. Для информации - строчку можно переписать более коротко: $(function() { . Также можно $ заменить на jQuery – собственно $ является псевдонимом функции jQuery.
  3. Строки 12-20 в целом похожи друг на друга. Сначала идёт вызов жкьюри и указывается имя селектора – имя-идентификатор контейнеров кнопок и контента. Затем используется команда css, принимающая два аргумента – имя CSS-свойства и его значение. Собственно в строках 12-18 изменяется CSS-свойство background, которому присваивается либо новый цвет, либо изображение. В общем всё по правилам цсс. В строке 20 отключается из видимости старый блок с контентом.
  4. А вот 21 строка отвечает собственно за плавное появление нового блока контента. Время появления указано в 200 миллисекунд. Больше не рекомендую, ниже упомяну об этом.

В самом конце скрипта (после нашей функции menuchange) также необходимо добавить следующую строчку.

$(function() { });

Она инициализирует работу jQuery. Без этой строчки скрипт работать не будет.

И да, не забудьте прописать в HTMLе путь к библиотеки jQuery.

<script type="text/javascript" src="js/jquery.js"></script>

А пример того, что мы сделали, можно посмотреть по ссылке.

 

Заключение

Итак, подведём итоги. Мы рассмотрели пример из повседневной практики, который реализует меню с блоком контента. Был рассмотрен макет, проблема его реализации, а также предложено решение его устранения. Затем была реализована вёрстка, и сделан первый скрипт только на JavaScript, после чего скрипт был изменён при помощи библиотеки jQuery. Пример с jQuery интересен и хорош, но обладает одним изъяном. Если дёргать по меню курсором мышки как параноику (в нашем случае переключения между кнопками должно быть быстрее 200 миллисекунд), то иногда можно сделать, чтобы одновременно были отображены несколько блоков контента. Дело в том, что если переключить кнопку до того как появился новый контент на наведённую до этого кнопку, то текущий контент не будет отключён, поскольку он ещё завершил операцию со своим “появлением” (ты сам хоть понял, что сказал? – прим.ред.). Адекватное решение проблемы я не нашёл, поэтому над этим вопросом можно будет подумать.

Искренне надеюсь что все остались довольны=). Что я ещё могу добавить… Stay tuned, people 8).

 

Ссылки по теме

, , , , , ,

1 звезда2 звезд3 звезд4 звезд5 звезд (ещё не оценили)
Понравилась статья или журнал? Подписывайся на продолжение!
Отзывов: 14 на запись

"Скрипт меню с контентом “почти как флэш” своими руками. Часть 2. Программирование."

  1. Давно хотел попробывать!!!=)))

  2. Александр Шуйский
    29/09/2009 at 15:18 Постоянная ссылка Цитировать

    Давай-давай, с тебя атчот о проделанной работе=)

  3. Жди скоро покажу!=)

  4. Александр Шуйский
    29/09/2009 at 15:22 Постоянная ссылка Цитировать

    Договорились=)

  5. Целестрик
    03/10/2009 at 21:20 Постоянная ссылка Цитировать

    Безумно полезно, достаточно понятно написано…Пасибо!^^

  6. Всегда пожалуйста=)

  7. особо заинтересовало… На этом, возможно, буду делать новый проект, может, даже зацепит и старый)))

  8. Да, симпатичный скриптик получился =) Есть идеи по его дописанию, но как-то времени нет, замотался весь

  9. Евгений
    26/05/2010 at 20:18 Постоянная ссылка Цитировать

    используй $(object).stop(); для остановки анимации объекта object
    //это для бага описанного в заключении

  10. насколько помню, пробовал, но чего-то не то выходило. помню правда, что потом появилась идея как избавиться от бага, но как-то времени и возможности не было.
    а так спасибо за комментарий!

  11. Как замечательно!!! Спасибо.
    Попробую сделать… когда высплюсь.

  12. Попробуйте!
    Жаль только примера на сайте уже нет – сделан редизайн

  13. а что-то у меня не получилось, скрипт не отрабатывает:
    при наведении на “Коллекция” исчезает “Фан Арт” и само слово “Коллекция” со стрелкой. НА “Другое” – тоже самое…
    вроде старалась сделать все по шагам, имя папки поправила (у меня img)
    Проверила все до строчки, но – не работает. ПОчему?

  14. не глядя трудно сказать. предлагаю сохранить тот пример, который имеется в статье и работать с ним или всё проработать заново детально без замен чего либо, чтобы убедиться, что работает, а уже потом заменять на свои значения. обычно помогает =)

Добро пожаловать, коллега! Вы можете оставить свой отзыв:





Допустимые XHTML-теги:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Подписка на комментарии