Javascript.RU

Вкладки tabs javascript ajax. Создание вкладок с помощью CSS и JavaScript.

Сегодня я хочу показать как создать красивые вкладки tabs на CSS и Javascript + Ajax.

вкладки tab на javascript ajax

Отличие от остального говнеца найденного в интернете:

- не используются картинки
- закругленные углы и тени сделаны с помощью CSS
- при нажатии на вкладку tab происходит загрузка контента с помощью AJAX
- лаконичный и понятный код
- писалось для личного использования без использования jquery

Вот собственно код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<script type="text/javascript" src="http://scriptjava.net/source/scriptjava/scriptjava.js"></script>
<style type="text/css">
.tab_block {
	margin:15px 30px 15px 30px;
}
.tab_modules {
	margin:0px; padding:0px;
	padding-bottom:4px;
	padding-left:14px;
}
.tab_modules li {
	list-style:none;
	display:inline;
}
.tab_modules li span {
	color:#000000;
	padding:4px 14px 4px 14px;
	border:1px solid #555555;
	text-decoration:none;
	background-color:#dddddd;
	border-radius:5px 5px 0 0;
	-webkit-border-radius:5px 5px 0 0;
	-moz-border-radius:5px 5px 0 0;
	-khtml-border-radius:5px 5px 0 0;
	box-shadow: 0 10px 10px rgba(0,0,0,0.1) inset;
	-moz-box-shadow: 0 10px 10px rgba(0,0,0,0.1) inset;
	-webkit-box-shadow: 0 10px 10px rgba(0,0,0,0.1) inset;
	z-index:1;
	cursor:pointer;
}
.tab_modules li span:hover {
	background-color:#ffffff;
}
.tab_modules li span.tab_select {
	border-bottom:1px solid #ffffff;
	background-color:#ffffff;
}
#tab_content {
	border:1px solid #555555;
	border-radius:5px 5px 5px 5px;
	-webkit-border-radius:5px 5px 5px 5px;
	-moz-border-radius:5px 5px 5px 5px;
	-khtml-border-radius:5px 5px 5px 5px;
	box-shadow: 0 10px 10px rgba(0,0,0,0.1);
	-moz-box-shadow: 0 10px 10px rgba(0,0,0,0.1);
	-webkit-box-shadow: 0 10px 10px rgba(0,0,0,0.1);
}
</style>
</head>

<body>
<script type="text/javascript">
var gettabcontent = function(url,mod,th) {
	var tag;
	var els=$$s.getelbyclass('tab_modules','ul');
	for(var i=0;i<els.length;i++) {
		tag=$$s.getelbytag('span',els[i]);
		for(var j=0;j<tag.length;j++) {
			$$(tag[j],'borderBottom','1px solid #555555').$$('backgroundColor','#dddddd');
		}
	}
	$$(th,'borderBottom','1px solid #ffffff').$$('backgroundColor','#ffffff');
	$$('tab_content','<img id="loading_img" src="http://scriptjava.net/img/loading.gif" />');
	$$('loading_img').src='http://scriptjava.net/img/loading.gif';
	$$a({
		url:url,
		data:{'mod':mod},
		success:function (data) {
			$$('tab_content',data);
		}
	});
}
</script>

<div class="tab_block">
<ul class="tab_modules">
	<li><span onclick="gettabcontent('http://','index',this);" class="tab_select">Главная</span></li>
    <li><span onclick="gettabcontent('http://','settings',this);">Настройки</span></li>
    <li><span onclick="gettabcontent('http://','users',this);">Пользователи</span></li>
    <li><span onclick="gettabcontent('http://','information',this);">Информация</span></li>
    <li><span onclick="gettabcontent('http://','developer',this);">Разработчик</span></li>
</ul>
<div id="tab_content">
123<br />123<br />123<br />123<br />123<br />123<br />123<br />123<br />123<br />123<br />123<br />123<br />123<br />123<br />
</div>
</div>
</body>
</html>

Разберем некоторые моменты, а точнее функцию gettabcontent(url,mod,th)
Параметры передаваемые функции:
url - url на файл обработчика ajax
mod - параметр mod передаваемый ajax обработчику (в php это $_GET['mod'])
th - ссылка на текущий элемент по которому произошел щелчек

Если запустить этот код на локальном компьютере то вы увидите картинку загрузчика, и это вполне естественно, ведь код заработает только тогда когда вы его зальете на сервер.

Естественно разработка не обошлась без библиотеки scriptjava.js которая в данном случае упрощает отправку ajax и поиск элементов.

Готовый пример можно посмотреть тут

+3

Автор: kvmutl, дата: 26 августа, 2012 - 10:18
#permalink

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


Автор: chak (не зарегистрирован), дата: 27 октября, 2012 - 14:11
#permalink

Отличный скрип но есть однин жирный минус, не работает в IE как это можно исправить


Автор: gordon freeman, дата: 11 ноября, 2012 - 22:16
#permalink

ie в топку
в ie все квадратное, но работает


Автор: Гость (не зарегистрирован), дата: 7 января, 2017 - 15:53
#permalink

Здравствуйте, подскажите, пожалуйста, а как добавить описание к каждой странице. спасибо.


Отправить комментарий

Приветствуются комментарии:
  • Полезные.
  • Дополняющие прочитанное.
  • Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
    Для остальных вопросов и обсуждений есть форум.
P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.
Содержание этого поля является приватным и не предназначено к показу.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешены HTML-таги: <strike> <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <u> <i> <b> <pre> <img> <abbr> <blockquote> <h1> <h2> <h3> <h4> <h5> <p> <div> <span> <sub> <sup>
  • Строки и параграфы переносятся автоматически.
  • Текстовые смайлы будут заменены на графические.

Подробнее о форматировании

CAPTCHA
Антиспам
9 + 5 =
Введите результат. Например, для 1+3, введите 4.
 
Поиск по сайту
Другие записи этого автора
seoneo
Реклама
Содержание

Учебник javascript

Основные элементы языка

Сундучок с инструментами

Интерфейсы

Все об AJAX

Оптимизация

Разное

Дерево всех статей

Популярные таги
Последние комментарии
Последние темы на форуме
Forum