LOCO.RU » Статьи » JavaScript и Ajax » Делаем всплывающую / свёртывающуюся панель на JavaScript

Делаем всплывающую / свёртывающуюся панель на JavaScript

almix — 15 января 2011 (обновлял 23 октября 2011 в 8:41)
Комментарии (0) Категории: JavaScript и Ajax версия для печати
Делаем всплывающую / свёртывающуюся панель на JavaScript

Делаем всплывающую информационную панель на JavaScript сверху сайта. Она может служить для уведомления посетителей о новой и важной информации, рекламе ваших услуг и товаров, ссылок и всего чего хотите. Прячется и раскрывается по нажатию на ссылку (кнопку), резервируя и убирая за собой отступ сверху.

Пример панели можно посмотреть здесь. При раскрытой панели весь сайт смещается вниз, чтобы хедер не закрывался содержимым информационного блока с проектами. Можно всплывающий блок сделать и поверх, установив у фона необходимую прозрачность, но нам требовалась именно такая реализация.

Сразу приводим кусок кода из файла шаблона

...
<body>
  
  <script type="text/javascript">
$(document).ready(function(){
	if ($.cookie("panel_status") === null) $.cookie("panel_status", "1");
	if ($.cookie("panel_status") == 1) {$("#panel").show(); document.getElementById("wrapper").style.paddingTop="20px";}
	if ($.cookie("panel_status") == 0) $("#panel_open").show();
	
	$("#panel_close_btn").click(function  () {
		$("#panel").slideUp(100);
		$("#panel_open").show();
		document.getElementById("wrapper").style.paddingTop="0px";
		$.cookie("panel_status", "0");
	});
	$("#panel_open_btn").click(function  () {
		$("#panel_open").hide();
		$("#panel").slideDown(100);
		document.getElementById("wrapper").style.paddingTop="20px";
		$.cookie("panel_status", "1");
	});
});
</script>


	<div id="panel">

		<div style="float:right;"><a id="panel_close_btn">спрятать проекты</a></div>

		<div style="width:1000px;margin:auto;">

			<span>Наши проекты: </span>
			<a href="http://top30thebest.ru/" target="_blank" title="ТОП 30">Top 30</a> |
			<a href="http://mayabattle.com/" target="_blank" title="MAYA">MAYA</a> |
			<a href="http://fatherfest.ru/" target="_blank" title="FatherFest">Father Fest</a> |			Hip-Hop Fight | Битва Улиц			
		</div>

	</div>
	<script type="text/javascript">$("#panel").hide();</script>

	<div id="panel_open">
		<div style="float:right;" id="panel_open_btn"><a>показать проекты</a></div>
	</div>
   
  
    <div id="wrapper">
    ...

Жирным выделены идентификаторы, по которым происходит обработка javascript'ом в начале кода.

Свойство paddingTop задаёт смещение - style="padding-top:20px;" у обёртывающего блока div с id="wrapper".
Источник: loco.ru

almix
Разработчик Loco, автор статей по веб-разработке на Yii, CodeIgniter, MODx и прочих инструментах. Создатель Team Sense.

Вы можете почитать все статьи от almix'а.


« Предыдущая статья
← Добавляем RSS-ленту на наш сайт в CodeIgniter
Следующая статья »
ModX: дополняем редактор TinyMCE кнопками вставки таблиц (Table controls) →

Другие статьи по этой теме:

Комментарии (0)     Подпишитесь на RSS комментариев к этой статье.