Изящное переключение стилей с помощью jQuery и CSS

Оригинал статьи: Soh Tanaka СС-лицензия:

Опубликовано 29.06.10 / Автор перевода: Иван Саломатин

comments Комментариев 0

В этой статье я расскажу о том, как, используя CSS и jQuery, создать своеобразный переключатель, позволяющий пользователю изменять режим просмотра страниц вашего сайта (подобная техника может быть использована для решения любых задач, связанных с необходимостью переключения стилей элементов – прим. перев.).

Live Example

Сегодня наиболее популярные web-ресурсы, стремясь угодить пользователям, становятся всё более интерактивными. Возможность управлять режимом расстановки элементов страницы обеспечивает пользователя удобным и практичным инструментом для работы с сайтом, позволяющим в считанные секунды отсортировать представленную информацию по тому или иному критерию.

1. Создаём HTML-каркас

Сперва создадим простейший ненумерованный список. Элементы списка, впоследствии, и будут представлять строки/столбцы контента на нашей странице.

<ul class="display">
  <li></li>
  <li></li>
  <li></li>
</ul>

Базовые CSS-стили для этого списка выглядят следующим образом:

Внимание! Здесь и далее приводятся стили, представленные в тексте оригинальной статьи.

ul.display li a {
  color: #e7ff61;
  text-decoration: none;
  }
ul.display li  .content_block {
  padding: 0 10px;
  }
ul.display li  .content_block h2 {
  margin: 0;
  padding: 5px;
  font-weight: normal;
  font-size: 1.7em;
  }
ul.display li  .content_block p {
  margin: 0;
  padding: 5px 5px 5px 245px;
  font-size: 1.2em;
  }
ul.display li  .content_block a img{
  padding: 5px;
  border: 2px solid #ccc;
  background: #fff;
  margin: 0 15px 0 0;
  float: left;
  }

Обратите внимание: я использовал различные оттенки серого цвета для создания эффекта тонкой рельефной границы (подробнее о данной технике вы можете узнать из статьи «Мастерство css-кодирования: меню с hover-эффектом» – прим. перев.).

2. Стилизуем контент

Внутрь каждого элемента списка помещаем div, который будет служить контейнером для нашего контента.

<li>
  <div  class="content_block">
  <a href="#"><img  src="sample.gif" alt="" /></a>
  <h2><a  href="#">Image Name</a></h2>
  <p>Description goes  here</p>
  </div>
</li>

ul.display li a {
  color: #e7ff61;
  text-decoration: none;
  }
ul.display li  .content_block {
  padding: 0 10px;
  }
ul.display li  .content_block h2 {
  margin: 0;
  padding: 5px;
  font-weight: normal;
  font-size: 1.7em;
  }
ul.display li  .content_block p {
  margin: 0;
  padding: 5px 5px 5px 245px;
  font-size: 1.2em;
  }
ul.display li  .content_block a img{
  padding: 5px;
  border: 2px solid #ccc;
  background: #fff;
  margin: 0 15px 0 0;
  float: left;
  }

3. Стилизуем второй режим просмотра

Настало время оформить второй режим просмотра содержимого страницы.

(Чтобы иметь возможность динамически просматривать изменение вида страницы при оформлении второго режима просмотра, добавьте в html-разметке класс «thumb_view» элементу <ul>: <ul class="display thumb_view">. Впоследствии этот класс будет присваиваться списку jQuery-сценарием, потому, по завершении оформления второго режима просмотра страницы, не забудьте удалить его из разметки – прим. перев.)

переключение стилей

ul.thumb_view li{width: 250px;}
ul.thumb_view li h2 {display: inline;}
ul.thumb_view li p{display: none;}
ul.thumb_view li .content_block a img {margin: 0 0 10px;}

4. Создаём переключатель режимов

Теперь создаём переключатель режимов просмотра.

<a  href="#" class="switch_thumb">Переключить</a>

Для оформления переключателя используем технику css-спрайтов.

a.switch_thumb {
  width: 122px;
  height: 26px;
  line-height: 26px;
  padding: 0;
  margin: 10px 0;
  display: block;
  background: url(switch.gif) no-repeat;
  outline: none;
  text-indent: -9999px;
  }
a.swap {  background-position: left bottom; }

Чтобы наш переключатель реагировал на наведение курсора, используем фильтр «opacity» - изменяем значение непрозрачности элемента до 75%. В принципе, вы можете использовать любую другую технику – это не принципиально.

a:hover.switch_thumb {
  filter:alpha(opacity=75);
  opacity:.75;
  -ms-filter:  "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
  }

5. Активируем переключатель

Ну, теперь осталось активировать наш переключатель с помощью небольшого jQuery-сценария.

<script  type="text/javascript">
  $(document).ready(function(){
      $("a.switch_thumb").toggle(function(){
      $(this).addClass("swap");
      $("ul.display").fadeOut("fast", function() {
      $(this).fadeIn("fast").addClass("thumb_view");
      });
      }, function () {
      $(this).removeClass("swap");
      $("ul.display").fadeOut("fast", function() {
      $(this).fadeIn("fast").removeClass("thumb_view");
      });
      });
  });
</script>

Вот собственно и всё. Желаю успехов!

Live Example