» » Выбор оформления блока на сайте с помощью jQuery и CSS

Выбор оформления блока на сайте с помощью jQuery и CSS

3.12
5
23 993
Выбор оформления блока на сайте с помощью jQuery и CSS


Как добавить разнообразия своему сайту? Вы уже не раз задаётесь этим вопросом?
Сегодня я расскажу как с помощью нехитрого jQuery скрипта и CSS можно осуществить возможность для посетителя сайта самому выбирать внешний вид блоков на сайте, естественно только тех, которые Вы ему разрешите менять smile

Идея реализации проста как 2 копейки:
При добавлении определённой конструкции внутрь любого дива на сайте будет появляться кнопочка. Нажимаем на неё и нашему взору представляется меню - список возможных вариантов оформления этого блока. Выбранный вариант записывается в куки браузера и при повторном заходе на страницу оформление блоков не меняется.

На самом же деле всё оказалось гораздо сложнее чем я думал, и потребовало довольно большого количества потраченного времени, нервов и, что немаловажно, заработанных "кровью и потом", денег. Но результат того стоит!

Итак, не буду рассусоливаться, перейдём сразу к делу: берём квартиры на сутки(шучу smile).
Для начала посмотрите на демонстрацию работы данного скрипта.
Я специально сделал простейшее оформление странички дабы не засорять умы неподготовленных юзеров обилием css-стилей, написал только то, что необходимо для демонстрации работы.

Так же не буду описывать всё пошагово т.к. для знающих людей скрипт не представит сложностей, а для незнающих - интереса. Остановлюсь лишь на некоторых особенностях.
Суть работы скрипта состоит в следующем:
при помещении внутрь любого дива на сайте вот такой вот простейшую конструкции:
<div class="switchbutton"></div>

При выполнении скрипта в каждый такой блок будет добавлено "меню":
Эту конструкцию необходимо сначала прописать в любое место на странице (проще всего в конец, перед закрывающим тегом body).
<div id="customize" class="switchmenu">
    <p><i>yellow</i>Жёлтый</p>
    <p><i>green</i>Зеленый</p>
    <p><i>red</i>Красный</p>
</div>

где текст, заключённый в теги i - при клике на соответствующий "пункт меню" будет становиться выбранным классом для родительского блока, при это в файле myscript.js вот в этой строке:
var removedclasses = "yellow green red"; //Указываются классы, которые будут меняться. Так же не забываем отражать эти классы в HTML коде блока #customize/

должны быть указанны те же самые классы, что вы указываете тегах i.
вот собственно и вся суть, если в двух словах. Кому, что не понятно - спрашивайте в комментариях.... лень писать полное описание.

Все необходимые для работы скрипта и нормального отображения классы прописаны в отдельном css-файле (styleswith.css).

P.S.
Хочу вырвзить особую благодарность человеку под ником jQueryScripter за всевозможную помощь в написании этого скрипта.

Похожие материалы

Комментарии

georg
georg 24 апреля 2013 15:41
привет. а как можно сделать, что бы в место цветов добавлять картинку (как фон).

и вообще что можно ещё придумать (если можно с примером как это сделать)
ПафНутиЙ
ПафНутиЙ 24 апреля 2013 15:54
Да, можно придумать что угодно, к примеру, что бы менять фон - достаточно в css рядом с цветом прописать ссылку на изображение.
Karat7
Karat7 2 ноября 2014 21:58
Может немного не в тему но хотелось бы узнать как можно с помощью css повесить на аватар dle новогоднюю шапку например?
ПафНутиЙ
ПафНутиЙ 2 ноября 2014 22:12
да, вы совсем не в тему попали.
Karat7
Karat7 2 ноября 2014 22:18
ПафНутиЙ,
А в какой можно задать этот вопрос? winked

Добавить комментарий

Комментировать могут только зарегистрированные пользователи

Информация

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.