Cara Menambahkan Artikel Dalam jQuery Mobile

Halo teman – teman, berjumpa kembali dengan saya Hernowo di tips dan trik Source Code Aplikasi. Di artikel kemarin kita telah belajar mengenai Cara Install Jquery Mobile dan Fungsinya, dimana yang kita bahas mengenai cara instal Jquery mobile dan kegunaan nya. Di kesempatan kali ini saya pun akan memberikan tips dan trik seputar Jquery Mobile yaitu Cara Menambahkan Artikel Dalam jQuery Mobile latihannya ialah membangun sebuah halaman artikel kemudian ketika di klik “read more” karenanya akan seketika di arahkan ke halaman “description/detail” screen shoot nya seperti gambar di bawah ini

Ketika di klik read more karenanya seketika di arahkan ke halaman description/detail

Nah, dapat teman – teman lihat di gambar di atas ini tampilannya khusus bagi mobile apabila ukurannya di zoom in atau zoom out halaman akan sama. Bagus, saatnya kita implementasikan Cara Menambahkan Artikel Dalam jQuery Mobile. Seperti lazim 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, apabila telah kita tambahkan script bagi halaman pertama-tama

<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 Source Code Aplikasi</h5>
      <h5>Cara Install Jquery Mobile dan Fungsinya</h5>
    <p>Di kesempatan kali ini saya akan memberikan tips dan trik mengenai bagaimana Cara Install Jquery Mobile dan Fungsinya, pertama-tama tama saya akan membahas kegunaan dari Jquery mobile. Jquery mobil berfungsi bagi membangun tampilan situs versi mobile atau smartphone, jQuery Mobile pun mendukung beragam 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>copy; copyright <a href=http://www.sourcecodeaplikasi.info style=text-decoration: none; color:black;>Source Code Aplikasi</a></p>
  </div>
</div>

Teman – teman tambahkan script di atas ini, save dan jalankan di browser nya karenanya tampilan halaman pertama-tama telah berhasil di bikin

Bagi logo teman – teman dapat menggunakan logo apa saja, langkah berikutnya kita tinggal membangun satu halaman lagi bagi mengaktifkan link read more

Kita bikin halaman sesuai yang terdapat di link read more yaitu #pagetwo seperti yang saya beri kotak berwarna merah di gambar di atas ini

Teman – teman dapat copy script bagi 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>Di kesempatan kali ini saya akan memberikan tips dan trik mengenai bagaimana Cara Install Jquery Mobile dan Fungsinya, pertama-tama – tama saya akan membahas kegunaan dari Jquery mobile. Jquery mobil berfungsi bagi membangun tampilan situs versi mobile atau smartphone, jQuery Mobile pun mendukung beragam platform yang berbeda, dari desktop lazim, smartphone, tablet atau alat e-reader seperti Nook atau Kindle. Seperti contoh situs atau program sosial media facebook.com dan viva.co.id keduanya mempunyai masing – masing dua tampilan yaitu tampilan desktop dan mobil dan masih banyak situs atau program lainnya yang memakai Jquery mobile. Coba teman – teman buka www.facebook.com dan https://m.facebook.com/ lalu buka link pun http://www.viva.co.id/ dan http://m.viva.co.id/, kedua situs ini masing – masing mempunyai tampilan mobile dan desktop dan dapat kalian bedakan sendiri perbedaannya. Jadi tak heran Jquery mobile betul-betul banyak digunakan oleh para programmer bagi membangun program yang ia bikin dapat mendukung beragam platform, bagi belajar Jquery Mobile pastinya teman – teman wajib paham atau menguasai yang namanya html, css, javascript, dan mendasar – mendasar jquery.
    Bagus, sekarang ini kita akan coba implementasikan Cara Install Jquery Mobile dan Fungsinya seperti lazim 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>copy; copyright <a href=http://www.sourcecodeaplikasi.info style=text-decoration: none; color:black;>Source Code Aplikasi</a></p>
  </div>
</div>

Seandainya telah save dan refresh di browser nya, dan klik tombol read more karenanya akan di arahkan ke halaman detail atau #pagetwo

Bagaimana, lumayan gampang bukan..??

Inilah layout situs sederhana versi mobile, yang di bikin dengan Jquery Mobile. Demikianlah di artikel kali ini mengenai Cara Menambahkan Artikel Dalam jQuery Mobile kita jumpa kembali di artikel yang akan datang.

Terima Kasih dan Hingga Jumpa.

Sumber https://kursuswebsite.org