webew
Войти » Регистрация
 
JavaScript

JS-TrackBar, четвертая версия бегунков

20 мая 2008, 0:54

Не так давно на нашем портале был опубликован сей труд: «Trackbar на вашей странице», в котором описывается простой скрипт для создания таких вот ползунков:

TrackBar

Благодаря откликам пользователей возможности первой версии скрипта были существенно расширены. Она выросла до v3.0, с одновременным обновлением статьи, описывающей новый функционал. Однако, некоторые изменения откладывались "на потом", т.к. требовали более серьезного вмешательства в код. И вот долгожданное "потом" настало и вышла четвертая версия JS-TrackBar.

Архив TrackBar v4.0 - 31Kb.

О новом

Основной демонстрационный файл не порадует вас ничем новым, т.к. все новые возможности вынесены в специальную демку.

Посмотрим, что реализовано в новой версии.

Совместимость с предыдущей версией

Хоть и мелочь, но основная демка содержит тот же js-код, что и предыдущая третья версия. Это значит, что если на вашей странице есть трекбары, работающие на более ранних версиях скрипта, можете преспокойно скачать и поставить четвертую, ничего не изменится.

Обновленная инициализация

В предыдущих версиях скрипт инициализации необходимо было размещать в нужном участке HTML-кода и принимал он всего один аргумент:

trackbar.getObject('one').init({
    /* Параметры инициализации и функция обратного вызова */
});

Такой способ зачастую неудобен, т.к. требует изменения шаблонов проекта. Чтобы исправить этот недостаток, в четвертой версии расширены возможности метода .init() и теперь он может принимать в качестве второго аргумента идентификатор HTML-элемента:

trackbar.getObject('one').init(
        {
            /* Параметры инициализации и функция обратного вызова */
        },
        "elementId"
    );

Соот-но теперь код инициализации можно вызывать где угодно, например, в js-файле, не изменяя HTML-код.

Синхронизация трекбаров

Это сразу бросается в глаза на специальной демке. Теперь трекбары можно связать между собой прямо в функции обратного вызова onMove, с помощью двух новых методов:

  • updateLeftValue — принимает в качестве аргумента значение для левого бегунка, которые мы хотели бы установить, и изменяет состояние трекбара в соот-ии с ним.
  • updateRightValue — аналогичен предыдущему, но для правого бегунка.

Рассмотрим, для примера код инициализации первого бегунка в спец-демке:

trackbar.getObject('one').init(
        {
            onMove : function() {
                trackbar.getObject('two').updateLeftValue(this.leftValue);
            },
            dual : false, // two intervals
            width : 300, // px
        //  leftLimit : 0, // unit of value
            leftValue : 0, // unit of value
            rightLimit : 255, // unit of value
            rightValue : 0, // unit of value
            hehe : ":-)"
        },
        "oneId"
    );

В этом коде создается трекбар с идентификатором 'one', а в функции onMove содержится фрагмент кода, означающий: "для трекбара с id='two', установить значение левого бегунка такое, как и у меня, текущего трекбара". Для симметрии аналогичной связывание реализовано во втором трекбаре:

trackbar.getObject('two').init(
        {
            onMove : function() {
                trackbar.getObject('one').updateLeftValue(this.leftValue);
            },
            dual : false, // two intervals
            width : 300, // px
        //  leftLimit : 0, // unit of value
            leftValue : 0, // unit of value
            rightLimit : 255, // unit of value
            rightValue : 0, // unit of value
            hehe : ":-)"
        },
        "twoId"
    );

Рассмотренный пример описывает простой вариант связи, который может быть любым, на ваше усмотрение. Например таким, как показано в двух других связных трекбарах на новой демке. Можно применять произвольные формулы движения в callback-функции, делая зависимость нелинейной или более чем между 2-мя трекбарами. Всё будет зависеть от потребностей вашего проекта и фантазии проектировщика интерфейсов ;-)

О планах

Развитие проекта JS-TrackBar, вероятнее всего на этом не остановится. В новой версии планируется:
  • появление вертикально-ориентированных ползунков;
  • подробная документация на rus и eng;
  • фичи, о которых вы напишите в комментах;

О jQuery

Архив по-прежнему включает версию скрипта, совместимую с библиотекой jQuery. Однако, в ней обратной совместимости добиться не получилось, так что будьте внимательный при её использовании. Т.к. автор скрипта не использовал в своей практике jQuery и изменения вносил в эту версию скрипта "как придется", помощь в доведении её до ума приветствуется!


© Все права на данную статью принадлежат порталу webew.ru. Перепечатка в интернет-изданиях разрешается только с указанием автора и прямой ссылки на оригинальную статью. Перепечатка в печатных изданиях допускается только с разрешения редакции.
Добавить комментарий
Отображение комментариев: Древовидное | Плоское
NO USERPIC

huze

Спасибо большое! Надеюсь, развитие скрипта не встанет - это очень хороший и полезный скрипт. =) Кстати, уже интегрировал его в один новый проектик. Позже напишу, когда запущу. =)
20.05.2008, 12:30
Ответить

bur

Велкам!
Ссылки на успешное применение в проектах очень приветствуются, т.к. это хороший показатель эффективности программулины. Да и дополнительный боевой тест не повредит.
20.05.2008, 12:50
Ответить
NO USERPIC

madcher

Я почти не знаю JS и это вызывает определенные проблемы. Есть необходимость создать много ползунков, которые были бы связаны с формами, значения в которых бы обрабатывались. В примере есть что-то подобное, где показаны буквы алфавита, это было взято за основу, но при попытке реализации я столкнулся с проблемой:

<form action="#">
<input type="text" id="firstChar" value="А" readonly="readonly" /> — <input type="text" id="secondChar" value="Я" readonly="readonly" />
</form>
function setWord(l, r) {
var rus = ['',
'А','Б','В','Г','Д','Е','Ё','Ж','З','И','Й','К','Л','М','Н','О','П',
'Р','С','Т','У','Ф','Х','Ц','Ч','Ш','Щ','Ъ','Ы','Ь','Э','Ю','Я'
];
document.getElementById("firstChar").value = rus[l];
document.getElementById("secondChar").value = rus[r];
}

