Page and dialog transition mobile
JQuery Mobile adalah web
framework yang dioptimalkan untuk perangkat-perangkat layar sentuh
(touch-optimized). sebagai library, jQuery Mobile yang dikenal sebagai library
JavaScript maupun framework mobile ini dikembangkan oleh tim jQuery Project.
Tujuan pengembangannya adalah berfokus pada pembuatan framework yang kompatibel
dengan beraneka ragam perangkat smartphone dan tablet.
JQuery Mobile
dikembangkan sebagai alternatif yang menjawab kebutuhan akan pengembangan
aplikasi web mobile yang mudah dan memiliki banyak potensi. JQuery Mobile
sangat mungkin untuk membuat aplikasi web mobile yang penampilan dan
interaktivitasnya konsisten di semua perangkat yang mendukung, serta memiliki
kemampuan user interface (UI) yang canggih.
JQuery Mobile
merupakan sistem user interface berbasis HTML5 dan pengembangan dari library
JQuery dan jQuery UI yang sedang populer saat ini. kelebihan jQuery adalah
kodenya ringan, menerapkan desain yang dapat beradaptasi dengan berbagai jenis
perangkat mobile, dan menonjolkan markup semantik. Oleh karena itu, desainnya
sangat fleksibel dan mempunyai theme yang bisa disesuaikan.
Sekilas Tentang jQuery Mobile
— Cara
Kerja jQuery Mobile
◦ Top-of-the-line JavaScript in a unified User Interface
◦ Bekerja di
perangkat mobile yang paling banyak digunakan
— Mendukung
Mobile Browser
◦ Mengobati web
mobile browser persis sama dengan desktop web
browser
Tata Letak Responsif
— Class
Media Query Helper
◦ Jquer Mobile menambahkan kelas untuk elemen HTML
◦ Mengikuti bentuk rotasi browser dan min /maksimal CSS pada
umumnya
— Class
ini diikuti mengikuti proses, perubahan size dan perubahan orientasi
◦ Memungkinkan
Anda untuk mengunci kelas ini di CSS
◦ Membentuk layout responsif
walaupun browser tidak mendukung
— Elemen HTML akan selalu memiliki pilihan "potret" atau "landscape“
◦ Tergantung pada
orientasi browser atau perangkat
◦ Anda dapat menggunakan
kode CSS seperti ini :
portrait {
/*
portrait orientation changes go here! */
}
.landscape {
/*
landscape orientation changes go here! */
}
Breakpoint Class Min/Max Width
Secara default,
min dan max kelas breakpoint dibuat pada ukuran
berikut:
320, 480, 768, 1024
Kelas yang
terlihat seperti ini
"min-width-320px", "max-width-480px"
Dapat digunakan sebagai pengganti atau tambahan setara permintaan media yang
mereka meniru
.myelement {
float:
none;
}
.min-width-480px .myelement {
float:
left;
}
— Plugin
pada Jqm berpengaruh pada ukuran breakpoints
— Yaitu elemen form mengapung di samping
label mereka ketika browser lebih lebar dari 480 piksel
— CSS untuk mendukung perilaku ini untuk
input teks bentuk terlihat seperti ini:
label.ui-input-text {
display:
block;
}
.min-width-480px label.ui-input-text
{
display:
inline-block;
}
Menambahkan Lebar Breakpoints
— jQuery Ponsel mengekspos fungsi $.mobile.addResolutionBreakpoints
◦ Menerima satu angka atau susunan dan barisan angka
◦ Akan
ditambahkan ke min / max breakpoints
ketika mereka terapkan
◦
//add a min/max class for 1200 pixel
widths
$.mobile.addResolutionBreakpoints(1200);
//add min/max classes for 1200, and
1440 pixel widths
$.mobile.addResolutionBreakpoints([1200,
1440]);
Menjalankan Media Query
— Fungsi pengujian memungkinkan apakah
CSS Media Query berjalan
◦ Panggil $.mobile.media() dan query
◦ Hasil akan muncul jika query yang benar dan mendukung,
seperti dibawah ini
//test for screen media type
$.mobile.media("screen");
//test a min-width media query
$.mobile.media("screen and
(min-width: 480px)");
Data-* Attributes
Data-* attribut yang digunakan oleh
Java Script
◦ Tidak ada fungsi yang baku
◦ Dapat berubah – ubah sewaktu - waktu
◦ Digunakan untuk
membuat atribut kita sendiri
◦ Berikut ini
adalah atribut yang valid di HTML5
“data-peran,
data-rel, data-pesho, etc”
Data-* atribut
divalidasi di HTML5
jQuery
1.4.1 atau yang lebih terbaru memiliki support untuk data-*
$("#list").data("role","header");
Data-Peran
— Data-peran adalah atribut dari elemen
HTML
◦ Digunakan oleh
jQuery UI dan jQuery Handphone
◦ Memberikan
penampilan unsur-unsur
◦ Melalui jQuery
dieksekusi di halaman HTML init
◦ Data-peran
memberikan tampilan dan nuansa asli
◦ Berdasarkan OS
perangkat
— Digunakan untuk membuat elemen terlihat
seperti tombol, halaman, menu dll
jQuery Mobile Data-*
Bagaimana menggunakan data-*
menggunakan jQuery Mobile?
Halaman di jQuery Mobile
— jQuery Mobile termasuk otomatis AJAX
loading halaman dari halaman eksternal
◦ Dengan tombol
kembali dukungan sejarah otomatis
◦ Satu set
transisi halaman animasi
◦ Utiliti sederhana untuk menampilkan halaman sebagai dialog
Halaman
— Struktur Halaman dioptimalkan untuk mendukung
◦ Halamaan tunggal
◦ Internal lokal
terkait "halaman" dalam suatu halaman
— Tujuannya adalah untuk memungkinkan pengembang
untuk membuat website menggunakan praktek-praktek terbaik
◦ Mana link biasa
akan "hanya bekerja"
◦ Tanpa
konfigurasi khusus
◦ Menciptakan
kaya asli-seperti pengalaman, yang tidak dapat dicapai dengan permintaan HTTP
standar
Struktur Halaman Pada Mobile
— Halaman
jQuery Mobile di mulai dengan HTML5 <! DOCTYPE html>
– Mengambil keuntungan penuh dari semua
fitur frameworkGhfghfghgfh
– Perangkat yang lebih tua dengan browser
yang tidak mengerti HTML5 akan mengabaikan DOCTYPE
— Referensi jQuery, jQuery Mobile dan CSS
tema mobile di bagian <head>
Contoh Halaman jQuery Mobile
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet"
href="http://code.jquery.com/
mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css"
/>
<script type="text/javascript"
src="http://code.jquery.
com/jquery-1.5.2.min.js"></script>
<script type="text/javascript"
src="http://code.jquery.
com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js">
</script>
</head>
<body>
...
</body>
</html>
Halaman di jQuery Mobile
— Di
dalam tag <body>
Setiap halaman
pada perangkat mobile diidentifikasi dengan elemen dengan
data-role="page"
<div data-role="page">
...
</div>
Dalam halaman
HTML markup yang valid dapat digunakan
Tapi untuk
benar jQuery Handphone Halaman anak-anak langsung unsur-unsur semantik dengan
data-peran
"header",
"content", and "footer".
Contoh Single Page
<!DOCTYPE html>
<html>
<head> <title>Page
Title</title> . . .
</head>
<body>
<section data-role="page">
<header data-role="header">
<h1>Some Title</h1>
</header>
<article data-role="content">
<h1>The Content</h1>
</article>
<footer data-role="footer">
<h1>Some Footer</h1>
</footer>
</section>
</body></html>
Halaman Tunggal Pada jQuery Mobile
Multi-page jQuery Mobile
— Pada
jQuery Mobile satu file bisa terdiri dari banyak halaman
◦ Banyak bagian dengan data-role="Page"
◦ Disebut dengan Halaman lokal
◦ Dapat diakses dengan id lain
Perpindahan Halaman
— Enam efek Perpindahan berbasis CSS
Diterapkan pada
setiap objek atau peristiwa perubahan halaman
Kerangka kerja
ini berlaku hak untuk transition slide kiri secara default
— Menambahkan atribut data transisi ke
link
<a href="#secondPage"
data-transition="pop">to go second Page</a>
— Jenis
Pergantian Slide Lainnya
— slide,
slideup, slidedown, pop, fade, flip
Dialogs
— Untuk
membuat jendela Dialog
◦ Tambahkan syntax a data-rel="dialog"
– Menambah jenis pergantian halaman
◦ Membentuk dialog box
– Dengan halaman direferensikan di
dalamnya
<a href="#dialogPage"
data-rel="dialog" data-transition="fade">
Open dialog
</a>
Tombol
— Dengan
menggunalakan element jQuery Mobile akan terlihat seperti tombol
◦ Anchor (<a>)
◦ divs and spans (<div>, <span>)
◦ Images (<img>)
◦ All look like the same
<div
data-role="button"> div with
data-role="button"</div>
<a href="http://www.minkov.it"
data-role="button">
anchor
with data-role="button"</a>
<img
src="images/ClosedBucket.png" width="50"
alt="img"
data-role="button"/>
— Tombol
dapat dikelompokkan pada Set Tombol
Secara
horizontal dan vertical
<div data-role="controlgroup"
data-type="vertical">
<a href="http://nakov.com"
data-role="button">nakov.com</a>
<a href="http://minkov.it"
data-role="button">minkov.it</a>
<a href="http://nikolay.it"
data-role="button">nikolay.it</a>
</div>
<div data-role="controlgroup"
data-type="horizontal">
<a href="http://nakov.com"
data-role="button">nakov.com</a>
<a href="http://minkov.it"
data-role="button">minkov.it</a>
<a href="http://nikolay.it"
data-role="button">nikolay.it</a>
</div>
Nama
: M.Ropianto, M.Kom
NIDN:
: 102867804
Status
: Dosen Tetap YAPISTA / STT
http://sttibnusinabatam.ac.id
