PelatihanJQuery

7/31/2019 PelatihanJQuery

1/29

[Computer and Communication] | JQuery 1

JQuery

Penggunaan dan Perkembangan

jQuery merupakan suatu framework (library) javascript yang menekankan interaksi antara

javascript dan HTML, atau bisa disebut juga sebagai cara baru dalam menuliskan kode

javascript. jQuery akan mempercepat dan meringkaskan library javascript sehingga dengan

menggunakan jQuery kita dapat mempercepat perpindahan dokumen HTML, penanganan

event (event handling), pembuatan animasi didalam web sehingga web kita tampak seperti

flash, dan juga interaksi AJAX untuk pengembangan web yang modern dan cepat. Jquery

memiliki slogan write less, do more yang kurang lebih maksudnya adalah kesederhanaan

dalam penulisan code, tapi dengan hasil yang lebih banyak.

jQuery mempunyai lisensi dibawah GNU General Public License dan MIT License artinya jQuery

merupakan aplikasi yang Open Source dan bebas di publikasikan oleh siapapun. Ukurannya juga

cukup kecil yaitu sebesar 56 KB (compressed) sehingga menggunakan jQuery menjadi jauh lebih

cepat dan mudah daripada menggunakan framework yang lain atau menggunakan Javascript

Konvensional.

Beberapa hal yang bisa dilakukan dengan JQuery.

1. Mengakses bagian halaman tertentu dengan mudah

2. Mengubah tampilan bagian halaman tertentu3. Mengubah isi dari halaman

4. Merespon interaksi user dalam halaman dan menambahkan animasi ke halaman

5. Mengambil informasi dari server tanpa me-refresh seluruh halaman

6. Menyederhanakan penulisan Javascript biasa.

Mengenai perkembangan versi dari JQuery sendiri saat ini (November 2011) telah ada jQuery

versi 1.7 (Release Notes). Perkembangan versi jQuery:

1. JQuery versi 1.0 (1.0.1, 1.0.2, 1.0.3, 1.0.4)

2. JQuery versi 1.1 (1.1.1, 1.1.2, 1.1.3, 1.1.3.1, 1.1.4)

3. JQuery versi 1.2 (1.2, 1.2.1, 1.2.2, 1.2.3, 1.2.4, 1.2.5, 1.2.6)

4. JQuery versi 1.3 (1.3.1, 1.3.2)

5. JQuery versi 1.4 (1.4.1, 1.4.2, 1.4.3, 1.4.4)

6. JQuery versi 1.5 (1.5.1, 1.5.2)

7. JQuery versi 1.6 (1.6.1, 1.6.2, 1.6.3, 1.6.4)

Sumber :http://www.jquery.com
http://www.jquery.com/http://www.jquery.com/http://www.jquery.com/http://www.jquery.com/


2/29


Perbedaan versi pada Jquery.

Versi baru biasanya terdapat penambahan fungsi baru dari fungsi jquery yang sebelumnya.

Tetapi pasti memiliki besar kapasitas yang lebih besar dari versi yang sebelumnya sehingga

dengan versi yang baru dapat memperberat beban dan loading pada aplikasi website yang

dibuat. Maka dari itu kita harus mempertimbangkan ketika kita memakai versi jquery yang kitaakan gunakan.

Perbedaan Jquery.js (tanpa min) dengan jquery.min.js(menggunkan min).

Dari keduanya mempunyai kegunaan dan fungsi sama. Penggunaan min menandakan bahwa

jquery tersebut telah dikompres (compress) sehingga muatan atau bebanya telah terkurangi

dengan tujuan untuk mempercepat waktu loading. Compress jquery dilakukan dengan

menghilangkan beerapa keterangan dan spasi yang sebenarnya berfungsi untuk memudahkan

pengguna saat membuat desain baru dengan memanfaatkan jquery. Maka dari itu jika sekedar

pengguna lebih baik menggunakan jquery.min.js agar loading lebih cepat.

Struktur penggunaan jquery

Jquery merupakan library yang berupa file javascript. Jquery dapat mempermudah kita dalam

memanfaatkan dan menggunakan javascript. Sebelum dapat digunakan, jquery harus di