trackbar.getObject('chars').init({
onMove : function() {
setWord(this.leftValue, this.rightValue);
},
Как видно трекбар передает значение через функцию в форму по ip, при попытке создать аналогичную конструкцию с заменой id формы не работает позлзунок замирает на месте изменение функции и переменных тоже ничего не дало. Можно поподробнее расписать про передачу значений в форму.
Заранее спасибо
20.05.2008, 21:06
Ответить

bur

> при попытке создать аналогичную конструкцию с заменой id формы не работает позлзунок...

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

Также дам некоторые пояснения, которые, надеюсь, вам помогут.
Сам трекбар, по своей сути, может работать только с интервалами чисел. Не символов или строк, а именно чисел. Это хорошо заметно при инициализации используемого примера:
leftLimit : 1, // unit of value
leftValue : 1, // unit of value
rightLimit : 33, // unit of value
rightValue : 33, // unit of value

Здесь имеет место связь символов русского алфавита с числами. А -> 1, Б -> 2, ..., Я -> 33. Через такое соответствие заданы граничные и начальные значения. А затем, в функции onMove, мы получаем текущие значение для ползунков в числовом виде, через свойства this.leftValue и this.rightValue, которые превращаем в символы с помощью массива rus.

Вот такой простой прием, позволяющий работать, при правильном планировании, почти с любыми типами данных.
20.05.2008, 22:33
Ответить
NO USERPIC

madcher

C числами я разобрался. Проблемы у меня при создании нескольких <input type="text"> с таскбарами а именно где-то в
trackbar.getObject('chars').init({
onMove : function() {
setWord(this.leftValue, this.rightValue);
},

не могли бы вы пояснить getObject('chars') что значит chars ?
20.05.2008, 22:44
Ответить

bur

Код трекбара написан таким образом, чтобы на странице была возможность создать множество ползунков. А как же их отличать друг от друга и обратиться к какому-то отдельному?
Для решения этой проблемы каждому трекбару присваивается свой строковый идентификатор, в данном случае 'chars':
trackbar.getObject('chars').init(
{}
);

Можно вместо 'chars' написать любую другую строку, главное, чтобы она была уникальна.
20.05.2008, 22:55
Ответить
NO USERPIC

madcher

Чтобы было понятнее, вот например в этом коде первый трекбар будет менять значение в форме с id="firstChar2" а не в той с которой он был связан изначально, а второй трекбар вообще не работает:

<form action="#">
<input type="text" id="firstChar" value="0" readonly="readonly" /> — <input type="text" id="secondChar" value="100" readonly="readonly" />
</form>
<br/>
<script type="text/javascript">
//<![CDATA[
// User function
function setWord(l) {
document.getElementById("firstChar").value = l;
}
trackbar.getObject('chars').init({
onMove : function() {
setWord(this.leftValue);
},
width : 200, // px
leftLimit : 1, // unit of value
leftValue : 1, // unit of value
rightLimit : 100, // unit of value
rightValue : 100, // unit of value

dual : false,
hehe : ":-)"
});// --></script>
<form action="#">
<input type="text" id="firstChar2" value="0" readonly="readonly" />
</form>
<br/>
<script type="text/javascript">
//<![CDATA[
// User function
function setWord2(l) {
document.getElementById("firstChar2").value = l;
}
trackbar.getObject('chars').init({
onMove : function() {
setWord2(this.leftValue);
},
width : 200, // px
leftLimit : 1, // unit of value
leftValue : 1, // unit of value
rightLimit : 100, // unit of value
rightValue : 100, // unit of value

dual : false,
hehe : ":-)"
});// --></script>
20.05.2008, 22:50
Ответить
NO USERPIC

madcher

Спасибо большое, проблема решилась
20.05.2008, 22:57
Ответить

bur

На всякий случай поясню, второму трекбару нужно присвоить другой идентификатор, например, такой:
trackbar.getObject('chars2').init({
20.05.2008, 23:00
Ответить
NO USERPIC

madcher

Есть пожелание, неплохо было бы добавить возможноть градации не только с целыми числами а например сделать возможность непрерывную шкалу от нуля до единицы и .т.д
20.05.2008, 23:53
Ответить

bur

К сожалению, текущая реализация трекбара не позволяет сделать красивое встроенное решение для Вашей задачи.
Однако, можно найти выход их этой ситуации, например задать шкалу от 1 до 100, не показывая текущие и граничные значения. А в ф-ии onMove ловить leftValue/rightValue, делить их на 100 и выводить в любой элемент страницы.
21.05.2008, 12:27
Ответить
NO USERPIC

portisheader

хороший компонент, но возникла проблема совместимости с jquery.thickbox (это такая штука для красивых попапов). когда открываешь thickbox, всё становится серым. кроме бегунков trackbar'a :)
а также они остаются поверх iframe'ов (thickbox iframed content). можно ли как-то решить эту проблему?
07.06.2008, 19:41
Ответить

bur

Конечно, смотрите в CSS. Для достижения желаемого эффекта можете поиграться z-index-ами, цветом фона и фоновой картинки.
07.06.2008, 19:45
Ответить
NO USERPIC

bobrof

У меня не срабатывает динамическое добавление бегунка:
function XUpdateDivPropSlider2(xdiv, n) //вызывается одной из функций при клике одной из ссылок страницы для появления динамически генерируемого div-a. Это тестово-упрощённая версия.
{
    eval("var xdiv = XFindDivProp(3); xdiv.innerHTML = trackbar.getObject('chars').init({onMove : function() {setWord(this.leftValue, this.rightValue);}, width: 500, leftLimit: 0, leftValue: 100, rightLimit: 900, rightValue: 200, clearLimits: true, clearValues: true, debugMode: true, nodeInit:true });");
}

Бегунок не отображается, а в FF страницу вообще сглючивает. Подскажите пожалуйста как с этим можно бороться.
26.06.2008, 13:54
Ответить

bur

Если вы хотите динамически добавить трекбар, то в качестве второго аргумента методу .init() необходимо передать идентификатор (id) элемента, куда нужно дописать бегунок. Такой код:
xdiv.innerHTML = trackbar.getObject('chars').init(

работать не будет, т.к. метод .init() не возвращает HTML-код.

Если нужно инициализировать после загрузки страницы, воспользуйтесь следующим примером:
function q() {
    trackbar.getObject('one').nodeInit = 1;
    trackbar.getObject('one').init(
        {
            onMove : function() {

            },
            // Список параметров
        },
        "nodeId"
    );
}
26.06.2008, 15:07
Ответить
NO USERPIC

bobrof

Спасибо за оперативный ответ. Сделал, добавилось. Однако же, проблемы на этом не исчерпались.
Их основных на данный момент две.
1. В браузере FF отмечается артефакт отрисовки бегунка, очевидно связанный с конфликтом моих страничных и ваших бегунковых стилей. Странно что артефакт присутствует несмотря даже на ваш "сброс" стилевых настроек в начале файла стилей бегунка. При тестовом отключении всех стилей страницы, артефакт исчезает. Скажите пожалуйста, по вашему опыту, какие именно стили/элементы стилей скорее всего конфликтуют?
2. Более неприятная ошибка состоит в том, что бегунок не движется при движении ползунков мышкой. При этом курсор мыши изменяется корректно (при наведении на ползунки становится "рукой"). Данное поведение отмечается во всех тестировавшихся браузерах - IE6, FF3, Opera9.5. Возможно, дело в z-индексах и бегунок "перекрывается" чем-то невидимым. Либо дело ещё в чём-то. Подскажите пожалуйста, как уточнить в чём конкретно проблема и, по возможности, как её исправить.
27.06.2008, 01:56
Ответить

bur

Затрудняюсь дать конкретный ответ на оба вопроса. Может поделитесь ссылкой на то, что у вас получилось к данному моменту?
27.06.2008, 12:36
Ответить
NO USERPIC

tantos

Добрый день, познания мои в js не велики, хотелось бы узнать как можно передать значение бегунка в <big id="cur_value"></big>;
такая конструкция не помогает :
onMove : function() {
document.getElementById("cur_value").innerHtml = this.leftValue;
},
не помогает, бегунок замирает на месте
31.07.2008, 13:51
Ответить

bur

JavaScript - это регистрозависимый язык. Правильно писать не innerHtml, а innerHTML. Ошибка в этом.
А вот рабочий пример аналогичный вашему.
31.07.2008, 16:57
Ответить
NO USERPIC

tantos

спасибо большое, еще вопрос, а почему оно не работает в случае когда место куда надо выводить значение находиться в коде после скрипта?
31.07.2008, 17:01
Ответить

bur

Существует 2 способа инициализации скрипта (об этом написано в статье).
Первый - прямой, там где стоит код появляется трекбар. Т.к. он сразу же инициализируется, то выполняется метод onMove. Т.к. ДИВ стоит ниже скрипта, записать полученное значение пока некуда и возникает ошибка.

Выхода 2:
- либо использовать второй способ инициализации (скрипт запускается по событию domready, когда все узлы уже в DOM-е)
- либо поставьте фрагмент с ошибкой в контейнер try-catch вот так:
onMove : function() {
    try {
        document.getElementById("cur_value").innerHTML = this.leftValue;
    } catch(e) {}
}
31.07.2008, 17:09
Ответить
NO USERPIC

tantos

пасиб, очень благодарен
31.07.2008, 17:20
Ответить
NO USERPIC

Paaaaa

Bur, kak mne cur_value v ssylku zapihatj? cur_value v <div id="cur_value"></div> vyvodit nomer... Kak mne etot nomer zapihatj v <a href="nomer.html">link</a>

Spasibo
08.09.2008, 22:17
Ответить

bur

Не понял ваш вопрос, разъясните.
08.09.2008, 23:08
Ответить
NO USERPIC

Paaaaa

Хорошо. Пытаюсь сделать сортировку товара по цене (промежуток, цена от 1000р до 3450р) с помощью слаидера... Для того чтоб реализовать это мне нужно выбранный в слаидере промежуток(цифры) запихать в ссылку. Ссылка дожна получитса в стиле> /shop/CID_2.html?priceOT=1000&priceDO=3450&priceSearch=1

Вопрос, как мне вставить выбранныe в слаидере цифирки в ссылку в нужное место.. div id тэг в ссылку не вставиш.. :(
Slider tut... http://x.topkliima.ee/slide/index.html
08.09.2008, 23:36
Ответить

bur

Провесьте на ссылку айдишник, например так:

<a id="linkId" href="#">Link</a>


А в методе onMove пишем:

onMove : function() {
    try {
         document.getElementById("linkId").href = "/shop/CID_2.html?priceOT="+this.leftValue+"&priceDO="+this.rightValue+"&priceSearch=1";
    } catch(e) {}
}
09.09.2008, 13:18
Ответить
NO USERPIC

Paaaaa

Большое спасибо. Заработало. Вечером сделаю клёвую сортировку на phpshop enterprise... :)
Primer> http://x.topkliima.ee/slide/index.html
09.09.2008, 14:31
Ответить

bur

Велкам!
09.09.2008, 19:56
Ответить
NO USERPIC

ghost

Баг )
Если использовать диапазон с отрицательными и положительными числами (типа -100...+100), и задать положение ползунка в 0, то он установится не в 0, а в -100.
Чтобы исправить это, я после строки
this.leftValue = hash.leftValue || this.leftLimit;

вставил
if (hash.leftValue == 0) this.leftValue = 0;

Но теперь значение ползунка стоит не над ним, а немного левее. Хотя после любого перетаскивания мышью встаёт на место. И как это исправить, в коде искать уже сложновато)
02.10.2008, 12:56
Ответить

bur

Спасибо за репорт - проверю.
02.10.2008, 13:00
Ответить
NO USERPIC

prostovova

Возможно установить ширину трекбара в %?

и сразу второй вопрос:) возожно прикрутить к этому логарифмическую шкалу?

(я не программист)
16.10.2008, 04:56
Ответить

bur

Пока ни то ни другое - нет.
16.10.2008, 11:55
Ответить
NO USERPIC

MadDog

Доброго вам здравия :)
Очень замечательный скрипт. Но есть маленький нюанс.
Почему то IE6 ругается на следующий кусок:
ERRORS : {
1 : "Ошибка при инициализации объекта",
2 : "Левый бегунок не найден",
3 : "Правый бегунок не найден",
4 : "Левая область ресайза не найдена",
5 : "Правая область ресайза не найдена",
6 : "Не задана ширина области бегунка",
7 : "Не указано максимальное изменяемое значение",
8 : "Не указана функция-обработчик значений",
9 : "Не указана область клика"
},

дескать незавершенная строковая константа и отказывается работать :(
Убираю этот кусок и там где эти ERRORS упоминаются - все работает.
26.12.2008, 08:59
Ответить

bur

Велкам!

Странно что в ИЕ6 такая ошибка, синтаксически блок написан верно. Да и тестирование в ИЕ6 проводилось самое тщательное.

Это не может быть конфликтом кодировки вашей страницы с кодировкой этого блока? Кириллица всё-таки.

Вообще-то ERRORS работает как часть дебаггера, так что если у вас скрипт успешно завелся - можно его и удалить.
26.12.2008, 12:07
Ответить
NO USERPIC

MadDog

хм. кодировка? возможно. сайт на утф-8 писан. Ну я убрал в общем эту часть и все :)
26.12.2008, 12:49
Ответить
NO USERPIC

GAmoVeR

В первую очередь - спасибо вам за качественный продукт :)

Использую trackbar совместно с jquery ajax
Хочется организовать такую логику - при любом изменении ползунка, вызывается обработчик который обновляет содержимое страницы.

Можно ли каким то образом отловить событие "окончание изменения значений"?

30.01.2009, 15:05
Ответить

bur

Велкам!
Сам проект живет и развивается на 2007.fastcoder.ru/projects/.
Обработчик onMoveEnd пока не реализован, но он есть в списке на разработку.
Из быстрофикса могу предложить поставить таймер, и если нет обновления скажем 300ms, тогда отправлять ajax-запрос...
30.01.2009, 15:21
Ответить
NO USERPIC

avenger

Да, на самом деле скрипт не работает (вообще не отображается на странице) в кодировке utf-8 в IE6. Но после удаления нижеприведенного кода все работает. странно
ERRORS : {
1 : "Ошибка при инициализации объекта",
2 : "Левый бегунок не найден",
3 : "Правый бегунок не найден",
4 : "Левая область ресайза не найдена",
5 : "Правая область ресайза не найдена",
6 : "Не задана ширина области бегунка",
7 : "Не указано максимальное изменяемое значение",
8 : "Не указана функция-обработчик значений",
9 : "Не указана область клика"
},
16.02.2009, 00:49
Ответить
NO USERPIC

capjack

Доброго дня.
Есть проблема с данным контролом - dateObj.SetPosition is not a function
dateObj.SetPosition(); - искал данную функцию - не нашел
Код на свою страницу код вставлял прямо из ваших примеров - совсем не так отображается как на странице с примерами
Подскажите плиз, что я неправильно делаю?
03.04.2009, 13:37
Ответить

bur

dateObj.SetPosition() ?
Это вообще про что и какое отношение имеет к трекбарам?
03.04.2009, 16:45
Ответить
NO USERPIC

capjack

Это из кода функции SetScale:
function SetScale(obj)
{
RecalculateScale(obj);

if (typeof(dateObj) != "undefined")
{
dateObj.leftLimit = leftScaleLimit;
dateObj.rightLimit = rightScaleLimit;
dateObj.roundUp = scaleArray[scaleValue-1] ;
dateObj.tickRoundUp = scaleArray[scaleValue-1] ;
dateObj.SetPosition();
dateObj.ResetLimits();
dateObj.SetRuler();
}
}

на три последних вызова функций:
dateObj.SetPosition();
dateObj.ResetLimits();
dateObj.SetRuler();

функции не определены - is not a function
искал данные функции в исходниках - не нашел

Вообще-то мне нужно сделать шкалу внизу трек-бара - может просто ее руками написать?
06.04.2009, 11:36
Ответить

bur

Скажите, откуда вы взяли код ф-ии SetScale? Я на него смотрю и не могу припомнить, чтобы такое где-то писал... Возможно это чья-то доделка?
Вот последняя версия проекта с описанием АПИ и демкой. Если вам нужна шкала, смотрите в методы showBigTicks, bigTicks, smallTicks, showSmallTicks.
07.04.2009, 17:02
Ответить

kolyuchii

Скрипт действительно замечательный.
Возможно ли останавливать сближение бегунков, когда расстояние между ними достигает определённого значения?
Фрилансер до мозга костей
15.04.2009, 13:20
Ответить

bur

Вы вездесущи! Думаю можно. Постараюсь сегодня вам написать сюда как это сделать. По хабрапочте дублировать не буду :-)
15.04.2009, 13:22
Ответить

kolyuchii

Понимаете, скрипт настолько хорош, что мне не терпится прикрутить его на свой проект. Извиняюсь за назойливость.
Фрилансер до мозга костей
15.04.2009, 13:25
Ответить

bur

А ларчик просто открывался...
Для реализации вашей задумки хватило имеющегося API + чуть-чуть изобретательности:

// Вспомогательные переменные, для определения изменяемой стороны
trackbar.getObject('one').oldLeftValue = 0;
trackbar.getObject('one').oldRightValue = 0;
// Длина интервала, ближе которого сближение запрещено
trackbar.getObject('one').fixInterval = 10;
// Инициализатор
trackbar.getObject('one').init({
    leftLimit : 1, // unit of value
    leftValue : 10, // unit of value
    rightLimit : 100, // unit of value
    rightValue : 90, // unit of value
    // В методе onMove спрятан движок для поддержки фиксированного интервала
    onMove : function() {
        if ( this.fixInterval > this.rightLimit - this.leftLimit )
            return;
        if ( this.leftValue != this.oldLeftValue ) {
            if ( this.leftValue + this.fixInterval > this.rightValue )
                this.updateLeftValue( this.rightValue - this.fixInterval );
        } else if( this.rightValue != this.oldRightValue ) {
            if ( this.rightValue - this.fixInterval < this.leftValue )
                this.updateRightValue( this.leftValue + this.fixInterval );
        }
        this.oldLeftValue = this.leftValue;
        this.oldRightValue = this.rightValue;
    }
});

Ссылка на пример.
15.04.2009, 18:13
Ответить

kolyuchii

Я в экстазе!!! Огромное спасибо!
Фрилансер до мозга костей
15.04.2009, 18:31
Ответить

kolyuchii

У меня новая идея. А что если при выборе шага бегунка он бы двигался не плавно, а дискретно?
Фрилансер до мозга костей
16.04.2009, 11:06
Ответить

bur

Знакомьтесь с API (св-во roundUp). Движение всё равно будет плавным, но значения вернутся дискретные.
16.04.2009, 11:13
Ответить

kolyuchii

Перед тем как постить тут я внимательно ознакомился с этой информацией. А какой блок отвечает за непосредственное перемещение бегунков?
Фрилансер до мозга костей
16.04.2009, 11:23
Ответить

bur

kolyuchii
А какой блок отвечает за непосредственное перемещение бегунков?

Не понял.
16.04.2009, 11:25
Ответить

kolyuchii

Извиняюсь за сумбур. Я ещё в эйфории от скрипта.
какая функция (или функции) в коде скрипта передаёт значения положения бегунков? Мои скудные знания js подсказывают, что это может быть setCurrentState
Фрилансер до мозга костей
16.04.2009, 11:31
Ответить

bur

Верно, за выставление пиксельной позиции бегунков отвечает метод setCurrentState().
16.04.2009, 11:35
Ответить

kolyuchii

Доставать так уж по полной.

http://narod.ru/disk/7763168000/%D0%B2%D1%80%D0%B5%D0%BC%D1%8F%20%D0%BF%D0%BE%D0%BA%D0%B0%D0%B7%D0%B0%203.0.7z.html

Это то, что у меня получилось в результате долгих манипуляций и применения метода тыка. Осталась всего одна проблема, которая видна при работе moveIntervalHandler. Подвигайте медленно зелёную полоску.
Фрилансер до мозга костей
16.04.2009, 16:20
Ответить

kolyuchii

Если не сильно затруднит, помогите исправить этот баг.
Фрилансер до мозга костей
17.04.2009, 11:48
Ответить

bur

Забавная гусеница :-)
Да, сейчас посмотрю что можно придумать...
17.04.2009, 11:54
Ответить

kolyuchii

:-)
Фрилансер до мозга костей
17.04.2009, 12:00
Ответить

adw0rd

Привет, есть возможность добавить текст к числам с бегунка?

Например так:


Или переписывать сорцы?

ps. юзаю jquery.trackbar
adw0rd.ru
06.08.2009, 13:28
Ответить

bur

В API это не заложено, нужно будет изменить движок.
06.08.2009, 15:08
Ответить

adw0rd

Ясно, спасибо!
adw0rd.ru
06.08.2009, 15:13
Ответить

adw0rd

А есть ли возможность указывать максимальное расхождение двух бегунков друг от друга?
adw0rd.ru
01.09.2009, 12:52
Ответить

bur

Всё API подробно описано здесь.
Нужного вам параметра там нет, но, мне кажется, это можно обойти используя правильный обработчик в onMove.
01.09.2009, 15:20
Ответить

adw0rd

Спасибо
adw0rd.ru
01.09.2009, 15:56
Ответить
NO USERPIC

m00

Привет, у меня такой вопрос ... возможно сделать так, что если есть например 4 засечки, то бегунок только по ним может бегать? Такая вещь предусмотрена?
27.09.2009, 12:59
Ответить

bur

Нет, возможен дискретный перебор значений, но само движение будет плавным.
28.09.2009, 11:14
Ответить

