Change language
Python.Engineering Wiki Schede Javascript

Schede Javascript

__main__ Python module | absolute | Bootstrap JavaScript library | code Python module | COM PHP module | Ctype PHP module | dis Python module | Ev PHP module | html Python module | iat | io Python module | JavaScript | jQuery JavaScript library | os Python module | parallel PHP module | pty Python module | Python Development | Python functions | Radius PHP module | re Python module | select Python module | site Python module | SPL PHP module | StackOverflow | time Python module | UI PHP module
Michael Zippo Michael Zippo 04.11.2021

Le schede CSS sono davvero ottime per visualizzare le informazioni associate in un’unica posizione di facile navigazione. Essenzialmente sembrano divisori a schede che vedresti in una scatola di ricette o in un raccoglitore. Ecco alcuni esempi di siti Web che utilizzano la navigazione a schede:

Mentre osservi questi due siti, pensa ai vantaggi dell’utilizzo di un tale componente dell’interfaccia utente sui siti. Quali problemi risolve? Per quale tipo di informazioni la navigazione a schede sarebbe una buona implementazione?

Quando è necessario raggiungere una struttura dell’interfaccia utente che organizza testo o informazioni in componenti significativi e li visualizza sullo schermo senza prendere troppo spazio, la navigazione a schede è una scelta saggia. Parleremo della navigazione a schede in modo più approfondito man mano che inizieremo a usare JavaScript, jQuery e/o Bootstrap, ma c’è anche un’implementazione che potremmo usare che richiede solo HTML e CSS puro. Diamo un’occhiata alla configurazione:

Imposta il tuo HTML:

Vai avanti e imposta il tuo codice HTML standard con un contenitore all’interno del corpo che fungerà da contenitore principale per il progetto. Puoi chiamarlo come preferisci nell’attributo class, ma io lo chiamerò class="tabs". Finora, il tuo codice HTML dovrebbe essere simile a questo:

All’interno delle "schede" e chiameremo ciascuno con una classe di tab. Questo rappresenta ciascuna delle quattro schede che scriveremo oggi. Conterrà il nostro input, le etichette delle schede e il contenuto delle schede. Creiamo contenitori vuoti per tutti questi:

All’interno del nome della classe di contenuto ci sarà il nostro contenuto. Puoi utilizzare qualsiasi contenuto desideri, ma è prassi standard utilizzare il contenuto associato in una scheda.

è ora di iniziare i CSS:

Quando si tratta di scrivere il CSS, inizia dal contenitore più grande e procedi fino al contenitore più piccolo. Ecco il minimo di cui abbiamo bisogno da fare per farlo funzionare:

  1. Imposta un selettore di caratteri jolly su un box-sizing: border-box.
  2. Nel contenitore principale, dobbiamo avere la proprietà display impostata su flex e la posizione impostata su relative. Display: flex consente alle schede di essere posizionate una accanto all’altra in una riga e la posizione relativa funge sostanzialmente da confine o recinzione che contiene il contenuto della scheda.

A questo punto vedrai quelli che sembrano quattro blocchi di testo con un pulsante di opzione e alcuni contenuti. Quindi dobbiamo trovare un modo per mostrare il blocco selezionato e nascondere gli altri blocchi.

  1. Nel contenitore .tab, imposteremo il stile per l’etichetta:
    1. 1px bordo solido in qualsiasi colore desiderato.
    2. Imbottitura: 5px, 10px ‚Äì aggiungerà dello spazio attorno al testo dell’etichetta
    3. Border-radius 10px, 10px, 0px, 0px ‚Äì questo renderà l’etichetta più simile a una scheda tradizionale.

Se controlli il tuo lavoro ora, vedrai che le etichette hanno la radio circolare pulsanti alla loro sinistra. Quindi sembra più una scheda tradizionale, ma per mantenere ancora l’attributo selezionato del pulsante, dobbiamo nascondere la parte circolare del pulsante di opzione.

  1. Per selezionare effettivamente il pulsante, usiamo .tab [type=’radio’]. Per nasconderlo, impostiamo display su nessuno.

Quindi, dobbiamo affrontare il contenuto effettivo in modo che mostri solo una scheda alla volta.

  1. Selezionare il div del contenuto e quindi impostare la posizione su assoluto. Quando è impostata la posizione assoluta, il div può essere impostato ovunque all’interno del genitore relativo. Usando top, right, left e bottom, puoi impostare il contenuto dove vuoi all’interno del div genitore. In questo caso, impostare le proprietà left e right su 0. Vogliamo anche creare un bordo e impostare un colore di sfondo su un colore non trasparente.
  1. Impostare lo z-index di la scheda selezionata metterà in primo piano il pannello di quella scheda. Per fare ciò, seleziona il pulsante selezionato e il suo contenuto. Per farlo usiamo [type=‚Äôradio‚Äô]:checked ~ label ~ .content. Il "~ " tra gli elementi in CSS ci dice che vogliamo la classe di contenuto che si verifica dopo un elemento etichetta che si verifica dopo un pulsante di opzione selezionato.
  1. Per mostrare quale scheda è attiva , imposta [type=‚Äôradio‚Äô]:checked ~ label su un diverso colore di sfondo.

Ora quando l’utente fa clic su ciascuna delle schede, dovrebbe essere in grado di passare da una all’altra senza vedere il contenuto degli altri pannelli. Questo è il minimo necessario per far funzionare la navigazione a schede Prova a giocare con il CSS per cambiare lo stile! Un’implementazione funzionante è codificata di seguito: