HTML, Excel, Word, SEOОсновы JavaScript ⇒ Слои и блоки. Управление видимостью

ОСНОВЫ JavaScript

Учебник JavaScript
·Знакомство с JS. Переменные, операторы, операции
·Функции
·Модель HTML документа
·Иерархия документов в бразуере
·Формы
·Окна и фреймы
·Ссылки, заголовок, статус
·События
·События клавиатуры и мыши
·События. Таймер
·Стили. Управление стилями
·Слои и блоки. Управление видимостью
·Объекты JS
·Внешние объекты
·Внутренние объекты
·Массивы
·Регулярные выражения
·Математика в JS
·Пример простого калькулятора
·Дата и время
·Cookies и хранение состояния
·Немного об AJAX
·Работа с WebMoney

 

Слои и блоки. Управление видимостью


Автор: Артемьев Сергей Игоревич ICQ: 438856621 email: _spin_@bk.ru


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

Чтобы ощутить мощь стилей, зайдете на сайт http://www.csszengarden.com/. Полистайте страницы и посмотрите примеры различных дизайнов. Вы можете мне не верить, но все примеры имеют одинаковую HTML – разметку, а различаются только таблицы стилей и картинки. В материалах этого и других уроков стили добавлены непосредственно в теги исключительно в обучающих целях, дабы не загромождать код.

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

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

Под блоком в данном случае понимается некий тег, который в свою очередь может содержать себе другие теги или текстовые данные. Мы не будем вдаваться в дебри спецификаций HTML и CSS. Отмечу лишь, что не все теги могут являться контейнерами (например, теги <hr />и <br />).

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

<a href="#" onclick="toggleInformer(); return false;"> 
	Информер 
</a>


<div id="informer" style="border:1px solid 
	red; color: green;visibility:visible;" >
	Содержимое информера	
</div>

Тогда скрипт для изменения видимости блока будет таким:


<script type="text/javascript" language="javascript">
		function toggleInformer() 	
{ // ищем нужный нам тег информера
var elm = document.getElementById("informer");
// если тег найден, обрабатываем его if(elm)
{ // меняем видимость элемента на противоположную
if(elm.style.visibility == "visible")
{
elm.style.visibility = "hidden";
}
else
{
elm.style.visibility = "visible";
}

}
} </script>
Информер
Содержимое информера

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

Примечательно, что свойства видимости распространяются не только на сам блок-контейнер, но и на все вложенные в него элементы. Т.е. вам достаточно менять видимость только контейнера не заботясь о содержимом. Однако будьте аккуратны: в некоторых браузерах существуют отклонения от стандартных правил и спецификации. Например, рассмотренный код не всегда срабатывает в Internet Explorer вплоть до версии 7 в случае, когда вложенным элементом является картинка: блок исчезает, а картинка остаётся видимой.

Теперь рассмотрим такое понятие как слои.

Для тех, кто работал с Photoshop и подобными ему редакторами, понятие слоев хорошо знакомо.

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

Вот также и браузер, при загрузке страницы, автоматически раскладывает элементы на слои. При необходимости программист или дизайнер могут изменить стандартные правила размещения, указав явно значение z-index в стиле элемента. Рассмотрим пример:

Для начала укажем необходимые нам стили:


Теперь добавим HTML-код:


    	<div id="block1">текст</div> 
		<div id="block2">текст</div> 
		<div id="block3">текст</div> 		
			 

А теперь самое интересное - немного оживим страницу с помощью JavaScript:

<script type="text/javascript" language="javascript">
 	var myCounter = 0
 	function rand(){
     	return (Math.random() * 100000).toFixed(); 	
		} 	 	

		function runMultiple() 	{
			// перебираем в цикле все div'ы
 		for(i = 1; i <= 3; i++)
 		{
 			var cntDiv = document.getElementById("block" + i.toFixed());
 			if(cntDiv)
 			{
					// изменяем счётчик
 				cntDiv.innerHTML = myCounter;
					// меняем z-index на случайную величину
					// от нуля до 100000
 				cntDiv.style.zIndex = rand();
 			}
 		}
 		myCounter++;
 	} 	
		// запускаем ежесекундное изменение порядка слоёв
		var timerMulti = window.setInterval("runMultiple();", 1000); 
</script> 
 

текст
текст
текст

 

 

 

 

 

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

<script type="text/javascript" language="javascript">
function correctPNG() 
{

		//определяем, запущен ли скрипт в IE5 или IE6 	
   	if (/MSIE (5\.5|6).+Win/.test(navigator.userAgent))
   	{

			// в цикле перебираем все изображения в документе
     	for(var i=0; i<document.images.length; i++)
     	{
				
       		var img = document.images[i];
       		var imgName = img.src.toUpperCase();

				// обрабатываем только PNG-изображения
       		if (imgName.substring(imgName.length-3, 
						imgName.length) == "PNG")
       		{
         		var imgID = (img.id) ?
				 		"id='" + img.id + "' " : ""
	        		var imgClass = (img.className) ?
				 		" class='" + img.className + "' " : ""
         		var imgTitle = (img.title) ?
				 		" title='" + img.title + 
						"' " : "title='" + img.alt + "' "
         		var imgStyle = "display:block;" + 
						img.style.cssText
         		if (img.align == "left") 
						imgStyle = "float:left;" + imgStyle
         		if (img.align == "right")
				 		imgStyle = "float:right;" + imgStyle
         		if (img.parentElement.href)
				 		imgStyle = "cursor:hand;" + imgStyle
         		var strNewHTML = "<span " + imgID 
						+ imgClass + imgTitle
			        	+ " style=\"" + "width:" 
						+ img.width + "px; height:"
						+ img.height + "px;" + imgStyle + ";"
			         	+ "filter:progid:DXImageTransform." 
						+ "Microsoft.AlphaImageLoader"
			         	+ "(src=\'" + img.src 
						+ "\', sizingMethod='crop');\"></span>"
         		img.outerHTML = strNewHTML
         		i = i-1
       		}
     	}
   	}
}

// добавляем обработчик загрузки страницы

window.attachEvent("onload", correctPNG);

Этот скрипт служит для исправления бага Internet Explorer 5.5 и 6 версий. Суть бага заключается в том, что при отображении графики в формате PNG некорректно обрабатываются данные о прозрачности картинки. Как следствие - картинка отображается не на прозрачном, а на сплошном сером фоне.

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



В начало страницы



В начало страницы