Fondation Joyride
Joyride est l'effet d'un assistant de fonction JavaScript, créer une instance comme suit:
Exemples
<Id H3 = "first"> Premier arrêt! </ H3>
<H3 id = "second"> Deuxième arrêt! </ H3>
<- Le joyride :! Doit être placé au bas de votre page, mais à l' intérieur <body> ->
<ol class = "joyride-list " data-joyride>
<Li données id = "first ">
<P> Le premier arrêt. Le trajet a commencé! </ P>
</ Li>
<Li données id = "second ">
<H4> Deuxième arrêt </ h4 >
<P> Toute HTML valide travaillera à l' intérieur du Joyride. </ P>
</ Li>
<Li données-button = "End ">
<H4> Fin Arrêter </ h4 >
<P> La visite est terminée. Vous pouvez revenir à l'arrêt précédent ou le fermer. </ P>
</ Li>
</ Ol>
<! - Début Joyride Sur Initialisation - >
<Script>
$ (Document) .ready (function () {
$ (Document) .foundation ( 'joyride', 'start');
})
</ Script>
Des exemples d'analyses
L'exemple ci-dessus, nous créons deux éléments, chacun a un ID séparé. Deux éléments définit le joyride de début et de fin de course.
Nous <ol> ou <ul> pour ajouter l'élément de data-joyride propriété et .joyride-list de classe pour créer un joyride. Vous devez définir dans la tête du document (dans le <body> dans la tête). Utilisé sur chaque liste <li> éléments, chaque ajout de data-id=" value " attribut. Valeur d'attribut doit être le même avant l'élément id. Ainsi , la première fonction de navigation <h3> élément avec id = "first" doit être données-id élément <li> = "first" accord de valeur.
Si vous ne parvenez pas à arrêter l'identifiant, il affichera une boîte modale.
Enfin, Joyride nécessite JavaScript afin de l' initialiser, le code est: $(document).foundation('joyride', 'start');