kolyuchii

И вот прошло уже более полугода как я работаю с вашим скриптом. За всё время - никаких нареканий. Скрипт работает на высоконагруженном проекте на различных платформах.
Ещё раз спасибо!
Фрилансер до мозга костей
20.11.2009, 16:45
Ответить
NO USERPIC

velam

Очень благодарен разработчикам!
Сегодня нашел и во всю уже ковыряюсь в возможностях!

Вопрос:
С такими настройками:
width : 200, // px
leftLimit : 70, // unit of value
leftValue : 70, // unit of value
rightLimit : 20000, // unit of value
rightValue : 20000, // unit of value
roundUp : 1000, // round value
showSmallTicks : true
Изначально ползунок в левой позиции, значение=70
Если его сдвинуть и вернуть влево, то значение будет 0.
Понятно, что тут играет roundUp, округляющий до 0.
Но правильно ли это с точки зрения логики приложения? наверное нет?
19.12.2009, 16:35
Ответить

bur

Это можно обойти с помощью методов onMove/updateLeftValue/updateRightValue. Код:
trackbar.getObject('one').init({
    onMove : function() {
        if ( this.leftValue == 0 )
            this.updateLeftValue(70);
        if ( this.rightValue == 0 )
            this.updateRightValue(70);
    },
    width : 200, // px
    leftLimit : 70, // unit of value
    leftValue : 70, // unit of value
    rightLimit : 20000, // unit of value
    rightValue : 20000, // unit of value
    roundUp : 1000, // round value
    showSmallTicks : true
});

