Halo teman – teman, berjumpa kembali dengan saya Hernowo pada tips dan trik Dumet School. Di artikel kemarin kita sudah belajar tentang Cara Install Jquery Mobile dan Fungsinya, dimana yang kita bahas tentang cara instal Jquery mobile dan fungsi nya. Pada kesempatan kali ini saya juga akan memberikan tips dan trik seputar Jquery Mobile yaitu Cara Menambahkan Artikel Dalam jQuery Mobile latihannya adalah membuat sebuah halaman artikel kemudian ketika di klik “read more” maka akan langsung di arahkan ke halaman “description/detail” screen shoot nya seperti gambar di bawah ini
Ketika di klik read more maka langsung di arahkan ke halaman description/detail
Nah, bisa teman – teman lihat pada gambar di atas ini tampilannya khusus untuk mobile jika ukurannya di zoom in atau zoom out halaman akan sama. Baik, saatnya kita implementasikan Cara Menambahkan Artikel Dalam jQuery Mobile. Seperti biasa teman – teman siapkan text editornya dan load terlebih dahulu library Jquery Mobile nya
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
Kemudian save terlebih dahulu, jika sudah kita tambahkan script untuk halaman pertama
<div data-role="page" id="pageone"> <div data-role="header"> <img src="logo.png" style="width: 209px;height: 49px;" class="ui-content"> </div> <div data-role="main" class="ui-content"> <div data-role="navbar"> <ul> <li><a href="#" class="ui-btn-active">Home</a></li> <li><a href="#">Galerry</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact</a></li> </ul> </div><!-- /navbar --> <h5>Selamat Datang Di DumetSchool</h5> <h5>Cara Install Jquery Mobile dan Fungsinya</h5> <p>Pada kesempatan kali ini saya akan memberikan tips dan trik tentang bagaimana Cara Install Jquery Mobile dan Fungsinya, pertama tama saya akan membahas fungsi dari Jquery mobile. Jquery mobil berfungsi untuk membuat tampilan website versi mobile atau smartphone, jQuery Mobile juga mendukung berbagai platform yang berbeda</p> <a href="#pagetwo" data-theme="a" class="ui-btn ui-btn-b">Read More</a> </div> <div data-role="footer" style="text-align: center;"> <p>© copyright <a href="http://www.dumetschool.com" style="text-decoration: none; color:black;">Dumet School</a></p> </div> </div>
Teman – teman tambahkan script di atas ini, save dan jalankan pada browser nya maka tampilan halaman pertama sudah berhasil di buat
Untuk logo teman – teman bisa menggunakan logo apa saja, langkah berikutnya kita tinggal membuat satu halaman lagi untuk mengaktifkan link read more
Kita buat halaman sesuai yang ada pada link read more yaitu #pagetwo seperti yang saya beri kotak berwarna merah pada gambar di atas ini
Teman – teman bisa copy script untuk halaman detail nya di bawah ini tepat di atas nya tag tutup </body>
<div data-role="page" id="pagetwo"> <div data-role="header"> <img src="logo.png" style="width: 209px;height: 49px;" class="ui-content"> </div> <div data-role="main" class="ui-content"> <p>Pada kesempatan kali ini saya akan memberikan tips dan trik tentang bagaimana Cara Install Jquery Mobile dan Fungsinya, pertama – tama saya akan membahas fungsi dari Jquery mobile. Jquery mobil berfungsi untuk membuat tampilan website versi mobile atau smartphone, jQuery Mobile juga mendukung berbagai platform yang berbeda, dari desktop biasa, smartphone, tablet atau perangkat e-reader seperti Nook atau Kindle. Seperti contoh website atau aplikasi sosial media facebook.com dan viva.co.id keduanya memiliki masing – masing dua tampilan yaitu tampilan desktop dan mobil dan masih banyak website atau aplikasi lainnya yang memakai Jquery mobile. Coba teman – teman buka www.facebook.com dan https://m.facebook.com/ lalu buka link juga http://www.viva.co.id/ dan http://m.viva.co.id/, kedua website ini masing – masing memiliki tampilan mobile dan desktop dan bisa kalian bedakan sendiri perbedaannya. Jadi tidak heran Jquery mobile sangat banyak digunakan oleh para programmer untuk membuat aplikasi yang ia buat bisa mendukung berbagai platform, untuk belajar Jquery Mobile tentunya teman – teman wajib mengerti atau menguasai yang namanya html, css, javascript, dan dasar – dasar jquery. Baik, sekarang kita akan coba implementasikan Cara Install Jquery Mobile dan Fungsinya seperti biasa teman – teman siapkan text editornya dan lihat gambar di bawah ini</p> <a href="#pageone" class="ui-btn ui-btn-b">Back To Home</a> <a href="https://www.kursuswebsite.org/cara-install-jquery-mobile-dan-fungsinya/#more-9551" class="ui-btn ui-icon-arrow-r ui-btn-icon-right ui-input-btn ui-shadow ">Next Artikel</a> </div> <div data-role="footer" style="text-align: center;"> <p>© copyright <a href="http://www.dumetschool.com" style="text-decoration: none; color:black;">Dumet School</a></p> </div> </div>
Jika sudah save dan refresh pada browser nya, dan klik tombol read more maka akan di arahkan ke halaman detail atau #pagetwo
Bagaimana, cukup mudah bukan..??
Inilah layout website sederhana versi mobile, yang di buat dengan Jquery Mobile. Sekian pada artikel kali ini tentang Cara Menambahkan Artikel Dalam jQuery Mobile kita jumpa kembali di artikel yang akan datang.
Terima Kasih dan Sampai Jumpa.