JavaScript-слайдер

Question

Мне нужно создать «слайдер» для сайта клиента. Слайдер должен позволять людям выбирать, сколько предметов они хотят из х предметов, и показывать, какая цена будет основана на этом. Странная (ish) часть заключается в том, что коэффициент увеличения цены будет уменьшаться по мере увеличения количества элементов:

• 1 предмет: $ 100
• 2 шт .: +90 = 190
• 3 позиции: + 80 = $ 270
• 4 позиции: + 70 = $ 340
• 5 предметов: + 60 = 400 $
• 6 предметов: + 50 = $ 450
• 7 предметов: + 50 = $ 500

И с тех пор все увеличивается на +50. Это, вероятно, кажется слишком упрощенным вопросом, но кто-нибудь знает, как я могу это сделать? У меня почти нет опыта работы с JavaScript :(

Answer 1

Проверьте Yahoo! UI. у них есть виджет слайдера: http://developer.yahoo.com/yui/slider/

Следующий пример должен помочь вам начать: http://developer.yahoo.com/yui/examples/slider/slider-ticks.html.

Все JavaScript-фреймворки ( jQuery , MooTools ), похоже, предлагают слайдер. YUI предоставит вам большой контроль и загрузчик, поэтому вам не нужно размещать скрипт на вашем сервере. Помните, что YUI не делает реализацию такой же безболезненной, как с двумя другими, о которых я говорил.

Вот пример MooTools:

// First example of http://demos.mootools.net/Slider

<div class="slider" id="myslider">
      <div class="knob" style="position: relative;"/>
    </div>

И JavaScript:

var el = $('myslider'); // The slider graphic
new Slider(el, el.getElement('.knob'), {
    steps: 7,   // There are 7 choices
    range: [1, 7],  // Minimum value is 1, maximum is 7
    onChange: function(value){
        // Calculation of the value goes here
    }
});

Answer 2

Хотя есть, по-видимому, бесконечные способы сделать слайдер с помощью JS, я думаю, что самый простой способ рассчитать цены - это просто жестко (или перечислить) их где-то и просто else-if: просмотреть их.

Вы могли бы сделать алгоритм, который подсчитывает 100-(i*10) для пяти первых элементов, 50 для остальных, но это, вероятно, сложнее изменить в будущем, чем жестко перечисленный способ.