Хаки и Скрипты Next Generation CMS : Диалоги и lightbox : Скрипт выбора фонового изображения пользователями

irbees2008 Опубликовано - 19 - ноября Диалоги и lightbox

Адаптировал: irbees2008
Источник:
Уровень сложности исполнения: нужны навыки css hmlt
Демо:

Вот небольшой скрипт, позволяющий пользователям самостоятельно выбирать фон сайта из предложенных Вами вариантов. В скрипте будет использован только библиотека jQuery и плагин jQuery Cookie — он поможет нам сохранить выбранный пользователем вариант. Таким образом даже после перезагрузки страницы или закрытия браузера, фон будет тот же, что выбрал пользователь.
И так, начнем…
1. Подключаем скрипты,первым делом подключаем саму библиотеку jQuery, если она у Вас еще не подключена, и плагин jQuery cookie.

Код:

<script type="text/javascript" src="{tpl_url}/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="{tpl_url}/js/jquery.cookie.js"></script>

2. HTML разметка.

Код:

<div id="panel-bg">
     <div>Выберите фон страницы:</div>
    <div class="button-bg bg-1" id="bg-1"></div>
    <div class="button-bg bg-2" id="bg-2"></div>
    <div class="button-bg bg-3" id="bg-3"></div>
    <div class="button-bg bg-4" id="bg-4"></div>
    <div class="button-bg bg-5" id="bg-5"></div>
    <div class="button-bg bg-6" id="bg-6"></div>
    <div class="button-bg bg-7" id="bg-7"></div>
 </div>

В блоке с id panel-bg находятся несколько блоков, которые будут в качестве кнопок. У каждого из них будет своя фоновая картинка, назначать мы их будем для классов. Также у этих блоков есть и id, которые должны совпадать с их классом (далее Вы поймете зачем).
3. CSS стили.

Код:

.button-bg {
  width: 40px;
  height: 40px;
  border: 1px solid #ddd;
  float: left;
  margin: 7px 3px;
  cursor: pointer;
}
.active,
.button-bg:hover {
  box-shadow: 0 0 3px rgba(0,0,0,0.5);
  border: 1px solid #fff;
}
.bg-1 {background: #fff url("images/agsquare.png");}
.bg-2 {background: #fff url("images/diagonales_decalees.png");}
.bg-3 {background: #fff url("images/geometry.png");}
.bg-4 {background: #fff url("images/gray_jean.png");}
.bg-5 {background: #fff url("images/ps_neutral.png");}
.bg-6 {background: #fff url("images/skelatal_weave.png");}
.bg-7 {background: #fff url("images/sneaker_mesh_fabric.png");}

Для каждого класса задали свою фоновую картинку и выровняли блоки в линию. Так же добавили стили при наведении и для активного блока.
4. Cкрипт.

Код:

$(document).ready(function() {

  if($.cookie('body-bg')) {             // если кука уже есть

    var bgBody = $.cookie('body-bg');   // получаем значение куки

    $('body').addClass(bgBody);         // добавляем класс body
    $('#'+bgBody).addClass('active');   // выбираем активную кнопку и даем ей класс active

  }

  $('.button-bg').click(function() {    // действия при клике на кнопку (блок div)

    var bgBody = $('body').attr('class'), // получаем текущий класс и присваеваем его переменной bgBody
        bgId   = $(this).attr("id");      // получаем значение id, кнопки по которой был клик

    $('body').removeClass(bgBody).addClass(bgId); // удаляем текущий класс у body и добавляем тот который был выбран

    $('.button-bg').removeClass('active');        // удаляем у всех кнопок класс active
    $(this).addClass('active');                   // текущей кнопки даем класс active

    $.cookie('body-bg', bgId, {expires: 365});    // добавляем куку на год

  });

});

Как видите, скрипт достаточно маленький и простой. При клике по одному из блоков, значение его id записывается в куку, а тегу body дается класс (такой же как id блока по которому был клик), а самому блоку добавляется класс active. Так же в начале есть проверка на существование куки, и если она уже есть, то так же добавляются нужные классы и body и блоку в панели.
Все пользуемся.

Можешь почитать и вот эту статейку "Теги header"

Это тоже интересно

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