Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 97
Большое спасибо!
Красота! Плюсик вам!
А как черная надпись бегунка накрывает серую надпись границы — просто глаз не мог оторвать!
Щщастье было бы совсем полным, если надпись бегунка меняла положение плавно, а не перескакивала при пересечении им «экватора» (разумеется это совсем мелочь).
А как черная надпись бегунка накрывает серую надпись границы — просто глаз не мог оторвать!
Щщастье было бы совсем полным, если надпись бегунка меняла положение плавно, а не перескакивала при пересечении им «экватора» (разумеется это совсем мелочь).
Природная лень не позволит исправить этот мелкий недостаток :-)
Буду рад, если кто-то решит эту задачку, с удовольствием добавлю в дистрибутив...
Буду рад, если кто-то решит эту задачку, с удовольствием добавлю в дистрибутив...
Готово!
надо заменить ф-цию «setCurrentState» следующим кодом:
ЗЫ. К сожалению в моем зоопарке только ФФ и ИЕ, работоспособность в других браузерах не проверял.
ЗЗЫ. Константа «6» унаследована из цсс, что не совсем хорошо.
надо заменить ф-цию «setCurrentState» следующим кодом:
setCurrentState : function() {
this.leftBlock.style.width = this.leftWidth + "px";
this.leftBlock.firstChild.innerHTML = (!this.dual && this.leftWidth > this.width / 2) ? "" : this.leftValue;
if(!this.dual) {
var x = this.leftBlock.firstChild.offsetWidth;
this.leftBlock.firstChild.style.right = (6 * (1 - 2*(this.leftWidth-6)/this.width) - ((this.leftWidth-6) * x / this.width)) + 'px';
}
this.rightBlock.style.width = this.rightWidth + "px";
this.rightBlock.firstChild.innerHTML = (!this.dual && this.rightWidth >= this.width / 2) ? "" : this.rightValue;
if(!this.dual) {
var x = this.rightBlock.firstChild.offsetWidth;
this.rightBlock.firstChild.style.left = (6 * (1 - 2*(this.rightWidth-6)/this.width) - ((this.rightWidth-6) * x / this.width)) + 'px';
}
},
ЗЫ. К сожалению в моем зоопарке только ФФ и ИЕ, работоспособность в других браузерах не проверял.
ЗЗЫ. Константа «6» унаследована из цсс, что не совсем хорошо.
Вот спасибище!
Дистрибутив и пример обновлены. Вы в авторах (можете полюбоваться в комментариях к .js).
Работает замечательно!
Насчет константы не переживайте - она давно есть в виде свойства widthRem, на что я её и поменял. Можнj было свойство определить как бегунок.offsetWidth + const, но практика показала, что удобнее оставить так.
Дистрибутив и пример обновлены. Вы в авторах (можете полюбоваться в комментариях к .js).
Работает замечательно!
Насчет константы не переживайте - она давно есть в виде свойства widthRem, на что я её и поменял. Можнj было свойство определить как бегунок.offsetWidth + const, но практика показала, что удобнее оставить так.
Хорошие трекбары, но опять нет нужной мне функции: захватить "отрезок" за середину и двигать его весь (правый и левый маркер будут двигаться одновременно, сохраняя расстояние между собой). Такое видели где-нибудь?
Вообще не сложно реализовать. Вводится дополнительной опцией.
* делает пометку для третьей версии трекбара
* делает пометку для третьей версии трекбара
видели, в каких-то примерах на днях для jQuery или prototype, только там с датами (типа календаря), но думаю переделать не особо сложно. там можно двигать влево-вправо оба бегунка, и весь выбранный диапазон целиком тоже влево-вправо. Если наткнусь — отпишу
Нужная вам функция реализована. Статья в связи с этим немного отредактирована и обновлен архив.
Минус в том, что эта штуковина, в отличие от селекта, не управляется с клавиатуры. Я редко заполняю формы, используя мышку. Если бы между ползунками можно было стандартно переключаться tab’ом и двигать ползунки стрелками, это было бы хорошо. А так вы заставляете меня чаще хватать мышку, что не всегда хорошо.
Ессно не стоит фанатично заменять все селекты на трекбары. Это необходимо делать в тех случаях, когда селекты становятся неудобными. Например, что удобнее, пролистать с клавиатуры две портянки числовых параметров "от" и "до" или ткнуть пару раз мышкой?
А насчет фокуса и управления с клавиатуры - теоретически это можно реализовать, но на практике усилия не будут стоить результат, особенно для недискретных трекбаров.
А насчет фокуса и управления с клавиатуры - теоретически это можно реализовать, но на практике усилия не будут стоить результат, особенно для недискретных трекбаров.
Тогда можно слева и справа оставлять поля для ввода, чтобы они были связаны с трекбаром. Впрочем, у вас в одном примере так и есть. Так что считайте, что это предостережение веб-программистам — не увлекаться и помнить о юзабилити. :)
Юзабили - это наше всё :-)
Но природная лень опять же мешает сделать 100% юзабилити. В моем примере текстовые поля с атрибутом ридонли, т.к. нет обратной совместимости. То есть пользователь ввел букву - и это нужно отразить бегунком. Но это проблема примера а него скрипта трекбека, в котором все возможности для такого функционала заложены.
Но природная лень опять же мешает сделать 100% юзабилити. В моем примере текстовые поля с атрибутом ридонли, т.к. нет обратной совместимости. То есть пользователь ввел букву - и это нужно отразить бегунком. Но это проблема примера а него скрипта трекбека, в котором все возможности для такого функционала заложены.
под Маком в Сафари работает без глюков в 1 пиксель..
в связи с засилием трекбаров буду готовить статью, который из них быстрее, и как их вообще разогнать можно :)
Очень плохо, что ваше решение невозможно использовать в веб-приложениях или простых формах на веб-сайтах, где нужна деградация элементов управления до простейших полей формы.
Ведь, по сути, любой из ваших элементов управления — это одно или два простейших текстовых поля. Вот, над ними и надо было надстраивать улучшенную функциональность. Тогда, при отсутствии JavaScript, пользователь сможет ввести значение в простое поле ввода.
Так же рекомендую посмотреть в сторону черновика стандарта Webforms 2, там уже есть элемент управления для указания диапазона (input type=range), а так же демонстрацию для IE и Opera.
Ведь, по сути, любой из ваших элементов управления — это одно или два простейших текстовых поля. Вот, над ними и надо было надстраивать улучшенную функциональность. Тогда, при отсутствии JavaScript, пользователь сможет ввести значение в простое поле ввода.
Так же рекомендую посмотреть в сторону черновика стандарта Webforms 2, там уже есть элемент управления для указания диапазона (input type=range), а так же демонстрацию для IE и Opera.
Смотрите внимательнее пример. Всё возможно. А вот встраивать это в движок так, как сделано в приводимой вами демонстрации не стоило. Т.к. из-за этого теряется динамичность скрипта.
Хотите сделать к трекбару 2 текстинпута? Легко! Прячьте их под слой трекбара или в тег noscript и связывайте через onMove. Вот и решение.
И кстати, "демонстрацию для IE и Opera" - это как минимум несерьезно.
Хотите сделать к трекбару 2 текстинпута? Легко! Прячьте их под слой трекбара или в тег noscript и связывайте через onMove. Вот и решение.
И кстати, "демонстрацию для IE и Opera" - это как минимум несерьезно.
В том месте HTML-кода страницы, где будет стоять трекбар, необходимо прописать JavaScript-сценарийВставлять куски Java-скрипта внутрь страницы тоже нехорошо.
Лучше описать параметры элемента управления в декларативной форме, поставив INPUT с классом trackbar, и параметрами в виде атрибутов. Подключаемый скрипт после загрузки страницы находит и цепляется за такие элементы, подменяя их на ваш элемент управления.
Например, вместо:
trackbar.getObject('one').init({
onMove : function() {
},
width : 250, // px
leftLimit : 0, // unit of value
leftValue : 20, // unit of value
rightLimit : 100, // unit of value
rightValue : 80, // unit of value
});
можно будет в HTML написать:
<fieldset class="trackbar" style="width:250px">
<label>От:
<input type="range" min="0" max="100" value="20" name="track1a"/>
</label>
<label>До:
<input type="range" min="0" max="100" value="80" name="track1b"/>
</label>
</fieldset>
При этом сохраниться возможность ввода данных, для клиентов с выключенным JavaScript.
Нивопрос, используйте вместо document.write(), поиск нужных инпутов и прописывайте тотже код по какому-нибудт событию, например, window.onload.
Никто вас не ограничивает.
Никто вас не ограничивает.
Я-то так делать и буду, но жаль что большинство сделает просто "copy-paste", и отправку формы завяжут намертво на JavaScript...
Кстати, если отвлечься от этой темы, то вот ещё одно усовершенствование: передвигать ползунки не по "click", а по "mousedown". Так будет возможно надавить где-то на полоске, и не отпуская кнопку мыши, протащить ползунок. Такое поведение реализовано в аналогичном решении, попробуйте.
Кстати, если отвлечься от этой темы, то вот ещё одно усовершенствование: передвигать ползунки не по "click", а по "mousedown". Так будет возможно надавить где-то на полоске, и не отпуская кнопку мыши, протащить ползунок. Такое поведение реализовано в аналогичном решении, попробуйте.
Еще раз повторю, что намертво на JavaScript данные формы никто не завязывает. Реализация этой части находится в руках программиста, который прикручивает трек-бар и имеено для этого есть функция обратного вызова - onMove. Именно такой API изначально планировался, на наиболее динамичный и дающий больше свобод.
Mousedown уже предлагали. К сожалению реализовать не получится, т.к. есть функционал "ухватить и двигать весь интервал", который вступает в конфликт, с предложенным поведением.
Но в любом случае спасибо за предложения!
Mousedown уже предлагали. К сожалению реализовать не получится, т.к. есть функционал "ухватить и двигать весь интервал", который вступает в конфликт, с предложенным поведением.
Но в любом случае спасибо за предложения!
Спасибо. Хотелось бы узнать лицензию.
Берите и пользуйтесь. Никто вас за это по рукам бить не будет. Только копирайт и список авторов в виде комментариев к скрипту оставляйте, если не трудно.
МОжет тогда стоить пролицензировать под какой-нибудь лицензией.
Судя по тому, что вы говорите, в вашем случае подходит Лицензия BSD.
Чтобы у тех, кто будет использовать, совесть была спокойна :)
Судя по тому, что вы говорите, в вашем случае подходит Лицензия BSD.
Чтобы у тех, кто будет использовать, совесть была спокойна :)
Добавлена "лицензия".
This code is a public domain.
:-) Пользуйтесь!
This code is a public domain.
:-) Пользуйтесь!
Хорошая работа!
Отличная работа!
А нет такого скрипта для Greasemonkey, чтобы прямо на лету переделывал селекты в трекбары на любых страницах?
https://addons.mozilla.org/ru/firefox/ad…
https://addons.mozilla.org/ru/firefox/ad…
Опционально можно добавить отключение вывода значений бегунка, чтобы в последнем примере с буквами отдавать значения только в callback-функцию, т.к. цифры не нужны.
На счёт комментария выше, касательно ввода значений с клавиатуры — можно вместо текстовых надписей двигать input-ы :-) Тоже опционально, конечно.
На счёт комментария выше, касательно ввода значений с клавиатуры — можно вместо текстовых надписей двигать input-ы :-) Тоже опционально, конечно.
> Она отличается от предложенной предыдущим автором как по дизайну так и по функционалу
Вы не верно поняли основную парадигму моего решения, если считаете что я предлагал дизайн :)
Мое решение никак не привязано к дизайну, весь дизайн находится снаружи, в файлах «test.html» и прикрепленной css. Голый функционал :)
Переезжающая подпись над единственным ползунком — очень круто :)
Вы не верно поняли основную парадигму моего решения, если считаете что я предлагал дизайн :)
Мое решение никак не привязано к дизайну, весь дизайн находится снаружи, в файлах «test.html» и прикрепленной css. Голый функционал :)
Переезжающая подпись над единственным ползунком — очень круто :)
Ессно дизайн - это в таких проектах рассматривается во-вторую очередь, после доступного функционала, и любой кодер с базовыми занниями CSS перепишет трекбар под себя. Но когда нужно быстро взять и прикрутить что-то, выгоднее работать с более привлекательным решением. Этим замечанием я не претендую на более прикольный дизайн, каждый решает это для себя сам.
К тому же я не нашел в вашем решении опции по объеденению бугенков в один и быстром измененеии длины. Это склонило чашу весов в сторону написания топика :-)
Спасибо за ваш скрипт! Нужно не лениться выкладывать такие вещи.
К тому же я не нашел в вашем решении опции по объеденению бугенков в один и быстром измененеии длины. Это склонило чашу весов в сторону написания топика :-)
Спасибо за ваш скрипт! Нужно не лениться выкладывать такие вещи.
А переезжающая надпись - заслуга abarmot. Еще раз спасибо ему за это!
ИМХО следует добавить возможность «схватить» за диапазон, и сдвинуть его, не меняя размер этого самого диапазона. а так - ничего.
На Маке под FF3b5 работает. Правда нет времени подробнее поколдовать.
Красиво, но очень разочаровало что при ползунок переходит под курсор по mouseup а не mousedown. Я привык нажать кнопку в нужном месте диапазона, а потом не отпуская выровнять до нужного значения, как в плеерах, а тут так не получается.
спасибо! отлично сделано. вопрос пока применения открыт.
очень понравилась деталь: когда двигаешь ползунок, цифра над ним смещается относительно его самого и на гранце сливается с предельной отметкой — супер!
очень понравилась деталь: когда двигаешь ползунок, цифра над ним смещается относительно его самого и на гранце сливается с предельной отметкой — супер!
Не устану повторять, что переплывающий слева-направо ползунок - заслуга abarmot.
Огромное вам спасибо. Сейчас перепишу для jQuery.
Будет желание - выкладывайте решение сюда, добавлю его в дистрибутив.
Использование:
$('#id_elementa').trackbar(options);
Качать отсюда:
http://ifolder.ru/6540404
Изменения:
1. namespace перенес в $.trackbar
2. $.trackbar.archive сделал массивом
3. немножко поменял функцию инит (где было document.write)
4. идентификаторы внутренних контролов сделал локальными
$('#id_elementa').trackbar(options);
Качать отсюда:
http://ifolder.ru/6540404
Изменения:
1. namespace перенес в $.trackbar
2. $.trackbar.archive сделал массивом
3. немножко поменял функцию инит (где было document.write)
4. идентификаторы внутренних контролов сделал локальными
У меня ваш пример кроссбраузерно НЕ работает. Исправьте, пожалуйста, если не затруднит.
Да, моя забыл положить библиотеку jquery в пример.
Качайте http://ifolder.ru/6541350 - тут вместе с библиотекой. У меня работает на oper9,ie6+7,ff2
Качайте http://ifolder.ru/6541350 - тут вместе с библиотекой. У меня работает на oper9,ie6+7,ff2
Да и еще, leftLimit я поставил равным 100 для теста. Там конечно же надо вернуть на ноль.
IE7 ругается на активное содержимое. Это из-за того что JSON, а не обычный яваскрипт?
А вообще красиво сделано.
А вообще красиво сделано.
В IE 6 дёргается правый серенький литит.
В остальном третья версия прекрасна :-)
В остальном третья версия прекрасна :-)
интересно, почему никто еще до snap'а (привязки) не догадался? как на https://www.master-credit.ru/credit/inde… (только там придется несколько форм сначала заполнить)
Такие вещи пишутся исходя из конкретных задач. Например, в представленном мной трекбаре все возможности для связи между собой есть, необходимо сесть и написать свою пользовательскую функцию с нужными формулами.
да не, я не про это. snap, в том же фотошопе есть привязка к guide line и grid'у. живой пример — регулятор balance у winAmp'а (тот, что рядом с громкостью), т.е. если человек подвинул курсор мыши на 49.9% длины линейки, то почему бы не довести курсор ползунка (который драг-дропится) к показательному значению в 50%? сохранение дискретности перемещения + авто-подводка под показательные значения.
ААА, вот о чем речь :-)
Если Вы пройдете по ссылке в начале статьи на другой трекбар - там привязка работает.
В этом дистрибутиве тоже можно реализовать, но я решил не заморачиваться на визуальном эффекте, а дискретность значений дает roundUp. Возможно к следующей версии подготовлю.
Если Вы пройдете по ссылке в начале статьи на другой трекбар - там привязка работает.
В этом дистрибутиве тоже можно реализовать, но я решил не заморачиваться на визуальном эффекте, а дискретность значений дает roundUp. Возможно к следующей версии подготовлю.
было б здорово, еще могу предложить на рассмотрение деление всей линейки на несколько отрезков с разной "плотностью" значений :) но это уже, наверно, кардинальный пересмотр всей работы.
со "вчерашней" ссылкой ввобще мистика: жмакаю по ней — попадаю на 404ю, перехожу через блог javascript — показывается (урла одинаковая, я в шоке). если мы про "Элемент управления, TrackBar но с двумя ползунками", то я там присоски к показательным зн-ям не обнаружил, причем, даже если по цифрам в примере кликать, то все-равно курсор по мышке выставляется.
со "вчерашней" ссылкой ввобще мистика: жмакаю по ней — попадаю на 404ю, перехожу через блог javascript — показывается (урла одинаковая, я в шоке). если мы про "Элемент управления, TrackBar но с двумя ползунками", то я там присоски к показательным зн-ям не обнаружил, причем, даже если по цифрам в примере кликать, то все-равно курсор по мышке выставляется.
ну а в целом, да, это сродни типографике. вроде и мило, а ультимативного аргумента в пользу применения нету
firefox 2.0.0.14 под macOS — полет отменный, допишите в посте, если что :)
document.write???
Предложение по усовершенствованию.
Т.к. трекбар предполагается использовать в формах, то будет не очень удобно обработку его значения дополнительно вешать на javascript.
Поэтому предложение - чтобы при создании трекбара так же генерилось поле типа hidden с именем (name) равным trackbar_id (id соотв. трекбара). В случае с "dual трекбаром" - именем равным trackbar_id[].
И, соответственно, чтобы это поле (поля) заполнялись соотв. значениями при изменении трекбара.
Т.к. трекбар предполагается использовать в формах, то будет не очень удобно обработку его значения дополнительно вешать на javascript.
Поэтому предложение - чтобы при создании трекбара так же генерилось поле типа hidden с именем (name) равным trackbar_id (id соотв. трекбара). В случае с "dual трекбаром" - именем равным trackbar_id[].
И, соответственно, чтобы это поле (поля) заполнялись соотв. значениями при изменении трекбара.
Там немного описался - при dual трекбаре - два поля с одинаковыми именами trackbar_id[] (где trackbar_id - это id соотв. трекбара)
Это, имхо, уже лишнее.
Каждый сам решает к какому элементу формы привязать трекбар (или вообще не привязывать, подгружая результат по ajax).
Для этого есть функция обратного вызова.
А усложнение дистрибутива в этом направлении отрицательно скажется на его простоте и понимании.
На определенном этапе следует перестать усложнять API :-)
Каждый сам решает к какому элементу формы привязать трекбар (или вообще не привязывать, подгружая результат по ajax).
Для этого есть функция обратного вызова.
А усложнение дистрибутива в этом направлении отрицательно скажется на его простоте и понимании.
На определенном этапе следует перестать усложнять API :-)
а можно ли этот trackbar развернуть вертикально или в данном решение это пока не реализованно?
Не реализовано.
Планируется или тоже лишнее? Мне очень понравилось как все сделанно но по великому сожалению нужен вертикальный :-) Я тут нашел парочку на http://www.script.dvostok.com/Forms/demo… может кому пригодится
странно сслку верную дал но с хабра не открывается хотя буква в букву все одинаково script.dvostok.com/Forms/demo_carpe_slider_.html
Ура!!! У меня невероятная эйфория!!! То что нужно именно сейчас.
Автору +1000
Автору +1000
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Еще раз о трекбаре