2012-04-11 19 views
0

Ich bin nicht sicher, was das heißt, so kann ich nicht suchen, aber wenn Sie http://vps.net/product/cloud-servers/ gehen und scrollen Sie nach VPS-Knoten, wie wird dies erstellt? und gibt es irgendein Tutorial oder etwas, das ich mir anschauen kann? Was für ein Slider ist das?Einen Slider so erstellen?

Danke!

+1

jQuery UI Slider hat, dass grundlegende Funktionen: http : //jqueryui.com/demos/slider/#steps –

Antwort

2

Sie können dies mit dem jquery ui Schieber: http://jqueryui.com/demos/slider/

+0

also könnte ich genau den gleichen Slider damit erstellen? Ich habe bemerkt, dass es mehrere Felder gleichzeitig ändert und ich habe dieses Beispiel nicht mit dem Schieberegler gesehen, den Sie verbunden haben, wollen nur sicherstellen, dass es funktioniert –

+0

Ja. Offensichtlich haben sie etwas Arbeit geleistet, um sie anzupassen, aber wenn Sie sich den Quellcode ansehen, verwenden sie das. –

3

Sie sind ein jQuery-UI Slider verwenden, mit einem angepassten Rückruf, der die kleinen Knoten Boxen Highlights:

$('#slider').slider({ 
    range: "max", 
    min: 1, 
    max: 15, 
    step: 1, 
    slide: function(event, ui) { 
     // Un-highlight nodes 
     $('.node').removeClass('highlight'); 
     // Highlight all nodes up to value selected 
     $('.node:lt('+ui.value+')').addClass("highlight"); 
    } 
}); 

Dies ist mein Beispiel Code, ich wollte nicht durch ihren verschleierten Code analysieren, um zu sehen, was sie eigentlich für ihren Rückruf getan haben. Dem ist wahrscheinlich sehr ähnlich.

Demo: http://jsfiddle.net/jtbowden/A8ccw/1/

Sie können von dem Schritt Verhalten loszuwerden, wenn Sie den step Wert auf einen Bruchwert zu ändern, wie .01 und dann Math.floor() mit Ihrem Highlight Index zu bestimmen.

Demo: http://jsfiddle.net/jtbowden/A8ccw/4/

Hier ist eine Demo, die mehrere Datenfelder aktualisiert:

Demo: http://jsfiddle.net/jtbowden/A8ccw/8/

+0

Schön gemacht, Jeff B. – Marc

Verwandte Themen