Ich brauche kreisförmige Fortschrittsanzeige. Wie soll ich das umsetzen?Circular Fortschrittsanzeige mit jQuery
Was ich suchen ist, was jQuery UI auf ihrer Planungsseite hat, aber es ist noch nicht implementiert. Ich bin nur neugierig, ob jemand das schon einmal implementiert hat. Siehe Punkt 6 in der folgenden Abbildung.
http://wiki.jqueryui.com/ProgressIndicator
Wie, one of these? Sie brauchen dafür kein Plugin. Nur .show() und ein GIF wie erforderlich (oder fügen Sie es in das DOM, was auch immer Ihr Boot schwimmt).
Was laden Sie? Ein einfaches Beispiel wäre:
Prost
Der href für '# load' sollte'/path/to/animation.gif' sein und Sie sollten 'event.preventDefault() 'in' $ (' # load ') verwenden. Click (...) '. - Auf diese Weise funktioniert die Seite tatsächlich sinnvoll, wenn der Benutzer JS deaktiviert hat. –
Sie sagen also, wenn der Benutzer auf den Lade-Link klickt und die Animation sieht (die tatsächliche .gif-Datei), wenn er JS deaktiviert hat, ist das sinnvoll? javascript: void (0) scheint sehr gut zu funktionieren, sogar in den API-Beispielen von YouTube ... Ich denke, es ist besser, nichts zu tun, als zu einem animierten Gif zu führen. – Claudiu
Nicht jQuery, aber Sie könnten einen Blick auf der Raphaël JavaScript-Bibliothek, und in-insbesondere die polar clock example, und das ‚arc‘ benutzerdefinierten Attribute nehmen wollen. Ich habe Raphaël und jQuery zusammen verwendet, um einige statische kreisförmige Fortschrittsbalken zu erzeugen - es funktioniert ganz gut.
Danke @ matt-austin Diese Bibliothek sieht wirklich cool aus. Ich werde versuchen, ein kleines Plugin zu implementieren, um eine einfache zeitgesteuerte zirkuläre Animation mit grundlegenden Optionen und einem Callback zu erstellen. Ich werde hier eine Antwort auf das Projekt auf GitHub posten, wenn ich Erfolg habe. –
Sie können jQuery verwenden, um die Hintergrundposition zu verschieben und die entsprechende css-Sprite-Image-Tabelle dafür zu verwenden oder zu erstellen.
natürlich müssten Sie 100 Sprite-Zellen haben, und dann müssten Sie eine Liste von Hintergrundpositionskoorden in einem mehrdimensionalen Array/Tabelle/Wörterbuch kompilieren.
progressMeterSpriteCoords = [
{x: 0, y: 0}, //0%
{x: -16, y: 0}, //1%
{x: -32, y: 0}, //2%
... etc etc..
{x: -320, y: -0}, //19%
{x: 0, y: -16}, //20%
{x: -16, y: -16}, //21%
{x: -32, y: -16}, //22%
... etc etc..
{x: -320, y: -16}, //29%
... etc etc..
{x: -320, y: -320} //99%
]
Leider war meine Frage vielleicht etwas zu vage, aber was bedeutete, dass ich war das, was jUqery ui Team plant: http://wiki.jqueryui.com/ProgressIndicator siehe 2 - Visuelle Gestaltung 6. Artikel. Diese Art von circular Fortschritt, der sagt, wie viele Präzeenze abgeschlossen sind. – newbie