Spinner test

by akmiecik

HTML

<div class="test" data-overlay--color="red">test</div>
<div class="test large" data-overlay--opacity="0.9">test</div>
<div class="test" data-overlay--color="blue">test</div>
<input type="button" value="Start" id="start" />
<input type="button" value="Stop" id="stop" />

CSS

.test {
    position: relative;
    width: 100px;
    height: 100px;
    border: 1px solid blue;
}
.large{
    width: 200px;
}
.spinner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    //background-color: grey;
    //opacity: 0.5;
}

JavaScript

$('input[class="testspin"]').spinner({ min: 0, max: 10});

$('.ui-spinner-button').click(function() { $(this).siblings('input').change(); });

$('.testspin').spinner().change(function(){

	var sum = 500;
    $('.testspin').each(function() {
        sum += (Number($(this).val()) * $(this).data('price') );
    });
    $('p').html(sum);
    
    //var total = $('p');
    //total.html( Number(total.html()) + Number($(this).spinner('value') ) );
    //alert($(this).spinner('value'));
        });