Доброго дня всем разработчикам и простым пользователям. Пишу сюда потому, что нашел довольно интересный скрипт, использующий для своей работы библиотеку jQuery, однако, посмотрев его, понял, что хочу немного большего. Сейчас я нахожусь в активном лазании по документации jQuery, чтобы понять, как мне построить то, что я хочу видеть.
А мне бы хотелось вот что: у нас есть изображение, некоторые области которого являются активными. При нажатии на активную област в отведенном для этого контейнере меняется содержимое, причем меняется довольно красиво, выцветанием, так сказать.
Итак, мои мысли по этому поводу.
Для начала нам нужна map-карта, ну, и само изображение, разумеется. При этом, задавая некую область, мы будем задавать и ее идентификатор(id).
<area coords="..." id="ar1">
Итак, у нас есть несколько областей с уникальными идентификаторами. Это значит, что с помощью запроса мы задаем выполнение определенной функции только при взаимодействии с этой областью. Как пример - функция "по одинарному щелчку", то есть onClick. В jQuery она прописывается несколько по иному:
$("ar1").click(function() {
//текст функции//})
Прежде чем работать с контейнером, нужно его как-то объявить, кроме того, нужно объявить каждую из вкладок. Здесь у меня вышел стопор. Я не слишком хорошо разбираюсь в классах, элементах, в массивах тех же самых, поэтому не знаю, как прописать правильное объявление для контейнера и каждой вкладки. Для того скрипта, который я видел, было прописано так:
<div class="container">
<div class="html-box">/* <ul class="tabs">
<li class="active"><a href="#tab1">Вкладка 1</a></li>
<li><a href="#tab2">Вкладка 2</a></li>
<li><a href="#tab3">Вкладка 3</a></li>
</ul> */ <-- список ссылок, в моем случае, он точно не нужен, так как мы прописываем изменение содержимого контейнера не через нажатие на ссылку, а через нажатие на область на изображении<div class="tab_container1">
<div style="display: block;" id="tab1" class="tab_content">
текст 1
</div><div style="display: none;" id="tab2" class="tab_content">
текст 2
</div><div style="display: none;" id="tab3" class="tab_content">
текст 3
</div></div>
</div>
</div>
Как я понимаю, к классу можно обращаться как $(".tab-content"), а к каждой вкладке в отдельности $(".tab_conten[tab1]"). Но, по правде сказать, я не совсем понимаю, как это будет отображаться, в частности, сам контейнер, объявленный как класс, и вкладки.
Следующий этап - прописать в функцию действия, которые должны происходить. Здесь я ощущаю себя крайне неуверенно. Как я понимаю, поскольку вкладки накладываются одна на другую, при нажатии открытая вкладка должна стать скрытой, а нужная нам - появиться. К тому же, в самом начальном положении должны быть скрыты все вкладки кроме какой-то первичной. За скрытие отвечает эффект hide(), а за плавное появление, которое мне нужно - fadeIn().
Получается, чтобы все прошло верно, нам нужно скрыть уже открытую вкладку и открыть новую, нужную нам. Но как определить, которая открыта? Возможно, есть вариант при вызове функции разом скрывать все, а на их месте пусть появляется нужная. Тогда нам не придется определять, что сейчас открыто.
Итак, примерный код должен получиться:
$("ar1").click(function() {
$("tab_content").hide();
$("tab_content[tab1]").fadeIn();})
И такую придется прописать для каждой области.
Я обращаюсь с вопросом к опытным разработчикам скриптов: есть ли в моей логике ошибки? Если их нет, то правильно ли я понял семантику языка, правильно ли составил запрос?
Очень надеюсь на помощь, заранее спасибо.
Отредактировано Януш (2011-04-01 20:31:54)