Простые примеры jQuery

Уроки jQuery

Сегодня уже почти никто не создаёт сайты на чистом html, это скучно и не интересно. С появлением библиотеки jQuery и ей подобных веб-страницы стали динамичнее и лучше. В этой статье я специально собрал простые примеры на jQuery, чтобы вы могли увидеть на что способен jQuery.

Для каждого примера я привожу его исходный код и демо для просмотра в действии. Итак, начнём по-порядку с самого простого.

В начале работы, чтобы иметь возможность использовать jQuery, необходимо подключить эту библиотеку в теге <head>

Саму библиотеку можно скачать на официальном сайте jQuery.com

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

Открывающийся блок

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

Вариант 1

Открыть/закрыть

HTML + CSS + JQUERY

Закрыть

Открывающийся блок (вариант 1)

html-код:
<a name="downlist" href="javascript:void(0);">Открыть/закрыть</a> <div id="downlist" style="display:none"> <p>Содержимое блока, который<br /> открывается после клика.</p> <p>Содержимое блока, который<br /> открывается после клика.</p> <p>Содержимое блока, который<br /> открывается после клика.</p> </div>

css-код:
не требуется

jQuery-код:
<script type="text/javascript"> $('a[name=downlist]').click(function(){ $('#downlist').slideToggle(500); }); </script>

Вариант 2

Рядом со ссылкой, после клика по которой открывается блок информации, можно вставить изображения "плюс" и "минус". Я не стал вставлять картинки, вы сможете сделать это самостоятельно, я лишь покажу вам пример реализации.

+ открыть

HTML + CSS + JQUERY

Закрыть

Открывающийся блок (вариант 2)

html-код:
<a name="qdown" href="javascript:void(0);">+ открыть</a> <div id="qdown" style="display:none"> <p>Содержимое блока, который<br /> открывается после клика.</p> <p>Содержимое блока, который<br /> открывается после клика.</p> <p>Содержимое блока, который<br /> открывается после клика.</p> </div>

css-код:
не требуется

jQuery-код:
<script type="text/javascript"> $('a[name=qdown]').click(function(){ if($('#qdown').css('display')=='none') { $(this).html('- закрыть'); } else{ $(this).html('+ открыть'); } $('#qdown').slideToggle(500); }); </script>

Вариант 3

Наконец, можно сделать открывающийся блок при отмеченном чебоксе (при установке "птички").

пункт 1
пункт 2

HTML + CSS + JQUERY

Закрыть

Открывающийся блок (вариант 3)

html-код:
<input type="checkbox" id="checkbox" class="1" value="1" /> пункт 1<br /> <div class="checkbox1" style="display:none"> <p>Содержимое блока, который<br /> открывается при отмеченном чебоксе.</p> </div> <input type="checkbox" id="checkbox" class="2" value="2" /> пункт 2<br /> <div class="checkbox2" style="display:none"> <p>Содержимое блока, который<br /> открывается при отмеченном чебоксе.</p> </div>

css-код:
не требуется

jQuery-код:
<script type="text/javascript"> $('input[id=checkbox]').change(function(){ if($(this).attr('checked') == true) { $('.checkbox'+$(this).attr('class')).show(1000); } else{ $('.checkbox'+$(this).attr('class')).hide(1000); } }); </script>

Эти примеры вы можете применить на своём сайте, это немного оживит его. Что ж, смотрим следующие примеры.

Отмечаем все chekbox одним кликом

Подобная функция есть на сайте mail.ru, когда нужно отметить в своём почтовом ящике все письма и произвести с ними некоторые действия. В этом примере я покажу как отметить все чебоксы одним кликом на jQuery.

Вариант 1

Отметить все

HTML + CSS + JQUERY

Закрыть

Отмечаем все chekbox одним кликом (вариант 1)

html-код:
<a id="all" href="javascript:void(0);">Отметить все</a> <div class="all"> <p><input type="checkbox" value="1"> чебокс 1</p> <p><input type="checkbox" value="2"> чебокс 2</p> <p><input type="checkbox" value="3"> чебокс 3</p> <p><input type="checkbox" value="4"> чебокс 4</p> <p><input type="checkbox" value="5"> чебокс 5</p> </div>

css-код:
не требуется

