Хаки и Скрипты Next Generation CMS

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

irbees2008 irbees2008 Опубликовано - 19 - ноября Диалоги и lightbox
2768 - 0
  • Адаптировал: 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 и блоку в панели.
Все пользуемся.

Можешь почитать и вот эту статейку "Плагин XNEWS"

Опрос

Ваше мнение

какой форум лучше для вас
Результаты

Последние комментарии

Теги

Anything in here will be replaced on browsers that support the canvas element

Статистика

  • Caйту: 3834 дня
  • Новостей: 561
  • Комменты: 254
  • Зарегистрированно : 621
  • Онлайн всего: [6]
  • Гости: [6]
  • Были сегодня : [2] Google, Яндекс
  • SQL запросов: 33
  • Генерация страницы: 0.416сек
  • Потребление памяти: 5.178 Mb 
  •   яндекс.ћетрика