IntroJs come raggiungere le aree evidenziate?

Question

Came across intro.js - un modo molto interessante per guidare gli utenti su come utilizzare le interfacce software. Non ho esaminato la fonte in profondità, ma mi chiedevo se qualcuno potesse spiegare brevemente che cosa fa il codice per ottenere le aree evidenziate (in particolare dimensioni/posizione/zindexing) per ottenere l'effetto.

Grazie in anticipo Jay

Link: http://usablica.github.com/intro.js/

Answer 1

Bene - piuttosto semplice.

1. fare un div overlay con larghezza/altezza 100% con z-index diciamo 1000 - questo è il bacground principale con l'opacità nera;
2. crea un altro overlay che evidenzia l'elemento specifico del "passo" con z-index più della sovrapposizione di base diciamo 1001 - questo è l'elemento "bianco" con la spiegazione del contenitore del suggerimento;
3. infine imposta l'elemento originale dalla pagina in posizione: relativo e con lo z-index più alto (1002) per essere sopra tutti loro.

Answer 2

Sono Afshin, l'autore di Intro.js. Lascia che ti presenti come funziona davvero.

In un elemento focalizzato/evidenziato, due elementi separati sono:
1) Crea un livello di supporto. Il livello di supporto è lo strato angolare bianco arrotondato nell'elemento focalizzato.
2) Modificare z-index e position dell'elemento di destinazione per portare l'elemento in primo piano rispetto a tutti gli altri elementi nella pagina.

Se la posizione dell'elemento a bersaglio (l'elemento che deve essere focalizzato/evidenziata) è:

assoluto/relativo: IntroJs basta impostare l'elemento di destinazione z-index a 9999999, quindi l'elemento di destinazione va al fronte di tutti gli altri elementi nella pagina.

Statico: Ora, IntroJs impostare la posizione elemento di destinazione per relative e quindi impostare il z-index a 9999999.

Ora, l'elemento di destinazione è nella parte anteriore di tutti gli altri elementi nella pagina. Quindi, resta un ultimo passaggio, creare l'elemento helper.

Per la realizzazione dello strato di supporto, IntroJs appena ottenere l'altezza, larghezza, superiore e sinistra dell'elemento a bersaglio e quindi creare un div con classe introJs-helperLayer (e la posizione absolute) ed aggiungerla body.

Conclusione

Per focalizzare su un elemento, IntroJs fa due fasi, dapprima creando uno strato helper (strato angolo arrotondato nella pagina) e quindi rendere il contenuto dell'elemento a bersaglio relative per portarla a fronte di tutti gli elementi nella pagina.