Филаментгруппа, слайдер, разные ручки - PullRequest
Новая
       14

Филаментгруппа, слайдер, разные ручки

0 голосов
/ 13 апреля 2011

В настоящее время я работаю над проектом, для которого мне нужны два слайдера. В настоящее время я использую слайдер Filamantgroup (http://d.pr/mHp3).

Но у меня есть небольшая проблема ... Мне нужно, чтобы мои две ручки отличались друг от друга. Они не могут выглядеть одинаково.

Когда я создавал свои собственные ползунки, я просто добавил класс к ручкам, и это было все. Все отлично сработало .. 

$('#slidertest').each(function() {
       $('.ui-slider-handle:first', this).addClass('firstslider-handle-left')
       $('.ui-slider-handle:last', this).addClass('firstslider-handle-right')
  });

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

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

<div id="licht">
    <form action="#">
            <fieldset id="test">
                <select name="aan" id="aan">
                    <option value="6am">6u00</option>
                    <option value="6.5am">6u30</option>
                    <option value="7am">7u00</option>
                    <option value="7.5am">7u30</option>
                    <option value="8am">8u00</option>
                    <option value="8.5am">8u30</option>
                    <option value="9am">9u00</option>
                    <option value="9.5am">9u30</option>
                    <option value="10am" selected="selected">10u00</option>
                    <option value="10.5am">10u30</option>
                    <option value="11am">11u00</option>
                    <option value="11.5am">11u30</option>
                    <option value="12am">12u00</option>
                    <option value="12.5pm">12u30</option>
                    <option value="1pm">1u00</option>
                    <option value="1.5pm">1u30</option>
                    <option value="2pm">2u00</option>
                    <option value="2.5pm">2u30</option>
                    <option value="3pm">3u00</option>
                    <option value="3.5pm">3u30</option>
                    <option value="4pm">4u00</option>
                    <option value="4.5pm">4u30</option>
                    <option value="5pm">5u00</option>
                    <option value="5.5pm">5u30</option>
                    <option value="6pm">6u00</option>
                    <option value="6.5pm">6u30</option>
                    <option value="7pm">7u00</option>
                    <option value="7.5pm">7u30</option>
                    <option value="8pm">8u00</option>
                    <option value="8.5pm">8u30</option>
                    <option value="9pm">9u00</option>
                    <option value="9.5pm">9u30</option>
                    <option value="10pm">10u00</option>
                    <option value="10.5pm">10u30</option>
                    <option value="11pm">11u00</option>
                    <option value="11.5pm">11u30</option>
                    <option value="12pm">12u00</option>
                    <option value="1am">1u00</option>
                    <option value="1.5am">1u30</option>
                    <option value="2am">2u00</option>
                    <option value="2.5am">2u30</option>
                    <option value="3am">3u00</option>
                    <option value="3.5am">3u30</option>
                    <option value="4am">4u00</option>
                    <option value="4.5am">4u30</option>
                    <option value="5am">5u00</option>
                    <option value="5.5am">5u30</option>
                    <option value="6am">6u00</option>
                </select>

                <select name="uit" id="uit">
                    <option value="6am">6u00</option>
                    <option value="6.5am">6u30</option>
                    <option value="7am">7u00</option>
                    <option value="7.5am">7u30</option>
                    <option value="8am">8u00</option>
                    <option value="8.5am">8u30</option>
                    <option value="9am">9u00</option>
                    <option value="9.5am">9u30</option>
                    <option value="10am">10u00</option>
                    <option value="10.5am">10u30</option>
                    <option value="11am">11u00</option>
                    <option value="11.5am">11u30</option>
                    <option value="12am">12u00</option>
                    <option value="12.5pm">12u30</option>
                    <option value="1pm">1u00</option>
                    <option value="1.5pm">1u30</option>
                    <option value="2pm">2u00</option>
                    <option value="2.5pm">2u30</option>
                    <option value="3pm">3u00</option>
                    <option value="3.5pm">3u30</option>
                    <option value="4pm">4u00</option>
                    <option value="4.5pm">4u30</option>
                    <option value="5pm">5u00</option>
                    <option value="5.5pm">5u30</option>
                    <option value="6pm">6u00</option>
                    <option value="6.5pm">6u30</option>
                    <option value="7pm">7u00</option>
                    <option value="7.5pm">7u30</option>
                    <option value="8pm">8u00</option>
                    <option value="8.5pm">8u30</option>
                    <option value="9pm" selected="selected">9u00</option>
                    <option value="9.5pm">9u30</option>
                    <option value="10pm">10u00</option>
                    <option value="10.5pm">10u30</option>
                    <option value="11pm">11u00</option>
                    <option value="11.5pm">11u30</option>
                    <option value="12pm">12u00</option>
                    <option value="1am">1u00</option>
                    <option value="1.5am">1u30</option>
                    <option value="2am">2u00</option>
                    <option value="2.5am">2u30</option>
                    <option value="3am">3u00</option>
                    <option value="3.5am">3u30</option>
                    <option value="4am">4u00</option>
                    <option value="4.5am">4u30</option>
                    <option value="5am">5u00</option>
                    <option value="5.5am">5u30</option>
                    <option value="6am">6u00</option>
                </select>
            </fieldset>
    </form>
    </div>

Я очень надеюсь, что вы, ребята, сможете мне помочь. Заранее спасибо!

Ответы [ 2 ]

1 голос
/ 13 апреля 2011

Я взял демонстрационную страницу Filament Group и вставил ее в JSBin здесь: http://jsbin.com/acafo4

Я использовал этот jQuery для добавления левого и правого классов к дескрипторам: 

$('.ui-slider .ui-slider-handle').eq(0).addClass('ui-slider-handle-left');
$('.ui-slider .ui-slider-handle').eq(1).addClass('ui-slider-handle-right');

Затем в стилеих, как показано ниже.Селектор .ui-slider важен, потому что он делает этот стиль более избирательным, чем тот, который они использовали, избавляя вас от необходимости помещать!важно везде. 

.ui-slider .ui-slider-handle-left {
  background-image: none;
  background-color: red;
  border-radius: 100%;
}
.ui-slider .ui-slider-handle-right {
  background-image: none;
  background-color: green;
  border-radius: 0;

Надеюсь, это поможет!

0 голосов
/ 13 апреля 2011

Похоже, у этих дескрипторов уже есть идентификатор, попробуйте это: 

/* Handle A Default */
#handle_valueA.ui-state-default {
 background:#f80 url();
 border: #f80 1px solid;
}
/* Handle A Hover */
#handle_valueA.ui-state-hover {
 background:#444 url();
 border: #555 1px solid;
}

/* Handle B Default */
#handle_valueB.ui-state-default {
 background:#444 url();
 border: #555 1px solid;
}
/* Handle B Hover */
#handle_valueB.ui-state-hover {
 background:#f80 url();
 border: #fc0 1px solid;
}

Убедитесь, что этот CSS включен после стиля по умолчанию, иначе вам может понадобиться добавить флаг! Important после каждой строки

...