include-kan terlebih dahulu. Letak dari script includenya pun berada pada tag .

Salah satu keuntungan menggunakan jquery adalah kemudahan dalam mengakses

DOM(Document Object Model). Untuk dapat mengakses DOM denga sempurna tentu semua

DOM harus sudah siap untuk diakses. Untuk memastikan semua DOM telah siap diakses, Jquery

menyediakan event.

Event ini hampir sama dengan onLoad yang dimiliki oleh native javascript. Bedanya fungsi di

dalam $(document).ready() akan tertrigger saat semua DOM telah siap, sedangkan pada

onLoad, semua elemen yang ada dalam halaman harus telah selesai terdownload terlebihdahulu, termasuk file gambar.


3/29


salah satu contoh penggunaanya:

$(p#content).addClass(highlight) akan dijalankan saat semua DOM telah siap p#content

merupakan selector jquery yang sebenarnya sama dengan selector CSS. Script diatas akan

menambahkan class highlight kedalam blok p yang memiliki id content.

Penggunaan

Pada penggunaan jQuery ini tidak terlepas dengan javascript karena library atau framework

jquery ini ditulis menggunakan bahasa javascript. Sebenarnya ada beberapa cara teknik

penulisan. Tata cara penulisan yang biasa digunakan adalah seperti ini.

1. Pendefinisia jQuery sendiri, kode yang digunakan bisa berupajQuery() atau $().

2. Selector, selector biasanya disisipkan pada pendefinisian diatas misalkan seperti ini

jQuery(#kotak) . selector merupakan perintah yang digunakan untuk membuat

manipulasi pada selector HTML yang didefinisikan diatas. Selector yang umum

digunakan biasanya adalah tag HTML itu sendiri, nama ID, nama CLASS, dan atribut-

atribut yang ada pada HTML. Selector disini bisa kita sebut juga sebagai target. Target

dari manipulasi jQuery pada tampilan HTML.

3. Method, pada method disini diletakan setelah selector. Pada method ini merupakan

fungsi untuk memanipulasi selector yang menjadi target jQuery tersebut. Method disini

bisa berupa event, manipulasi data, memberikan effect tampilan atau mendapatkan

informasi dari suatu object. Kebanyakan didalam function method ini terdapat beberapa

macam properties atau function lagi untuk pemilihan dari karakter dari method

tersebut.

.jalankan{

background-color: red;

}

$(document).ready(function(){

$(p#content).addClass(jalankan);

});

//Tempat script javascript


$("p#content").addClass("highlight");

});


4/29


Berikut merupakan contoh struktur penulisanya:

Pada script diatas bisa kita jelaskan bahwa jquery ini berfungsi untuk menampilkan selector

atau HTML yang memiliki ID kotak yang mana HTML yang memiliki ID kotak sebelumnya

adalah hide atau tidak tampil.

Membuat fuction JQuery.

Jquery adalah satu framewok javascript yang mendukung pluggin dengan sangat mudah. Sehingga

banyak kita dapat dengan mudah men jumpai plugin-plugin yang berada diinternet. Contoh plugin yang

terkenal adalah plugin yang dikembangan oleh jQuery UI. Sebenarnya kita juga bias mendevelop suatuplugin sendiri. Disini akan dijelaskan sedikit mengenai pembuatan plugin dan fungsi didalam jQuery.

Untuk penulisan jQuery secara sederhana adalah sebagai berikut

Jika kita menggunakan script diatas, kelemahanya adalah function jQuery tersebut dapat terjadi bentrok

dengan plugin jQuery yang lain. Karena didalam perintah function tersebut, harus dituliskan

menggunakan jQuery juga untuk pendefinisian jQuery-nya. Untuk masalah diatas dapat ditanggulangi

dengan menggunakan perintah berikut:

Dengan pemformatan penulisan function diatas, kita dapat menggunakan symbol dollar $ untuk

dapat meloloskan dari function jQuery lain. Untuk lebih jelasnya mengenai penggunaan function jQuery

yang sederhana bias menggunakan contoh berikut ini,

Kemudian kita dapat menjalankan perintahnya dengan cara berikut ini:

uer #kotak .show

Pendefinisian Selecto

Metho

jQuery.fn.myPlugin = function() {// Do your awesome plugin stuff here

};

(function( $ ) {$.fn.myPlugin = function() {// Do your awesome plugin stuff here

};})( jQuery );

(function( $ ){$.fn.maxHeight = function() {var max = 0;this.each(function() {max = Math.max( max, $(this).height() );

});return max;

};})( jQuery );


5/29


Hasil keluaran dari script diatas akan menujukan nilai tinggi dari tag HTML div melalui notifikasi

perintah alert. Dari fungsi yang kita buat, yang perlu kita soroti adalah fungsi this dan $(this). Untukfungsi this.each sendiri, memang harus ditulis this seperti itu bukan dengan $(this). Jika kita tuliskan

$(this) disitu maka javascript akan mengeluarkan perintah error atau tidak jalan. Karena jQuery sendiri

akan mendefinisikan perintah berikut sebagai $($(this)). Jadi kita tidak perlu menuliskan perintah

$(this).each akan tetapi this saja. Kemudian setelah this didalam fungsi each(). Kita akan menjumpai

dengan $(this). Kalo pada bagian ini, kita tuliskan secara default atau seperti biasa. Karena perintah

$(this) menerangkan target yang sedang diseleksi oleh fungsi each().

Selain itu, didalam penulisan function ini kita bisa membuat fungsi yang dapat kita berikan

options dan default dalam membuat framework fungsi buatan kita sendiri. Contoh scriptnya adalah

seperti ini.

Jika kita function tersebut dengan perintah berikut ini.

Maka isi kandungan informasi fungsi tooltip tersebut adalah.

Hal tersebut terjadi karena, funsi yang kita set adalah location left dan default yang ada adalah

background-color:blue dan location:top. Kedua nilai tersebut, default dan nilai function yang kita set kita

lakukan fungsi extends di jQuery maka, menampilkan isi darifungsi diatas. Dimana nilai default akan

tereplace dengan nilai yang kita set. jika yang kita set hanya sebagian argument dari fungsi tersebut,

maka nilai yang lainya akan terset secara default.

jQuery(document).ready(function(){var tallest=$('div').maxHeight();alert(tallest);

});

(function( $ ){$.fn.tooltip = function( options ) {

//Create some defaults, extending them with any options that were providedvar settings = $.extend( {'location' : 'top','background-color' : 'blue'

}, options);return this.each(function() {// Tooltip plugin code here

});};

})( jQuery );

