Convertire la casella di controllo HTML in iOS 7 Switch con Switchery.js

La casella di controllo è molto utile per fornire input agli utenti. Quando gli utenti inseriscono il valore reale, visualizza un segno di spunta all'interno della quadratino quadrata. Personalizzare l'aspetto della casella di controllo può essere fatto facilmente tramite CSS. Anche così, la personalizzazione riguarda solo la casella e controlla lo stile . Personalizzare la casella di controllo con un design veramente diverso richiede un bel po 'di codifica.

Con l'aiuto di Switchery, tuttavia, la personalizzazione della casella di controllo è un gioco da ragazzi. È in grado di convertire automaticamente l'elemento checkbox in un bellissimo pulsante di commutazione simile a iOS7. Gli interruttori possono anche essere personalizzati per adattarsi perfettamente al tuo design. Controlliamolo.

Iniziare con Switchery

Switchery è una libreria javascript standalone gratuita. Per installarlo, devi solo includere il file JavaScript e il file di stile di Switchery nel tuo web. Puoi ottenere entrambi i file da GitHub.

Per convertire la tua casella di controllo vecchio stile, includi semplicemente l'elemento checkbox con una classe che sarà riferita a Switchery.

Anche dare lo stato iniziale della casella di controllo è molto semplice. Puoi farlo includendo l'attributo checked all'interno di HTML per verificare lo stato al primo caricamento. Ad esempio, aggiungeremo una classe demo in una casella di controllo con lo stato selezionato in questo modo:

Per ora, la casella di controllo non cambia ancora. Dobbiamo ancora aggiungere il seguente codice javascript nell'HTML. Qui è dove inseriamo la classe di checkbox definita e forniamo alcune opzioni (se necessario).

Questo è tutto!

Personalizza l'interruttore

Per dare qualche opzione, può essere fatto all'interno del javascript. Questa opzione può modificare l'aspetto dell'interruttore predefinito. Le seguenti sono tutte le opzioni disponibili:

• color : per cambiare il colore dell'elemento interruttore, lavorare con valore HEX o RGB
• secondaryColor : per cambiare il colore dello stato "off" dell'ombra e del bordo dello switch
• className : personalizza il nome della classe dell'elemento switch in stile switchery.css
• disabled : per abilitare o disabilitare lo switch su eventi click, riempito con booleano (vero o falso)
• disabledOpacity : per cambiare l'opacità del commutatore quando disabled è vero, va da 0 a 1
• speed : modifica la durata del tempo di transizione, ad es. "0.1s", "0.5s", "2.2s"

Ad esempio, con il nostro interruttore precedente, cambiamo il suo colore primo e secondario. Nella variabile init, dopo l'attributo elem, basta mettere l'opzione all'interno di una coppia di parentesi come in questo modo:

E questo è il risultato:

Invece di personalizzare solo la progettazione dello stato, ci sono ancora molte opzioni disponibili come la visualizzazione di più interruttori o il collegamento dello switch con altri elementi e il suo stato corrente. Come sempre, la pagina della documentazione è un posto utile da visitare.

Conclusione

Con uno strumento come Switchery, l'adattamento di qualsiasi tipo di design da qualsiasi dispositivo sta diventando sempre più semplice. Ancor più, è stato testato ed è supportato su molti browser moderni come Chrome, Firefox, Opera, Safari e IE8 +. Se si desidera adattare un altro design di widget dell'interfaccia utente di iOS 7, è possibile controllare Powerange per il controllo del cursore dell'intervallo.

10 poster a tema fumetto per insegnarti lezioni di vita

Con una grande quantità di risorse a nostra disposizione, a volte cerchiamo piccole porzioni di saggezza da Internet o dalle persone che ci circondano. I fumetti di solito non sono la prima scelta di una persona sulle meditazioni della vita, ma ci sono sicuramente alcune gemme che possono darti un'idea e farti ridere anche tu.

(Consigli tecnici e di design)

20 bellissime illustrazioni di copertina del libro per bambini

Tutti noi abbiamo un posto speciale nei nostri cuori per i libri per bambini. Quando eravamo giovani, hanno stimolato la nostra immaginazione e ci hanno calmati prima di dormire. Molti di noi ricordano ancora molti libri della nostra infanzia e, se sei come me, anche la copertina di molti di loro.Questa è la difficoltà di progettare una copertina di un libro: l'illustrazione deve essere un'anteprima della storia e anche attraente abbastanza da invogliare i lettori ad aprire il libro.

(Consigli tecnici e di design)