Фев
22
0

Делаем переключение CSS с помощью jQuery

Author K_E_V_in    Category javascript     Tags , , , , , , , , , , , ,

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

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

Важный момент! Элементу повесим уникальный id. К примеру, так: id=”init”. После этого мы подключим стиль оформления, который будет выбранным по умолчанию. В результате получится примерно такое:

1
<head id="init"><link type="text/css" rel="stylesheet" media="screen" title="style-default" href="style-default.css" />

В данном фрагменте обязательным условием является наличие title (именно по нему и будем получать доступ к элементу). В данном случае title=”style-default”.

Ещё несколько таблиц стилей, мы подключаем с помощью яваскрипта. Тогда переключение CSS с помощью jQuery уже будет подготовлено.

1
2
3
4
5
6
7
8
9
10
11
$(document).ready(function() {
 var inject = $('#init');
 var skinsPath = '/themes/shift/css/';
  inject.append(
    '<link type="text/css" rel="stylesheet" media="screen" title="style-gray" href="'+ skinsPath+'style-gray.css" />' +
    '<link type="text/css" rel="stylesheet" media="screen" title="style-reflex" href="'+ skinsPath+'style-reflex.css" />' +
    '<link type="text/css" rel="stylesheet" media="screen" title="style-chocolate" href="'+ skinsPath+'style-chocolate.css" />' +
    '<link type="text/css" rel="stylesheet" media="screen" title="style-mild" href="'+ skinsPath+'style-mild.css" />' +
    '<link type="text/css" rel="stylesheet" media="screen" title="style-green" href="'+ skinsPath+'style-green.css" />'
  );
});

Следует обратить особое внимание на селекторы title. Они у каждого стиля должны быть уникальными!

Теперь самое время заняться непосредственным переключением CSS с помощью jQuery. Для этого будем использовать два сниппета, которые осуществляют переключение и запись результата в cookies пользователя.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
/* Switch Styles*/
(function($) {
$(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][title]').each(function(i) {
            this.disabled = true;
            if (this.getAttribute('title') == styleName) this.disabled = false;
        });
        createCookie('style', styleName, 365);
    }
})(jQuery);
 
/* cookie style core */
function createCookie(name,value,days)
{
    if (days)
    {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
    }
    else var expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name)
{
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++)
    {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}
function eraseCookie(name)
{
    createCookie(name,"",-1);
}

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

К примеру, переключатели можно поставить так:

1
2
3
4
5
6
<a href="#" rel="style-default" class="styleswitch s2">[1]</a>
<a href="#" rel="style-gray" class="styleswitch s1">[2]</a>
<a href="#" rel="style-green" class="styleswitch s3">[3]</a>
<a href="#" rel="style-mild" class="styleswitch s4">[4]</a>
<a href="#" rel="style-chocolate" class="styleswitch s5">[5]</a>
<a href="#" rel="style-reflex" class="styleswitch s6">[6]</a>

Класс styleswitch используется для установки события click, в атрибуте rel должно содержаться  название стиля, которое мы синхронизируем с title в . Естественно, что ссылки можно оформить как душе угодно!

Протестировано во всех современных браузерах. Решение действительно кроссбраузерное! Обо всех трудностях и косяках пишите в комменты, будем разбираться! А в следующем посте я расскажу, как можно быстро и просто как установить код adsense на joomla.

Прокомментировать

Рубрики

Облако меток

В прямом эфире