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.

Utilizzo di OneDrive 'Files on Demand' in Windows 10 Insider

Tornando a Build 2017, Microsoft ha presentato in anteprima una nuova funzionalità OneDrive chiamata Files on Demand . Se sei un partecipante al programma Insider di Windows 10, ora puoi mettere le mani su questa funzionalità mentre Microsoft ha distribuito File su richiesta a coloro che fanno parte del Fast Ring del programma Insider di Windows 10.C

(Consigli tecnici e di design)

Inserisci filtri interattivi per video e foto con Spotliter [iOS]

App come Instagram ti consentono di aggiungere livelli alle tue foto. Questo tipo di app è molto popolare grazie alla funzionalità di filtro fotografico, che consente agli utenti di creare fotografie con un certo tipo di aspetto. Alcuni sviluppatori hanno provato lo stesso con il video, dove viene aggiunto un filtro per ottenere effetti di colore diversi .S

(Consigli tecnici e di design)