Язык
Контакты
GitHub
Поддержка
Регистрация
Войти
Логин: Пароль: Запомнить:
Пользователи
Последние сообщения
Ответить
1

Делаем скрывающиеся и раскрывающиеся блоки

skad0

  • Атом-мозг
  • Юзер
  • 841
  • Репутация:10 
  • Предупреждения: 0 
  • Регистрация:
    2 Окт 2010
#1
Это очень просто.

Пишем в скрипте:
Code:
function close() {
   document.GetElementById('block').style.display='none'; // Ищем в DOM (Документ) объект с id 'block' и задаем ему "невидимость"
   document.GetElementById('hidelink').style.display='none'; // Ищем в DOM (Документ) объект с id 'hidelink' и задаем ему "невидимость"
   document.GetElementById('showlink').style.display='block'; // Ищем в DOM (Документ) объект с id 'showlink' и задаем ему "видимость"
 }
function open() {
   document.GetElementById('block').style.display='block'; // Ищем в DOM (Документ) объект с id 'block' и задаем ему "видимость"
   document.GetElementById('hidelink').style.display='block'; // Ищем в DOM (Документ) объект с id 'hidelink' и задаем ему "видимость"
   document.GetElementById('showlink').style.display='none'; // Ищем в DOM (Документ) объект с id 'showlink' и задаем ему "невидимость"
 }

html:
Code:
<a href="#" id="hidelink" onClick="close()"> Скрыть </a> 
<!-- Эта ссылка видна изначально, при нажатии на неё (onclick) выполняем ф-цию close() -->
<a href="#" id="showlink" onClick="open()" style="display: none;">Раскрыть</a>
<!-- Эта ссылка станет видна после нажания на Скрыть,  при нажатии на эту (onclick) выполняем ф-цию open() -->
<div id="block"> Трололо</div>
<!-- Эта блок, который мы и скрываем -->

Это самый простой и элементарный способ, есть море других более простых. Даже на CSS можно это осуществить


Jquery:

Итак. Jquery - библиотека javascript с кучей интересных ф-ций.
Итак. Делаем плавное скрытие блока.
JS:
Code:
<script type="text/javascript" language="javascript" src="/js/jquery.js"> </script> // Подключаем библиотеку jquery
     <script>
        $(document).ready(function(){ // По загрузке документа выполняем ф-цию
        $(".showhide1").click(function () { // при нажатии на объект с class = showhide1 выполняем ф-цию
      $(".obj1").slideToggle("slow"); // Медленно скрываем объект с class = obj1
    });
  });
  </script>

HTML:
Code:
<div class="showhide1"> Трололо</div>
<div class="obj1"> Онотоле следит за тобой </div>

Вот и все. Это есть стандартный параметр jquery.

Отредактировано автором 28 Ноя 2010

Drunya

  • Man of God
  • Админ
  • 3527
  • Репутация:110 
  • Предупреждения: 0 
  • Регистрация:
    30 Ноя -0001
#2
skad0, Можно было бы и пример как сделать такое без жабаскрипта на CSS выложить. А то многие без руля как такое возможно:)

Я горжусь тем, что создал бесплатную CMS - AtomX. И люблю нашу команду)

skad0

  • Атом-мозг
  • Юзер
  • 841
  • Репутация:10 
  • Предупреждения: 0 
  • Регистрация:
    2 Окт 2010
#3
Сделаю на досуге)

Добавлено 2010.11.28 11-53

Правда, на чистом css использовать не получится. Только в перемешку с javascript'ом. На чистом можно сделать выпадающее меню)

Добавлено 2010.11.28 12-17

добавил способ на jquery

Drunya

  • Man of God
  • Админ
  • 3527
  • Репутация:110 
  • Предупреждения: 0 
  • Регистрация:
    30 Ноя -0001
#4
skad0 пишет:
Правда, на чистом css использовать не получится. Только в перемешку с javascript'ом. На чистом можно сделать выпадающее меню)
Ну да, я это и имел виду:)

Я горжусь тем, что создал бесплатную CMS - AtomX. И люблю нашу команду)
1
Сейчас online: 53. Зарегистрированных: 2. Гостей: 51.