Curseur JavaScript

Question

Je dois créer un 'curseur' pour le site d'un client. Le curseur doit permettre aux utilisateurs de sélectionner le nombre d'éléments qu'ils souhaitent pour l'élément x et d'indiquer le prix sur la base de ces éléments. L'étrange (ish) partie est que le rapport de la hausse des prix va augmenter ou diminuer la quantité d'articles monte:

• 1 article: 100 $
• 2 articles: +90 = 190 $
• 3 articles : + 80 = 270 $
• 4 éléments: + 70 = 340 $
• 5 éléments: + 60 = 400 $
• 6 éléments: + 50 = 450 $
• 7 éléments: + 50 = 500 $

Et toutes les augmentations à partir de ce moment sont +50. Cela semble probablement être une question trop simpliste, mais est-ce que quelqu'un sait comment je pourrais y arriver? J'ai presque pas d'expérience avec JavaScript :(

Answer 1

Vérifiez sur l'interface utilisateur Yahoo! ils ont un widget curseur:. http://developer.yahoo.com/yui/slider/

L'exemple suivant devrait vous aider à démarrer. http://developer.yahoo.com/yui/examples/slider/slider-ticks.html

Tous les frameworks JavaScript (jQuery, MooTools) semble offrir un curseur.Le YUI vous donnera beaucoup de contrôle et un chargeur de sorte que vous n'avez pas besoin d'héberger le script sur votre serveur.Faites attention à ce que YUI ne rende pas l'implémentation aussi indolore qu'avec les deux autres dont j'ai parlé

Voici un exemple MooTools:

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

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

Et le 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

Bien qu'il existe sans doute d'innombrables façons d'obtenir un curseur fait avec JS, je pense que la meilleure façon de calculer les prix sont juste les coder en dur (ou en les listant) quelque part, et juste else-if: ing à travers eux.

Vous pourrait faire un algorithme qui compte 100-(i*10) pour les cinq premiers articles, 50 pour le reste, mais c'est probablement plus difficile à changer à l'avenir que la dure-liste.