Хаки и Скрипты 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 и блоку в панели.
Все пользуемся.

Можешь почитать и вот эту статейку "Выбор серии или канала для просмотра"

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

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