2013-08-23 16 views
12

Cerco un filatore numerica che si integra con Twitter Bootstrap 2.3, utilizzando l'HTML5 input type="number"Cross-Browser numerico Spinner/Stepper per Bootstrap

stepper

<input type="number" id="income" name="income" value="10"> 

Secondo caniuse al momento di questa scrivendo, solo Chrome rende questo elemento come vorrei. Probabilmente Firefox lo farà presto e tra non più di 5 o 10 anni da oggi, IE presenterà anche una soluzione.

Ho testato un paio di questi, ma tutti avevano 3+ anni, si basano sull'interfaccia utente di jQuery e non si integrano perfettamente con Bootstrap.

Nel frattempo ero solo curioso di sapere se ci sono librerie jQuery o altre soluzioni che rendono l'input come nello screenshot.

+4

Il problema con questo tipo di interpretazione è che è molto difficile da utilizzare su dispositivi di piccole dimensioni. Ecco perché ho creato [Bootstrap TouchSpin] (http://www.virtuosoft.eu/code/bootstrap-touchspin/), che è più facile da gestire sui dispositivi touch ed è compatibile con browser diversi. –

+2

Grazie per il collegamento –

risposta

8

Recentemente ho trovato la biblioteca Fuel UX che comprende anche un spinner.

Spinner Fuel UX

4

Non sono sicuro se questo è uno di quelli che si è verificato, ma è parte del set ufficiale jQuery UI di widget:

http://jqueryui.com/spinner/

+0

Grazie per la risposta. Ho già controllato lo Spinner dall'interfaccia utente di jQuery, ma non si integra bene con quello che ho. –

9

Che dire di questo bootstrap-spinedit?
È piuttosto vecchio ma funziona ancora come previsto in questi giorni.

NOTA: le demo non funzionano perché fanno riferimento a script non esistenti.

È possibile vedere come funziona here.

HTML

<input type="text" class="aSpinEdit" /> 

Javascript

$('.aSpinEdit').spinedit({ 
    minimum: -10, 
    maximum: 50, 
    step: 1 
}); 
+0

Finora la soluzione migliore che ho provato. Sfortunatamente il progetto in sé non sembra essere molto popolare o attivo. –

+0

Sì, lo so ma sembra che l'autore stia ancora funzionando e risolvendolo. – LeftyX

+0

sembra non funzionare in b4 –