Создать открытие и скрытие блока div на jQuery
 | |
| Думаю каждый мог увидеть на любом интернет ресурсе кнопку открыть и закрыть, а также подробнее, где открывается блок содержимого. Теперь вы можете сделать на своем сайте также, где будет плавное раскрытие блога с его содержимым, а основном это идет информация, хотя в немо можно поставить все что вам нужно, до изображение. Иногда можно увидеть, что идет описание, и здесь потом стоит этот скрипт, где по клику открываете и продолжается дальше описание. На любом ресурсе может пригодится, как статьи или кино сайт, где описывают подробно, и чтоб сохранить место, как раз разработан этот блок. Теперь как все это создать, где при помощи JS (библиотеки jQuery) будем делать. Первое что нужно сделать, это подключение с сервера Google: Код <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> Потом нужно подключить скрипт, где вы будете оставлять информацию при раскрытие. Код <script type='text/javascript'> $(document).ready(function() { $("A#trigger").toggle(function() { // Отображаем скрытый блок $("DIV#box").fadeIn(); // fadeIn - плавное появление return false; // не производить переход по ссылке }, function() { // Скрываем блок $("DIV#box").fadeOut(); // fadeOut - плавное исчезновение return false; // не производить переход по ссылке }); // end of toggle() }); // end of ready() </script> </head> <body> <a href='#' id='trigger'>Открыть/скрыть информацию</a> <!-- Всё происходит при нажатии на ссылку --> <div id='box' style='display: none;padding:10px;background-color:#f1f1f1;margin:10px;width:210px;'>Содержимое и опять сайт ZORNET.RU</div> Такой скрипт скрываем информацию, а значит остается больше места и сильно его экономит, а значит он информационно не перезагружен и вы в любой время можете открыть. Здесь Демонстрация этого материала, где можете посмотреть визуально как работает. На конструкторе uCoz уже библиотека подключена, и на этом хостинг не нужно ее устанавливать. Источник: Tradebenefit.ru | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 10 | |
|
| |
