login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Hosting calculator mbv jQuery slide

Offline ikki007 - 23/01/2010 17:17
Avatar van ikki007Gouden medailleGouden medaille

PHP ver gevorderde
Hey,

Op dit moment ben ik bezig met het maken van een hosting calculator mvc jQuery UI slider (http://jqueryui.com/demos/slider/#steps)
De pagina heeft enkele sliders en enkele slider heeft bepaalde values. Hier bijvoorbeeld de gegevens voor de geheugen slide:

256 MB - 1,00 euro per maand
512 MB - 2,00 euro per maand
1024 MB - 4,00 euro per maand

Nu hoort het vast te grijpen bij de xxx MB waardes, en zodra 512MB is geselecteerd moet hij de uiteindelijk prijs ophogen met 2,00.
De waardes zijn statisch, bijvoorbeeld de waardes voor harddisk:

50 GB - 4,00 euro per maand
100 GB - 7,50 euro per maand
250 GB - 15,00 euro per maand

Heeft iemand enig idee hoe dit bereikt wordt mbv de slider?

Ikki.

2 antwoorden

Gesponsorde links
Offline jaronneke - 23/01/2010 18:27 (laatste wijziging 23/01/2010 18:28)
Avatar van jaronneke MySQL interesse dit moet je aangeven met 'step':

Onderstaande code verplaatst met stapjes van 256, je kan de 'step' desnoods ook variabel maken met een IF, bijv:
IF value == 256 ; step = 512;
$('.selector').slider({ step: 256 });
Offline ikki007 - 23/01/2010 19:24 (laatste wijziging 23/01/2010 19:56)
Avatar van ikki007 Gouden medailleGouden medaille

PHP ver gevorderde
Ik ben zojuist op het idee gekomen om de "value" te gaan gebruiken als array key.

  1. <script type="text/javascript">
  2. var memoryText = new Array("256 MB", "512 MB", "1024 MB", "2048 MB", "4096 MB", "8192 MB", "16384 MB");
  3. var memoryPrice = new Array("1.00", "2.00", "4.00", "5.50", "10.00", "20.00", "35.00");
  4.  
  5. var harddiskText = new Array("5 GB", "10 GB", "25 GB", "50 GB", "100 GB", "250 GB", "500 GB", "1 TB");
  6. var harddiskPrice = new Array("0.50", "1.00", "2.00", "4.00", "7.50", "15.00", "27.50", "40.00");
  7.  
  8. $(function() {
  9. function calculateTotalPrice() {
  10. $("#totalPrice").val(eval($("#memoryPrice").val())+eval($("#harddiskPrice").val()));
  11. }
  12.  
  13. $("#memorySlider").slider({
  14. value:0,
  15. min: 0,
  16. max: memoryText.length-1,
  17. step: 1,
  18. slide: function(event, ui) {
  19. $("#memoryText").val(memoryText[ui.value]);
  20. $("#memoryPrice").val(memoryPrice[ui.value]);
  21.  
  22. calculateTotalPrice();
  23. }
  24. });
  25.  
  26. $("#harddiskSlider").slider({
  27. value:0,
  28. min: 0,
  29. max: harddiskText.length-1,
  30. step: 1,
  31. slide: function(event, ui) {
  32. $("#harddiskText").val(harddiskText[ui.value]);
  33. $("#harddiskPrice").val(harddiskPrice[ui.value]);
  34.  
  35. calculateTotalPrice();
  36. }
  37. });
  38.  
  39. $("#memoryText").val(memoryText[$("#memorySlider").slider("value")]);
  40. $("#memoryPrice").val(memoryPrice[$("#memorySlider").slider("value")]);
  41.  
  42. $("#harddiskText").val(harddiskText[$("#harddiskSlider").slider("value")]);
  43. $("#harddiskPrice").val(harddiskPrice[$("#harddiskSlider").slider("value")]);
  44.  
  45. calculateTotalPrice();
  46. });
  47. </script>


Dit lijkt me een best handige manier en ga ik verder uitwerken.
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.163s