Найти на сайте

Создаём простенький спойлер jquery

+24
3.14K
  2. Блоги
  3. Создаём простенький спойлер jquery
Создаём простенький спойлер jquery, и используем в нужных целях.
Первым делом нужно подключить используемую библиотеку jQuery и еще JS приблуду, которая отвечает за плавное сворачивание и разворачивание. Приведенный код нужно разместить на web-странице между <head>...</head>
jQuery у нас есть, так что его подключать не нужно.

Открываем /templates/ваш шаблон/template.php, редактируем:
Между <head> и </head> вписываем следущее:
  1. <script type="text/javascript">
  2. $(document).ready(function(){
  3. $('.splLink').click(function(){
  4. $(this).parent().children('div.splCont').toggle('normal');
  5. return false;
  6. });
  7. });
  8. </script>
Добавляем в CSS-файл строчку, чтобы по-умолчанию спойлер был закрыт: 
  1. .splCont{display:none; padding:3px 5px;}
Если у Вас нет CSS-файла или Вы не знаете как его туда вставить, то можно прямо в самом тексте помещаем (главное разместить до спойлера): 
  1. <style type="text/css">
  2. .splCont{display:none; padding:3px 5px;}
  3. </style>
Далее размещаем между тегами <body>...</body> в любом месте код самого спойлера. Для моего примера это код такой: 
  1. <a href="javscript://" class="splLink">Спойлер</a>
  2. <div class="splCont">
  3. внутри спойлера
  4. </div>
Применение.
У меня на сайте с помощью конструктора форм было создано много форм, соответственно длинная информация.
Решил эту часть скрыть в спойлере, ну и приукрасить маленько картинкой в места текста.
Делаем по аналогии, только добавляем это изображение, вместо "спойлер".
Иллюстрация Заходим в /templates/ваш шаблон/components/ открываем com_users_profile.tpl
Это изображение переименовываем в information.png и кидаем в /images/users/
Теперь редактируем шаблон профиля
Находим: 
  1. 						{if $cfg.privforms}
  2. 							{$usr.privforms}
  3. 						{/if}
Как вы уже поняли, нам нужно эту часть спрятать в спойлер и задать изображение.
Заменяем это на:
  1. <a href="javscript://" class="splLink"><p><img src="/images/users/information.png" alt="Подробная информация"></p></a>
  2. <div class="splCont">
  3. 						{if $cfg.privforms}
  4. 							{$usr.privforms}
  5. 						{/if}	
  6. </div>
Готово.

По этой же аналогии можно применить спойлер где угодно.
Спасибо за внимание.
Модуль "Последние отзывы"
подробная информацияспойлерформы
0
WALTERZ WALTERZ 13 лет назад #
Последнюю часть забыл в [code] вписать, поправьте пожалуйста.
0
WALTERZ WALTERZ 13 лет назад #
Если на странице много спойлеров, то необходимо поместить каждый спойлер в конструкцию ...
0
Александр Александр 13 лет назад #
Я еще давно сделал простой спойлер, не думал, что может понадобиться кому-то. Но у себя я сделал по-другому вот: http://ariskpriest.ru/relise/arisk-priest-v-tylu-vraga-2009.html смотреть в середине страницы там, где написано «Лирика:» Если кого заинтересует, такого вида спойлер могу написать, как прикрутить. А ну и второй момент, там же на странице можно посмотреть, как прикручивал PrettyPhoto в отличие от прикрутки Lightbox, PrettyPhoto намного более заморочен но имеет свои преимущества, например увеличение картинок в 2 этапа, т.е. если картинка очень большая, то он ее показывает всю но не сразу.
0
Anabiotick Anabiotick 13 лет назад #
Немного не понял, не пробовал, но чем не устраивает спойлер в bb-кодовом редакторе?
0
Александр Александр 13 лет назад #
Он не работает, причем не только у меня но и у многих, на форуме часто об этом пишут.
0
Anabiotick Anabiotick 13 лет назад #
Не работает это тот, который фильтр добавлен, а надо пользоваться уже встроенным в bb-кодовый редактор и там все прекрасно работает.
Ну ка, на кнопочку жмем
0
lezginka.ru lezginka.ru 13 лет назад #
чуть не тему, но все же профи, вы может дадите код простенького слайдера фото(чтобы из папки брал фото и "крутил")
0
WALTERZ WALTERZ 13 лет назад #
Их достаточно много, ищите яваскрипты, jquery.
0
Pampa Pampa 13 лет назад #
Глань почту в личке.
0
CozaNostra CozaNostra 13 лет назад #
[code] слайд 1 слайд 2 слайд 1 слайд 2 [/code] вот помоему допустимое решение
0
CozaNostra CozaNostra 13 лет назад #
ой ой...не написал код...
0
WALTERZ WALTERZ 13 лет назад #
Кстате не обязательно в template.php сувать скрипт Лучше в сам com_user_profile.tpl, воспользовавшись {literal}

Еще от автора

Урок. Расширяем функционал компонента ПОИСК. Вывод изображений

Урок. Расширяем функционал компонента ПОИСК. Вывод изображений

Долго отсутствовал, точнее не имел возможности. Поэтому рад снова вернуться к Вам! И так, этот пост о доработке поиска.
17
Баг с регистрацией нового пользователя. Исправляем

Баг с регистрацией нового пользователя. Исправляем

И снова здравствуй, дорогое сообщество! Собственно хотел помочь человеку в теме http://instantcms.ru/forum/thread14031-1.
35
Доработка. Поиск клубов

Доработка. Поиск клубов

И снова привет, дорогое сообщество! Писали, что поиск клубов не работает. Взглянул. Оказалось, что поисковик ищет лишь фотографии и блоги клубов.
8

InstantCMS Team

Связь с нами
Email dev@instantcms.ru

Делаем полезные Интернет проекты с 2008 года 💫

О проекте

Поддержка

Дополнения

Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.