JQuery UI для преобразования нескольких групп переключателей в слайдер

Question

JQuery UI для преобразования нескольких групп переключателей в слайдер

0

Это продолжение использования JQuery UI для преобразования радиокнопок в элементы слайдера. Я создал новый вопрос, потому что мне нужно делать что-то немного иначе, чем оригинал, поэтому приношу свои извинения, если вопрос считается дубликатом и должен быть закрыт.

Вы можете видеть, что я пытаюсь сделать в этом jsFiddle, и:

$('.question').each(function() {
var qid = $(this).parent().attr('id');
var radios = $(this).find(':radio').hide();
$('.slider').slider({
    min: parseInt(radios.first().data('value'), 10),
    max: parseInt(radios.last().data('value'), 10),
    slide: function(event, ui) {
        radios.filter('[data-value=' + ui.value + ']').click();
    }
});
});

$('button').click(function() {
    alert($(':radio:checked').map(function() { return this.name + ': '+  this.value; }).get());;
});

У меня есть пара проблем:

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

На данный момент только последний вопрос передаёт правильное значение, первые два передают стандартное значение по умолчанию (мне пришлось добавить проверенный атрибут к первому переключателю, потому что, если другой параметр не выбран, значение для этот вопрос передается вообще).
Там также проблема позиционирования с ручкой, особенно для последнего элемента, где он позиционируется на уровне 100%, который выталкивает его за пределы контейнера. Это на самом деле выглядит хуже в Fiddle, чем на моей локальной странице, где это только последний элемент, который не работает.

Мне интересно, можно ли присвоить класс дескриптору, относящемуся к его положению, чтобы я мог перетащить последний из 100%.

Tyssen 09 май 2014, в 03:30

Источник

Теги:

javascript

jquery

jquery-ui

uislider

1 ответ

Ещё вопросы

Nick Craver · Accepted Answer · 2014-05-09T09-20-00.000Z

Здесь есть две отдельные проблемы, поэтому дайте адреса каждому.

Вначале JavaScript, проблема заключается в объеме radios. Поскольку он делится между всеми ползунками, он всегда устанавливает последнюю ссылку, которую вы установили, поэтому вы видите только третий слайдер, имеющий значение - при каждом изменении ползунка устанавливаются флажки последнего слайдера. Мы можем исправить это, ссылаясь на то, что мы хотим изменить относительно, например:

slide: function(event, ui) {
  $(this).closest('.question').find('[data-value=' + ui.value + ']').click();
}

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

Добавить width: 90% margin: 0 5%; на .round
Удалите это margin: 0 0 0 2em; on .ui-slider-horizontal
Удалите границу на .ui-slider-horizontal чтобы она выглядела правильно - добавьте рамку вверх на уровень .round если вы все еще хотите

Теперь они выглядят так:

ol .round {
  background-color: #e6e6e6;
  border-radius: 16px;
  margin: 0 0 0.5em; 
  width: 90%;
  margin: 0 5%;
}

.ui-slider-horizontal {
  background: transparent;
  border-radius: 1em;
  border: none;
  height: 2em;
  width: 90%; 
}

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

Вы можете протестировать изменения вместе здесь: http://jsfiddle.net/xs3GL/29/

Спасибо, проблема значений формы решена. :) По-прежнему возникают некоторые проблемы со стилем, отчасти потому, что дизайн, который мне прислали, имеет серый фон, выходящий за рамки самих этикеток. Но дизайн может измениться, поэтому оставлю его пока, пока я не получу подтверждение.