Блок вкладок на jQuery
Сегодня Вашему вниманию представляю блок вкладок на jQuery. Данный скрипт предназначен для размещения большого количества информации на ограниченной области. В данном примере код я писать не буду, т.к. это готовый пример для работы. Выглядеть этот блок на странице будет следующим образом:
Положение вкладок можно менять простым перетаскиванием. Но лучше один раз увидеть, чем сто раз услышать.
Посмотреть пример работы можно здесь. Скачать исходники можно по этой ссылке.
Открывающиеся закрывающиеся перетаскиваемые блоки
Перетаскиваемые блоки бывают очень полезны и не менее интересны, хотя их редко применяют на практике. Применений таким блокам можно найти огромное количество, например форма обратной связи, информация, для которой нет места на странице и т.д. и т.п.
Для создания открывающихся закрывающихся перетаскиваемых блоков нам понадобится библиотека 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>Всё, блоки готовы к использованию.
Пример блоков можно посмотреть здесь.
Альтернатива отсутствующим изображениям
Если Вы храните изображения на удаленных серверах, они могут быть удалены без Вашего ведома. В этом случае на сайте будут либо пустые места, либо стандартные замены различных браузеров, что совсем не хорошо. В этом случае нам на помощь приходит следующая инструкция:
Для начала нужно скачать и загрузить себе на сайт библиотеку 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>На завершающем этапе нам понадобится изображение, которое будет замещать отсутствующее. Я взял такое:
Собственно это все, что нам нужно, то что получится можно посмотреть здесь.
Кстати, скрипт работает только с абсолютными путями.
Раскраска ячеек таблицы через одну
Для того, чтобы раскрасить ячейки таблицы через одну, например в гостевой книге, нам понадобится следующий скрипт который нужно разместить после таблицы, которой требуется раскраска.
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
Вертикальное раскрывающееся меню
Если на сайте мало места, но очень хочется разместить большое количество пунктов в меню, к нам на помощь приходит вертикальное раскрывающееся меню. Данное меню впишется практически в любой дизайн сайта, конечно при условии визуального изменения под стиль сайта. Ну хватит слов, перейдем к делу, а точнее к коду.
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) по клику
Иногда в процессе создания сайта возникает ситуация, когда информация должна показываться на странице только после клика по определенному элементу сайта. Например, это может быть форма добавления сообщения в гостевой книге, форма быстрого ответа на форуме и т.д. В этой ситуации к нам на помощь приходит следующий код:
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