| Главная » Файлы » Прочие скрипты » 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)скорость смены блков чем меньше цифра тем быстрее будут меняться блоки! Ну вот вроде и всё! Удачи! | |
| Просмотров: 477 | Загрузок: 0 | | |
| Всего комментариев: 0 | |
|
| |