loading...

Авторизация ...

Имя пользователя :
Пароль :
я всё забыл!

JavaScript, CSSВыбор оформления блока на сайте с помощью jQuery и CSS (by ПафНутиЙ)

Написал ПафНутиЙ, 7 декабря 2010 | 10 комментариев | рейтинг новости не нравится   +4   нравится Версия для печати
Выбор оформления блока на сайте с помощью jQuery и CSS (by ПафНутиЙ)


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

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

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

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

Скачать архив: Вы не можете скачивать файлы с нашего сервера


Отблагодарили: jem777

Комментарии пользователей

  Экспорт комментариев в RSS
 Сортировать по рейтингу, по дате

Написал roller, 7 декабря 2010 в 12:59 плохой комментарий   0   хороший комментарий
Новостей: 2, комментариев: 286, Пользователи
Карма:
Как всегда от ПафНути'я только одни положительные эмоции :) Первое это наконец то - стоящая (уник и не школоло) новость, да и сам скрипт если его развить в своих нуждах может пригодится :)

Написал ПафНутиЙ, 7 декабря 2010 в 13:43 плохой комментарий   -1   хороший комментарий
Новостей: 26, комментариев: 330, Пользователи
Карма: 16±
Спасибо на добром слове :)
Развить можно. и очень сильно :) главное, что реализовано - независимсть от id всяких. Но есть и минусы, скорее всего (не проверял) он будет несовсем правильно работать если на разных страницах разное кол-во блоков....

Написал jem777, 7 декабря 2010 в 17:47 плохой комментарий   0   хороший комментарий
Новостей: 0, комментариев: 82, Пользователи
Карма:
Спасибо за труды, радуете как всегда. Сейчас как бы и не пригодится, но в будущем очень даже и может быть. smile

Написал Mexalim, 8 декабря 2010 в 14:36 плохой комментарий   -1   хороший комментарий
Новостей: 28, комментариев: 247, Пользователи
Карма:
ММмм) а если ещё привязать Drag-and-Drop буит конфетка=)

Написал netdog, 4 апреля 2011 в 15:00 плохой комментарий   0   хороший комментарий
Новостей: 0, комментариев: 2, Пользователи
Карма:
а как привязать)

Написал redca, 8 декабря 2010 в 15:04 плохой комментарий   0   хороший комментарий
Новостей: 4, комментариев: 67, Пользователи
Карма:
Поставил чтобы фон менялся картинкой. очень даже ниче так смотрится.

Написал icqmag, 8 декабря 2010 в 16:53 плохой комментарий   0   хороший комментарий
Новостей: 0, комментариев: 1, Пользователи
Карма:
помогите поставить)

Написал ragod, 20 февраля 2011 в 22:26 плохой комментарий   0   хороший комментарий
Новостей: 0, комментариев: 1, Пользователи
Карма:
Пафи, ты меня обрадовал, как раз таки искал что то подобное, на сайте много статей и за частую текст на белом фоне в больших объемах тяжело читается, прикрутил картинки, спасибо.

Написал netdog, 3 апреля 2011 в 12:05 плохой комментарий   0   хороший комментарий
Новостей: 0, комментариев: 2, Пользователи
Карма:
Прикольная штука!!!! спасибо!!!

а как сделать что бы цвет не праподал при переходе страниц? Ото я применил его к диву - который играет роль фона сайта


спасибо![/center]

Написал physx, 20 мая 2011 в 15:29 плохой комментарий   0   хороший комментарий
Новостей: 0, комментариев: 1, Пользователи
Карма:
тоже применил к диву с фоном, что нужно поправить?

Информация



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

[removed][removed] [removed] (adsbygoogle = window.adsbygoogle || []).push({}); [removed]