Блог

Главная - Вопросы по программированию - Слайдер JavaScript

Слайдер JavaScript

#javascript #slider

Вопрос:

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

  • 1 предмет: 100 долларов
  • 2 предмета: 90 = 190 долларов
  • 3 предмета: 80 = 270 долларов
  • 4 предмета: 70 = 340 долларов
  • 5 предметов: 60 = 400 долларов
  • 6 предметов: 50 = 450 долларов
  • 7 предметов: 50 = 500 долларов

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

Ответ №1:

Проверьте Yahoo! пользовательский интерфейс. у них есть виджет-слайдер: 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
    }
});

Ответ №2:

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

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

Метки: