prowebber.ru - Тут есть все для настоящих вебмастеров

Чтение RSS Мы в твиттере
«    Декабрь 2016    »
ПнВтСрЧтПтСбВс
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 

Всё для вебмастера » Web » Скрипты » Выбор оформления блока на сайте с помощью jQuery и CSS (by ПафНутиЙ)

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


Данный материал предоставлен сайтом ProWebber.ru исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.
У нас вы можете скачать бесплатно Выбор оформления блока на сайте с помощью jQuery и CSS (by ПафНутиЙ).


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


-1
Просмотры: 3405 VIP ProWebber | Комментарии (16)
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

#1ПафНутиЙ

  • 3 декабря 2010 21:36
  • Регистрация: 8.03.2010
  • ICQ: 817233
  • Комментариев: 400
Установить на свой сайт DLE 9. biggrin LooL

--------------------

0

#2kit

  • 3 декабря 2010 21:47
  • Регистрация: 29.01.2010
  • ICQ: --
  • Комментариев: 39
ПафНутиЙ,
а по тяжелее там ничего небыло у тебя)))
ты бы лучше порох добавил бы он хотя быстро горит
чем то что ты суда вставил
я ничего непонял
куда что поставить и как все реализовать
хотя с вышим обр сижу
сделай интсрукцию по удобнее пл

0

#3(Sa-N-iA)

  • 3 декабря 2010 21:59
  • Регистрация: 3.01.2010
  • ICQ: 395522300
  • Комментариев: 54
kit, посмотри код на демо сайте

--------------------

0

#4kit

  • 3 декабря 2010 22:14
  • Регистрация: 29.01.2010
  • ICQ: --
  • Комментариев: 39
(Sa-N-iA),
на демо видел
а как все это легко реализовать непонял

0

#5ПафНутиЙ

  • 3 декабря 2010 22:48
  • Регистрация: 8.03.2010
  • ICQ: 817233
  • Комментариев: 400
kit,
я же вроде русским языком написал...
вставляешь на сайт
<div id="customize" class="switchmenu">
.......
</div>

подключаешь скрипты, внутрь нужных дивов вставляешь
<div class="switchbutton"></div>

а вообще на демо пример - проще уже не куда.

--------------------

0

#6minych

  • 3 декабря 2010 23:13
  • Регистрация: 13.09.2010
  • ICQ: --
  • Комментариев: 17
В FireFox глючит - после переключения цвета меню не пропадает, а остается висеть. Траблы с кроссбраузерностью. Требует доработки. smile

0

#7kit

  • 3 декабря 2010 23:17
  • Регистрация: 29.01.2010
  • ICQ: --
  • Комментариев: 39
ПафНутиЙ,
куда ставлять можеш по точнее
я типа турист тут
а нежител вашем компе

0

#8ПафНутиЙ

  • 3 декабря 2010 23:47
  • Регистрация: 8.03.2010
  • ICQ: 817233
  • Комментариев: 400
kit,
15$

--------------------

0

#9ReD

  • 4 декабря 2010 02:01
  • Регистрация: 13.10.2009
  • ICQ: --
  • Комментариев: 29
  • Выкл.
В качестве примера - хорошо. Спасибо

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

Передвижные блоки, разные стили, смена цветов...Всё это мусор. Пользователь пришедший из поисковика чтоб скачать фильм, не будет сидеть и настраивать цвет блока или что-то в этом роде...

Не нужно пытаться угодить всем, это невозможно. Достаточно сделать сайт удобный для большинства пользователей.

0

#10Deftoner

  • 4 декабря 2010 03:45
  • Регистрация: 8.05.2010
  • ICQ: 7000874
  • Комментариев: 65
мода чтоли пошла, шлак выкладывать? ведь по идеи это нафиг никому не надо -__-

0

#11HbIXA

  • 4 декабря 2010 08:52
  • Регистрация: 9.01.2010
  • ICQ: 820995
  • Комментариев: 73
ПафНутиЙ, спасибо, ReD и Deftoner, если это например социалка и люди сидят там для своего удовольствия для общения, им будет приятно сделать всё так как им нравится.

0

#12ПафНутиЙ

  • 4 декабря 2010 10:16
  • Регистрация: 8.03.2010
  • ICQ: 817233
  • Комментариев: 400
ReD, Deftoner,
я только дал идею и метод, что с ним делать - решать вам smile можно и размер шрифта менять. а можно для себя "помечать" некоторые блоки на сайте, например блок с комментариями.
а вообще скрипт этот я делал под один из проектов. соответственно потребность в нём есть smile

Цитата: HbIXA
мода чтоли пошла, шлак выкладывать?

шлак это был бы, если бы был написан левой ногой....

--------------------

0

#13akaMisHka

  • 30 января 2011 13:00
  • Регистрация: 17.01.2010
  • ICQ: --
  • Комментариев: 20
Крутняк. Можна куда то приспособить)))

0

#14kir1381

  • 17 февраля 2011 04:39
  • Регистрация: 17.02.2011
  • ICQ: --
  • Комментариев: 9
а нафига он вообще нужен?

0

#15aureus

  • 26 февраля 2011 14:56
  • Регистрация: 11.04.2010
  • ICQ: --
  • Комментариев: 7
kir1381,
Нужен для динамического интерфейса сайта
вместо простого изменения цвета как показано в демке, можно изменять все значения css таблицы класса:
шрифт, размеры, фоновое изображение, положение, обводка границы блока, закругление углов, тень текста или самого блока,

можно изменить целую группу классов находящуюся внутри родительского блока

Проще говоря пользователь сможет выбрать то что ему понравиЦа боьлше

0

#16netdog

  • 3 апреля 2011 12:59
  • Регистрация: 3.04.2011
  • ICQ: --
  • Комментариев: 3
Прикольная штука!!!! спасибо!!!

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

спасибо!

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

Max-energy.top - Заработок на электросчетчиках;)

Skripters.info - все для вебмастера. Только эксклюзивный контент.

Создание шаблонов DLE, быстро и недорого! 3wave.com.ua

Бро лей на лучшую партнёрку

Почти бесплатный VDS хостинг!

Поддержи сайт
Скрипты, cms, шаблоны, статьи по раскрутке

Опросы

Как часто вы бываете на сайте?

Захожу 1-2 раза в день
1-2 часа в сутки
Более 2 часов
Почти целый день тут smile

Архив новостей
Ноябрь 2016 (7)
Октябрь 2016 (10)
Сентябрь 2016 (8)
Август 2016 (11)
Июль 2016 (14)
Июнь 2016 (17)

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

Искать людей

Ваши переписки