Выходные в честь Дня Поминовения подходят к концу - я уже двое суток подряд не подходил к компьютеру (о ужас!), так что сейчас мне хочется быстренько дописать еще один урок по jQuery и выложить его в Интернете.

Я бы с огромным удовольствием занялся статьями «Как редактировать в Jquery» и «Секреты магической загрузки нескольких файлов», но они требуют особого внимания к деталям, поэтому я начну со статей попроще.

Итак, поехали –

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

Еще в мае 2004 года на сайте «A List Apart» выложили прекрасный учебник по созданию падающих теней (он назывался «Onion Skinned Drop Shadows», «Очищенная луковица, отбрасывающая падающие тени») на любом изображении, вне зависимости от размера.

Комментарии к этой статье уже убрали, но надо сказать, некоторые из них подтверждали мысль, высказанную в предисловии редактора. Предисловие редактора:

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

(Подчеркнуто мной. – Джек)

Проблема

Некоторые приемы CSS предусматривают использование «посторонней» разметки, поскольку на сегодняшний день к каждому элементу можно привязать только одно фоновое изображение.

Например:

Вот код html, предложенный в статье с сайта «A List Apart»:

<div class="wrap1">
<div class="wrap2">
<div class="wrap3">
<img src="object.gif" alt="The object casting a shadow"/>
</div>
</div>
</div>

Все эти теги div служат своего рода якорями для фоновых изображений, которые образуют падающие тени.

Было бы куда удобнее сократить исходный код до вот такого:

<img src="object.gif" class="dropshadow" alt="The object casting a shadow" />

Отсюда следует…

Цель

Я расскажу вам о том, как убирать «постороннюю» разметку из исходного кода с помощью библиотеки jQuery. Этот метод позволит сделать код понятней и (что важнее) облегчит последующие изменения оформления.

Решение

Вот как jQuery решает проблему.

$(document).ready(function(){
$("img.dropshadow")
.wrap("<div class='wrap1'><div class='wrap2'>" +
"<div class='wrap3'></div></div></div>");
});

В итоге, изображения можно будет оформить вот так:

<img src="object.gif" class="dropshadow" alt="The object casting a shadow" />

Рассмотрим повнимательнее

$(document).ready() - Это версия window.onload() в jQuery.
$(”img.dropshadow”) - говорит jQuery найти все картинки с именем класса “dropshadow”. Если бы Вы хотели использовать id, то взамен Вы могли бы сделать кое-что как $(”img#dropshadow”).
wrap() - указывает на то, что библиотека jQuery должна использовать DOM (метод Document Object Model, объектная модель документов), чтобы заключить изображение, которое содержится в скобках, в оболочку class=”dropshadow”.

Конечный результат

Дурацкая картинка – но она использовалась в исходной статье:Образец падающих теней, созданных с помощью jQuery.

Сравните jQuery с другими библиотеками

На сайте jQuery есть ссылка на страницу Ajaxian, где рассказывается о том, как создать падающие тени с помощью другой библиотеки javascript. Мне кажется, длина и сложность кода говорят сами за себя. Лично я, как вы, наверное, уже догадались, предпочитаю jQuery.

Честно говоря, не существует библиотеки, которая подошла бы сразу всем создателям сайтов для выполнения любых задач. Я вовсе не утверждаю, что jQuery – единственная и самая лучшая библиотека javascript на все случаи жизни.

Попробуйте Prototype, Scriptaculous, YUI, Rico, Behaviour, Moo.fx или еще какую-нибудь из сотен подобных библиотек. Если она понравится вам больше – что ж, пользуйтесь.

jQuery - это утилита, которая мне помогает. Я надеюсь, что эта заметка покажет Вам еще одно полезное применение jQuery.

Полезные утилиты jQuery

jQuery позволяет невероятно легко манипулировать html в браузере клиента. Вы должны взглянуть на то, что Вы можете сделать с jQuery, используя append(), prepend(), before(), after(), html(), и remove().

Более полные консультации

По уровню сложности я поставлю один или два. Но это нормально, потому что если идея простая, то применительна ко многим ситуациям, которые могут у вас возникнуть в вашей дизайнерской и программистской работе. И кроме того, независимо от того, когда Вы читаете эту заметку, помните, что я опубликовал после Memorial Day - полного солнца на пляжах Флориды. Я только что уложил семью в постель и на моих тапках до сих пор есть песок.

Отдых будет потом, но сначала мы дойдем до конца “15 дней с jQuery”, и Вы увидите немного больше полезных руководств, примеров и кода.

Популярность: 59%