Хабр Курсы для всех
РЕКЛАМА
Большая витрина: от крупнейших школ до частных авторов. Сравнивайте по цене, длительности, формату и выбирайте самый подходящий курс!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 38
Хорошая задумка и реализация, осталось только внедрить в нормальный проект такое, а то так и останутся скрипты в виде рабочей демки
ps. Opera 9.50.10048 проблем не замечено.
ps. Opera 9.50.10048 проблем не замечено.
вертикальность планируется?
В Safari 3.1 (Win) демка так же как в FF сработала, совсем кроссбраузерно)
Вы так пафасно каждый раз рассказываете о скрипте, размером в 17 килобайт… Мне как-то даже неловко что я всю эту канетель со скролбарами заварил :) Но вроде еще гневных выкриков «Опять тракбары на хабре!» не было :)
Покритиковать хотелось бы версию для jQuery. Для чего она нужна? Она экономит ровно килобайт. Притом что понятно, что работает она как минимум не быстрее. Нужно или довести ее до ума, используя jQuery по максимуму, либо вообще её бросить.
Покритиковать хотелось бы версию для jQuery. Для чего она нужна? Она экономит ровно килобайт. Притом что понятно, что работает она как минимум не быстрее. Нужно или довести ее до ума, используя jQuery по максимуму, либо вообще её бросить.
Вы так пафасно каждый раз рассказываете о скрипте, размером в 17 килобайт
Какого раземра должен быть скрипт, чтобы о нем рассказывать пафосно? :-)
Покритиковать хотелось бы версию для jQuery. Для чего она нужна?
Вероятно, она нужна людям, проекты которых уже используют этот фреймворк и удобнее им ставить плагины. Если ставить трекбар на "чистый" проект, смысла в jQuey-версии нет. Я лишь страраюсь по мере сил внедрять в неё новые фичи. Надеюсь найдудся добровольцы и помогут допилить.
Версия с jQuery нужна тем, кто уже работает с jQuery для того, чтобы использовать привычный способ инициализации компонента, в данном случае - трэкбара. Вместно вставки в html код кусков javascript, которые делают document.write всякий раз когда нужен трекбар, можно в одном месте собрать объявления многих трекбаров одним-двумя вызовами, если надо.
По поводу скорости - оно работает с той же скоростью, что и изначальный скрипт, поскольку изменения коснулись лишь части инициализации.
Использовать jQuery по-максимуму был соблазн, однако именно из-за опасения получить тормоза, связанные с библиотекой и трудности в дальнейшей разработке от этого пути пришлось отказаться.
По поводу скорости - оно работает с той же скоростью, что и изначальный скрипт, поскольку изменения коснулись лишь части инициализации.
Использовать jQuery по-максимуму был соблазн, однако именно из-за опасения получить тормоза, связанные с библиотекой и трудности в дальнейшей разработке от этого пути пришлось отказаться.
ПРимеры вызовов jQuery:
$('div.trackbar').trackbar(); // создаст трэкбар в каждом диве класса trackbar
$('#tb').trackbar(); // создаст трэкбар в элементе с id = tb
$('div.trackbar').trackbar(); // создаст трэкбар в каждом диве класса trackbar
$('#tb').trackbar(); // создаст трэкбар в элементе с id = tb
Большое спасибо. Очень пригодится ваша разработка в ближайшую неделю, жаль зимой не знал про нее
контрол работает
притензии больше по юзабилити - трекбары сами по себе неудобная штука - вначале надо попасть в handle, затем таскать его _смотря в какое то другое место на изменение_ (как в случае с демкой выбора цвета).
Было бы здорово если бы ваш контрол принимал фокус , ну или хотя бы скролился под действием колеса мыши и курсорных стрелок.
притензии больше по юзабилити - трекбары сами по себе неудобная штука - вначале надо попасть в handle, затем таскать его _смотря в какое то другое место на изменение_ (как в случае с демкой выбора цвета).
Было бы здорово если бы ваш контрол принимал фокус , ну или хотя бы скролился под действием колеса мыши и курсорных стрелок.
Я уже два раза про это писал. Может, добавят когда-нибудь. :)
Уже есть в TODO :-)
а еще есть очень класный контрол для числовых полей с двумя стрелочками с права, не помню как называется, кажется КомбоБокс .. так вот, реализация этого поля в 3DS MAX была очень приятной - можно было нажать на любую стрелочку и таскать мышь по вертикали, пропорционально изменялось значение
Пусть вы будите смеяться, но всё же - где их можно использовать? для чего они? я говорю о практическом применении.
http://autorambler.ru/ad/
Ими удобно заменять портянки селектов и пары текст-инпутов для интервала в поисковых формах.
Ими удобно заменять портянки селектов и пары текст-инпутов для интервала в поисковых формах.
Во первых медленно как-то тянется, во вторых чем вас не устраивает jquery UI slider?
Например я его использую с такой же функцией плюс есть поддержка клавиш и TAB ..
http://kurapov.name/quarti
Например я его использую с такой же функцией плюс есть поддержка клавиш и TAB ..
http://kurapov.name/quarti
http://kurapov.name/quarti - да они же страшные и безбожно тормозят.
заметил следующий момент, который может повысить чуть-чуть юзабилити ))))
в трекбаре "Choose the letter" я правый бегунок увел в самый левый край, прямо к левому бегунку и в итоге получил диапазон букв "А-А". Так вот, когда я опять хочу схватить правый бегунок и утащить его вправо я пару раз попал на левый бегунок и логично, что бегунок не двигался... было б на много удобнее, чтоб в случае когда бегунки находятся рядом (толи в крайнем левом положении, толи в крайнеправом или где-то посередине), то не важно за какой бегунок я возьмусь, а будет определятся в каком направлении я тяну и если я тяну влево, а взялся за правый бегунок, но автоматом будет переходить на левый бегунок и уже левый бегунок будет перетаскиватся.... вроде мелочь, но будет приятно... когда 2 бегунка рядом друг с друом вообще выглядят как один цельный и автоматом нажимаешь на него в центре, а не с краю, и поэтому есть шанс зацепить и тот бегунок...
в трекбаре "Choose the letter" я правый бегунок увел в самый левый край, прямо к левому бегунку и в итоге получил диапазон букв "А-А". Так вот, когда я опять хочу схватить правый бегунок и утащить его вправо я пару раз попал на левый бегунок и логично, что бегунок не двигался... было б на много удобнее, чтоб в случае когда бегунки находятся рядом (толи в крайнем левом положении, толи в крайнеправом или где-то посередине), то не важно за какой бегунок я возьмусь, а будет определятся в каком направлении я тяну и если я тяну влево, а взялся за правый бегунок, но автоматом будет переходить на левый бегунок и уже левый бегунок будет перетаскиватся.... вроде мелочь, но будет приятно... когда 2 бегунка рядом друг с друом вообще выглядят как один цельный и автоматом нажимаешь на него в центре, а не с краю, и поэтому есть шанс зацепить и тот бегунок...
Не хватает функций, которые сделал Mongi (
Не знаю или Вам писали, т.к. сесть сейчас и перечитать комменты в стольких уже топиках на тему трекбара не смогу. Так вот, использовал трекбар, но нужны были дробные значения! Важны были именно для отображения, т.к. специфика сервиса предполагала выбор метража с точностью до 0.1 метра.
Пришлось добавить (не помню точно) две булевые переменные, одна отвечает за включение режима дробных (чтобы при показе состояния бегунка показывать именно округленное дробное число), а вторая для точности округления: к 1 или к 2 знакам после запятой.
roundFloat : true, // unit of value
Вот "ключевой кусочек кода", округление:
function setLength(length) {
document.cbm.l.value = round_float(length,1);
}
function round_float(num, decimals) {
return (Math.round((num/10) * Math.pow(10,decimals)) / Math.pow(10,decimals));
}
Вот его вызов где-то в Вашем коде:
...
onMove : function() {
setLength(this.leftValue);
},
...
и вот еще из функции "init"
this.leftBlock.firstChild.nextSibling.innerHTML = (!this.roundFloat) ? this.leftLimit : (this.leftLimit/10);
this.rightBlock.firstChild.nextSibling.innerHTML = (!this.roundFloat) ? this.rightLimit : (this.rightLimit/10);
Ну и инициализировать конечно нужно целыми числами = начальное_дробное умноженное на 10.
Может вы добавите стандартно такую возможность:
показывать и "передавать" дробные значения?
Пришлось добавить (не помню точно) две булевые переменные, одна отвечает за включение режима дробных (чтобы при показе состояния бегунка показывать именно округленное дробное число), а вторая для точности округления: к 1 или к 2 знакам после запятой.
roundFloat : true, // unit of value
Вот "ключевой кусочек кода", округление:
function setLength(length) {
document.cbm.l.value = round_float(length,1);
}
function round_float(num, decimals) {
return (Math.round((num/10) * Math.pow(10,decimals)) / Math.pow(10,decimals));
}
Вот его вызов где-то в Вашем коде:
...
onMove : function() {
setLength(this.leftValue);
},
...
и вот еще из функции "init"
this.leftBlock.firstChild.nextSibling.innerHTML = (!this.roundFloat) ? this.leftLimit : (this.leftLimit/10);
this.rightBlock.firstChild.nextSibling.innerHTML = (!this.roundFloat) ? this.rightLimit : (this.rightLimit/10);
Ну и инициализировать конечно нужно целыми числами = начальное_дробное умноженное на 10.
Может вы добавите стандартно такую возможность:
показывать и "передавать" дробные значения?
И еще, уже по поводу Вашей репилики: "люди оставшиеся доживать ХХ век..." — сам сколько могу стараюсь поддерживать у пользователей своего ресурса здоровый дух пользования актуальными версиями браузеров, но... часто бизнес (не студенты из дому), а именно бизнес пользователи совсем далеки от "обновлю ка я браузер, вчера новая бетка вышла" — это реальность... :(
Это совсем не побуждение к дописанию кода в трекбар чтобы заработал ИЕ4 :)
А просто комментраий из текущего положения дел на рынке сервисов для "промышленной бизнес аудитории" (Украины).
Это совсем не побуждение к дописанию кода в трекбар чтобы заработал ИЕ4 :)
А просто комментраий из текущего положения дел на рынке сервисов для "промышленной бизнес аудитории" (Украины).
*реплики, сори.
Вы знаете, люди сидящие под упоминаемыми мной браузерами, как и те кто сидит под IE4, видят Интернет совсем по-другому :-)
Наверное, они должны привыкнуть, что у них всё время что-то не работает и не так отображается. Всегда есть некий список актуальных браузеров. Но дальше 3-5 лет назад смотреть, имхо, не стоит.
Наверное, они должны привыкнуть, что у них всё время что-то не работает и не так отображается. Всегда есть некий список актуальных браузеров. Но дальше 3-5 лет назад смотреть, имхо, не стоит.
Извините, а как получить собственно значение выставленное движком, если я хочу его, например, отправить в запросе через форму?
Смотрите здесь последний пример, метод onMove.
А есть ли прилипание ползунка к отметкам? Если нет то будет ли когда-нибудь? :) очень полезная штука
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
FC-TrackBar 0.4.1 — новое начало