Впервые мне встретился style sheet switcher (переключатель таблицы стилей) то ли на сайте A List Apart (Уникальный список), то ли Simple Bits (Мелкие штучки). Это превосходные сайты, с которыми необходимо познакомиться, если хотите серьезно заниматься дизайном.

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

Хочу показать этот пример и провести по нему читателя от начала до конца, поскольку он - не только очередной удачный пример краткой программы, которую можно написать с помощью jQuery. Он также иллюстрирует некоторые более продвинутые характеристики библиотеки jQuery javascript. Не буду сейчас останавливаться на некоторых функциях, связанных с созданием и чтением cookies - они встретятся позже.

Сначала код

$(document).ready(function()
{
        $('.styleswitch').click(function()
        {
                switchStylestyle(this.getAttribute("rel"));
                return false;
        });
        var c = readCookie('style');
        if (c) switchStylestyle(c);
});

function switchStylestyle(styleName)
{
        $('link[@rel*=style]').each(function(i)
        {
                this.disabled = true;
                if (this.getAttribute('title') == styleName) 
                 this.disabled = false;
        });
        createCookie('style', styleName, 365);
}

Привычные основы

$(document).ready(function()
{
        $('.styleswitch').click(function()

Вначале программа дает задание jQuery: «Как можно скорее выделить все элементы с именем класса styleswitch (переключатель стилей) и мгновенно включить функцию, как только элемент вызван щелчком мыши».

Пока все идет хорошо.

При щелчке на элементе будет вызвана функция switchStylestyle. А теперь пойдем дальше.

Что происходит?
Я был поставлен в тупик тем, что увидел, когда обратил пристальное внимание на этот момент в первый раз.

$('link[@rel*=style]').each(function(i)
        {

Обшарив интернет и вернувшись с пустыми руками, я связался с John Resig (Джон Ресиг), создателем jQuery, и попросил его хоть как-то намекнуть мне на причину происходящего.

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

Если прочитать краткие объяснения и предложенные здесь примеры, то скоро станет очевидно, что эта загадочная строка программы велит jQuery: «Найди все ссылки с соответствующими атрибутами, содержащими строку ‘style’».

Классно?

Давайте посмотрим, как будет создаваться страничка с одной главной stylesheet (таблицей стилей) и двумя альтернативными:

<link rel="stylesheet" type="text/css" href="styles1.css"
  title="styles1" media="screen" />
  <link rel="alternate stylesheet" type="text/css" href="styles2.css"
  title="styles2" media="screen" />
  <link rel="alternate stylesheet" type="text/css" href="styles3.css"
  title="styles3" media="screen" />

Необходимо обратить внимание на то, что все ссылки на stylesheets имеют где-то на страничке соответствующие маркировки «style» в кавычках.

Т.е., короче говоря, эта программа велит jQuery выискать все ссылки на stylesheet на странице.

Что же дальше?

Функция «each()» проходит сквозь каждую ссылку на stylesheet и осуществляет операции, подробно описанные в следующих нескольких строках программы:

this.disabled = true;
if (this.getAttribute('title') == styleName) this.disabled = false;

«Отключите все ссылки на stylesheet, после чего отмените отключение всех тех ссылок, в которых атрибут «title» (название) совпадает с посланной switchStylestyle-функции задачей».

Звучит устрашающе, но все не так страшно.

По сути, мы подбираем пары соответствующих атрибутов ссылок (тех, на которые можно кликнуть, чтобы включить stylesheets) к доступным нам атрибутам, содержащимся в названиях stylesheets (и наоборот).

Если вызвать щелчком мыши одну из этих ссылок, то вызывается функция, которая обнаруживает все stylesheets, отключает их, после чего заново включает одну из них… - ту, название stylesheet-ссылки которой совпадает с соответствующим атрибутом вызванной ссылки.

Ну и дела!

Полная программа и демо-версии.

Поскольку Kelvin Luck (Келвин Лак) уже создал программу, то нет необходимости повторять ее здесь.

Демо

Программа - я не буду отсылать прямо к zip’у (заархивированной версии), это порой воспринимается как грубость. Если пойти на эту страницу, то внизу ее будет видна ссылка на zip.

Сравнение с другим кодом.

Полагаю, что старик Kelvin был вдохновлен именно этим сайтом. Если познакомиться с ним, то станет очевидно, что делать это, не прибегая к jQuery, несколько более сложно. Не обращаясь jQuery, пользователь лишается тех преимуществ, которые дает программа Kelvin’а - т.е. долговременной памяти выбранного stylesheet.

Спонсор поста: stepmania

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