mov ah,09h
mov dx,offset HelloWorldMsg

int 21h

Most sinister interrupt vector in a world 

Мои табы на 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

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

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

*

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

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


Комментарии
  • 21h: нене ) без меня )
  • Серегй: Не совсем грабить)) если грабить можно и без рации, есть более благие цели, вы просто ответьте на мой вопрос,...
  • 21h: магазин грабить собрались? ) не, тут я не помощник ;)
  • Серегй: А что бы мне поймать чужую волну, что мне для этого нужно сделать? Допустим я купил данную рацию себе, мне...
  • 21h: слушать никто не запрещает. нет закона, который запрещает слушать. те, кто говорит иначе нагло врут. а если...
  • Серегй: Я хотел узнать могу ли я просто прийти с данной рацией baofeng uv-5r, допустим на объект, ну или вообще...
  • 21h: У меня есть только эти 2. По другим ничего не знаю. В интернете можно скачать инструкцию к вашей модели рации,...
  • Серегй: Добрый день! Хотелось бы задать пару вопросов по поводу раций, у Вас есть куда можно обратиться ТАТ.
  • 21h: потому, что нейросетью проще. яркость светофора меняется в зависимости от времени суток от маленькой красной...
  • Михаил: А зачем нейросеть? Почему цвет светофора определить без нейросетей?