Scripts - Tutorials - Forum - Downloads - Showcase - Contact

Artikels

VPN vergelijken

Algemeen

Beginpagina

FAQ

Grafische worm (243)

Links

Nieuwsartikels

Nieuwsarchief

Boeken programmeren

Overzicht

Samenwerken

Webhosting

Zoek op Sitemasters

Leden

Registreren

Ledenlijst

Ons team

Links

webhostingtop10.be

Sociale media

Follow @sitemasters

Sitemasters

Adverteren op Sitemasters?

Contacteer ons

RSS

Link naar ons

Donaties

Poll

Je moet ingelogd zijn om te stemmen.

Statistieken

Linkpartners

Forum

Categorieën > PHP

Hosting calculator mbv jQuery slide

ikki007 - 23/01/2010 17:17
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

jaronneke - 23/01/2010 18:27 (laatste wijziging 23/01/2010 18:28)
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 });

ikki007 - 23/01/2010 19:24 (laatste wijziging 23/01/2010 19:56)

PHP ver gevorderde

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

javascript code - Bekijk de code zonder highlighting - Klap code in

                <script type="text/javascript">
var memoryText = new Array("256 MB", "512 MB", "1024 MB", "2048 MB", "4096 MB", "8192 MB", "16384 MB");
var memoryPrice = new Array("1.00", "2.00", "4.00", "5.50", "10.00", "20.00", "35.00");

var harddiskText = new Array("5 GB", "10 GB", "25 GB", "50 GB", "100 GB", "250 GB", "500 GB", "1 TB");
var harddiskPrice = new Array("0.50", "1.00", "2.00", "4.00", "7.50", "15.00", "27.50", "40.00");

$(function() {
	function calculateTotalPrice() {
		$("#totalPrice").val(eval($("#memoryPrice").val())+eval($("#harddiskPrice").val()));
	}

	$("#memorySlider").slider({
		value:0,
		min: 0,
		max: memoryText.length-1,
		step: 1,
		slide: function(event, ui) {
			$("#memoryText").val(memoryText[ui.value]);
			$("#memoryPrice").val(memoryPrice[ui.value]);
			
			calculateTotalPrice();
		}
	});
	
	$("#harddiskSlider").slider({
		value:0,
		min: 0,
		max: harddiskText.length-1,
		step: 1,
		slide: function(event, ui) {
			$("#harddiskText").val(harddiskText[ui.value]);
			$("#harddiskPrice").val(harddiskPrice[ui.value]);
			
			calculateTotalPrice();
		}
	});
	
	$("#memoryText").val(memoryText[$("#memorySlider").slider("value")]);
	$("#memoryPrice").val(memoryPrice[$("#memorySlider").slider("value")]);
	
	$("#harddiskText").val(harddiskText[$("#harddiskSlider").slider("value")]);
	$("#harddiskPrice").val(harddiskPrice[$("#harddiskSlider").slider("value")]);
	
	calculateTotalPrice();
});
</script>
            
<script type="text/javascript">
var memoryText = new Array("256 MB", "512 MB", "1024 MB", "2048 MB", "4096 MB", "8192 MB", "16384 MB");
var memoryPrice = new Array("1.00", "2.00", "4.00", "5.50", "10.00", "20.00", "35.00");
 
var harddiskText = new Array("5 GB", "10 GB", "25 GB", "50 GB", "100 GB", "250 GB", "500 GB", "1 TB");
var harddiskPrice = new Array("0.50", "1.00", "2.00", "4.00", "7.50", "15.00", "27.50", "40.00");
 
$(function() {
	function calculateTotalPrice() {
		$("#totalPrice").val(eval($("#memoryPrice").val())+eval($("#harddiskPrice").val()));
	}
 
	$("#memorySlider").slider({
		value:0,
		min: 0,
		max: memoryText.length-1,
		step: 1,
		slide: function(event, ui) {
			$("#memoryText").val(memoryText[ui.value]);
			$("#memoryPrice").val(memoryPrice[ui.value]);
 
			calculateTotalPrice();
		}
	});
 
	$("#harddiskSlider").slider({
		value:0,
		min: 0,
		max: harddiskText.length-1,
		step: 1,
		slide: function(event, ui) {
			$("#harddiskText").val(harddiskText[ui.value]);
			$("#harddiskPrice").val(harddiskPrice[ui.value]);
 
			calculateTotalPrice();
		}
	});
 
	$("#memoryText").val(memoryText[$("#memorySlider").slider("value")]);
	$("#memoryPrice").val(memoryPrice[$("#memorySlider").slider("value")]);
 
	$("#harddiskText").val(harddiskText[$("#harddiskSlider").slider("value")]);
	$("#harddiskPrice").val(harddiskPrice[$("#harddiskSlider").slider("value")]);
 
	calculateTotalPrice();
});
</script>
 

Dit lijkt me een best handige manier en ga ik verder uitwerken.

Gesponsorde links

Dit onderwerp is gesloten.

Actiefste leden van de maand

Actieve forumberichten