jQuery-код:
<script type="text/javascript"> $('#all').click(function(){ $('.all input:checkbox').click(); }); </script>

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

Вариант 2

Отметить все

HTML + CSS + JQUERY

Закрыть

Отмечаем все chekbox одним кликом (вариант 2)

html-код:
<a id="all2" href="javascript:void(0);">Отметить все</a> <div class="all2"> <p><input type="checkbox" value="1"> чебокс 1</p> <p><input type="checkbox" value="2"> чебокс 2</p> <p><input type="checkbox" value="3"> чебокс 3</p> <p><input type="checkbox" value="4"> чебокс 4</p> <p><input type="checkbox" value="5"> чебокс 5</p> </div>

css-код:
не требуется

jQuery-код:
<script type="text/javascript"> $('#all2').click(function(){ var kol = $('.all2 input:checked').length; if(kol >= 0 && kol !== 5 ) { $('.all2 input:checked').click(); $('.all2 input:checkbox').click(); } if(kol == 5) { $('.all2 input:checkbox').click(); } }); </script>

С помощью таких нехитрых скриптов можно значительно усовершенствовать свой сайт.

Заполни поле

В этом примере пользователю дают подсказку, что в поле нужно ввести своё имя, если поставить курсор в поле, то надпись исчезнет и наоборот до тех пор, пока пользователь не введёт своё имя.

HTML + CSS + JQUERY

Закрыть

Заполни поле

html-код:
<input type="text" id="entry_name" value="" />

css-код:
не требуется

jQuery-код:
<script type="text/javascript"> $('#entry_name').val('введите имя'); $('#entry_name').focus(function(){ if($(this).val() == 'введите имя') { $(this).val(''); } }); $('#entry_name').blur(function(){ if($(this).val() == '') { $(this).val('введите имя'); } }); </script>

Счётчик символов

С помощью jQuery мы можем подсчитывать сколько символов пользователь ввёл в текстовое поле.

Введите имя:

HTML + CSS + JQUERY

Закрыть

Счётчик символов

html-код:
Введите имя: <input type="text" id="keyup" value="" /> <b class="keyup"></b>

css-код:
не требуется

jQuery-код:
<script type="text/javascript"> $('#keyup').keyup(function(){ $('.keyup').text('Символов: ' + $(this).val().length); }); </script>

Проверка полей с помощью jQuery

Обычно проверка введённых данных начинается в момент нажатия на кнопку "Отправить", "Зарегистрироваться" и т.п. Проверка производится средствами php и в принципе это наиболее правильный вариант, но, в случае возникновения ошибок пользователю придётся повторять нажатие на кнопку, поэтому в целях экономии времени и ресурсов можно производить дополнительную проверку с помощью jQuery, естественно, без перезагрузки страницы.

Введите имя:

HTML + CSS + JQUERY

Закрыть

Проверка полей с помощью jQuery (проверка имени)

html-код:
Введите имя: <input type="text" id="uname" value="" /> <b class="uname"></b>

css-код:
не требуется

jQuery-код:
<script type="text/javascript"> $('#uname').keyup(function(){ var uname = $('#uname').val(); if(uname == '') { $('.uname').html('Введите имя'); } else if(uname.length > 5) { $('.uname').html('Имя длинее 5-ти символов'); } else if(uname.length < 3) { $('.uname').html('Имя короче 3-х символов'); } else{ $('.uname').html('ОК'); } }); </script>

Чтобы проверить введённый емаил требуется немного иной подход.

Введите e-mail:

HTML + CSS + JQUERY

Закрыть

Проверка полей с помощью jQuery (проверка емаил)

html-код:
Введите e-mail: <input type="text" id="uemail" value="" /> <b class="uemail"></b>

css-код:
не требуется

jQuery-код:
<script type="text/javascript"> $('#uemail').keyup(function(){ var uemail = $('#uemail').val(); if(uemail == '') { $('.uemail').html('Введите e-mail'); } else if(!ValidEmail(uemail)) { $('.uemail').html('E-mail введён неверно'); } else if(uemail.length > 30) { $('.uemail').html('E-mail длинее 30-ти символов'); } else if(uemail.length < 7) { $('.uemail').html('E-mail короче 7-ми символов'); } else{ $('.uemail').html('ОК'); } }); function ValidEmail(fuemail) { var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i); return pattern.test(fuemail); } </script>

