INT 21h

Домашняя страница самого страшного прерывания

Мои табы на CSS + Javascript

№ 1451 В разделе "Программирование" от May 15th, 2009,

Сегодня мне понадобилось сделать более удобный интерфейс для проекта «Открытый Томск», чем куча перегружаемых страниц. Решил сделать что-то наподобии табов для выполнения функций их добавления, редактирования и удаления.



Для начала создадим атмосферу табов

<div class=”tabs”>
<span style=”left:20px;position:relative;”><span class=”active” id=”tab_h_list” onclick=”make_active(‘tab_list’)”>Список</span>
<span class=”notactive” id=”tab_h_new” onclick=”make_active(‘tab_new’)”>Новый раздел</span></span>
<div class=”tab” id=”tab_list” style=”display:block;”>hi!</div>
<div class=”tab” id=”tab_new” style=”display:none;”>Hi new record!</div>
</div>

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

<script>
function make_active(tab) {

if (tab==”tab_list”) {
document.getElementById(‘tab_h_new’).className = ‘notactive';
document.getElementById(‘tab_h_list’).className = ‘active';
document.getElementById(‘tab_list’).style.display = ‘block';
document.getElementById(‘tab_new’).style.display = ‘none';
return false; }

if (tab==”tab_new”) {
document.getElementById(‘tab_h_list’).className = ‘notactive';
document.getElementById(‘tab_h_new’).className = ‘active';
document.getElementById(‘tab_list’).style.display = ‘none';
document.getElementById(‘tab_new’).style.display = ‘block';
return false;}
}
</script>

Ну и конечно же надо описать стилями табы

.tabs {
width:100%;
}
.tab {
background-color:#fff;
border: 1px solid #555;
padding:10px;
-moz-border-radius:10px 10px 10px 10px;
}
.active {
font-size:11px;
padding:3px;
font-weight:bold;
background-color:#fff;
border-top: 1px solid #555;
border-left: 1px solid #555;
border-right: 1px solid #555;
-moz-border-radius:5px 5px 0px 0px;
}
.notactive {
font-size:11px;
font-weight:normal;
padding-left:3px;
padding-right:3px;
background-color:#f0f1f3;
border-top: 1px solid #555;
border-left: 1px solid #555;
border-right: 1px solid #555;
}

При возможности, конечно, лучше использовать jQuery. Реализовать табы на нем гораздо проще, чем описано тут.

Всего 1 комментарий »

1 комментарий »

Comment by Вячеслав | May 14, 2011 @ 17:52:53

Замечательный пример. Спасибо, очень пригодился.

Форма отправки комментария

CAPTCHA
*

Разрешенные HTML-теги:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

RSS RSS Feed только для этого поста |


Комментарии
  • Игорь: Все настроил, еще раз просмотрел видео и методом научного тыка все настроил и сохранил, все работает и обе...
  • 21h: Здравствуйте, Игорь! Я не знаю :) Думаю аналогично согласно инструкции к вашей радиостанции.
  • Игорь: Добрый день, просмотрел Ваше видео все доступно и ясно для 8 ми канальных радеек, но мне нада настроить 69...
  • Гоги: Есть инструкция к Моторолкам – она подходит к серии Motorola TLKR T4… Т8. В конце сетка частот и...
  • 21h: торчок давно уже не обновлял, как только закрыл сайт где он работал. да, это морда для opentracker. без...
  • Buter: Какова дальнейшая жизнь торчка? Он кстати веб-интерфейсом для OpenTracker выступает? Без OpenTracker работать...
  • 21h: понятия не имею. гуглите инструкцию к вашей радейке и сверяйтесь с ней.
  • Денис: хочу их подружить с uv5r
  • Денис: t-388 walkie talkie на эти шпаргалочек нет,или как приминить ваши к их настройке?
  • John: Стекла для электроник – техночас.ру