Cara Menggunakan Panel Pada jQuery Mobile

Di artikel sebelumnya kita telah belajar seputar jQuery Mobile, dari cara install, merancang fitur dan hingga merancang sebuah tampilan situs sederhana khusus tampilan mobile. Kali ini saya akan mencoba memberikan tips dan trik mengenai Cara Menggunakan  Panel Pada jQuery Mobile yang mana fitur ini dimiliki oleh jQuery Mobile dan kita hanya tinggal memakainya dengan cara copy paste saja. Panel di jQuery Mobile yang artinya akan meluncur keluar dari kiri atau sisi kanan layar dengan konten tambahan, bagi merancang panel lumayan menambahkan data-role=”panel” atribut bagi <div> unsur dan menentukan id nya. Latihan kali ini kita akan merancang sebuah fitur di pada panel, sebuah tombol di halaman utama. Ketika di klik panel akan muncul dari kiri. Berikut ini yaitu screen shoot gambar nya yang nanti kita akan bikin



Pada



Ketika di klik karenanya panel akan muncul



Pada



Latihan kali ini simple saja, dan nanti teman – teman dapat di kembangkan sendiri. Bagus seketika saja kita implementasikan Cara Menggunakan  Panel Pada jQuery Mobile seperti lazimnya siapkan terlebih dahulu text editornya dan kita install bagi jQuery Mobile nya. Kalian dapat kunjungi seketika situs resminya di www.jquery.com atau dapat pun copy script di bawah ini



<!DOCTYPE html>
<html>
<head>
<meta name=viewport content=width=device-width, initial-scale=1>
  <title><strong>Cara Menggunakan  Panel Di jQuery Mobile</strong></title>
  <meta name=viewport content=width=device-width, initial-scale=1>
  <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>
</head>
<body>

</body>
</html>


Kemudian save dengan nama index.html, berikutnya teman – teman ketikkan script seperti gambar di bawah ini



Pada



Sekiranya telah, save dan jalankan di browser nya karenanya akan tampil seperti gambar di bawah ini



Pada



Coba teman – teman klik button “Open Navigation” tetapi belum berfungsi panel nya, kita tambahkan script bagi menampilkan panel fitur nya



Pada



Teman – teman ketikkan persis sebelum data-role=”header” atau lihat gambar di atas ini yang saya beri kotak berwarna orange, kalau telah save dan refresh di browser nya karenanya panel akan muncul kalau di klik button “Open Navigation”.



Pada



Betul-betul simple sekali ya teman – teman, inilah cara pemakaian sebuah panel sederhana didalam jQuery Mobile digunakan bagi merancang sebuah layout fitur atupun sebuah halaman aside. Oke, demikian di artikel kali ini mengenai Cara Menggunakan  Panel Pada jQuery Mobile kita berjumpa kembali di artikel yang akan datang. terimakasih dan hingga jumpa.



Semoga bermanfaat 😉




Sumber https://kursuswebsite.org

Popular posts from this blog

Perbedaan Antara Keyup dan Keydown Pada jQuery

Even di javascript adalah sebuah suatu yang terjadi di element tertentu, maksudnya yaitu suatu respon atau aksi yang di lakukan oleh user dimana kegiatan tersebut akan memicu jalannya script javascript yang terdapat di blog tersebut. Di javascript terdapat banyak event namun di pembahasan kali ini kita akan membahas mengenai Perbedaan Antara Keyup dan Keydown Di jQuery, Keyup adalah sebuah event yang akan di jalankan ketika tombol dilepaskan di di keyboard, dan sedangkan Keydown adalah sebuah event ketika tombol ditekan di keyboard.
Read more

Membuat Table Warna Berselang dengan PHP

Image
Selamat datang di blog Source Code Aplikasi, masih dengan File yang kemarin, tapi sekarang ini kita akan menggunakan Framework Bootstrap dan Membangun Table Warna Berselang dengan PHP, jadi jangan lupa yang kemarin praktekin dulu yah teman teman link nya yang ini . oka seketika saja kita praktekan.
Read more