HTML CSS Blog » Div

Блок вкладок на jQuery

Jemand — Sun, 22 Nov 2009 12:21:36 +0000

Сегодня Вашему вниманию представляю блок вкладок на jQuery. Данный скрипт предназначен для размещения большого количества информации на ограниченной области. В данном примере код я писать не буду, т.к. это готовый пример для работы. Выглядеть этот блок на странице будет следующим образом:

Положение вкладок можно менять простым перетаскиванием. Но лучше один раз увидеть, чем сто раз услышать.
Посмотреть пример работы можно здесь. Скачать исходники можно по этой ссылке.

Открывающиеся закрывающиеся перетаскиваемые блоки

Jemand — Sat, 21 Nov 2009 15:30:11 +0000

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

Для создания открывающихся закрывающихся перетаскиваемых блоков нам понадобится библиотека MotoTools. Её необходимо подключить к странице, для этого добавляем между <head> и </head> следующий код:

Код:

<script type="text/javascript" src="mootools.svn.js"></script>

Сразу после строки, которой подключали MotoTools добавляем JavaScript:

JS-код:

<script type="text/javascript">
window.addEvent('domready', function(){
	$$('#draggables div').each(function(drag){
		new Drag.Move(drag);			
	});	
	$$('#draggables span a').each(function(o){
		$(o).addEvents({'click' : function(event){ 
		$(o.id+'_w').setStyle('display', 'none');
	}		  		  
	})			
	});	
	$$('#links a').each(function(o){
		$(o).addEvents({'click' : function(event){ 
		$(o.id+'_w').setStyle('display', 'block');}		  		  
   	})			
	});	
}); 
</script>

Туда же, в “голову” страницы добавляем немного стилей.

CSS-код:

.window {
	border:solid 6px #343434;
	background:#FFF;
	width:200px;
	height:150px;
	display:none;
}
.msg {
	float:center;
	font-weight:normal;
	font-size:11px;
}

И конечно же нам понадобится HTML, без него никуда.

HTML-код:

<div id="links">
	<a href="#" id="block1">Клик для показа блока №1</a> 
	<a href="#" id="block2">Клик для показа блока №2</a>
</div>
<div id="draggables">
	<div id="block1_w" class="window">
		<span class="msg"><a href="#" id="block1">закрыть</a></span>
		<p>Текст блока №1</p>
	</div>
	<div id="block2_w" class="window">
		<span class="msg"><a href="#" id="block2">закрыть</a></span>
		<p>Текст блока №2</p>
	</div>
</div>

Всё, блоки готовы к использованию.
Пример блоков можно посмотреть здесь.

Прилипающий футер

Jemand — Wed, 04 Nov 2009 17:47:49 +0000

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

CSS- код:

html, body, #wrap {
height: 100%; 
margin: 0px;
}
body > #wrap {
height: auto; 
min-height: 100%;
}
#main {
padding-bottom: 50px; /* отступ должен быть равен высоте футера */
} 
#footer {
position: relative;
margin-top: -50px; /* отрицательное значение высоты футера */
height: 50px;
clear:both;
background: #000;
text-align: center;
color: #fff;
font-size: 260%;
} 
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfix { 
height: 1%;
}
.clearfix {
display: block;
}
/* End hide from IE-mac */

HTML-код:

<div id="wrap">
<div id="header"></div>
<div id="main" class="clearfix"></div>
</div>
<div id="footer">
Я липкий футер! :)
</div>

Пример, того что получится, можно посмотреть здесь.

Работоспособность:
Internet Explorer 8
Firefox 3.5.4
Opera 9.64

Показ, скрытие блока (div) по клику

Jemand — Tue, 03 Nov 2009 17:13:33 +0000

Иногда в процессе создания сайта возникает ситуация, когда информация должна показываться на странице только после клика по определенному элементу сайта. Например, это может быть форма добавления сообщения в гостевой книге, форма быстрого ответа на форуме и т.д. В этой ситуации к нам на помощь приходит следующий код:

CSS-код:

.headline {
border: 1px solid #000000; 
cursor: pointer; 
text-align: center;
}
.hidden {
display: none; 
border: 1px solid #ff0000; 
text-align: center; 
margin-top: 2px;
}

JavaScript:

function show(ele) {
      var srcElement = document.getElementById(ele);
      if(srcElement) {
          if(srcElement.style.display == "block") {
            srcElement.style.display= 'none';
          }
          else {
            srcElement.style.display='block';
          }
      }
  }

HTML-код:

<div class="headline" onclick="show('cat1')">Заголовок</div>
<div class="hidden" id="cat1">Текст раскрывающегося блока</div>

Пример, того что получится, можно посмотреть здесь.

Работоспособность:
Internet Explorer 8
Firefox 3.5.4
Opera 9.64

Размещение блока (div) по центру страницы

Jemand — Sat, 31 Oct 2009 21:02:12 +0000

Для того, чтобы разместить блок (div) по центру окна браузера нам понадобится несколько сток HTML и CSS кода приведенного ниже:

CSS код:

#block-on-center {
position: absolute;
top: 50%;
left: 50%;
height: 200px;
width: 200px;
margin-top: -100px; /* значение равно половине height со знаком минус */
margin-left: -100px; /* значение равно половине width со знаком минус */
border: 1px solid #000;
}

HTML-код:

<div id="block-on-center">
<!-- здесь содержимое блока -->
</div>

Размещаем вышеприведенный код в своем HTML документе не забывая про doctype, head, body, и другие элементы. Готово!

Пример, того что получится, можно посмотреть здесь.

Работоспособность:
Internet Explorer 8
Firefox 3.5.4
Opera 9.64