Latest web development tutorials

Stiftung Joyride

Joyride ist die Wirkung eines Funktionsassistenten JavaScript, um eine Instanz erstellen, wie folgt:

Beispiele

<! - Elemente , die die Tour Kontrolle hält ->
<H3 id = "first"> Erste stoppen! </ H3>
<H3 id = "zweite"> Zweiter Halt! </ H3>

<- Die joyride :! Muss werden am unteren Rand der Seite platziert, aber innerhalb von <body> ->
<Ol class = "Joyride-Liste " Daten-joyride>
<Li Daten-id = "first ">
<P> Erster Halt. Die Fahrt hat begonnen! </ P>
</ Li>
<Li Daten-id = "zweite ">
<H4> Zweiter Stopp </ h4 >
<P> Jede gültige HTML funktioniert innerhalb der Joyride. </ P>
</ Li>
<Li Daten-Taste = "End ">
<H4> Ende Stopp </ h4 >
<P> Die Tour ist vorbei. Sie können entweder zum vorherigen Anschlag zurück oder schließen Sie es. </ P>
</ Li>
</ Ol>

<! - Start - Joyride bei der Initialisierung - >
<Script>
$ (Dokument) .ready (function () {
$ (Dokument) .foundation ( 'Joyride', 'Start');
})
</ Script>
Versuchen »

Beispiele für analytische

Das obige Beispiel, wir zwei Elemente erzeugt, die jeweils einen separaten ID. Zwei Elemente setzt die Start- und Endpositionen joyride.

Wir <ol> oder <ul> das Element hinzufügen data-joyride Eigenschaft und .joyride-list Klasse , um eine Spritztour zu erstellen. Sie müssen es im Kopf des Dokuments zu definieren (im <body> im Kopf). Auf jeder Liste <li> Elemente, die jeweils das Hinzufügen data-id=" value " Attribut. Attributwert muss das gleiche vor dem ID - Element sein. So ist die erste Navigationsfunktion <h3> Element mit id = "first" muss sein , Daten-id <li> Element = "erste" Wert Vereinbarung.

Wenn es Ihnen gelingt, die ID nicht stoppen, wird es eine modale Box anzuzeigen.

Schließlich Joyride benötigt JavaScript um es zu initialisieren, ist der Code: $(document).foundation('joyride', 'start');