SiteIS

jQuery - безграничные возможности в дизайне Вашего сайта!

- Один из самых популярных на сегодня среди веб разработчиков фреймворк

- Позволяет быстро и легко создать потрясающие веб-приложения

- Удивительно красивые анимационные эффекты

- Улучшение пользовательского интерфейса

Выделяем строки разными цветами

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

Очень часто, когда на страницу требуется вывести много данных с перечнем каких то свойств, дизайнеры используют эффект "зебры". Они подкрашивают строки через одну цветом, отличным от цвета фона. Решая такую задачу только с помощью html и css универсальности добиться невозможно. Процесс добавления новых строк становится трудоемким, требующим от редактора знаний в этой области. Использование javascript существенно упрощает задачу. А поскольку jQuery является тем же js, но с более упрощенным синтаксисом, то реализация задуманного становится делом пяти минут. Приступим.

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

velo string

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

Выполнить разметку можно многими способами - таблицей, блоками, списками... Я являюсь сторонником без табличной верстки и в данном случае считаю, что наиболее оптимальным будет использовать список. Вспоминаем html (для отображения картинок к ним нужно прописать правильный путь):

<ul>
	<li>
		<a href="#">
			<span class="img"><img alt="velo" src="/PABLIC/img/velo_1.jpg" /></span>
			<span class="title">Alpine Bike Navigator</span>
			<span class="price">14 695 руб</span>
		</a>
		<button>В корзину</button>		
	</li>
</ul>

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

разметка без стилей

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

ul {
margin:0;
padding:0;
width:740px;
list-style:none;
border:1px solid #e9e9e9;
border-top:0;
}
li {
width:100%;
font:bold 16px Arial, san-serif;
background:#fff;
border-top:1px solid #e9e9e9;
}
li:hover {
background:#e5e3e3;
}
ul a, ul span, ul button {
display:inline-block;
vertical-align:top;
*display:inline;
*zoom:1;
}
ul a {
margin-left:20px;
padding:10px 0;
color:#16638e;
text-decoration:none;
}
ul span.img {
margin-right:20px;
width:63px;
}
ul span.img img {
width:100%;
}
ul span.title {
margin-right:20px;
width:313px;
line-height:37px;
text-decoration:underline;
}
ul li:hover span.title {
text-decoration:none;
}
ul span.price {
margin-right:20px;
padding-left:30px;
width:100px;
height:35px;
line-height:35px;
color:#fff;
background:url(PABLIC/img/fon_price.png) no-repeat;
}
ul button {
margin:15px 20px 0 0;
padding-bottom:3px;
width:120px;
height:27px;
font:bold 16px Arial, san-serif;
color:#fff;
border:0;
cursor:pointer;
background:url(PABLIC/img/fon_button.png) no-repeat;
}

что бы получить такой результат:

разметка со стилями

Размножим строки и поменяем содержимое, что бы информация о товарах различалась:

<ul>
	<li>
		<a href="#">
			<span class="img"><img alt="velo" src="/PABLIC/img/velo_1.jpg" /></span>
			<span class="title">Alpine Bike Navigator</span>
			<span class="price">14 695 руб</span>
		</a>
		<button>В корзину</button>		
	</li>
	<li>
		<a href="#">
			<span class="img"><img alt="velo" src="/PABLIC/img/velo_2.jpg" /></span>
			<span class="title">Alpine Bike Navigator PRO</span>
			<span class="price">14 695 руб</span>
		</a>
		<button>В корзину</button>		
	</li>
	<li>
		<a href="#">
			<span class="img"><img alt="velo" src="/PABLIC/img/velo_3.jpg" /></span>
			<span class="title">Stevens Elegance Lite</span>
			<span class="price">14 695 руб</span>
		</a>
		<button>В корзину</button>		
	</li>
	<li>
		<a href="#">
			<span class="img"><img alt="velo" src="/PABLIC/img/velo_1.jpg" /></span>
			<span class="title">Alpine Bike Navigator</span>
			<span class="price">14 695 руб</span>
		</a>
		<button>В корзину</button>		
	</li>
	<li>
		<a href="#">
			<span class="img"><img alt="velo" src="/PABLIC/img/velo_2.jpg" /></span>
			<span class="title">Alpine Bike Navigator PRO</span>
			<span class="price">14 695 руб</span>
		</a>
		<button>В корзину</button>		
	</li>	
</ul>

Должно получиться нечто подобное:

окончательный вариант разметки

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

Однако, нет худа без добра. Мы уже способны решить эту проблему парой строк jQuery. Отберем нужные элементы, используя фильтр odd и применим к ним метод css, задав в нем необходимое правило.

$(function() {
	$('ul li:odd').css('background', '#f8f8f8');
});

Вот теперь у нас все как на дизайне. Мы радостно сдаем работу, тестировщик заглядывает в код через firebug и...

код в firebug

настроение портится. В общем то, ничего ужасного там не происходит и все валидно, но мы то знаем, что не рекомендуется смешивать стили и разметку. Если есть такая возможность, то лучше вынести стилевые правила в файл, для них предназначенный. Что же, давайте поступим профессионально. Тем более, что jQuery в данной ситуации позволяет это сделать без труда. А сделаем мы так - вместо метода css используем метод addClass, который добавит класс, указанный в параметре (пусть это будет класс grey) к каждой нечетной строке.

$(function() {
	$('ul li:odd').addClass('grey');
});

Все, что нужно теперь сделать - это прописать в css файле следующий стиль:

.grey {
background:#f8f8f8;
}

Грузим страницу в браузере и наблюдаем точно такой же результат, но в firebug теперь видим красивый и легко читаемый код.

Готовый пример можно скачать по ссылке ниже:

Скачать готовый код

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