2008-10-06 10 views
43

Ich muss einen benutzerdefinierten Lautstärkeregler für ein WMP-Objekt erstellen. Der aktuelle Schieberegler ist kompliziert zu modifizieren und zu verwenden, gibt es eine einfache Möglichkeit, einen Schieberegler auf einer HTML-Seite zu generieren, deren Wert an eine JavaScript-Funktion übergeben werden kann?Gibt es einen einfachen JavaScript-Slider?

+6

Mit HTML5 können native Schieberegler deklariert und CSS-formatiert werden. '' Probieren Sie es aus! –

+0

Aber leider funktioniert in Firefox noch nicht :( – cprcrack

+0

** HIER !!!!!!!!!!!! ** - http://stackoverflow.com/questions/22904852/html-scroll-box-with -horizontal-controls-for-vertical-scrolling/ –

Antwort

29
+5

funktioniert nicht so gut auf Handy ohne die zusätzlichen Bibliotheken von [ jquery-touch-punch] (https://github.com/furf/jquery-ui-touch-punch). Und dies steht auch in Konflikt mit '$ .fn.button' von Twitter Bootstrap, also pass auf: –

19

HTML 5 mit Webforms 2 einen <input type="range"> bereitstellt, die der Browser für Sie eine native Schieber machen erzeugen. Leider haben alle Browser keine Unterstützung dafür, aber hat alle Webforms 2-Steuerelemente mit js implementiert. IIRC die js ist intelligent genug zu wissen, ob der Browser das Steuerelement implementiert hat, und löst nur aus, wenn es keine native Implementierung gibt.

Aus meiner Sicht sollte es als beste Methode angesehen werden, wenn möglich, die nativen Steuerelemente des Browsers zu verwenden.

10

jQuery und Yahoo sind wahrscheinlich die Standards, aber ich habe festgestellt, vor kurzem Dragdealer, die sehr leicht und einfach zu installieren und wieder Haut aussieht ...

http://code.ovidiu.ch/dragdealer/

+0

dieser ist gut gemacht, und hat eine Reihe von interessanten Beispielen. – Dave

34

hey ich habe meine eigene JS Schieber gerade erstellt, weil ich ein genug der schweren JQuery UI hatte. Interessiert, um die Gedanken der Leute zu hören. War schon 5 Stunden dabei, also wirklich sehr früh.

jsfiddle_slider

+0

Ni ce Beispiel - Ich suche nach einem Steuerelement, um die Deckkraft eines Bildes über ein anderes zu verblassen, also könnte dies versuchen. –

+0

Danke für das Beispiel - ein Mangel an einfachen Schieberegler, die nicht Teil einer viel größeren Bibliothek sind, war wirklich nervig. Das motiviert mich zu versuchen, einfach meinen eigenen zu schreiben, der meine Bedürfnisse erfüllt. –

+0

Für diejenigen von euch, die sich wundern: WinXP/IE7 funktioniert super, WinXP/IE6 funktioniert, aber CSS optimiert, iOS5/Safari funktioniert nicht (rate andere Touch-Geräte gewonnen ' t entweder). Für so ein kleines Stück Code ist es sehr beeindruckend, Tolles Werk Luc! Vielen Dank! –

-1

Der folgende Code sollte ausreichen, um Sie zu erhalten begonnen. Getestet in Opera, IE und Chrome.

<script> 
var l=0; 
function f(i){ 
im = 'i' + l; 
d=document.all[im]; 
d.height=99; 
document.all.f1.t1.value=i; 
im = 'i' + i; 
d=document.all[im]; 
d.height=1; 
l=i; 
} 
</script> 
<center> 
<form id='f1'> 
<input type=text value=0 id='t1'> 
</form> 
<script> 
for (i=0;i<=50;i++) 
{ 
s = "<img src='j.jpg' height=99 width=9 onMouseOver='f(" + i + ")' id='i" + i + "'>"; 
document.write(s); 
} 
</script> 
+13

Inline-Ereignisse, 'document.write', das'

'Element - es ist wie 1999 wieder! –

16

Ein einfacher Schieber: ich dies in reine HTML5 gerade getestet haben und es ist so einfach!

<input type="range"> 

Es funktioniert wie ein Charme auf Chrome. Ich habe noch keine anderen Browser getestet.

+0

Könntest du ein bisschen mehr klären? –

+1

Ich denke, Sie sollten '' innerhalb einer HTML-Datei schreiben und diese Datei in einem Browser durchsuchen, der HTML5 akzeptiert. Sie würden einen einfachen Schieberegler sehen. –

+0

okay! Ich verstehe. –