HTML CSS Blog » JavaScript

Блок вкладок на 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 — Tue, 17 Nov 2009 22:37:55 +0000

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

Код:

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

В этом примере предполагается, что библиотека jQuery лежит в той же папке что и сама страница на которую она подключается.

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

JavaScript:

<script type="text/javascript">
$(document).ready(function() {
	$('img').error(function() {
		$(this).attr({
		src: 'missing.gif', /* Путь до изображения, которое будет заменять отсутствующее */
		style:'border:3px solid #ccc;width:144px;height:144px;'
		});
	});
});
</script>

На завершающем этапе нам понадобится изображение, которое будет замещать отсутствующее. Я взял такое:

Собственно это все, что нам нужно, то что получится можно посмотреть здесь.

Кстати, скрипт работает только с абсолютными путями.

25678910.8370567.1258811155.2452c43da132e75f559665b0bf5b5c5c

Простое слайд-шоу

Jemand — Thu, 12 Nov 2009 18:08:23 +0000

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

JavaScript:

var interval=1 //Интервал в секундах
var img, n=0
var imgsrc=['1.gif','2.gif','3.gif','4.gif','5.gif'] //Пути до картинок

function start(){
  setInterval(show, interval*1000)
} 

function show(){
  if(!img)img=document.getElementById('slideshow');
  img.src=imgsrc[n++];
  if(n>=imgsrc.length) n=0;
}

Данный JS-код нужно вставить между тэгами <head></head> естественно заключенный в <script></script>.

В <body> добавляем onload=’start()’ для запуска функции смены картинок.

HTML-код:

<body onload='start()'>

Теперь нужно присвоить ID той картинке, которая должна сменяться.

HTML-код:

<img src="1.gif" id="slideshow">

Готово!

Пример.

Раскраска ячеек таблицы через одну

Jemand — Sat, 07 Nov 2009 20:19:09 +0000

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

JavaScript:

function paintTable(obj){
for(i=0; i<obj.rows.length; i++){
    if(i%2>0){
       obj.rows[i].style.background = "#ccc";
    }
}
}
paintTable(document.getElementById("coloring"));

В строке

obj.rows[i].style.background = "#ccc";

задается цвет бэкграунда ячеек.

В строке

paintTable(document.getElementById("coloring"));

задается id таблицы, в данном случае это “coloring”.

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

HTML-код:

<table id="coloring"> ...

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

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

Вертикальное раскрывающееся меню

Jemand — Wed, 04 Nov 2009 14:18:41 +0000

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

CSS-код:

#menu_body {
background:#81A192;
width:200px
}
#menu_body ul li {
list-style-type:none;
border-bottom:1px solid #fff;
margin-left:-40px;
padding-left:7px
}
#menu_body ul li a {
color:#fff;
font-family:verdana,arial,sans-serif;
text-decoration:none
}
#menu_body ul li ul li {
border:0;
list-style-type:square;
color:#fff;
list-style-position:inside
}
#menu_body ul li ul {
border-top:1px solid #fff;
margin-left:-7px;
padding-left:50px
}

JavaScript: (добавляем в head после CSS)

var id_menu = new Array('sub_menu_1','sub_menu_2','sub_menu_3');
function allclose() {
	for (i=0; i < id_menu.length; i++){
		document.getElementById(id_menu[i]).style.display = "none";
	}
}
function openMenu(id){
	for (i=0; i < id_menu.length; i++){
		if (id != id_menu[i]){
			document.getElementById(id_menu[i]).style.display = "none";
		}
	}
	if (document.getElementById(id).style.display == "block"){
		document.getElementById(id).style.display = "none";
	}else{
		document.getElementById(id).style.display = "block"; 
	}
}

В строке

var id_menu = new Array('sub_menu_1','sub_menu_2','sub_menu_3');

нужно добавить значений “sub_menu” столько, сколько групп меню будет, т.е. если будет 10 групп раскрывающихся меню, то здесь должны быть прописаны все 10 значений: sub_menu_1′,’sub_menu_2′,’sub_menu_3′,’sub_menu_4′,’sub_menu_5′ и т.д. Соответственно и HTML код должен содержать 10 блоков, иначе будут проблемы а работе.

В <body> добавляем вызов функции:

HTML-код:

<body onload="allclose()">

И в конце само тело нашего меню.

HTML-код:

<div id="menu_body">
<ul>

  <li><a href="#" onclick="openMenu('sub_menu_1');return(false)">menu 1</a> 
      <ul id="sub_menu_1">
          <li><a href="#">sub menu 1</a></li>
          <li><a href="#">sub menu 2</a></li>
          <li><a href="#">sub menu 3</a></li>
          <li><a href="#">sub menu 4</a></li>

          <li><a href="#">sub menu 5</a></li>
          <li><a href="#">sub menu 6</a></li>
          <li><a href="#">sub menu 7</a></li>
      </ul>
  </li>
  <li><a href="#" onclick="openMenu('sub_menu_2');return(false)">menu 2</a>
      <ul id="sub_menu_2">

          <li><a href="#">sub menu 1</a></li>
          <li><a href="#">sub menu 2</a></li>
          <li><a href="#">sub menu 3</a></li>
          <li><a href="#">sub menu 4</a></li>
          <li><a href="#">sub menu 5</a></li>
          <li><a href="#">sub menu 6</a></li>

          <li><a href="#">sub menu 7</a></li>
     </ul>
  </li>
  <li><a href="#" onclick="openMenu('sub_menu_3');return(false)">menu 3</a>
     <ul id="sub_menu_3">
          <li><a href="#">sub menu 1</a></li>
          <li><a href="#">sub menu 2</a></li>

          <li><a href="#">sub menu 3</a></li>
          <li><a href="#">sub menu 4</a></li>
          <li><a href="#">sub menu 5</a></li>
          <li><a href="#">sub menu 6</a></li>
          <li><a href="#">sub menu 7</a></li>
    </ul>
  </li>
</ul>
</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