Ссылка на пример.
21.12.2009, 15:01
Ответить
NO USERPIC

velam

bur,
спасибо за пример.
Думаю вы правы, что лучше дорабатывать напильником под свой конкретный случай, на всех не угодишь, все случаи не пересмотришь! ;-)

А что это за фича такая, не документированная?
...
hehe : ":-)"
....
21.12.2009, 22:44
Ответить

bur

:-)
Синтаксис объектов в реализации Internet Explorer требует, чтобы после последнего св-ва не было запятой. Пример:
{ a : 1, b : 2,  } // Получим ошибку в IE
{ a : 1, b : 2  } // Всё грамотно

Поэтому я добавляю в конце объектов св-во без запятой в качестве заглушки, так удобнее.
21.12.2009, 23:03
Ответить
NO USERPIC

velam

Точно, уже наступал на эти грабли.
Отличный ход, теперь hehe точно оставлю.

Предлагаю вместо
showBigTicks : true,
Сделать параметр
showBigTits : true,
=))))))
22.12.2009, 23:04
Ответить
NO USERPIC

ibm86


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

<div>width: 200, leftValue: 0, rightLimit: 32, rightValue: 32, clearLimits: true</div>
<br/>
<script type="text/javascript">
//<![CDATA[
// User function


trackbar.getObject('chars').init({
onMove : function() {
setWord(this.leftValue, this.rightValue);
},
width : 200, // px
leftLimit : 1, // unit of value
leftValue : 1, // unit of value
rightLimit : 33, // unit of value
rightValue : 33, // unit of value
clearLimits : true,
clearValues : true,
hehe : ":-)"
});
function setWord(l, r) {
var rus = ['',
'@','A','B','C','D','E','(','F','G','H','I','J','K','L','M','N','O',
'P','Q','R','S','T','U','V','W','X','Y','Z','[','\',']','^','_'
];
document.getElementById("firstChar").value = rus[l];
document.getElementById("secondChar").value = rus[r];
}

