Padan tutorial kali ini saya akan memberikan materi tutorial jquery plugin yaitu tentang Membuat Steps Wizard Dengan Menggunakan Jquery Plugin , sebelum kita mulai membuatnya saya akan menjelaskan apa yang di maksud dengan steps wizard itu sendiri agar anda dapa memahaminya.
Baiklah kita mulai, sesuai judulnya Membuat Steps Wizard Dengan Menggunakan Jquery Plugin , sebelumnya pernahkah kalian saat mengunjungi suatu website biasanya website tentang pemesanan tiket yang pernah saya temui , lalu melihat bagian halaman website dimana bagian tersebut memiliki alur step by step, misal saat kita memesan tiket lalu akan di bawa ke step selanjutnya, setelah selesai lalu next ke step selanjutnya tetapi tetapp di halaman yang sama.
nah yang kita akan buat kira-kira sama seperti itu ya gaes 🙂
oke kita mulai saja , sebelumnya kalian bisa download JQUERY Pluginya disi SINIÂ Â Download github
Lalu buat file index.html dan paste kan code berikut :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
<!DOCTYPE html> <html> <head> <title>Demo</title> <meta charset="utf-8"> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="js/build/jquery.steps.js"></script> <link href="js/demo/css/jquery.steps.css" rel="stylesheet"> <link rel="stylesheet" href="js/demo/css/normalize.css"> <link rel="stylesheet" href="js/demo/css/main.css"> </head> <body> <div class="content"> <h1>Basic Demo</h1> <script> $(function () { $("#wizard").steps({ headerTag: "h2", bodyTag: "section", transitionEffect: "slideLeft" }); }); </script> <div id="wizard"> <h2>First Step</h2> <section> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ut nulla nunc. Maecenas arcu sem, hendrerit a tempor quis, sagittis accumsan tellus. In hac habitasse platea dictumst. Donec a semper dui. Nunc eget quam libero. Nam at felis metus. Nam tellus dolor, tristique ac tempus nec, iaculis quis nisi.</p> </section> <h2>Second Step</h2> <section> <p>Donec mi sapien, hendrerit nec egestas a, rutrum vitae dolor. Nullam venenatis diam ac ligula elementum pellentesque. In lobortis sollicitudin felis non eleifend. Morbi tristique tellus est, sed tempor elit. Morbi varius, nulla quis condimentum dictum, nisi elit condimentum magna, nec venenatis urna quam in nisi. Integer hendrerit sapien a diam adipiscing consectetur. In euismod augue ullamcorper leo dignissim quis elementum arcu porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum leo velit, blandit ac tempor nec, ultrices id diam. Donec metus lacus, rhoncus sagittis iaculis nec, malesuada a diam. Donec non pulvinar urna. Aliquam id velit lacus.</p> </section> <h2>Third Step</h2> <section> <p>Morbi ornare tellus at elit ultrices id dignissim lorem elementum. Sed eget nisl at justo condimentum dapibus. Fusce eros justo, pellentesque non euismod ac, rutrum sed quam. Ut non mi tortor. Vestibulum eleifend varius ullamcorper. Aliquam erat volutpat. Donec diam massa, porta vel dictum sit amet, iaculis ac massa. Sed elementum dui commodo lectus sollicitudin in auctor mauris venenatis.</p> </section> <h2>Forth Step</h2> <section> <p>Quisque at sem turpis, id sagittis diam. Suspendisse malesuada eros posuere mauris vehicula vulputate. Aliquam sed sem tortor. Quisque sed felis ut mauris feugiat iaculis nec ac lectus. Sed consequat vestibulum purus, imperdiet varius est pellentesque vitae. Suspendisse consequat cursus eros, vitae tempus enim euismod non. Nullam ut commodo tortor.</p> </section> </div> </div> </body> </html> |
Setelah itu coba di jalankan pada browsermasing-masing :
Jika berhasil, akan tampil sesuai gambar di atas,
Baiklah itu saja dari saya untuk artikel tentang Membuat Steps Wizard Dengan Menggunakan Jquery Plugin, sampai bertemu pada artikel selanjutnya