Как изменить значения цвета CSS в режиме реального времени с помощью слайдера JavaScript? - PullRequest
0 голосов
/ 22 декабря 2010

Я создаю страницу, на которой пользователь получает ползунок javascript размером от 0 до 100 и может использовать его для установки непрозрачности элемента div на странице.

Мне нужна прозрачность этого элемента divизменить в режиме реального времени, как они работают ползунок.Я не делал этого раньше.Какой наилучший подход?

Там курсор на ползунке отображает текущее значение ползунка при его перемещении.Похоже, мне просто нужно найти способ отобразить это значение в любом другом произвольном месте на странице, чтобы я мог отобразить его в настройках стиля для div.

.js-файл, который генерируетползунок имеет строку, которая (я думаю) устанавливает текущее значение в курсоре:

$(this).children(".ui-slider-handle", context).html(parseInt(settings[index]['default']));

Чтобы это изменяющееся число отображалось в другом месте одновременно, мне просто нужно добавить где-нибудь divа затем добавить строку вроде этой?

$("#newDivId").children(".ui-slider-handle", context).html(parseInt(settings[index]['default']));

Кажется, что это даст мне число, отображаемое в div.Как тогда я получу это в форме, которую я мог бы вставить в настройки стиля для div?

Если бы это была переменная php, я сделал бы что-то вроде этого,

style="opacity:<?php print $value ?>;"

Чтобудет эквивалент .js?

1 Ответ

5 голосов
/ 22 декабря 2010

В документации по пользовательскому интерфейсу jQuery есть пример средства выбора цвета с виджетом слайдера .Вы должны быть в состоянии уловить это и адаптировать его для непрозрачности.

Вот рабочий пример, который я собрал, используя пример палитры цветов в качестве основы: http://jsfiddle.net/6VgzT/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...