×
Внимание, мошенник-работодатель (10 авг 2017)

Вниманию программистов Санкт-Петербурга, на SuperJob-е вновь активизировался Семен Григорьевич Шумейко..

Вопрос Спойлер на jQuery

Больше
5 года 1 мес. назад #1 от savage
savage создал эту тему: Спойлер на jQuery
Спойлер на jQuery для сайта порекомендуйте please.

Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.

Больше
5 года 1 мес. назад - 5 года 1 мес. назад #2 от ralf
ralf ответил в теме Re: Спойлер на jQuery
Что же, начнем с теории, а затем напишем свой собственный спойлер на jQuery.

Но прежде всего - качаем собственно последний jQuery (на момент написания данного текста таковой была v.1.7.2) и швыряем куда-нибудь в корень сайта, а лучше - в специально созданный для этой цели каталог.

Подключаем (разместите эти строчки в верхней части нашего скрипта):
<script  type="text/javascript" src="здесь_пишем_путь_к_jquery">
</script>
Рассматриваем здесь различные функции:

show( )
<div id="hidden" style="display:none">Здесь будет находиться наш скрытый текст</div>
<script type="text/javascript">
 function showdiv(){    
$("#hidden").show();
          }
 
 </script>
<input type="button" onclick="showdiv()" value="Показываем скрытый див" />
метод show() имеет три аргумента: slow,normal,fast (быстро, нормально, медленно).

Например:
<div id="hiddens" style="display:none">Снова скрытый текст</div>
<script type="text/javascript">
 function showdivs(){    
$("#hiddens").show("slow");
          }
 
 </script>
<input type="button" onclick="showdivs()" value="Показать скрытый див" />
hide( )

Противоположен методу show(), скрывает элементы на странице, также доступны три элемента.

toggle( )
Совмещает в себе и hide() и show().
<div id="toogle">Пример использования Toogle().</div>
<script type="text/javascript">
 function toggled(){    
$("#toogle").toggle("slow");
          }
 
 </script>
<input type="button" onclick="toggled()" value="Показать/Скрыть div" />
И не забываем, что оно как-то вот так:
$("#ourdiv").show(); /* jQ возьмет элемент с идом ourdiv и покажет*/
$(".ourclass").show();/* Возьмет и покажет элемент с классом ourclass*/
$("p").show(); /* Возьмет все теги p на странице и покажет их */

Это была теория. Или - практическая работа, как вам угодно... А теперь - и в самом деле создаем красивый спойлер для своего сайта: подключаем библиотеку jQuery и скрипт с кодом обработки:

<script type="text/javascript" src="прописываем_здесь_путь/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.splLink').click(function(){
$(this).parent().children('div.splCont').toggle('normal');
return false;
});
});
</script>
Добавляем описание своего css-стиля:
<style type="text/css">
.splCont {display:none; padding:5px 15px;  border:2px solid #A2CDFD;}
</style>
И, наконец, в теле страницы пишем два дива:
<div><a class="splLink" href="">Это ваш спойлер</a>
<div class="splCont">
Содержимое спойлера. Все работает, не правда ли? :)
</div>
</div>
Работает? Уже должен, взгляните:

Программирование
Принимаются заказы на различные проектные работы.



И - пример двойного спойлера. Попросту меняем последнюю часть приведенного выше кода на вот это:
<div><a class="splLink" href="">Это вложенный спойлер</a>
<div class="splCont">
Первый уровень
<div><a class="splLink" href="">Второй уровень</a>
<div class="splCont">Контент второго уровня вложенности</div>
</div>
</div>
</div>
Получаем:

Это вложенный спойлер
Первый уровень
Второй уровень
Контент второго уровня вложенности




Круто? jQuery рулит, короче.
Последнее редактирование: 5 года 1 мес. назад от ralf.
Спасибо сказали: savage

Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.