6 312 В веб-разработке очень часто применяется прием раскрывающихся блоков. Самым простым примером может служить раскрытие спойлеров. Содержимое раскрывающихся блоков может быть абсолютно любым. Если применять jQuery, можно получить максимальную эффективность при минимальных затратах времени. К тому же, можно добавить эффекты к закрытию и открытию блока.
Как сделать раскрывающийся блок
В первую очередь необходимо проверить, подключена ли jQuery. Если нет, то подключить библиотеку можно различными способами – как через ссылку на внешнее хранилище, так и как простой исполняемый файл.
Реализуется это так:
|
1 |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> |
|
1 |
<script type="text/javascript" src="js/jquery-1.10.2.js"></script> |
В теге <head> необходимо создать следующую функцию:
|
1 2 3 4 5 6 7 |
function facechange (objName) { if ( $(objName).css('display') == 'none' ) { $(objName).animate({height: 'show'}, 400); } else { $(objName).animate({height: 'hide'}, 200); } }; |
Параметром данной функции служит имя блока. Имя блока передается во время вызова самой функции. После этого идет логический блок – если у выбранного блока задано с помощью CSS свойство display = none, то он не отображется, если он уже отображен, то он скрывается. С помощью параметров (в данном случае 400 и 200 соответственно) можно задать скорость прорисовки либо сокрытия элемента.
Осталось создать блок с необходимым содержимым и кнопку, на которую будет повешен вызов функции сокрытия/показа блока.
|
1 2 3 4 5 6 7 |
<div id="block"> <ul> <li><a href="#">Какой-то текст</a></li> <li><a href="#">Какой-то текст</a></li> </ul> </div> <a href="#" onclick="facechange('#block'); return false">Кнопка открытия/закрытия</a> |
Используя jQuery можно в несколько строк кода реализовать эффектное отображение/сокрытие выбранного блока.
Демо не работает.