Выпадающее меню

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

Вариант 1

HTML + CSS + JQUERY

Закрыть

Выпадающее меню (вариант 1)

html-код:
<ul id="menu_down"> <li><a href="javascript:void(0);">Меню 01</a></li> <li><a href="javascript:void(0);">Меню 02</a> <ul> <li><a href="#">Ссылка 01</a></li> <li><a href="#">Ссылка 02</a></li> <li><a href="#">Ссылка 03</a></li> </ul> </li> <li><a href="javascript:void(0);">Меню 03</a> <ul> <li><a href="#">Ссылка 04</a></li> <li><a href="#">Ссылка 05</a></li> <li><a href="#">Ссылка 06</a></li> <li><a href="#">Ссылка 07</a></li> </ul> </li> <li><a href="javascript:void(0);">Меню 04</a></li> </ul>

css-код:
<style> #menu_down { margin:0; padding:0; list-style:none; } #menu_down li { float:left; display:block; width:130px; background:#000; position:relative; margin:0 1px 0 0; } #menu_down li a { display:block; padding:10px; color:#fff; text-align:center; text-decoration:none; } #menu_down ul { position:absolute; left:0; display:none; margin:0; padding:0; list-style:none; } #menu_down ul li { width:130px; float:left; border-top:1px solid #fff; } #menu_down ul a { display:block; padding:10px; color:#fff; } </style>

jQuery-код:
<script type="text/javascript"> $('#menu_down li').hover(function(){ $('ul', this).slideDown(500); },function(){ $('ul', this).slideUp(500); }); </script>

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

Вариант 2

HTML + CSS + JQUERY

Закрыть

Выпадающее меню (вариант 2)

html-код:
<ul id="menudown"> <li><a href="javascript:void(0);">Меню 01</a></li> <li> <ul class="menudown2"> <li><a href="#">Ссылка 01</a></li> <li> <ul class="menudown3"> <li><a href="#">Ссылка 08</a></li> <li><a href="#">Ссылка 09</a></li> <li><a href="#">Ссылка 10</a></li> </ul> <a href="javascript:void(0);">Ссылка 02 -></a></li> <li><a href="#">Ссылка 03</a></li> </ul> <a href="javascript:void(0);">Меню 02 -></a></li> <li> <ul class="menudown2"> <li> <ul class="menudown3"> <li><a href="#">Ссылка 11</a></li> <li><a href="#">Ссылка 12</a></li> </ul> <a href="javascript:void(0);">Ссылка 04 -></a></li> <li><a href="#">Ссылка 05</a></li> <li> <ul class="menudown3"> <li><a href="#">Ссылка 13</a></li> <li><a href="#">Ссылка 14</a></li> </ul> <a href="javascript:void(0);">Ссылка 06 -></a></li> <li><a href="#">Ссылка 07</a></li> </ul> <a href="javascript:void(0);">Меню 03 -></a></li> <li><a href="javascript:void(0);">Меню 04</a></li> </ul>

css-код:
<style> #menudown { margin:0; padding:0; list-style:none; } #menudown li { display:block; width:130px; background:#000; position:relative; border-left:#FFF 1px solid; border-bottom:#FFF 1px solid; } #menudown li a { display:block; padding:10px; color:#fff; text-align:center; text-decoration:none; } #menudown li a:hover { background:#900; } #menudown ul { position:absolute; left:130; display:none; margin:0; padding:0; list-style:none; } #menudown ul li { width:130px; } #menudown ul a { display:block; padding:10px; color:#fff; } </style>

jQuery-код:
<script type="text/javascript"> $('#menudown li').hover(function(){ $('.menudown2', this).slideDown(100); },function(){ $('.menudown2', this).slideUp(100); }); $('.menudown2 li').hover(function(){ $('.menudown3', this).slideDown(100); },function(){ $('.menudown3', this).slideUp(100); }); </script>

Вариант 3

HTML + CSS + JQUERY

Закрыть

Выпадающее меню (вариант 3)

html-код:
<ul id="menu_slide"> <li><b><a href="javascript:void(0);">Меню 01</a></b></li> <li><b><a href="javascript:void(0);">Меню 02 -></a></b> <ul class="menu_slide"> <li><a href="#">Ссылка 01</a></li> <li><a href="#">Ссылка 02</a> </li> <li><a href="#">Ссылка 03</a></li> </ul> </li> <li><b><a href="javascript:void(0);">Меню 03 -></a></b> <ul class="menu_slide"> <li><a href="#">Ссылка 04</a></li> <li><a href="#">Ссылка 05</a></li> <li><a href="#">Ссылка 06</a> </li> <li><a href="#">Ссылка 07</a></li> </ul> </li> <li><b><a href="javascript:void(0);">Меню 04</a></b></li> </ul>

css-код:
<style> #menu_slide { margin:0; padding:0; list-style:none; } #menu_slide li { display:block; width:130px; background:#000; border-bottom:#FFF 1px solid; } #menu_slide li a { display:block; padding:10px; color:#fff; text-align:center; text-decoration:none; } #menu_slide li a:hover { background:#900; } #menu_slide ul { display:none; margin:0; padding:0; list-style:none; } #menu_slide ul li { width:130px; } #menu_slide ul a { display:block; padding:10px; color:#fff; } #menu_slide .menu_slide li a { padding:5px; background:#00C; } </style>

jQuery-код:
<script type="text/javascript"> $('#menu_slide li').hover(function(){ $('ul', this).slideDown(100); },function(){ $('ul', this).slideUp(100); }); </script>

Вариант 4

Пункты в этом меню раскрываются по клику

HTML + CSS + JQUERY

Закрыть

Выпадающее меню (вариант 4)

html-код:
<ul id="menuslide"> <li><b><a href="javascript:void(0);">Меню 01</a></b></li> <li><b><a href="javascript:void(0);">Меню 02 -></a></b> <ul class="menuslide2"> <li><a href="#">Ссылка 01</a></li> <li><a href="#">Ссылка 02</a> </li> <li><a href="#">Ссылка 03</a></li> </ul> </li> <li><b><a href="javascript:void(0);">Меню 03 -></a></b> <ul class="menuslide2"> <li><a href="#">Ссылка 04</a></li> <li><a href="#">Ссылка 05</a></li> <li><a href="#">Ссылка 06</a> </li> <li><a href="#">Ссылка 07</a></li> </ul> </li> <li><b><a href="javascript:void(0);">Меню 04</a></b></li> </ul>

css-код:
<style> #menuslide { margin:0; padding:0; list-style:none; } #menuslide li { display:block; width:130px; background:#000; border-bottom:#FFF 1px solid; } #menuslide li a { display:block; padding:10px; color:#fff; text-align:center; text-decoration:none; } #menuslide li a:hover { background:#900; } #menuslide ul { display:none; margin:0; padding:0; list-style:none; } #menuslide ul li { width:130px; } #menuslide ul a { display:block; padding:10px; color:#fff; } #menuslide .menuslide2 li a { padding:5px; background:#00C; } </style>

jQuery-код:
<script type="text/javascript"> $('#menuslide li').click(function(){ $('ul', this).slideToggle(100); }); </script>

Вариант 5

HTML + CSS + JQUERY

Закрыть

Выпадающее меню (вариант 5)

html-код:
<ul id="menuslides"> <li><b><a href="javascript:void(0);">Меню 01</a></b></li> <li><b><a href="javascript:void(0);">Меню 02 -></a></b> <ul class="menuslides"> <li><a href="#">Ссылка 01</a></li> <li><a href="#">Ссылка 02</a> </li> <li><a href="#">Ссылка 03</a></li> </ul> </li> <li><b><a href="javascript:void(0);">Меню 03 -></a></b> <ul class="menuslides"> <li><a href="#">Ссылка 04</a></li> <li><a href="#">Ссылка 05</a></li> <li><a href="#">Ссылка 06</a> </li> <li><a href="#">Ссылка 07</a></li> </ul> </li> <li><b><a href="javascript:void(0);">Меню 04</a></b></li> </ul>

css-код:
<style> #menuslides { margin:0; padding:0; list-style:none; } #menuslides li { display:block; width:130px; background:#000; border-bottom:#FFF 1px solid; } #menuslides li a { display:block; padding:10px; color:#fff; text-align:center; text-decoration:none; } #menuslides li a:hover { background:#900; } #menuslides ul { display:none; margin:0; padding:0; list-style:none; } #menuslides ul li { width:130px; } #menuslides ul a { display:block; padding:10px; color:#fff; } #menuslides .menuslides li a { padding:5px; background:#00C; } </style>

