• 2028
  • 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 и блоку в панели.
Все пользуемся.

Можешь почитать и вот эту статейку "Вставка видео с Ютуба"

mistakes

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

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

Ваше мнение

TWIG -что это?
Результаты

Облако тегов

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