Хаки и Скрипты Next Generation CMS Голосов: 1 Адрес блога: http://ngcmshak.ru Добавлен: 2013-12-31 14:21:51 блограйдером 88888888

Скрипт выбора фонового изображения пользователями

2013-11-19 01:57:59 (читать в оригинале)

Вот небольшой скрипт, позволяющий пользователям самостоятельно выбирать фон сайта из предложенных Вами вариантов. В скрипте будет использован только библиотека 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 и блоку в панели.
Все пользуемся.