jQuery-код:
<script type="text/javascript"> $('#menuslides li').click(function(){ $('#menuslides ul').slideUp(300); $('ul', this).slideDown(300); }); </script>

Таймер на jQuery

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

Пуск

В исходном коде приведен вариант без кнопки запуска таймера, т.е. он начнёт отсчёт после загрузки страницы. HTML + CSS + JQUERY

Закрыть

Таймер на jQuery

html-код:
<p id="timer">Ссылка для скачивания файла появится через <b class="timer"></b> сек.</p>

css-код:
не требуется

jQuery-код:
<script type="text/javascript"> var next = 15; function timerStart(){ $('.timer').html(next); if(next <= 0){ $('#timer').fadeIn(1000, function(){ $('#timer').html('<a>Ссылка для скачивания файла</a>'); end(); }); } next = next - 1; } $(function(){ setInterval("timerStart()",1000 ); }); </script>

Плавающий или фиксированный блок на jQuery

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

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

Вариант 1

Плавающий блок DIV

Контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент

HTML + CSS + JQUERY

Закрыть

Плавающий блок DIV (вариант 1)

html-код:
<div id="fixbox"> <div id="fixed">Плавающий блок DIV</div> </div>

css-код:
<style> #fixbox { float:right; width:200px; height:250px; border:#000 1px solid; margin:0 0 0 5px; } #fixed { position:absolute; z-index:50; background:#FFC; padding:10px; } </style>

jQuery-код:
<script type="text/javascript"> $(function(){ var offset = $('#fixed').offset(); var topPadding = 10; $(window).scroll(function(){ if ($(window).scrollTop() > offset.top) { $('#fixed').stop().animate({marginTop:$(window).scrollTop()-offset.top+topPadding}); } else { $('#fixed').stop().animate({marginTop:0}); }; }); }); </script>

Вариант 2

Во втором случае блок плавает в пределах блока с чёрной рамкой.

Плавающий блок DIV

HTML + CSS + JQUERY

Закрыть

Плавающий блок DIV (вариант 2)

html-код:
<div id="fixbox2"> <div id="fixed2">Плавающий блок DIV</div> </div>

css-код:
<style> #fixbox2 { float:left; width:200px; height:300px; border:#000 1px solid; margin:0 5px 15px 0; } #fixed2 { background:#FFC; padding:10px; } </style>

jQuery-код:
<script type="text/javascript"> $(function(){ var topPadding = 10; var offset = $('#fixed2').offset(); var way = $('#fixbox2').height(); $(window).scroll(function(){ if ($(window).scrollTop() > offset.top) { $('#fixed2').stop().animate({marginTop:$(window).scrollTop()-offset.top+topPadding},0); } else { $('#fixed2').stop().animate({marginTop:0},0); }; if ($(window).scrollTop() > offset.top+way) { $('#fixed2').stop().animate({marginTop:0},0); } }); }); </script>

Выезжающее меню на jQuery

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

open

Выезжающее меню на jQuery

HTML + CSS + JQUERY

Закрыть

Выезжающее меню на jQuery

html-код:
<div id="fixedmenu"> <div id="fopen">open</div> <div id="fclose">close</div> Выезжающее меню на jQuery </div>

css-код:
<style> #fixedmenu { position:fixed; top:200px; left:-270px; width:300px; background:#FFC; padding:10px 0 10px 10px; border:#000 1px solid; } #fopen {float:right; width:40px; color:#039; cursor:pointer; } #fclose {float:right; width:40px; color:#039; cursor:pointer; display:none; } </style>

jQuery-код:
<script type="text/javascript"> $('#fopen').click(function(){ $('#fixedmenu').animate({'left':'170px'}, 1500); $('#fopen').hide(2000); $('#fclose').show(2000); }); $('#fclose').click(function(){ $('#fixedmenu').animate({'left':'-270px'}, 1500); $('#fopen').show(2000); $('#fclose').hide(2000); }); </script>

Переключение закладок на jQuery

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

Вариант 1

Описание

HTML

CSS

jQuery

Блок с закладками может значительно сэкономить место на ваших веб-страницах.

html-код:
<div id="book_marksbox"> <div id="book_marks"> <div id="book_mark" class="current">Описание</div> <div id="book_mark">HTML</div> <div id="book_mark">CSS</div> <div id="book_mark">jQuery</div> </div> <div class="book_markbox open"><p>Блок с закладками может значительно сэкономить место на ваших веб-страницах.</p></div> <div class="book_markbox"><p>Контент 2 закладки</p></div> <div class="book_markbox"><p>Контент 3 закладки.</p></div> <div class="book_markbox"><p>Контент 4 закладки.</p></div> </div>

css-код:
<style> #book_mark { float:left; display:inline; color:#333; width:120px; padding:5px; margin-top:2px; text-align:center; font-weight:bold; cursor:pointer; border:#000 1px solid; background-color:#CCC; } #book_mark.current { padding:6px; margin-top:0px; background-color:#FFC; } .book_markbox { float:left; width:530px; display:none; padding:10px; border:#000 1px solid; } .book_markbox.open { display:block; } </style>

jQuery-код:
<script type="text/javascript"> $(function(){ $('#book_marks').delegate('#book_mark:not(.current)', 'click', function(){ $(this).addClass('current').siblings().removeClass('current') .parents('#book_marksbox').find('.book_markbox').hide().eq($(this).index()).fadeIn(500); }); }); </script>

Вариант 2

Теперь закладки слева.

Закладка 1

Закладка 2

ГАЛЕРЕЯ

КОД

Заголовок 2

Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст.

Переключение закладок на jQuery

Исходный код данных закладок на 4-й вкладке.

Простая фотогалерея на jQuery

Закладки на jQuery

html-код:
<div id="bookmarksbox"> <div id="bookmarks"> <div id="bookmark">Закладка 1</div> <div id="bookmark" class="current">Закладка 2</div> <div id="bookmark">ГАЛЕРЕЯ</div> <div id="bookmark">КОД</div> </div> <div id="bookmarkbox"> <div class="bookmarkbox"> <h3>Заголовок 1</h3> <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст.</p> </div> <div class="bookmarkbox open"> <h3>Заголовок 2</h3> <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст.</p> </div> <div class="bookmarkbox"> <h3>Заголовок 3</h3> <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст.</p> </div> <div class="bookmarkbox"> <h3>Заголовок 4</h3> <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст.</p> </div> </div> </div>

css-код:
<style> #bookmark { -moz-transform:rotate(270deg); -webkit-transform:rotate(270deg); -o-transform:rotate(270deg); writing-mode:tb-rl; width:115px; height:30px; position:relative; margin:0 0 85px 0; top:50px; left:-43px; font-weight:bold; text-align:center; border:#000 1px solid; background-color:#CCC; cursor:pointer; } #bookmark.current{ height:32px; left:-45px; background-color:#FFC; } #bookmarks { float:left; width:30px; margin-left:10px; } #bookmarkbox { float:left; width:500px; height:460px; padding:10px; border:#000 1px solid; } .bookmarkbox { display:none; } .bookmarkbox.open { display:block; } </style>

jQuery-код:
<script type="text/javascript"> $(function(){ $('#bookmarks').delegate('#bookmark:not(.current)', 'click', function(){ $(this).addClass('current').siblings().removeClass('current') .parents('#bookmarksbox').find('.bookmarkbox').hide().eq($(this).index()).fadeIn(500); }); }); </script>

Определение IP-адреса сайта по его домену на лету

Выше я показал исключительно возможности jQuery, которые просто поражают своими возможностями по сравнению с обычными html-страницами. Однако jQuery способен на большее, нежели спецэффекты на странице. jQuery в связке с php могут совершать настоящие чудеса, ниже я приведу вам простейший пример как можно на лету, без перезагрузки страницы определить IP-адрес доменного имени.

Введите в поле ниже адрес своего сайта и узнаете его IP-адрес.

пример: mail.ru

Заметьте, проверка IP-адреса происходит моментально и при этом не нужно ждать, пока страница перезагрузится. Вы можете посетить страницу одного из моих сервисов по определению IP-адреса домена и посмотреть этот же скрипт только с перезагрузкой страницы, вы сразу почуствуете преимущества связки jQuery + PHP по стравнению с обычным PHP.

А мораль такова: Учите php!

Уроки jQuery