jQuery → jQuery UI Range Slider & Tooltip - всплывающая подсказка для слайдера

Данная статья является продолжением статьи, в которой я пофиксил, как мне кажется, не логичное поведение ползунков, а именно избавился от их наложения друг на друга. По-прежнему исходный код библиотеки jquery ui не затрагивается - все изменения я вынес в отдельный файл fixslider.js. В этой статье я опишу новые функции добавленные в скрипт fixslider.js, благодаря которым можно получить всплывающие подсказки над ползунками, подключив только лишь этот скрипт. Подключать это скрипт следует после самой библиотеки UI. Стоит оговориться - так как изначально все это я затеял ради исправления логики работы range slider, то fixslider.js применим только для этого типа слайдера. Для слайдера с одиночным ползунком все работает стандартно.

По умолчанию виджет слайдера не позволяет включить всплывающие подсказки при движении ползунков, чтобы исправить это, я решил обратиться к методам другого виджета jquery ui - Tooltip. Для создания всплывающих подсказок я использовал метод _tooltip, немного подкорректировал его и обозвал по другому, но суть таже - создает такую же разметку что и стандартный виджет tooltip, благодаря чему работают стили jquery ui css. Утомительно приводить код всех заново измененных методов, поэтому только перечислю новые опции, которые можно задавать при инициализации слайдера:

tooltip - По умолчанию false, если поставить true, то у ползунка появится всплывающая подсказка при передвижении ползунка;
tooltipDisplay - По умолчанию false, если поставить true, то подсказки будут выводится на экран всегда изначально;
position - Массив с ключами left и top. Позволяет установить положение подсказок относительно ползунков. Пример:

  1. $("#slider-range").slider({
  2. ...
  3. position: {
  4. left: [0,0],
  5. top: [15,15]
  6. }
  7. ...
  8. });

Первые значения подмассивов left и top определяют положение подсказки относительно первого ползунка, вторые - положение подсказки относительно второго ползунка.
content - Массив из двух функций, которые по умолчанию возвращают значения, соответствующие положению ползунков. Эти значения выводятся в всплывающей подсказке:

  1. $("#slider-range").slider({
  2. ...
  3. content: [
  4. function() {
  5. return $(this).attr("data-values-0");
  6. },
  7. function() {
  8. return $(this).attr("data-values-1");
  9. }
  10. ]
  11. ...
  12. });

Первая функция выводит содержимое подсказки для первого ползунка, вторая соответственно для второго. Эти значения берутся из атрибутов data-values-0 и data-values-1, которые появляются у элемента, если на него навешен виджет слайдера. Для стилизации подсказок можно использовать любой html в качестве возвращаемого значения этих функций.

Пример слайдера с всплывающими подсказками:

Проверил во всех адекватных браузерах и в IE версии 7 и выше.

Комментарии

Спасибо!
Пригодилось!

Благодарю! Отличая штука!

Спасибо супер =) только с новой библиотекой не работает(

Добавить комментарий