jQuery slider

Status
Niet open voor verdere reacties.
N

NickBu

Gebruiker
Lid geworden
14 mrt 2012
Berichten
9
Hallo,

met behulp van wat websites probeer ik een slider te maken (zonder succes tenzij ik alles 1 op 1 kopieer)
Ik wil de waarde van mijn slider weten, en kunnen afbeelden in een <P><\p>. De waarde moet nadien in een andere functie ook gebruikt kunnen worden.
In mijn commentaar duid ik aan waar ik denk dat de waarde behandeld/gehaald dient te worden.

[JS]
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style >
#slider { margin: 10px; }
</style>
<script>
$(document).ready(function() {
$("#slider").slider({
animate: true ,
max: 100 ,
min: 0 ,
value: 50,
slide: refreshSwatch /*De waarde van de slider, zal behandeld worden via deze functie?*/
});
});

function refreshSwatch() {
var red = $( "#slider" ).slider( "value" ) /*De waarde van slider #slider opslaan in red*/
}
</script>
</head>
<body>

<div id="slider"></div> <!-- dit beeld de slider balk af???-->

<p id="red">Error</p> <!-- hier komt mijn waarde leesbaar te staan-->
</body>
</html>
[/JS]

Ik denk nog wat basiskennis te missen (ben er zeker van :) )maar ik vind nergens een specifiek antwoord.
bv de zin $("#slider").slider({ ==> #slider wat wil dit nu zeggen en wat kan ik hiermee doen? Het is een element, maar blijkbaar toch geen variabele... Wat ben ik dan met dit element?

Bedankt voor alle hulp
 
Als ik dit doe werkt het wel, maar kan het niet korter?
Ik begrijp ook niet goed wat er allemaal gedaan wordt vanaf "slide: ...."

Tevens lukt het ook niet om gewoon in mijn body <P id="amount"> Error <\p> te plaatsen, zodat ik daar enkel tekst zie, niet zoals nu met een tekstvak want dat verknoeit de achtergrond :)

[JS]
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style >
#slider { margin: 10px; }
</style>
<script>
$(document).ready(function() {
$("#slider").slider({
animate: true ,
max: 100 ,
min: 0 ,
value: 50,
slide: function( event, ui ) {
$( "#amount" ).val( ui.value );
} /*De waarde van de slider, zal behandeld worden via deze functie?*/
});
$( "#amount" ).val( $( "#slider-vertical" ).slider( "value" ) );
});


</script>
</head>
<body>

<div id="slider"></div> <!-- dit beeld de slider balk af???-->
<p>
<label for="amount">Volume:</label>
<input type="text" id="amount" />
</p>

</body>
</html>
[/JS]
 
NickBu zei:
bv de zin $("#slider").slider({ ==> #slider wat wil dit nu zeggen en wat kan ik hiermee doen? Het is een element, maar blijkbaar toch geen variabele... Wat ben ik dan met dit element?
Klik om te vergroten...
Je moet het lezen als "voer de functie slider uit op de elementen die aan de voorwaarde id="slider" voldoen"

#slider is een CSS-selector, en geeft in dit geval een ID aan. Stel nou dat je meerdere sliders met dezelfde opties wilt gebruiken dan kun je voor een CSS klasse als selector gebruiken. Dan roep je dit aan
[js]
$(".naam_van_klasse")
[/js]


NickBu zei:
Als ik dit doe werkt het wel, maar kan het niet korter?
Ik begrijp ook niet goed wat er allemaal gedaan wordt vanaf "slide: ...."
Klik om te vergroten...
Je maakt gebruik van de jQuery UI widget(/functie) slider().

In de documentatie staat welke opties je kunt meegeven, maar ook welke events.

Een event geeft je de mogelijkheid om een functie uit te voeren die op een bepaald moment wordt aangeroepen.
Als je naar de documentatie van de callback slide kijkt staat daar uitgelegd wanneer hij wordt aangeroepen,
This event is triggered on every mouse move during slide. Use ui.value (single-handled sliders) to obtain the value of the current handle, $(..).slider('value', index) to get another handles' value.

Return false in order to prevent a slide, based on ui.value.

Code examples

Supply a callback function to handle the slide event as an init option.
[js]
$( ".selector" ).slider({
slide: function(event, ui) { ... }
});
[/js]
Bind to the slide event by type: slide.
[js]
$( ".selector" ).bind( "slide", function(event, ui) {
...
});
[/js]
Klik om te vergroten...

Voor het tonen van de waarde wil je de inhoud van een HTML-element wijzigen. Oftewel, je moet gebruik maken van de functie .html() ;)
[js]
$(document).ready(function()
{
$("#slider").slider({
animate: true ,
max: 100 ,
min: 0 ,
value: 50,
slide: function( event, ui )
{
$( "#amount" ).html( ui.value );
}
});
});
[/js]
HTML: 
<!-- in je body -->
<p id="amount">Gebruik de slider om de waarde te tonen</p>
 
Bedankt voor de hulp "tha devil".
Het afbeelden in een <p> is me helaas toch niet gelukt met de gegeven uitleg.
Ondertussen ga ik gewoon verder (al zou ik dat <p> element ook graag in orde krijgen....

Ik zal ineens mijn heel project posten, dan heb je ineens een idee waar het voor dient.
Het is dus de bedoeling om eenvoudig Digitale en analoge ingangen van mijn PLC uit te lezen en digitale en analoge uitgangen van mijn PLC aan te sturen.
Hierbij maak ik gebruik van SSI commando's die onze PLC kan "begrijpen". De SSI commando's zijn al verwerkt in functies in een apart bestand zodat we hier nog eenvoudig dienen te vertellen naar welk adres we wensen te schrijven/lezen en de waarde mee te geven. Een adres om te lezen is bv IX0.0, IW0, om naar te schrijven is het altijd MX0.0 of MW0 (digitaal of analoog)

Het lezen van de adressen wordt constant ge-updated door een ready(function). Dit doen we omdat we anders steeds heel de pagina zouden moeten refreshen want enkel zo worden SSI functies aangepast. Als er nu is aan de PLC veranderd, veranderd het ook meteen op het scherm.

Het aansturen van een digitale uitgang doe ik eenvoudig met een aan knop of uit knop.

Al deze functies werken, enkel het aansturen van de analoge uitgang niet. Hiervoor wou ik dus de slider gebruiken.
Mijn functie hiervoor is klaar en werkt (zelfde principe als voor de Bools)
[JS]
/*<!-- Een functie om %MW aan te sturen -->*/
function setAnalog(merkerwoord , waarde){
ssi.writeValue(merkerwoord , waarde);
}[/JS]
in merkerwoord geef ik een adres mee, in waarde zou dan de waarde van de slider moeten komen.
Het liefst van al wil ik dat de waarde van de slider één op één doorgestuurd wordt naar die functie. Die functie zou ik dan ook oproepen zoals ik mijn ingangen constant oproep met de $(document).ready(function() (ik heb het er in commentaar bijgezet) Daar dit niet werkte ging ik maar terug naar iets dat ik weet dat werkte en dat was met een SET knop zoals nu is verwerkt.
Dit zie je op volgend script.

[JS]
<h4>Analoge outputs aansturen</h4>
<div id="slider"></div>
<p>
<label for="amount">Volume:</label>
<input type="text" id="amount" />
</p>
<button type="button" onclick="setAnalog('MX0', amount)">Set value</button>
<br>
[/JS]


Mijn geheel programma:
[JS]
<html>

<head>
<style >
#slider { width:250px; height:15px; margin: 10px; }
</style>

<title>WAGO SSI voorbeeld</title>
<!--localiseren van de "bestanden"-->

<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>

<script type="text/javascript" src="js/wagossi.js"></script>
<!-- volgende twee zijn enkel en alleen voor de slider-->
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<script type="text/javascript">

var ssi = new ssi(); <!-- met deze tekst kan ik eenvoudig mijn functies oproepen -->


<!-- Een functie om bools uit te lezen-->

function readBooleans(){

ssi.readValue('IX2.0' , 'waarde1'); <!-- plaats van lezen en locatie van opslaan-->
ssi.readValue('IX2.1' , 'waarde2'); <!-- plaats van lezen en locatie van opslaan-->
ssi.readValue('QX2.0' , 'waarde3'); <!-- plaats van lezen en locatie van opslaan-->
ssi.readValue('QX2.1' , 'waarde4'); <!-- plaats van lezen en locatie van opslaan-->

}

<!-- Een functie om AI uit te lezen, maar kan evengoed iets anders zijn -->

function readAnalogInputs(){

ssi.readValue('IW0', 'waarde5'); <!-- plaats van lezen en locatie van opslaan-->
ssi.readValue('IW1', 'waarde6'); <!-- plaats van lezen en locatie van opslaan-->

}


<!-- Een functie om %MX aan te sturen (die gekoppeld wordt aan de uitgangen) -->
function setBooleans(merkerbit , waarde){ //Adres en waarde wordt door "oproeper" meegestuurd
ssi.writeValue(merkerbit , waarde);
}

/*<!-- Een functie om %MW aan te sturen -->*/
function setAnalog(merkerwoord , waarde){
ssi.writeValue(merkerwoord , waarde);
}


$(document).ready(function(){ <!-- jQuery functie die uitgevoerd wordt als de pagina geheel geladen is -->

setInterval("readBooleans()",500); <!-- als pagina klaar is gaan we onze functie uitlezen om de 500ms, zo blijft de waarde actueel -->

setInterval("readAnalogInputs()",500);
/*setInterval("SetAnalog('MW0' , 'amount')",500) ;*/

$("#slider").slider({
animate: true ,
max: 32767 ,
min: 0 ,
value: 50,
slide: function( event, ui ) {
$( "#amount" ).val( ui.value );
} /*De waarde van de slider, zal behandeld worden via deze functie?*/
});

$( "#amount" ).val( $( "#slider" ).slider( "value" ) );
});


</script>

</head>

<body bgcolor="silver" background="Igrey.png" > <!--opmaak...-->



<img src="WAGO_LOGO.PNG" alt="WAGO LOGO3" align="center"/>
<br>

<h4>Digitale ingangen</h4>

<p id="waarde1">Error</p>
<p id="waarde2">Error</p>
<hr>

<h4>Analoge ingangen</h4>

<p id="waarde5">Error</p>
<p id="waarde6">Error</p>
<hr>

<h4>Digitale outputs aansturen</h4>
<button type="button" onclick="setBooleans('MX2.0', '1')">On</button>
<button type="button" onclick="setBooleans('MX2.0', '0')">Off</button>
<p id="waarde3">Error</p>
<br>

<button type="button" onclick="setBooleans('MX2.1', '1')">On</button>
<button type="button" onclick="setBooleans('MX2.1', '0')">Off</button>
<p id="waarde4">Error</p>
<hr>

<h4>Analoge outputs aansturen</h4>
<div id="slider"></div>
<p>
<label for="amount">Volume:</label>
<input type="text" id="amount" />
</p>
<button type="button" onclick="setAnalog('MX0', amount)">Set value</button>
<br>


</body>

</html>




[/JS]

Als er vragen zijn rond het programma, laat maar weten.
Het probleem situeert zich dus nog in de twee aparte stukjes tekst die ik hierboven heb gezet.

Mvg
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan