Говорят, что создание сайта - очень длительный и трудоемкий процесс. Мы скажем - НЕТ! Ведь с новыми технологиями, такими как HTML5, CSS3, PHP и MySql можно быстро и легко научиться создавать сайты любой сложности.
Два сумасшедших веб-мастера покажут где что лежит и как этим пользоваться.
Авторизация
Новый
Забыл
Пожалуйста, заполните поля выше. Это нужно сделать обязательно, иначе ничего не получится.
JavaScript и Jquery /

Реализация вкладок на CSS и jQuery

  • Пятница, 6 мая 2012, 01:53 |
  • Автор: karpovi4 |
  • Просмотров: 5550 |
  • Комментарии: 1 |
  • В закладки:
На примере панели входа и регистрации хочу вам рассказать как с помощью html, css и jquery реализовать переключение вкладок. Реализация на базовом уровне.

Такой подход позволит вам значительно сохранить место на странице.
Просто взгляните на эти четыре шага и обогатите ваши веб-проекты!

Шаг первый:
Макет состоит из трех частей: котейнер, вкладки и панель с данными. Контейнер выступает вкачестве родительского див'а.
<div id="container">
<div id="tabbox"></div>
<div id="panel"></div>
</div>

CSS
#container{
width:350px
}
#tabbox{
height:40px
}
#panel{
background-color:#FFF;
height:300px;
}

Реализация вкладок на CSS и jQuery


Шаг второй:
DIV под названием 'tabbox' включает в себя две горизонтальные вкладки. Login и Signup.
HTML Code
<div id="tabbox">
<a href="#" id="signup" class="tab signup">Signup</a>
<a href="#" id="login" class="tab select">Login</a&gt;
</div>

Реализация вкладок на CSS и jQuery

CSS
Здесь мы закругляем края и выставляем отступы для названий вкладок.
.tab{
background: #dedede;display: block;height: 40px;
line-height: 40px;text-align: center;
width: 80px;float: right;font-weight: bold;
-webkit-border-top-left-radius: 4px;
-webkit-border-top-right-radius: 4px;
-moz-border-radius: 4px 4px 0px 0px;
}
a{
color: #000;
margin: 0;
padding: 0;
text-decoration: none;
}
.signup{
margin-left:8px;
}
.select{
background-color:#FFF;
}


Шаг #3
По умолчанию один из блоков скрывается используя в css 'display:none'.
Реализация вкладок на CSS и jQuery

CSS
#loginbox{
min-height:200px;
padding:10px;
}
#signupbox{
min-height:200px;
padding:10px;
display:none;
}


Четвертый, заключительный шаг
Обработка DOM объектов с помощью Javscript
javascript
$(".tab").click(function(){})- tab is the class name of anchor tag. Using $(this).attr('id') - calling the anchor tag ID value.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".tab").click(function()
{
var X=$(this).attr('id');
if(X=='signup'){
$("#login").removeClass('select');
$("#signup").addClass('select');
$("#loginbox").slideUp();
$("#signupbox").slideDown();
}
else{
$("#signup").removeClass('select');
$("#login").addClass('select');
$("#signupbox").slideUp();
$("#loginbox").slideDown();
}
});
});
</script>

Вот и все! Будут вопросы - не стесняйтесь. Спрашивайте. А пока можете почитать статью про сворачивание блоков на Jquery

К слову, знаю неплохой сервис, предоставляющий анонимный доступ через "Русские прокси", нуждающимся надеюсь, тоже поможет в определенных "вопросах".
Добавить комментарий