JavaScript滑块

Question

我需要为客户的网站创建一个"滑块".滑块应该允许人们选择他们想要的x项目的数量,并根据它显示价格.奇怪的(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
    }
});