Misnandi Blog

Selalu ada hari indah untuk belajar

Membuat Panel di jQuery Mobiel

jm

Pada tutorial kali ini kita akan membuat panel di jQuery Mobile. Panel adalah menu pada sebuah aplikasi web mobile yang berfungsi menampilkan dan menyembunyikan menu atau navigasi suatu aplikasi.

Untuk membuat panel, menambahkan data-role=”panel” atribut untuk <div> elemen dan menentukan id. Menambahkan markup HTML di dalam ini <div> yang ingin ditampilkan di panel Anda:

<div data-role="panel" id="myPanel" >
  <h2>Panel Header..</h2>
  <p>Some text..</p>

Catatan: Markup panel harus ditempatkan sebelum atau sesudah header, konten dan footer dalam halaman jQuery Mobile.

Untuk mengakses panel, buat link yang menunjuk ke id panel <div> . Ketika pengguna mengklik pada link, panel akan terbuka:

<a href="#myPanel" class="ui-btn ui-btn-inline">Open Panel</a>

Berikut ini adalah contoh panel dasar:


a

Simpan dan jalankan kode tersebut, hasilnya akan seperti gambar dibawah ini:

a

a

 

 

Kampus STT Ibnu Sina Batam ‘ Kampus Unggulan ” Berbasis Iman dan Tagwa
Gabung dengan Kami , di stt-ibnusina.ac.id

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Information

This entry was posted on 23 January 2017 by in jQuery Mobile, Programing, STT Ibnu Sina, Tutorial.
%d bloggers like this: