pageguide.js è un plugin per jQuery per implementare una guida visiva interattiva sugli elementi delle pagine web. Invece di ingombrare l’interfaccia con messaggi di aiuto statici o testi esplicativi, aggiungere pageguide.js consente agli utenti di conoscere le nuove caratteristiche e le funzioni del vostro sito Web, evidenziandole dinamicamente, in modo lineare e chiaro. Guardate la demo per vedere il plugin in azione.
Esempio di implementazione di pageguide.js
Codice da aggiungere all’interno del tag
<HEAD>
|
1 2 |
<script src="pageguide.js"></script> <link rel="stylesheet" href="stylesheets/pageguide.css"> |
Inizializzazione della funzione
|
1 |
$(document).ready(function() { tl.pg.init({ /* optional preferences go here */ }); }); |
Esempio di codice HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<ul id="tlyPageGuide" data-tourtitle="REPLACE THIS WITH A TITLE"> <li class="tlypageguide_left" data-tourtarget=".first_element_to_target"> <div> Here is the first tour item description. The number will appear to the left of the element. </div> </li> <li class="tlypageguide_right" data-tourtarget="#second_element_to_target"> <div> Here is the second tour item description. The number will appear to the right of the element. </div> </li> <li class="tlypageguide_top" data-tourtarget=".third_element_to_target"> <div> Here is the third tour item description. The number will appear above of the element. </div> </li> <li class="tlypageguide_bottom" data-tourtarget="#fourth_element_to_target"> <div> Here is the fourth tour item description. The number will appear below of the element. </div> </li> </ul> |
Demo Download Info | Sito Web | Autore
pixolo ads
| Articolo pubblicato 5 anni fa nella categoria 
