вход

Переключатель “Опции отображения” при помощи CSS & jQuery

Переключатель "Опции отображения" при помощи CSS & jQuery

Здравствуйте уважаемые читатели блога mainview.ru. Сегодня я хотел бы показать вам как быстро и просто сделать переключатель отображения помощью CSS и JQuery. Этот способ позволит пользователям переключаться на желаемый вид отображения списка на странице. Кликнув по переключателю, пользователь сможет отображать блоки либо обычным списком с названиями, миниатюрами и краткими описаниями, либо плиткой с миниатюрами и названиями.

Уже становиться очевидным, что сегодняшние веб пользователи уже ожидают от веб-страниц максимальную интерактивность. Они хотят иметь больше опций для настройки удобного им стиля. Предоставляя им возможность самим изменять макет страниц, вы предоставляете возможность более легкого и удобного восприятия информации.

Сегодняшний пример позволит пользователям самим решать какой вид им боле удобен: быстрый просмотр галереи, или детальный просмотр резюме. Итак, посмотрим на jQuery пример, который вы легко можете применить в своей jQuery галерее

Как это выглядит

Шаг 1. Создание основы

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

HTML

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

CSS


ul.display {
	float: left;
	width: 756px;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid #ddd;
	border-right: 1px solid #ddd;
	background: #eee;
}
ul.display li {
	float: left;
	width: 754px;
	padding: 10px 0;
	margin: 0;
	border-top: 1px solid #fff;
	border-right: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	border-left: 1px solid #fff;
    color:#000
}
ul.display li a {
	color: #0062ad;
	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;
}


* Обратите внимание, я использовал различные оттенки серого цвета для достижения иллюзии тонкий фаски.

Шаг 2. Стилизация содержимого

Внутри каждого элемента списка, мы разместим тег <div>, который будет служить контейнером для всего содержимого внутри элемента списка. Я чувствую, что считать колонки легче, если в расчет не брать поля и отступы. Это очень удобно, особенно если вы работаете с плавающим макетом (так как мы знаем, что процентная и фиксированная ширина в пикселях смешиваются не слишком хорошо).

HTML


<li>
        <div class="content_block">
            <a href="#"><img src="sample.gif" alt="" /></a>
            <h2><a href="#">Название</a></h2>
            <p>Описание</p>
  </div>
</li>

CSS


ul.display {
	float: left;
	width: 756px;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid #ddd;
	border-right: 1px solid #ddd;
	background: #eee;
}
ul.display li {
	float: left;
	width: 754px;
	padding: 10px 0;
	margin: 0;
	border-top: 1px solid #fff;
	border-right: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	border-left: 1px solid #fff;
    color:#000
}
ul.display li a {
	color: #0062ad;
	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. Создание второго варианта отображения

Теперь пришло время стилизовать второй вариант отображения, в котором содержимое находятся в блоках, распределенных по горизонтали. Эти блоки выстроены в одну горизонтальную линию, переносы в которой обусловлены шириной контейнера, содержащего эти блоки. Т.е. число блоков в строке определяется отношением ширины контейнера и ширины каждого блока.

CSS


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. Создание переключателя

Теперь пришло время, чтобы создать переключатель, нажимая на который будет выполняться код.

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

Вот так выглядит кнопка у меня.

HTML

<a href="#" class="switch_thumb">Иконка переключателя</a> 

CSS


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

Чтобы не загромождать код, я не буду создавать отдельные правила для состояния наведения курсора. Поэтому я буду использовать прозрачность, чтобы создать эффект интерактивности при наведении курсора на изображение. Однако вы можете использовать свои правила для создания нужных вам эффектов.

JQuery

Наконец, мы будем активировать переключатель, используя очень простой 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>

Применение

Этот метод может быть применен ко многим сценариям, поэтому вы смело можете экспериментировать с этой техникой. Если у вас есть что добавить, пожалуйста, не стесняйтесь написать ваши мысли в комментариях!

 

Качественные премиум темы и шаблоны для Вашего сайта:

Смотреть полный каталог качественных тем и шаблонов

Здесь Вы можете выбрать из более чем 46 000 готовых дизайнов. Шаблоны сайтов + установка + хостинг + персонализация + поисковая оптимизация + копирайтинг — все эти услуги вы всегда можете получить от профессионалов мирового уровня!


Нашли это полезным? Поделитесь с другими:
Не останавливайтесь, читайте дальше:
3 комментария

Статья → Переключатель “Опции отображения” при помощи CSS & jQuery

  1. Андрей:

    Нужная штука, спасибо. А можно сделать чтоб при перезагрузке страницы оставался тот же вид?

  2. Думаю что либо HTML5 Web Storage использовать нужно чтоб запоминалось положение после перезагрузки страницы (для меня пока не все с ним ясно), либо с помощью cookies. Такое запоминание делал у себя с выбором и запоминанием фоновой картинки (до тех пор пока не удалят cookies) – просто подключал второй css с нужными параметрами и запоминал в куках

  3. Алекс:

    а как сделать чтобы изначально выходило в таблице?

Оставить комментарий

Статья → Переключатель “Опции отображения” при помощи CSS & jQuery

Правила комментирования

  1. Кoммeнтapий всегда проходит премодерацию.
  2. В поле "URL блога" можно указывать только ссылку на главную страницу вашего блога. Ссылки на прочие веб-ресурсы (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Запрещается использовать в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия имя изменяется по усмотрению владельца блога. Просьба указывать нормальное имя или ник.
  4. Весьма вероятно, что короткий и неинформативный кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.