FITRIAH KUMALAWATI 7408040031

1

• FITRIAH KUMALAWATI 7408040031
• HARYO FAJAR PUGUH P 7408040042
• USWATUN CHASANAH 7408040047

2
jQuery Mobile overview

• jQuery telah lama menjadi JavaScript library yang
  populer untuk menciptakan website interaktif yang
  kaya dan aplikasi web. Namun, karena ini
  dirancang terutama untuk browser desktop, jquery
  tidak memiliki banyak fitur yang khusus dirancang
  untuk membangun aplikasi web mobile.
• jQuery Mobile adalah proyek baru yang membahas
  kekurangan ini. Ini adalah framework yang
  dibangun di atas jQuery yang menyediakan berbagai
  elemen User-interface dan fitur-fitur untuk
  digunakan dalam aplikasi mobile.
• Sumber http//netindonesia.net/blogs/cahnom/ar
  chive/2010/08/14/jquery-mobile.aspx

3
jQuery Mobile overview

• jQuery mobile merupakan framework javascript
  layaknya jQuery pada desktop namun khusus
  ditargetkan untuk mobile device seperti iPad,
  iPhone, Blackberry, Symbian, Android, dll.
• Dengan menggunakan jQuery kita bisa membuat
  aplikasi web yang multi platform, tidak
  tergantung pada piranti keras tertentu. Dengan
  kode yang sama, aplikasi web kita bisa jalan di
  hampir semua piranti mobile yang populer saat
  ini. Framework ini juga telah mendukung
  penggunaan layar sentuh, sehingga aplikasi kita
  bisa mengoptimalkan device yang ada.

4
Fitur jQuery Mobile

• jQuery Mobile memudahkan pengembangan
  user-interface untuk mobile web apps.
• The interface configuration is markup-driven,
  yang berarti Anda dapat membuat seluruh aplikasi
  antarmuka dasar dalam HTML, tanpa perlu menulis
  satu baris JavaScript.
• Menyediakan serangkaian custom events baru,
  mendeteksi events mobile device dan touchscreen
  seperti  tap, tap-and-hold, swipe, and
  orientation change (i.e. rotating the device).
• Memastikan bahwa user-interfcae bekerja pada web
  browser.
• Menggunakan theme untuk memudahkan untuk
  customize tampilan aplikasi Anda.
• Sumber http//javan.co.id/jquery-mobile/

5
Kemampuan Jquery Mobile

• Mempermudah akses dan manipulasi elemen tertentu
  pada dokumen.
• Mempermudah modifikasi/perubahan tampilan halaman
  web. 
• Mempersingkat Ajax (Asynchronous Javacsript and
  XML). 
• Memiliki API (Application Programming
  Interface). 
• Mampu merespon interaksi antara user dengan
  halaman web dengan lebih cepat. 
• Menyediakan fasilitas untuk membuat animasi
  sekelas Flash dengan mudah.
• Sumber http//www.aaezha.com/intro-apa-itu-jqu
  ery

6
Kemampuan Jquery Mobile

• Dengan menggunakan jQuery kita bisa membuat
  aplikasi web yang multi platform, tidak
  tergantung pada perangkat keras tertentu.
• Dengan kode yang sama, aplikasi web kita bisa
  jalan di hampir semua piranti mobile yang populer
  saat ini.
• Framework ini juga telah mendukung penggunaan
  layar sentuh, sehingga aplikasi bisa
  mengoptimalkan device yang ada.
• Sumber http//blogs.mervpolis.com/roller/naspa
  rd/entry/jquery_mobile_part_1

7
SUPPORT PLATFORM
8
Platform Yang Mendukung Jquery Mobile

• jQuery Mobile telah mendapat banyak
  dukungan untuk sebagian besar dari semua modern
  desktop ,smartphone, tablet, dan
  e-reader platform. 
• jQuery Mobile menggunakan sistem dukungan
  platform 3-tingkat yaitu A (penuh), B (penuh
  dikurangi Ajax), C (dasar).
• Ketepatan visual pada jquery mobile sangat
  tergantung pada kemampuan rendering CSS dan
  platform sehingga tidak semuanya akan mendapatkan
  pixel yang sempurna.

9
Platform Kelas A dan B

• Kemampuan yang disempurnakan lengkap dengan Ajax
  berbasis animasi halaman transisi.
• Apple iOS 3.2-5.0 - Tested on the original iPad
  (4.3 / 5.0), iPad 2 (4.3), original iPhone (3.1),
  iPhone 3 (3.2), 3GS (4.3), and 4 (4.3 / 5.0)
• Android Honeycomb- Tested on the Samsung Galaxy
  Tab 10.1 and Motorola XOOM
• Blackberry 6.0 - Tested on the Torch 9800 and
  Style 9670
• Peningkatan kemampuan namun tanpa fitur ajax
  navigasi
• Blackberry 5.0 Tested on the Storm 2 9550, Bold
  9770
• Opera Mini (5.0-6.0) - Tested on iOS 3.2/4.3
• Nokia Symbian3 - Tested on Nokia N8 (Symbian3),
  C7 (Symbian3), also works on N97 (Symbian1)

10
Platform Kelas C

• Kemampuan HTML Tidak ditingkatkan namun tetap
  berfungsi.
• Blackberry 4.x - Tested on the Curve 8330
• Windows Mobile - Tested on the HTC Leo (WInMo
  5.2)
• Semua Platform Smartphone yang lebih tua dan
  Features Phone

11
jQuery Component
12
Jquery Components

• Pages Dialogs.
• Toolbars
• Button
• Forms Elements
• List View

13
Pages Dialogs

• Pada dasarnya konten halaman dari sebuah pages
  adalah di simpan dalam tag div dengan menggunakan
  attributes data-role.
• Dalam div page, ada  header, content dan
  footer div.
• Dalam Jquery mobile, pages mendukung single pages
  ataupun local internal linked "pages" within a
  page.

14
Basic page template
15
Page Inside Page
16
Page Transitions

• slide Slide right to left (left to right if
  tapping the Back button). This is the default.
• slideup Slide from the bottom to the top (top to
  bottom if tapping the Back button).
• slidedown Slide from the top to the bottom
  (bottom to top if tapping the Back button).
• pop Expand the new page (contract it if tapping
  the Back button). Great for dialogs and popups.
• fade Fade the new page in (fade it out if tapping
  the Back button).
• flip Flip the old page out and the new page in,
  like flipping a card.

17

• contoh penggunaanya

18
Dialogs

• DialogDengan menambahkan data-rel dialog pada
  link, Kita dapat membuat halaman yang muncul
  sebagai dialog, dengan rounded corners, margin
  dan dark background.
• kita juga bisa menambahkan transitions seperti
  slideup, pop atau flip
• Contoh Penggunaan

19
Toolbars

• Pada Jquery Mobile standar toolbar ada dua yaitu
  header bar dan footer bar.
• Header biasanya berisi judul halaman , option
  button yang biasanya diletakkan di samping kanan
  dan kiri.
• Penggunaan header bar
• ltdiv data-role"header"gt lth1gtPage Titlelt/h1gt
  lt/divgt

20
Toolbar

• Pada Jquery mobile juga terdapat nav bar yang
  biasanya digunakan untuk berpindah pada halaman
  lain.
• Penggunaan nav bar
• ltdiv data-role"navbar"gt ltulgt ltligtlta
  href"a.html" class"ui-btn-active"gtOnelt/agtlt/ligt
  ltligtlta href"b.html"gtTwolt/agtlt/ligt lt/ulgt
  lt/divgtlt!-- /navbar --gt

21
Buttons

• Button adalah bagian penting dari setiap aplikasi
  berbasis touchscreen.
• Button lebih baik daripada link, karena
  memberikan target yang lebih besar ketika
  melakukan navigasi (penting jika kita memiliki
  jari-jari gemuk!).
• Untuk mengaktifkan link ke dalam button di jQuery
  Mobile, cukup menambahkan data-role button
• code button
• ltpgtlta hrefabout data-rolebuttongtAbout
  this applt/agtlt/pgt

22
Button

• lta href"index.html" data-role"button"gtLink
  buttonlt/agt
• Tampilan

23
Button

• Inline Button
• lta href"index.html" data-role"button"
  data-inline"true"gtCancellt/agt
• lta href"index.html" data-role"button"
  data-inline"true" data-theme"b"gtSavelt/agt

24
Forms Elements

• jQuery Mobile secara otomatis menggantikan bentuk
  kontrol standar HTML, seperti teks, checbox dan
  select, dengan kontrol custom yang bekerja lebih
  baik dengan interface touchscreen, dan lebih
  fleksibel.
• Misalnya, checkbox yang dibuat jauh lebih besar
  sehingga mereka lebih mudah untuk digunakan.
• Fitur lain yang lumayan bagus adalah
  pengelompokan radio button dan checkbox. Jika ada
  beberapa radio button atau checkbox pada elemen
  fieldset dengan  atribut data-role
  controlgroup.

25
Forms Elements
26
Forms Elements
27
Forms Elements
28
Forms Elements
29
List Views

• Untuk mengubah list biasa menjadi list view, kita
  tinggal menambahkan data-role ListView untuk
  tag ul atau ol.
• Berikut adalah beberapa hal yang dapat kita buat
  menggunakan listview
• Sebuah list teks sederhana, dengan kotak yang
  bagus di setiap item.
• Sebuah daftar link.
• Nested List (List bersarang).
• Split List Button
• Count Bubble
• Search Filtering

30
List Views
31
List Views
32
List Views
33
Option Configuration
34
Mobileinit event

• Ketika jquery mobile memulai untuk mengeksekusi,
  hal tersebut akan memacu mobileinit event pada
  document objek, yang dapat mengikat untuk
  menerapkan ovveride ke jQuery Mobile default.
• (document).bind("mobileinit", function()
• //apply overrides here
• )

35
Opsi Konfigurasi

• Ns ? Digunakan pada atribut data
• autoInitializePage ? Dipanggil ketika DOM telah
  siap
• subPageUrlKey ? parameter Url untuk reference
  sub-pages
• activePageClass ? Dipanggil pada saat halaman
  ditampilkan maupun pada saat transisi
• activeBtnClass ? Digunakan untuk mengaktifkan
  button
• ajaxEnabled ? jQuery mobile secara otomatis akan
  menangani klik link dan pengiriman
  form melalui Ajax,bila memungkinkan. Jika
  false, url mendengarkan hash akan
  dinonaktifkan juga, dan urlakan memuat sebagai
  permintaan http biasa.

36
Opsi Konfigurasi

• linkBindingEnabled ? jQuery mobile secara
  otomatis akan mengikat klik pada anchor tag dalam
  dokumen Anda.
• hashListeningEnabled ? jQuery mobile secara
  otomatis akan mengamati dan menangani
  perubahan ke lokasi .hash
• pushStateEnabled
• defaultPageTransition ?Mengatur transisi default
  untuk perubahan halaman yang menggunakan Ajax.
• touchOverflowEnabled

37
Opsi Konfigurasi

• defaultDialogTransition ? Mengatur transisi defaul
  t untuk perubahan dialog yang menggunakan Ajax.
• minScrollBack ? Jarak scrool minimal yang akan
  diingat ketika kembali ke sebuah halaman
• loadingMessage ?Mengatur teks yang muncul saat
  halaman sedang loading. 
• pageLoadErrorMessage ? Mengatur teks yang muncul
  ketika halaman gagal untuk beban melalui Ajax.
• gradeA ?dukungan kondisi yang harus dipenuhi
  untuk melanjutkan proses.

38
Supported Methods and Events
39
.mobile and supported methods and events

• Beberapa metode terpapar oleh . Mobile dijelaskan
  di bawah ini.

Sumber http//www.ibm.com/developerworks/web/lib
rary/wa-jqmobile/
40
data- attributes
41
HTML5 data- attributes

• jQuery mobile bergantung pada HTML5 data
  atribut untuk mendukung berbagai elemen
  UI, transisi, dan struktur halaman. 
• data- atribut untuk membuat komponen UI adalah
  sebagai berikut

42
(No Transcript)
43
(No Transcript)
44
Example
45
(No Transcript)
46
(No Transcript)