// -->
</script>
<form action="#">
<input type="text" id="firstChar" value="@" readonly="readonly" /> — <input type="text" id="secondChar" value="_" readonly="readonly" />
</form>


20.12.2009, 18:37
Ответить

bur

В скрипте есть возможность сделать отложенную инициализацию по domready. Для вашего кода собрал пример.
21.12.2009, 15:27
Ответить
NO USERPIC

ibm86

Ага, понял. Спасибо!
21.12.2009, 15:49
Ответить
NO USERPIC

slad

Скажите плиз, а есть возможность сделать передвижение по массиву чисел??
Допустим есть массив 2,6,15...
так вот первый шаг 2-6, след 6-15...

????
09.02.2010, 20:16
Ответить

bur

Если движение ползунка должно быть дискретным по значением массива - не выйдет. Если движение может оставаться плавным - получится.
11.02.2010, 12:17
Ответить
NO USERPIC

svdenisenko

все супер! привязал скрипт к магазину, на большее меня не хватает, если сможете помогите советом.
задача заключается в том чтобы при перетягивании и отпускании ползунка сразу же был переход по ссылке
вот пример ссылки advanced_search_result.php?keywords=&categories_id=&inc_subcat=1&pfrom=0&pto=100000&x=48&y=6
21.03.2010, 22:18
Ответить
NO USERPIC

svdenisenko

вот мой код. вот только я его повзаимствовал у конкурентов а не у вас, поэтому скорее всего он чем то отличается
$(document).ready(function(){

$('#qwe').trackbar({
onMove : function() {
try {
document.getElementById("linkId").href = "advanced_search_result.php?keywords=&categories_id=&inc_subcat=1&pfrom="+this.leftValue+"&pto="+this.rightValue+"&x=56&y=12;
} catch(e) {}
},



width: 220, // px
leftLimit: 0, // unit of value
leftValue: 0, // unit of value
rightLimit: 100000, // unit of value
rightValue: 100000, // unit of value
hehe: ":-)"
});
});
function setValue(l, r)
{
document.getElementById("pfrom").value = l;
document.getElementById("pto").value = r;
}
function setValue2()
{
__doPostBack('ctl00$ContentPlaceHolder1$ListProducts1','@PriceRange')
}
21.03.2010, 22:23
Ответить

bur

Вместо

document.getElementById("linkId").href = "advanced_search_result.php?keywords=&categories_id=&inc_subcat=1&pfrom="+this.leftValue+"&pto="+this.rightValue+"&x=56&y=12;


выполните:

location.href = "advanced_search_result.php?keywords=&categories_id=&inc_subcat=1&pfrom="+this.leftValue+"&pto="+this.rightValue+"&x=56&y=12;
24.03.2010, 15:51
Ответить
NO USERPIC

WebCas

добрый день! Очень понравился данный скрип.
Использую его во всю.
Есть один вопрос, который не дает мне покоя))
я добавил в данный скрип парочку переменных
это idd b img
idd содержит в себе имя (id) скрытого инпута (текстбокса)..
img содержит в себе имя (id) рисунка, который нужно менять (ну типа слайдера, при движении которого, на картинке меняется изображение.. типа вопрос, "как сильно вам нравится данная продукция?" и ползунок двигаешь, картинка меняется с руки с большим пальцем вверх, на руку с пальцом вниз ;) )
idd и img я использую для передачи в свою отдельную функцию (которая собственно и делает нужные для меня вещи)

А теперь вопрос, почему когда передаешь данному скрипту в переменную строку, содержащую в середине имени ":" (двоеточие), то скрипт начинает ругаться, мол не может инициализировать левый бегунок ?..
из-за этого мне приходтся страдать ерундой, в смысле перед тем как передать эти данные, я пишу вот такую дуристику: "...Replace(":", "f_f");....." f_f - тут я с фонаря написал, можно заменить на что угодно..
все это передаю из данного скрипта в свою функцию и уже там перегоняю обратно: "...Replace("f_f", ":");....."
От двоеточия в своих переменных отказаться немогу, т.к. это необходимость при генерации моей системой определенной страницы..
Заранее спасибо
Cas
30.04.2010, 15:20
Ответить

bur

WebCas
почему когда передаешь данному скрипту в переменную строку

Приведите пример данного вызова.
04.05.2010, 12:38
Ответить
NO USERPIC

Lexxx_HU

Здравствуйте Огромное спасибо за скрипт.
У меня вот какой вопрос, на всех примерах используется 2 ползунка, можно ли как нибудь изменить их число, например до 5 ?
05.06.2010, 10:45
Ответить

bur

В данной версии нет, можно попробовать состыковать несколько ползунков между собой. А зачем такое необходимо?
09.06.2010, 11:41
Ответить
NO USERPIC

Lexxx_HU

стояла задача: есть допустим несколько диапазонов чисел 1-10, 10-20, 20-30, 30-40, 40-50, и на каждом диапазон задается цвет для числа, и чтоб эти диапазоны можно было изменять перетаскиванием
15.06.2010, 22:04
Ответить
NO USERPIC

insy

а можно ли изменить шаг...
на 0.1?
30.06.2010, 13:57
Ответить
NO USERPIC

dark_kz

Отличный трэкбар, спасибо!!!
darkspace.kz
14.10.2010, 15:25
Ответить
NO USERPIC

umbabaraumba

Здравствуйте. Подскажите пожалуста как сделать два бегунка с выбором определенных чисел? Один я кое как сделал, а второй не знаю как сделать. Вот то что у меня получилось.

<table>
<tr>
<td>
<form action="#">
<input type="text" id="firstChar" value="3" readonly="readonly" />
</form>
</td>
<td>
<script type="text/javascript">
function setWord(l, r) {
var rus = ['',
'300 000 ','600 000 ','1 000 000 ','10 000 000 '
];
document.getElementById("firstChar").value = rus[l];
}
trackbar.getObject('chars').init({
onMove : function() {
setWord(this.leftValue, this.rightValue);
},
dual : false, // two intervals
width : 200, // px
leftLimit : 1, // unit of value
leftValue : 1, // unit of value
rightLimit : 4, // unit of value
rightValue : 4, // unit of value
clearLimits : true,
clearValues : true,

});
</script>
</td>
</tr>
</table>
29.12.2011, 17:07
Ответить

1234ru

Цитата:
Один я кое как сделал, а второй не знаю как сделать.

Чем один отличается от второго?
Попробуйте сделать второй тем же методом, что сделали первый.
То, что не убивает нас, делает нас инвалидами.
30.12.2011, 04:05
Ответить
NO USERPIC

umbabaraumba

Пробовал. Если скопировать код и вставить ниже то ничего не работает.
30.12.2011, 11:59
Ответить

1234ru

<input type="text" id="firstChar" value="3" readonly="readonly" />
document.getElementById("firstChar").value = rus[l];

В этих местах нужно id элемента поменять (если у Вас два раза код с одним и тем же id - работать наверняка не будет)
То, что не убивает нас, делает нас инвалидами.
30.12.2011, 16:32
Ответить
NO USERPIC

umbabaraumba

Да менял уже. Все равно не работает
30.12.2011, 16:47
Ответить

1234ru

Попробуйте по одному - работают ли по отдельности.
То, что не убивает нас, делает нас инвалидами.
30.12.2011, 16:54
Ответить
NO USERPIC

umbabaraumba

Разобрался. Сделал вот так:

<form action="#">
<input type="text" id="firstChar" value="А" readonly="readonly" />
</form>
<br/>
<script type="text/javascript">
//<![CDATA[
// User function
function setWord(l, r) {
var rus = ['',
'300 000','600 000','1 000 000','10 000 000'
];
document.getElementById("firstChar").value = rus[l];
}


trackbar.getObject('chars').init({
onMove : function() {
setWord(this.leftValue, this.rightValue);
},
width : 200, // px
leftLimit : 1, // unit of value
leftValue : 1, // unit of value
rightLimit : 4, // unit of value
rightValue : 4, // unit of value
clearLimits : true,
clearValues : true,
dual : false,
hehe : ":-)"
});
// -->
</script>
<form action="#">
<input type="text" id="firstChar2" value="0" readonly="readonly" />
</form>
<br/>
<script type="text/javascript">
//<![CDATA[
// User function
function setWord2(l) {
var rus = ['',
'3','6','12'
];
document.getElementById("firstChar2").value = rus[l];
}
trackbar.getObject('chars2').init({
onMove : function() {
setWord2(this.leftValue, this.rightValue);
},
width : 200, // px
leftLimit : 1, // unit of value
leftValue : 1, // unit of value
rightLimit : 3, // unit of value
rightValue : 3, // unit of value
clearLimits : true,
clearValues : true,
dual : false,
hehe : ":-)"
});// --></script>
12.01.2012, 16:41
Ответить
NO USERPIC

dbfun

Добрый день. Я не очень разбираюсь в JS, и попытки сделать бегунки независимыми неудались. То есть сделать возможность перетащить левый бегунок правее правого, либо наоборот. Можете помочь?
24.02.2012, 03:30
Ответить

1234ru

Честно говоря, не уверен, что это предусмотрено библиотекой.
Разработчик перестал ее поддерживать, поэтому что поменять, чтобы стало работать - сказать трудно. Попробуйте покопаться в коде самостоятельно.
То, что не убивает нас, делает нас инвалидами.
24.02.2012, 17:09
Ответить
NO USERPIC

justwhite

Ребята, знаю что этот скрипт старый, но тем не менее аналогов нет, при использовании этого скрипта столкнулся с такой проблемой!

Значит в данный инпут <input id="val_1" type='text'> ввожу значения с бегунка
rr = '0';
function setValue(r) {
if (r != null) rr = r;
document.getElementById("val_1").value = rr;
}

trackbar.getObject('color_R').init({
onMove : function() {
setValue(this.leftValue);
},
dual : false, // two intervals
width : 410, // px
// leftLimit : 0, // unit of value
leftValue : 1500, // unit of value
rightLimit : 5000, // unit of value
rightValue : 0, // unit of value
});
Все работает нормально, т.е в инпут значения выводяться, но как сделать чтобы значения переменной
var rr передавались одновременно в другой инпут который находиться нижу <input id="result" type='text'>

пробовал уже по всякому, и пытался уже изменить функцию
function setValue(r) {
if (r != null) rr = r;
ress = rr;
document.getElementById("val_1").value = rr;
document.getElementById("result").value = ress;
} // Такой вариант просто тупо заставляет не работать бегунок!)

и с переменными пытался играть по всякому, может кто знает, подскажите очень прошу!
ребят за ранее благодарю!
03.03.2012, 02:05
Ответить
NO USERPIC

rgbeast

Странно, у меня Ваш вариант работает:
<body>
<input id="val_1" type='text'>
<input id="result" type='text'>
<script type="text/javascript">
//<![CDATA[
rr = '0';
function setValue(r) {
if (r != null) rr = r;
ress = rr;
document.getElementById("val_1").value = rr;
document.getElementById("result").value = ress;
}

trackbar.getObject('color_R').init({
onMove : function() {
setValue(this.leftValue);
},
dual : false, // two intervals
width : 410, // px
 leftLimit : 0, // unit of value
leftValue : 1500, // unit of value
rightLimit : 5000, // unit of value
rightValue : 0, // unit of value
});
// -->

</script>
</body>
04.03.2012, 02:39
Ответить
NO USERPIC

justwhite

Странно, вот я еще раз попробовал, все равно нет не работает, какой то баг странный!
04.03.2012, 03:14
Ответить
NO USERPIC

rgbeast

сделайте архив из ваших файлов и загрузите сюда
04.03.2012, 13:14
Ответить

1234ru

Попробуйте установить расширение firebug для Firefox и посмотрите, что пишется в консоль - если какие-то ошибки есть, они будут там видны.
То, что не убивает нас, делает нас инвалидами.
04.03.2012, 20:27
Ответить
NO USERPIC

nait87

Подскажите а можно ли интервал изменения бегунка задать в формате 0.01, и если да, то как?
03.04.2012, 11:31
Ответить

1234ru

Попробуйте такой интервал и написать.
Разработчик прекратил поддержку этой библиотеки, а без него что-то определенное сказать сложно.
Если не получится - придется вам лезть в код библиотеки.
То, что не убивает нас, делает нас инвалидами.
04.04.2012, 22:25
Ответить
NO USERPIC

dron

а что мучиться

http://jqueryui.com/demos/slider/#range


всё украдено до нас )))
03.06.2012, 13:44
Ответить
NO USERPIC

mikluha

onMove срабатывает тучу раз.
//<![CDATA[

trackbar.getObject('one').init(
{
onMove : function () {
alert (1);
},
dual : true, // two intervals
width : 300, // px
leftLimit : leftLimit, // unit of value
leftValue : leftLimit, // unit of value
rightLimit : rightLimit, // unit of value
rightValue : rightLimit, // unit of value
roundUp : 100,
hehe : ":-)"
},
"track1"
);

// -->

бесконечный alert (1);
29.04.2013, 16:53
Ответить

1234ru

Да, это частое событие, может генерироваться десятки раз в секунду.
То, что не убивает нас, делает нас инвалидами.
30.04.2013, 11:51
Ответить
NO USERPIC

mif54

Добрый день. Я столкнулась с тем, что в IE11 скрипт не совсем работает, при передвигании ползунка выдает значение NAN. может кто знает, как это обойти? В остальных все без проблем работает, в том числе в IE 8-10
25.03.2015, 12:19
Ответить

1234ru

Из здесь присутствующих в настоящий момент в этой библиотеке никто не разбирается (автор прекратил ее поддержку), так что мы можем дать вам лишь общие советы.

Попробуйте открыть консоль (F12) и посмотреть, какая там ошибка.
То, что не убивает нас, делает нас инвалидами.
25.03.2015, 16:19
Ответить
NO USERPIC

rus123

Для ИЕ нужно метод defPosition заменить на то что ниже:
defPosition : function(event) {
        var x = y = 0;
        var supportPageOffset = window.pageXOffset !== undefined;
        var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");

        var xT = supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft;
        var yT = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;
        if (document.attachEvent != null) {
            x = window.event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
            y = window.event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
        }
        if (!document.attachEvent && document.addEventListener) { // Gecko
            x = event.clientX + xT;
            y = event.clientY + yT;
        }
        return {x:x, y:y};
    }

Столнулся с этим трекбаром в готовом решении. Может кому пригодится.
16.11.2015, 20:03
Ответить
NO USERPIC

Vetheb

как исправить Trackbar что бы ползунок прибавлял по 10?? код который я нашел подключил но не получается. помогите
http://webew.ru/f/CfUjVS30.js
29.02.2016, 01:13
Ответить

1234ru

Что не получается? Какая ошибка в консоли (которая по F12)?
То, что не убивает нас, делает нас инвалидами.
29.02.2016, 19:19
Ответить
NO USERPIC

Vetheb

не то что бы не получается просто не прибавляет по 1 а как сделать так что бы двигая ползунок можно было от 1 до 10000?
01.03.2016, 13:25
Ответить

1234ru

Не могу вам ответить на этот вопрос - разбором кода библиотеки не занимался.
То, что не убивает нас, делает нас инвалидами.
01.03.2016, 21:34
Ответить
NO USERPIC

Terentevna2535

Здравствуйте, помогите пожалуйста!(
Вот код:
<script type="text/javascript">
$(document).ready(function() {
$('#blocktrackbar').trackbar({
onMove : function() {
document.getElementById("start-price").value = this.leftValue;
document.getElementById("end-price").value = this.rightValue;
},
width : 160,
leftLimit : 1000,
leftValue : 1000,
rightLimit : 50000,
rightValue : 30000,
roundUp : 1000
});
});

Ошибка говорит, что trackbar не является функцией. Почему понять не могу( Помогите пожалуйста(
Колокольникова
21.04.2016, 15:22
Ответить

1234ru

Судя по тому, что написал в статье автор, есть версия библиотеки с jQuery и есть без нее (причем основной является та, которая без).
У вас которая подключена?
То, что не убивает нас, делает нас инвалидами.
21.04.2016, 18:53
Ответить
NO USERPIC

Terentevna2535

у меня файлы скачены не с этого сайта. Тут я по какой-то причине не могу скачать...у меня в данный момент скачены файл imgtrackbar, trackbar.js и trackbar.css. У меня это качалось одним zip файлом. Так что получается библиотекой. Этот jQuery у меня подключен в index.php, и прописан на него код. отправленный выше. В консоли мне показывает ошибку в фрагменте кода "$('#blocktrackbar').trackbar({". Пишет что функции .trackbar({ не существует. Не знаю что делать. Подскажите пожалуйста. К кому из знакомых не обращалась не кто не работал с этой библиотекой и не могут мне подсказать в чём ошибка. Вся надежда на Вас(((
Колокольникова
24.04.2016, 14:32
Ответить

1234ru

У вас точно сама jQuery правильно подключена?
Попробуйте на этой же странице до того места, где возникает ошибка, выполнить код alert($('body').length) - должно выскакивать окно с единицей.
Если не выскакивает - значит у вас не подключена jQuery, проверьте путь к ее файлу, который вы указали.

Если выскакивает - будем разбираться дальше.
То, что не убивает нас, делает нас инвалидами.
26.04.2016, 09:28
Ответить
Добавить комментарий
Отображение комментариев: Древовидное | Плоское
© 2008—2017 webew.ru, связаться: x собака webew.ru
Сайт использует Flede и соответствует стандартам WAI-WCAG 1.0 на уровне A.
Rambler's Top100

Реклама: