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

Создание вкладок на Jquery

  • Понедельник, 25 октября 2011, 21:16 |
  • Автор: fiamma |
  • Просмотров: 2803 |
  • Комментарии: 0 |
  • В закладки:
В последнее время веб-мастера, на многих своих сайтах, начали использовать блоки в сайдбаре, переключаемые с помощью вкладок. Во-первых для экономии места, а во-вторых, это действительно красиво. Далее я приведу пример реализации таких вкладок с использованием Jquery.
В итоге мы получим блок вкладок, который выглядит примерно так:
Создание вкладок на Jquery


Шаг первый - Создаем каркас в HTML-е
<!DOCTYPE>
<html>
<head>
<title>Вкладки на jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="tabs.js"></script>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<br />
<div class="tabs">
  <!-- tabs -->
  <ul class="tabNavigation">
    <li><a href="#first">Бендер</a></li>
    <li><a href="#second">Козлевич</a></li>
    <li><a href="#third">Корейко</a></li>
  </ul>

  <!-- tab containers -->
  <div id="first">
    <p><img src="images/bender.jpg" alt="Остап Бендер" align="left" />Гражданин в фуражке с белым верхом, какую по большей части носят администраторы летних садов и конферансье, несомненно принадлежал к большей и лучшей части человечества. Он двигался по улицам города Арбатова пешком, со снисходительным любопытством озираясь по сторонам. В руке он держал небольшой акушерский саквояж. Город, видимо, ничем не поразил пешехода в артистической фуражке.</p>
  </div>
  <div id="second">
    <p><img src="images/kozlevich.jpg" alt="Адам Козлевич" align="left" />К рулевому колесу его привело решение начать новую жизнь. Старая жизнь Адама Козлевича была греховна. Он беспрестанно нарушал Уголовный кодекс РСФСР, а именно статью 162-ю, трактующую вопросы тайного похищения чужого имущества (кража).</p>
  </div>
  <div id="third">
    <p><img src="images/korejjko.jpg" alt="Корейко" align="left" style="margin: 5px" />Александр Иванович Корейко, один из ничтожнейших служащих "Геркулеса", был человек в последнем приступе молодости — ему было тридцать восемь лет. На красном сургучном лице сидели желтые пшеничные брови и белые глаза. Английские усики цветом тоже походили на созревший злак. Лицо его казалось бы совсем молодым, если бы не грубые ефрейторские складки, пересекавшие щеки и шею. На службе Александр Иванович вел себя как сверхсрочный солдат: не рассуждал, был исполнителен, трудолюбив, искателен и туповат.</p>
  </div>
</div>
</body>
</html>


Шаг второй - Добавляем CSS
body  { 
  font-family: calibri, verdana, arial, sans-serif;
}

img {
  border: 0;
  margin: 5px;
  margin-right:10px;
}
    
.tabs  {
  width: 400px;
}

ul.tabNavigation {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.tabNavigation li {
  display: inline;
}

ul.tabNavigation li a {
  padding: 3px 5px;
  background-color: #82B6CB;
  color: #000;
  text-decoration: none;
}

ul.tabNavigation li a.selected,
ul.tabNavigationli a:hover {
  background-color: #000;
  color: #fff;
  padding-top: 7px;
}
        
ul.tabNavigation li a:focus {
  outline: 0;
}

#first {
  background-color: #010f1c;
  background-image: url(bg.gif);
  background-repeat: repeat-x;
  background-position: bottom;
  min-height: 110px;
  color: #fff;
  padding: 5px;
  margin-top: 3px;
  border: 5px solid #000;
}

#second {
  background-color: #010f1c;
  background-image: url(bg.gif);
  background-repeat: repeat-x;
  background-position: bottom;
  min-height: 110px;
  color: #fff;
  padding: 5px;
  margin-top: 3px;
  border: 5px solid #000;
}

#third {
  background-color: #010f1c;
  background-image: url(bg.gif);
  background-repeat: repeat-x;
  background-position: bottom;
  min-height: 110px;
  color: #fff;
  padding: 5px;
  margin-top: 3px;
  border: 5px solid #000;
}


Шаг третий - Немного кода на Jquery
$(function () {
    var tabContainers = $('div.tabs > div');
    tabContainers.hide().filter(':first').show();
            
    $('div.tabs ul.tabNavigation a').click(function () {
        tabContainers.hide();
        tabContainers.filter(this.hash).show();
        $('div.tabs ul.tabNavigation a').removeClass('selected');
        $(this).addClass('selected');
        return false;
    }).filter(':first').click();
});


Ну вот и все.. Как видите все реализуется достаточно просто.
Исходник: jquery-tabs.rar [44.93 Kb] (cкачиваний: 121)

Загляните на страничку с материалом по генерации паролей для сайта на PHP.

Спонсором нашей статьи является застройщик жилой комплекс славянка: отличное жилье в Подмосковье.
Добавить комментарий