section 11-jquery method

Section 11

Jquery Method (Prepend, Append dan Animate)

A. Objective

1. Mahasiswa mampu memahami dan mnggunakan method Prepend

2. Memahami mampu memahami dan mnggunakan method Append

3. Memahami mampu memahami dan mnggunakan methid Animate

B. Requirement

1. Text Editor

Sublime Text 3, Notepad ++, Intype, Adobe Dreamweaver, dll

2. Web Server

Apache yang sudah disediakan oleh Xampp

3. Jquery Library

4. Web Browser

Google Chrome, Mozilla Firefox, Internet Explorer, dll

C. Materi

Jquery atau javascript library menyediakan banyak method yang dapat digunakan untuk

memudahkan kita dalam membuat aplikasi website agar tampak lebih responsif dan interaktif

beberapa diantaranya adalah method prepend, append dan animate

a) Method Prepend

Digunakan untuk menambahkan elemen tertentu pada awal container

Contoh : $(‘#container-1’).prepend(“Hallo Cirebon”); Penjelasan : Menambahkan text “Hallo Cirebon” pada awal container‐1

b) Method Append

Digunakan untuk menambahkan elemen tertentu pada akhir container

Contoh : $(‘#container-1’).append(“Hallo Cirebon”); Penjelasan : Menambahkan text “Hallo Cirebon” pada akhir container‐1

c) Method Animate

Digunakan untuk menambahkan efek animasi sederhana

Contoh : $(‘#image-mobil’).animate({left:”400px”},3000,”swing”); Penjelasan : Memberikan sebuah efek animasi menggerakkan gambar dengan id “image‐

mobil” dari posisi saaat ini ke posisi left 400px, dalam waktu 3000 ms dan dengan tipe

pergerakan “swing” (lambat – cepat ‐ lambat)

d) Preview Project

D. Langkah – Langkah Praktikum 1

1. Hierarki Project Folder

Copy libarary jquery dengan nama jquery‐min.js ke folder js

2. Konstruksi Dokumen HTML 5 dengan nama index.html seperti di bawah ini

<!doctype html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <div id="container"> <div id="setup"> <label>Input Text :</label> <Input id="textinput"> <label>Lokasi Container :</label> <select id="content"> <option value="1">Konten 1</option> <option value="2">Konten 2</option> <option value="3">Konten 3</option> </select> <label>Method :</label> <select id="method"> <option value="1">Prepend / Awal</option> <option value="2">Append / Akhir</option> </select> <button id="tombol">Action</button> </div>

<div id="content_1"> <h3>Konten 1</h3> </div> <div id="content_2"> <h3>Konten 2</h3> </div> <div id="content_3"> <h3>Konten 3</h3> </div> <div id="animasi_1"> <h3>Animasi 1</h3> <button id="anim">Forward</button> <img id="gambar" src="images/Profile.png"> </div> <div id="animasi_2"> <h3>Animasi 2</h3> <button id="anim_2">Zoom In</button> <p>This is a text</p> </div> </div> <script type="text/javascript" src="js/jquery-min.js"></script> <script type="text/javascript" src="js/method.js"></script> </body> </html>

3. Lakukan proses styling dengna membuat file style.css

body, h3 { margin: 0px; } body { background: #CFCBCB; font-family: sans-serif; } #container { width: 500px; margin: auto; background: white; } #container, #setup, #content_1, #content_2, #content_3, #animasi_1, #animasi_2 { padding: 15px; border: 1px solid #A6A2A2; margin-bottom: 10px; } label, input, select {

display: block; font-size: 16px; } input, select { margin-top: 5px; margin-bottom: 15px; width: 200px; } #animasi_1 { height: 130px; position: relative; } #gambar { position: absolute; width: 64px; top: 80px; left : 15px; } #animasi_1 button, #animasi_2 button { display: block; margin :10px 0px; } #animasi_2 p { font-size: 16px; }

4. Tambahkan file method.js

$(document).ready(function(){ $('#tombol').on('click', function() { var myInput = $('#textinput').val(); var myContainer = $('#content').val(); var myMethod = $('#method').val(); switch (myContainer) { case '1' : if (myMethod == 1){ $('#content_1').prepend(myInput); }else if (myMethod == 2){ $('#content_1').append(myInput); } break; case '2' : if (myMethod == 1){ $('#content_2').prepend(myInput); }else if (myMethod == 2){ $('#content_2').append(myInput); } break; case '3' : if (myMethod == 1){ $('#content_3').prepend(myInput);

}else if (myMethod == 2){ $('#content_3').append(myInput); } break; } }); $('#anim').on('click', function() { var myAnim = $(this).text(); if (myAnim == "Forward") { $(this).text("Backward"); $('#gambar').animate({left:"400px"}, 2000 , "swing"); }else if (myAnim == "Backward") { $(this).text("Forward"); $('#gambar').animate({left:"15px"}, 2000 , "swing"); } }); $('#anim_2').on('click', function() { var myAnim = $(this).text(); if (myAnim == "Zoom In") { $(this).text("Zoom Out"); $('#animasi_2 p').animate({fontSize:"32px"}, 2000); }else if (myAnim == "Zoom Out") { $(this).text("Zoom In"); $('#animasi_2 p').animate({fontSize:"16px"}, 2000 , "swing"); } }); });

5. Jalankan Program pada web browser, lalu amati.

section 11-jquery method

Documents