Scribd Logo
Unggah

Selamat datang di Scribd!

  • Pertemuan 2 Web Mobile (Jquery)

    Diunggah oleh

    muhaqilsafaat
    4 tayangan3 halaman

    Judul Asli

    Pertemuan 2 Web Mobile (jQuery)

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    4 tayangan3 halaman

    Pertemuan 2 Web Mobile (Jquery)

    Diunggah oleh

    muhaqilsafaat

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 3

    MEMBUAT LINK DAN EFEK TRANSISI MULTIPLE PAGE DALAM 1 FILE

    Pada pembuatan web, biasanya setiap halaman akan diwakili oleh sebuah file. Jika ingin
    membuat 4 halaman, maka diperlukan 4 buah file. Dengan menggunakan jQuery Mobile, kita bisa
    menggunakan sebuah file untuk beberapa halaman, inilah yang disebut dengan multiple page.
    Struktur dasar dari halaman web jQuery Mobile dapat dilihat pada pertemuan 1 (latih1b) yang terdiri
    dari 1 page, seperti terlihat pada gambar tampilan program dan source kodenya berikut.
    <html>
    <head>
    <title>Pengetahuan Dasar Web Mobile</title>
    <link rel="stylesheet" href="jquery.mobile-1.4.5.min.css" />
    <script src="jquery-1.11.1.min.js"></script>
    <script src="jquery.mobile-1.4.5.min.js"></script>
    </head>
    <body>
    <body>
    <div data-role="page" id="index">
    <header data-role="header"> <h1>WEB Mobile</h1> </header>
    <div data-role="content">
    <h3>Ketekunan dan Ketelitian Kunci Keberhasilan </h3>
    <p>Semester Baru, Materi Kuliah Baru, Semangat Baru
    Tantangan Baru</p>
    </div>
    <footer data-role="footer"> <h2>Lab. Komputer </h2> </footer>
    </div>
    </body>
    </html>
    </body>
    </html>

    Kalau kita perhatikan terdapat 3 bagian utama : Header, Content, dan Footer

    Definisi Page Menggunakan id dan Berpindah Antar Page


    Agar bisa menjadi multipage, maka kita perlu menambahkan definisi halaman (page) pada
    bagian <body> dan </body> . Setiap page memiliki struktur yang sama, bedanya adalah pada
    penentuan ciri dari masing-masing page, menggunakan id.
    Pada contoh berikut, id-nya berbeda yaitu halaman1 dan halaman2, ini menjadi tanda bahwa
    kita memiliki 2 page dalam 1 file. Kedua page ini akan diperlakukan seolah-olah sebagai halaman
    dengan file yang berbeda, padahal hanya dalam 1 file saja.
    Untuk berpindah dari 1 page ke page yang lain digunakan konsep link dalam HTML, yaitu
    menggunakan tag <a href="tujuan"> dan </a>. Tujuan perpindahan adalah menuju id dari page
    yang akan ditampilkan. Karena yang dituju adalah id, maka perlu ditambahkan tanda pagar di
    depan (#).
    Contoh : Program Link Antar Page Dalam 1 File
    <!-- definisi halaman 1 -->
    <div data-role="page" id="halaman1">
    <header data-role="header"> <h1>Header 1</h1> </header>
    <div data-role="content"> <p>Halaman 1</p>
    <p>Pindah ke <a href="#halaman2">halaman 2</a> </p>
    </div>
    <footer data-role="footer" data-position="fixed"> <h2>Footer 1</h2>
    </footer>
    </div>
    <!-- definisi halaman 2 -->
    <div data-role="page" id="halaman2">
    <header data-role="header"> <h1>Header 2</h1> </header>
    <div data-role="content"> <p>Halaman 2</p>
    <p>Kembali ke <a href="#halaman1">halaman 1</a></p>
    </div>
    <footer data-role="footer" data-position="fixed"> <h2>Footer 2</h2>
    </footer>
    </div>

    Catatan
    1. Tambahkan struktur dasar : HTML dan JqueryMobile
    <link rel="stylesheet" href="jquery.mobile-1.4.5.min.css" />
    <script src="jquery-1.11.1.min.js"></script>
    <script src="jquery.mobile-1.4.5.min.js"></script>
    2. Kemudian tambahkan tulisan untuk isi Content Halaman 1 dan Halaman 2, sehingga
    tampilannya terlihat seperti pada gambar berikut ini.

    3. Tambahkan Efek Transisi Perpindahan Halaman : Slide dan Pop.


    Efek Transisi Perpindahan Halaman
    Untuk lebih memperindah desain web, saat perpindahan antar page dalam 1 file, kita bisa
    menambahkan efek transisi, yaitu dengan menambahkan atribut : data-transition="efek_transisi"
    pada link yang akan diberikan efek transisi. Ada beberapa macam efek transisi, salah satunya
    adalah “slide” yang menampilkan perpindahan halaman seperti “digeser”. Contoh penulisannya :
    <a href="#halaman2" data-transition="slide">halaman 2</a>
    Adapun macam–macam efek transisi yang bisa kita berikan, yaitu:
    :slide, slidepage, fade, pop, flip, flow, slideup, slidedown, turn dan none. Silahkan pilih beberapa efek
    transisi yang kita inginkan, dan bisa juga dikembangkan lagi contoh program link antar page
    dalam 1 file untuk beberapa halaman lagi (misalnya menjadi 4 atau 5 page dalam 1 file).

    Soal Latihan 1 : Program Link Antar Page Dalam 1 File


    Buatlah aplikasi jquery mobile yang terdiri dari 2 halaman, dalam 1 file html (jquery) seperti terlihat
    pada gambar berikut ini.

    Soal Latihan 2 : Program Link Antar Page Dalam 1 File


    Buatlah aplikasi jquery mobile yang terdiri dari 3 halaman, buat dalam 1 file html (jquery) dengan
    ketentuan sebagai berikut :
    1. Halaman pertama berisi tentang Informasi Kampus Anda, gunakan link untuk menuju ke halaman
    yang kedua
    2. Halaman kedua berisi tentang Informasi Prodi Anda, gunakan link untuk menuju ke halaman 1 dan
    halaman 3.
    3. Halaman ketiga berisi tentang Informasi Identitas Anda, gunakan link untuk menuju ke halaman 1
    dan halaman 2.
    4. Tambahkan Efek Transisi Perpindahan Halaman.

    Anda mungkin juga menyukai