$('div').tooltip({'location' : 'left'

});

{'location' : 'left','background-color' : 'blue'

}


6/29


Berikut merupakan contoh jadi dari program yang telah dibuat.

Untitled Document(function( $ ){$.fn.tooltip = function( options ) {var settings = $.extend( {'position': 'absolute','backg' : 'blue','data':'Nilai Default','top':'2px','right':'10px','width':'200px'

}, options);

$('.tip').show();$('.tip').css({'position':settings.position,'background-

color':settings.backg,'top':settings.top,'right':settings.right,'width':settings.width});

$('.tip').text(settings.data);};

})( jQuery );jQuery(document).ready(function(){

$('div').hover(function(){

jQuery('.tip').tooltip({'top':'1px','right':'2px','backg':'red','wid

th':'100px'});},function(){

jQuery('.tip').hide();});

});#tool{

width:260px;position:relative;

}#tool img{

height:40px;width:260px;height:200px;

}


7/29


Apabila kursor kita gerakan pada gambar, maka akan muncul tooltip yang terblock warna merah

tersebut.

Event yang ada pada javascript.

1. .keypress()Merupakan Event pemicu untuk mengikat fungsi dari perintah tombol dari element yang

dipilih.

$( selector ).keypress() //memicu keypress untuk pemilihan item

$( selector ).keypress( function ) //Optional. Menjalankan fungsi yang

spesifik ketika ada pemicu berupa penekanan tombol keyboard.

Dari sekian tombol yang ada pada keyboard,akan memiliki devinisi kode yang berbeda-beda.

Devinisi kode dapat dilihat dalam table berikut:

INI ADALAH TOOLTIP

SEDERHANA


8/29


Key Code

Backspace 8

Tab 9

Enter 13

Shift 16

Ctrl 17

Alt 18Pause/Break 19

Caps Lock 20

Escape 27

Page Down 33

End 35

Home 36

Left Arrow 37

Up Arrow 38

Right Arrow 39

Down Arrow 40Insert 45

Delete 46

0 48

1 49

2 50

3 51

4 52

5 53

6 54

7 558 56

9 57

A 65

B 66

C 67

D 68

E 69

F 70

G 71

H 72

I 73

J 74

K 75

L 76

M 77

N 78

Key Code

O 79

P 80

Q 81

R 82

S 83

T 84U 85

V 86

W 87

X 88

Y 89

Z 90

Left window key 91

Right window key 92

Select key 93

Numpad 0 96Numpad 1 97

Numpad 2 98

Numpad 3 99

Numpad 4 100

Numpad 5 101

Numpad 6 102

Numpad 7 103

Numpad 8 104

Numpad 9 105

Multiply 106Add 107

Substract 109

Decimal Point 110

Divide 111

F1 112

F2 113

F3 114

F4 115

F5 116

F6 117

F7 118

F8 119

F9 120

F10 121

F11 122

F12 123

Key Code

Num lock 144

Scroll lock 145

Semi-colon 186

Equal sign 187

Comma 188

Dash 189

Period 190

Forward slash 191

Grave accent 192

Open bracket 219

Back slash 120

Close braket 221

Sinle quote 222


9/29


Contoh : Perintah ketika kita memberian fungsi ketika ada pemicu pada penekanan kode 27 = Esc.

2. Click()Digunakan untuk memicu event pada element HTML saat user mengklik elemen yang

mempunyai fungsi click() ini. Event click dikirim ke elemen saat pointer mouse diatas elemen

dan tombol mouse ditekan lalu dilepaskan.

$(p).click() kode ini berarti bahwa JQuery mencari tag

HTML dan menunggu diklik oleh

user. $(this).hide() kode ini berarti bahwa isi dari paragraph dihide.

3. fadeIn()

Digunakan untuk menampilkan elemen dengan efek pudar.

$(selector).fadeIn(durasi,callback)

Keterangan:

Selector digunakan untuk memilih elemen yang akan dikenakan efek fadeIn.

durasi adalah waktu yang menunjukkan berapa lama efek fade ini akan berlangsung.

$(document).keypress(function(){

if(keyCode==27){

$("#background").fadeOut("slow");

$("#large").fadeOut("slow");}

});


$(p).click(function(){

$(this).hide();

});

});


10/29


Contoh:

4. Css();jQuery juga mempunyai kemampuan dalam hal memanipulasi CSS. Ada 3 fungsi

utama dalam

jQuery untuk melakukan manipulasi.

$(selector).css(name,value)$(selector).css({properties})

$(selector).css(name)

Fungsi css() berguna untuk mendapatkan atau set sebuah properti CSS atau lebih

untuk elemen yang dipilih.

Jika parameter name dan value diisi, artinya kita me-set nilai dari properti CSS.

Untuk me-set nilai-nilai untuk properti CSS lebih dari satu, bisa gunakan {properties}

Jika hanya untuk mendapat nilai dari properti CSS yang diinginkan dari elemen yang

dipilih cukup isi parameter name saja.


$(p).hide();

$(.tekan).click(function(){$(p).fadeIn();

});

});


$("#tombol1").click(function(){

$(".p1").css("color","red");

$(".p2").css({"color":"white","backgroundcolor":"#

ff8954","font-family":"Arial","fontsize":"

20px","padding":"5px"});

});

$("#tombol2").click(function(){

var nilai = $(".p1").css("color");

alert(nilai);});

});


11/29


1. Foto popUpYang dibutuhkan:

File library jquery-1.4.4.min.js

File foto (terserah .jpg, .PNG)

Langkah Pembuatan:

1. Menampilkan image yang ada didalam folder kita ke dalam browser.

Index.html

menandakan bahwa, tidak ada peralihan kehalaman lain setelah

gambar tersebut di klik.

Kemudian simpan terserah.html, pada modul ini kita akan menamainya dengan

nama index.html. Kemudian file index.html kita buka dengan Browser, maka akan

tampil seperti gambar dibawah ini.

Image popUp


12/29


Tetapi setelah di klik pada gambar tersebut, tidak akan terjadi perubahan peralihan

halaman. Karena tidak memberikan tujuan pada .

2. Menampilkan overlay ketika image di klik.

Tambahkan script dibawah pada halaman Index.html.

Setelah itu kita menyisipkan script dibawah ini untuk menghubungkan file library JQuery

dengan file index.html. misalkan kita memakai jquery-1.4.4.min.js. Sisipkan diantara tag

.

Image popUp


13/29


14/29


3. Menampilkan overlay dengan background gelap (agar gambar pada bagian belakang

disamarkan dengan cara penggelapan background) ketika image di klik.

Untuk menampilkan background gelap, kita harus mendiskripsikan CSS dari selector

#background dan mendiskripsikan selector #large.

Tambahkan script ini dibawah pendiskripsian script javascriptnya. Dan masih berada didalam

tag .


15/29


Setelah CSS selctor di deskripsikan, maka akan tampil seperti ini setelah di klik pada gambar

tersebut.

img {

border: none;

position: relative;

}#large {

display: none;

position: absolute;

background: #FFFFFF;

padding: 5px;

color: #336699;

}

#background{

display: none;

position: absolute;height: 100%;

top: 0;

left: 0;

background: #000000;

}


16/29


4. Menerapkan script ketika kita klik di sekitar image saat #large akan kembali ke halaman

image awal. Tulis script dibawah ini pada tag pada pendiskripsian

javascript.

5. Script ketika kita klik pada gambar pada saat #large akan kembali ke halaman image awal

dan kita dapat menggunakan tombol Esc untuk mengembalikanya.

6.

$("#background").click(function(){


$("#large").fadeOut("slow");

});

$(document).keypress(function(e){

if(e.keyCode==27){


$("#large").fadeOut("slow");

}

});

jQuery.fn.cnclab = function () {

$(this).css("position","absolute");$(this).css("top", ( $(window).height() -

this.height() ) / 2+$(window).scrollTop() + "px");

$("#background").css("width", ( $(window).width()

+$(window).scrollLeft() + "px"));

$("#background").css("height", (

$(window).height() +$(window).scrollTop() + "px"));

$(this).css("left", ( $(window).width() - this.width()

) / 2+$(window).scrollLeft() + "px");

return this;

}

$(document).ready(function() {$("#eksekusi img").click(function(){

$("#background").css({"opacity" : "0.7"})

.fadeIn("slow");


17/29


18/29


2. Form Validate

Yang dibutuhkan:

jquery-1.4.js ( Library )

jquery.validate.js

#background{

display: none;

position: absolute;

height: 100%;

top: 0;

left: 0;

background: #000000;

}


19/29


Langkah Pembuatan:

1. Pertama, buatlah form (form.html):

2. Setelah itu kita menyisipkan script dibawah ini untuk menghubungkan file library JQuerydengan file form.html. Hal ini agar kita dapat menggunakan Jquery tersebut. misalkan

kita memakai jquery-1.4.js. Sisipkan diantara tag .

3. Mengatur validasiMasih pengetikan di , ketik scipt di bawah ini.

4. Mengaktifkan validasiPengetikan di antara , ketik script di bawah ini.

5. Mengecek ada tidaknya text di dalam suatu formPengetikan di antara $("#form1").validate, ketik scipt di bawah ini.

Username :

Nama :

Untuk tahap ke 4

$(document).ready(function(){$("#form1").validate(

{Untuk tahap 5});

});


20/29


6. Mengatur passwordBuat form password dan ulang password. Letakkan scipt di bawah form Nama.

7. Memvalidasi panjang form password dan form ulang password yang harus sama denganpassword.

Tambahkan scipt di bawah ini di dalam rules, message.

Rules : //Aturan{

nama: "required",username: "required",

}Message: //Pesan yang akan muncul{

nama: { required: '. Nama harus di isi' },username: { required: '. Username harus di isi' },

}success: //Jika berhasil{

function(label){ label.text('OK!').addClass('valid'); }

}

Password :

Ulang Password :

Rules : {password: {

required: true,

minlength: 8 },

cpassword:{

required: true,

equalTo: "#password" },

}

message : {

password: {

required : '. Password harus di isi',

minlength: '. Password minimal 8 karakter'

},

cpassword: {

required: '. Ulangi Password harus di isi',

equalTo : '. Isinya harus sama dengan Password'

},

}


21/29


8. Mengatur email dan teleponTambahkan form email dan telepon.

9. Mengatur validasinya.Tambahkan scipt di bawah ini di dalam rules, message.

3. SlideshowSlideshow merupakan suatu plugin aplikasi yang sering kita jumpai di web berita akhir-

akhir ini. Dengan menampilkan slideshow, user mungkin akan lebih tertarik untuk melihatnya

dari pada informasi tulisan berjalan saja. Karena dengan adanya slideshow suatu informasi

dapat dilihat lebih oleh user. Karena animasi yang dikemas dalam slideshow itu biasanya

disertai gambar yang menarik. Kegunaan slideshow selain untuk memberikan flash news pada

halaman web berita, juga digunakan untuk image gallery. Dengan adanya slideshow ini user

tidak harus menekan tombol next untuk melihat foto selanjutnya akan tetapi akan berubah

secara otomatis berdasarkan setingan waktu pada slideshow tersebut.

Email :

Telepon :

Rules : {email: {

required: true,email: true },

telp: {required: true,number: true },

}mesage : {

email: {required: '. Email harus di isi',email : '. Email harus valid' },

telp: {required: '. telepon harus di isi',number : '. Hanya boleh di isi Angka' },

}


22/29


Untuk membuat slideshow skill yang dibutuhkan adalah HTML,CSS,Javascript dan

Framework Jquery. Untuk HTML sendiri, temen-temen cukup harus paham membuat TAG

HTML yaitu DIV,IMG dan Anchor. Kemudian temen-temen harus mengerti juga masalah CSS.

Nah yang ini penting, karena CSS ini yang akan menentukan tampilan dari plugins yang akankita buat. Jika kita salah dalam mendesai css. Bisa saja plugins yang kita buat tidak sesuai

dengan yang kita harapkan. Karena css ini menurut penulis adalah komponen yang pembaca

harus benar-benar pahami.

Kemudian selanjutnya adalah javascrip, javascript disini temen-temen diharapkan cukup

mengerti cara penggunaan function, variable, pendefinisian suatu variabel dan event object

saja. Kemudian adalah framework Jquery. Framework jQuery ini memang utama dari pelatihan

ini, akan tetapi jquery yang kita gunakan disini tidak begitu rumit. Semoga saja bisa dicerna

dengan mudah dan dapat dipahami secara jelas.

1. pelathihan1

Pada pelathian yang pertama ini, kita akan belajar menggunakan function,variable dan

pendefinisian object.

Pelathian1.html

function coba(x,y){

var kata=(x!='')?x:'tidak ada kata-kata';

var selector=y;

jQuery(selector).text(kata);

}

KLIK


23/29


Pada script diatas maka akan tampil seperti berikut.

Sebelum diklick Sesudah diklick

Gambar diatas menujukan sebelum dan sesudah gambar tersbut diclick maka akan muncul

tulisan tersebut.

KLIK

Script yang membuat tampilan berubah saat diclick adalah element dari tulisan yang berwarna

merah. Script tersebut sering dituliskan atau dikatakan sebagai event. Dan untuk script yang

berwarna hijau memberikan definisi id untuk selector dari link tersebut. Sehingga tag HTML ini

lah yang nanti akan menjadi target. Kemudian saat kita click maka script diatas maka akan

mecari function javascript yang bernama coba dengan argument terkirim dan #tombol.

Kemudian kedua argument tersebut akan menjalankan sesuai perintahnya yang berada pada

function coba. Dimana didalam function coba terdapat perintah berikut:

function coba(x,y){


var selector=y;

jQuery(selector).text(kata);

}


24/29


Yang mana argument x=terkirim dan y=#tombol , kemudian untuk membaca baris selanjutnya yaitu


Maka var kata akan bernilai =x jika x!= dan akan bernilai tidak ada kata -kata jika tidak

memenuhi x!=. maka jika program itu dijalankan akan bernilai var kata=terkirim karena

x=terkirim. Kemudian var selector=#tombol . kemudian untuk line yang terakhir akan bernilai

seperti berikut jQuery(#tombol).text(terkirim); yang artinya adalah akan mengubah text pada

tag HTML yang memiliki id = tombol.

Note : var artinya adalaha pendifinisian suatu variable.

Saya kira belajar function dijavascript dan jQuery sudah cukup. Maka kita lanjutkan saja ke

program utamanya. Mari kita tulis script berikut

#kotak_foto{

position:relative;

width:400px;

margin:0 auto;

background-color:#F0F0F0;

border:1px solid #666666;

height:360px;

}

#foto{margin:5px;

}

#foto img{

width:390px;

height:350px;

}

#tombol a{

float:left;

padding:5px;

width:15px;

text-align:center;

font-weight:bold;

font-family:Arial, Helvetica, sans-serif;

text-decoration:none;

margin-left:2px;

background-color:#FF0000;

color:#FFFFFF;

}


25/29


#tombol{

position:absolute;

bottom:5px;

margin-right:2px;

right:5px;

}

1

23

Maka tampilanya akan seperti gambar berikut


26/29


Maka jika kita bedah tampilan jadinya akan kita tunjukan dengan prototype yang digambarkan di bawah

Kemudian jika kita lanjutkan untuk penulisan program jQuery-nya maka yang pertama kita buat adalah

membuat trigger di html dan pada .ready jQuery-nya. Sehingga menjadi seperti ini.

jQuery(document).ready(function(){

mainkan('#pertama','#gambar1');

});

1

2

3

Jika sudah kita buat maka trigger sudah siap kita buat, maka sekarang adalah membuat fungsi

saat trigger itu berjalan.

GAMBAR IMAGE

position:relative;width:400px;

margin:0 auto;background-

color:#F0F0F0;border:1px solid#666666; height:360px;

#kotak_foto

#fotoMargin:5px;

position:absolute;

bottom:5px;

margin-right:2px;

right:5px;

#tombol


27/29


Nama fungsi-nya sudah di buat yatu dengan nama mainkan(argument1,argument2).Kemudian

kita tambahkan saja fungsinya sehingga sintaxnya menjadi seperti ini.

var timer=null;function mainkan(tombol,gambar){

jQuery('#tombol a').each(function(){

jQuery(this).css({'background-color':'white','color':'black'});

});

jQuery('#foto div').hide();

jQuery(gambar).fadeIn('slow');

jQuery(tombol).css({'background-color':'red','color':'white'});

if(timer!=null){clearTimeout(timer);}

timer=setTimeout(function(){

varnextanchor=(jQuery(tombol).next('a').text()=='')?jQuery('a#pertama'):jQuery(tombol).next('a');

nextanchor.click();

},3000);

}



});


28/29


Sehingga tulisan script lengkapnya akan menjadi seperti ini.

Untitled Document

var timer=null;

function mainkan(tombol,gambar){

jQuery('#tombol a').each(function(){

jQuery(this).css({'background-color':'white','color':'black'});

});

jQuery('#foto div').hide();

jQuery(gambar).fadeIn('slow');

jQuery(tombol).css({'background-color':'red','color':'white'});

if(timer!=null){clearTimeout(timer);}

timer=setTimeout(function(){varnextanchor=(jQuery(tombol).next('a').text()=='')?jQuery('a#pertama'):jQuery(tombol).next('a');

nextanchor.click();

},3000);

}



});

#kotak_foto{position:relative;

margin:20px auto;

border:1px solid #666666;

padding:5px;

width:400px;

}

#foto img{

width:400px;

}

#tombol{

bottom:20px;

right:25px;

position:absolute;

}

#tombol a{

border-radius:5px;

font-weight:bold;

text-decoration:none;

color:#000000;


29/29

background-color:#FFFFFF;

padding:5px;

}

1

23

Maka tampilan jadinya akan seperti ini.

PelatihanJQuery

Documents

Transcript of PelatihanJQuery