Wie erstellen Sie einen einfachen spinner in HTML? Oder jQuery

Ist möglich, ein spinner in HTML? Nur HTML? Einen tag vielleicht?

Mein HTML:

<label for="time">Tempo:</label>
<input type="text" name="time" id="time" value="" style="width: 150px;" />

Wenn nicht können wir einige jquery? So etwas wie "datepicker"
oder wie diese

$("#time").spinner({ options });

Etwas wirklich einfaches 😀

Fand ich das, aber ich kann nicht verstehen, wie es zu benutzen.

http://docs.jquery.com/UI/Spinner/spinner

EDIT:

WENN ICH DIESES VERWENDEN:

<label for="time">Tempo:</label>
<input type="number" name="time" id="time" value="0" style="width: 150px;" />

(Die diference ist die Art des Eingangs)

Chrome erstellt automatisch die spinner (+1/-1), aber das gleiche geschieht nicht mit firefox (und nicht getestet auf IE)

Warum immer noch Leute die andere Browser verwenden?! 😀

Dass spinner ist eine Kontrolle zu tun, Dinge wie +1/-1
und das ist das, was ich will!!! Ich will zu +1 und -1 den Wert der Eingabe.
Ich bitte um Entschuldigung, aus der un-bearbeitete Frage ich hatte den Eindruck, Sie wollte ein lade-gif Typ 'spinner'

InformationsquelleAutor Rodrigo Graça | 2012-05-03

  1. 1

    https://github.com/btburnett3/jquery.ui.spinner

    Laden css und javascript unter Verwendung der jeweiligen tags

    <script type="text/javascript" src="js/jSpinner/ui.spinner.js"></script>
.
.
.
<link rel="stylesheet" type="text/css" href="css/jSpinner/ui.spinner.css" />


.
$("#time").spinner({
    min : 0,
    max : 100,
    showOn : 'both'
});

    PS:bitte laden Sie jquery und jquery.ui-plugin vor dem laden des ui.spinner.js

    Aber es gibt keine native suport in jQuery UI ? (Nur mit jqueri.ui-plugin und jquery)
    Wie ich schon sagte, auf mein EDIT, wenn ich ( type="number" ) chrome erstellt automatisch die spinner, aber das gleiche geschieht nicht auf firefox (11) und ich will nicht zu sehen, im IE -: (
    kann sein, dass ein feature von chrome...
    das ist ok, aber die Lizenzierung (GPL v2) macht es ein Schmerz in den Hintern für den Einsatz auf kommerziellen Produkten

    InformationsquelleAutor Ankur Verma

  2. 5

    http://github.com/fgnass/spin.js

    • Keine Bilder
    • keine externe CSS -
    • Keine Abhängigkeiten
    • In hohem Maße konfigurierbar
    • Unabhängig von der Auflösung
    • Verwendet VML als fallback in alten IEs
    • Wird @keyframe-Animationen, fallen wieder zurück an die setTimeout () -
    • Funktioniert in allen gängigen Browsern, einschließlich IE6
    • Kleine Stellfläche (~1.9 K gzipped)
    Er meinte ein Eingabefeld, Drehfeld mit Pfeilschaltflächen nach oben und unten, kein Ladesymbol

    InformationsquelleAutor Chad Hedgcock

  3. 2

    Den HTML-code für die spinner box sieht wie folgt aus:

    <input type="number" min="0" max="50" step="2" value="0" size="6" name="cantitate">

    Ist der TYP "number". Die MIN-und MAX-sind die start-und end-Werte, die Sie möchten für den Wert. Die SCHRITT-Attribut wird das steigen oder sinken im Wert, wenn Sie klicken Sie auf die Pfeile. Der WERT ist der Standardwert, der im Feld angezeigt, wenn die Seite geladen wird, und auch der Wert, der zurückgegeben wird, wenn das Formular gesendet wird. Die GRÖßE bezieht sich darauf, wie breit Sie wollen die box.

    InformationsquelleAutor Adrian S.

  4. 1

    Könnten Sie die spinner vom kommenden jQuery UI 1.9, obwohl Sie haben würde, glücklich zu sein mit dem verwenden der Bibliothek in der beta. Hier ist eine demo.

    Chrom (8) und Opera (11) beide verwenden die native HTML5-spinner, aber es ist hässlich IMO.

    InformationsquelleAutor Ian Stanway

Schreibe einen Kommentar