Yayasan Joyride
Joyride adalah efek dari fungsi JavaScript penyihir, membuat sebuah contoh sebagai berikut:
contoh
<H3 id = "pertama"> Pertama berhenti! </ H3>
<H3 id = "kedua"> Kedua berhenti! </ H3>
<- The joyride :! Harus ditempatkan di bagian bawah halaman Anda, tapi di dalam <body> ->
<Ol class = "joyride-daftar " Data-joyride>
<Li Data-id = "pertama ">
<P> Pertama berhenti. Perjalanan telah dimulai! </ P>
</ Li>
<Li Data-id = "kedua ">
<H4> Berhenti Kedua </ h4 >
<P> Apa HTML yang valid akan bekerja di dalam Joyride. </ P>
</ Li>
<Li Data-tombol = "End ">
<H4> End Berhenti </ h4 >
<P> Tur berakhir. Anda dapat pergi kembali ke halte sebelumnya atau menutupnya. </ P>
</ Li>
</ Ol>
<! - Mulai Joyride Setelah Inisialisasi - >
<Script>
$ (Dokumen) .ready (function () {
$ (Dokumen) .foundation ( 'joyride', 'start');
})
</ Script>
Contoh analisis
Contoh di atas, kita membuat dua elemen, masing-masing memiliki ID terpisah. Dua elemen set awal dan posisi akhir joyride.
Kami <ol> atau <ul> untuk menambahkan elemen data-joyride properti dan .joyride-list kelas untuk membuat Joyride. Anda harus menentukan dalam kepala dokumen (dalam <body> di kepala). Digunakan pada setiap daftar <li> elemen, masing-masing menambahkan data-id=" value " atribut. nilai atribut harus sama sebelum elemen id. Jadi fungsi navigasi pertama <h3> elemen menggunakan id = "pertama" harus Data-id <li> elemen = "pertama" kesepakatan nilai.
Jika Anda tidak mengelola untuk menghentikan id, itu akan menampilkan kotak modal.
Akhirnya, Joyride JavaScript harus menginisialisasi, kode ini: $(document).foundation('joyride', 'start');