Главная » Файлы » Прочие скрипты » jQuery

Замена блока с помощью JQuery
24.06.14, 09:19:57

Скачать файл




Для начало смотрим демо

Далее качаем архив и кидаем файл jquery-1.7.1.min.jsв корень сайта или в папку js.

В верхнюю часть сайта между:
Код
<head> И </head>

Подключаем jquery-1.7.1.min.js:
Код
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>

Адрес файла меняем в зависимости от того места куда вы его залили.

Далее там где хотите видеть данный эффект создаем блоки(колличество блоков ограничевается только вашей фантазией!)каждому блоку присваем идентификатор.Соответственно блоки заполняем и оформляем по своему усмотрению.

Так же создаём кнопку при нажатии на которую будет прятаться первый блок и всплывать второй
(кнопки вы можете поместить как в нутрь блока так и после его закрытия в зависимости от того хотите ли вы чтоб кнопка убиралась вместе с блоком или оставалась видимой.)
Пример:
Код
<div id="blok1">  
  Здесь ваш контент  
  <input name="button" type="submit" value="Кнопка1" class="button">  
  </div>  
  <div id="blok2">  
  Здесь ваш контент  
  <input name="button" type="submit" value="Кнопка2" class="button2">  
  </div>


Далее в стилях для блоков которые будут всплыватьпрописываем:
Пример:
Код
#blok2{  
  display:none;  
  }

Т.е изначально делаем их невидемыми.

Далее после подключенного скрипта:
Код
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>

Прописываем javascript:
Код
<script type="text/javascript">  
  jQuery (function()  
  {  
  jQuery('.button').click(function()  
  {  
  jQuery('#blok1').slideUp(1000);  
  jQuery('#blok2').slideDown(1000);  
  });  
  });  
  </script>

Пояснения:

При клике на кнопку с классом button:
Код
jQuery('.button').click(function()  
  {

Спрятать (slideUp) блок с идентификатором #blok1
Код
jQuery('#blok1').slideUp(1000);

И показать(slideDown) блок с идентификатором #blok
Код
jQuery('#blok2').slideDown(1000);


Цифра в скабках (1000)скорость смены блков чем меньше цифра тем быстрее будут меняться блоки!
Ну вот вроде и всё!
Удачи!
Категория: jQuery | Добавил: Apocalypse | Теги: блока, помощью, замена, JQuery
Просмотров: 321 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: