Code Slider gesucht

IP-Symcon Visualisierung
1

Hallo zusammen

Ich versuche nun schon seit Stunden einen Slider für eine eigene HTML/CSS Visu hinzubekommen.
Irgendwie komme ich da auf keinen grünen Zweig.

Nix extravagantes, er soll einfach nur so aussehen und funktionieren wie die IPS WF eigenen Slider, allerdings senkrecht.
Also einen übergebenen Wert anzeigen, und bei Änderung in eine PHP Variable zurückschreiben.

Hab wohl im Web was für Webkit Browser gefunden, der Dolphin HD wolle den aber nicht anzeigen obwohl ers onst auf die WebKit Css Syntax reagiert.

Wäre nett wenn mir da jemand unter die Arme greifen könnte. evtl. auch mit JS.

schönen Dank
bb

2

Wenn du auf meiner JSON-RPC Demo aufbaust und somit Dojo hast, kannst du ja mal hier schauen:
http://dojotoolkit.org/reference-guide/1.8/dijit/form/VerticalSlider.html#dijit-form-verticalslider

paresy

3

Servus
danke mal für den Hinweis, aber irgendwie krieg ich das nicht hin.

Ich möchte die Ausgabe einfach nur in einer HTMLBox innerhab des WF haben.
Da müßte doch das ganze Dojo Zeugs funktionieren, oder ?

Das an vielen Stellen verwendete „dojo.xhrGet“ funktioniert ja auch.

Wenn ich diesen Code in eine HTMLBox schreibe macht er mir grad mal das 400px hohe DIV, sonst nix.

<head>
<link rel="stylesheet" href="dojo/dijit/themes/claro/claro.css">

<script>dojoConfig = {parseOnLoad: true}</script><script src="dojo/dojo/dojo.js">
</script><script>require(["dojo/parser", "dijit/form/VerticalSlider", "dijit/form/VerticalRule", "dijit/form/VerticalRuleLabels"]);</script>
</head>
<body class="claro">
    <div id="verticalSlider" data-dojo-type="dijit/form/VerticalSlider"
    value="6" minimum="-10" maximum="10" discreteValues="11"
    intermediateChanges="true"
    showButtons="false" style="height:400px;" name="verticalSlider">

</div>

Soweit ich das verstehe müßte man alles zwischen <head> und </head> sogar weglassen können, da eh schon vom IPS WF geladen, oder ???

Egal, es geht so oder so nicht.

In der Console vom Chrome krieg ich keine Fehlermeldung, im Chrome Sourccode Browser krieg ich das:

dojo_glump.JPG
dojo_glump.JPG1066×270 41.4 KB

Sieht doch irgendwie nicht schlecht aus, kommt aber trotzdem nix.:mad: Die Pfade zur dojo.js und zu clarocss funktionieren auch.

Bin da leider etwas hilflos…

Vieleicht kann mir da jemand nochmal unter die Arme greifen.
thx
bb

4

So, nach endlosem Try & Error hab ich es nun geschafft zumindest sowas ähnliches wie einen Slider ins WF zu malen.

Vielleicht hat da ein Wissender eine Antwort:
Warum klappt das nur wenn ich den Code in eine eigene Datei schreibe und per Iframe einbinde ?
Direkt ins HTMLBOX schreiben tut einfach nix, macht aber im Browser auch keine JS Fehler.

Der von paresy verlinkte Samplecode klappt gar nicht, die ganze Jojo Module weigern sich zu laden.
Erst als ich anstatt dem „/“ einen „.“ gesetzt habe klappte es. Sehr merkwürdig…kann mich da jemand erleuchten ?

Mit dem Code unten krieg ich zumindest mal den Slider, wobei die Style Tags irgendwie noch nicht berücksichtigt werden.

<html >
<head> 
<link rel="stylesheet" href="/../dojo/dijit/themes/claro/claro.css"> 

<script>dojoConfig = {parseOnLoad: true}</script><script src="/../dojo/dojo/dojo.js"> 
</script>
<script> dojo.require("dojo.parser");</script>
<script> dojo.require("dijit.form.VerticalSlider");</script> 
<script> dojo.require("dijit.form.VerticalRule");</script> 
<script> dojo.require("dijit.form.VerticalRuleLabels");</script> 
</head> 

<body class="claro"> 
	 
    <div id="verticalSlider" data-dojo-type="dijit.form.VerticalSlider"
    value="6" minimum="-10" maximum="10" discreteValues="11"
    intermediateChanges="true"
    showButtons="false" style="height:200px;" name="verticalSlider">
    <ol data-dojo-type="dijit.form.VerticalRuleLabels" container="leftDecoration"
        style="width:1.5em;font-size:75%;color:gray;">
        <li> </li>
        <li>20%</li>
        <li>40%</li>
        <li>60%</li>
        <li>80%</li>
        <li> </li>
    </ol>
     <div data-dojo-type="dijit.form.VerticalRule" container="rightDecoration"
        count="11" style="width:5px;"></div>
    <ol data-dojo-type="dijit.form.VerticalRuleLabels" container="rightDecoration"
        style="width:1em;font-size:75%;color:gray;">
        <li>0%</li>
        <li>50%</li>
        <li>100%</li>
    </ol>
 
   
</div>  
</body>
</html>

gute Nacht
bb