section 11-jquery method
Post on 14-Dec-2015
217 Views
Preview:
DESCRIPTION
TRANSCRIPT
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><!-- Akhir dari id setup -->
<div id="content_1"> <h3>Konten 1</h3> </div><!-- Akhir dari id content_1 --> <div id="content_2"> <h3>Konten 2</h3> </div><!-- Akhir dari id content_2 --> <div id="content_3"> <h3>Konten 3</h3> </div><!-- Akhir dari id content_3 --> <div id="animasi_1"> <h3>Animasi 1</h3> <button id="anim">Forward</button> <img id="gambar" src="images/Profile.png"> </div><!-- Akhir dari id content_3 --> <div id="animasi_2"> <h3>Animasi 2</h3> <button id="anim_2">Zoom In</button> <p>This is a text</p> </div><!-- Akhir dari id content_3 --> </div><!-- Akhir dari container --> <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.
top related