Вкладки tabs javascript ajax. Создание вкладок с помощью CSS и JavaScript.
Сегодня я хочу показать как создать красивые вкладки tabs на CSS и 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, используя радиобаттон и селекторы)
ну только контент конечно подгружается весь и сразу, это да...
Отличный скрип но есть однин жирный минус, не работает в IE как это можно исправить
ie в топку
в ie все квадратное, но работает
Здравствуйте, подскажите, пожалуйста, а как добавить описание к каждой странице. спасибо.
Отправить комментарий
Приветствуются комментарии:- Полезные.
- Дополняющие прочитанное.
- Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.Для остальных вопросов и обсуждений есть форум.