PENGGUNAAN JQUERY
Makalah ini disusun untuk memenuhi tugas mata kuliah
Teknologi Informasi dan Komunikasi
Dosen Pengampu: ...
KATA PENGANTAR
Assalamualaikum Wr.Wb.
Puji syukur senantiasa saya hanturkan kepada Allah SWT yang telah
melimpahkan rahmat...
DAFTAR ISI
Kata Pengantar
Daftar Isi
BAB I PENDAHULUAN
A. Latar Belakang
B. Rumusan Masalah
C. Tujuan
BAB II PEMBAHASAN
A....
4. JQuery Flick Gallery
5. JQuery Galleria
6. JQuery Gallery View
BAB III PENUTUP
Daftar Pustaka
BAB I
PENDAHULUAN
A. Latar Belakang
JQuery adalah javascript Library yaitu kumpulan kode / fungsi
Javascript siap pakai, s...
6. Mengetahui dan memahami JQuery Slideshow

BAB II
PEMBAHASAN
A. Sejarah dan Pengertian
1. Sejarah
Semenjak diluncurkan p...
momentum. Banyak pengembang datang untuk membantu
menyempurnakan librari ini, dan akhirnya menghasilkan rilis stabil
perta...
jQuery merupakan javascript Library atau kumpulan kode /
fungsi Javascript siap pakai, sehingga mempermudah dan
mempercepa...
function stripe (id) {
var even = false;
var evenColor = arguments [1] ? arguments [1] : "#fff";
var oddColor = arguments ...
JQuery juga disebut sebagai sebuah pustaka JavaScript kecil
bersumber terbuka yang menekankan pada interaksi antara
JavaSc...
dari beberapa teknologi web yang sudah lebih dulu populer, yaitu
XHTML/CSS, Document Object Model (DOM), XMLHttpRequest, d...
kita telah melihat contoh cara memilih elemen HTML menggunakan
jQuery.
JQuery element selectors dan attribute selectors
me...
element

$("p")

Semua elemen <p>

.class.class

$(".intro.demo")

Semua
elemen
yang
mempunyai class=intro dan
class=demo
...
pemograman diletakkan di dalam penanganan event yang terjadi
pada suatu atau kelompok elemen yang dipilih.
Hampir-hampir m...
delegate()

Add one or more event
handlers to current, or future,
specified child elements of the
matching elements

die()...
event.result

This attribute contains the last
value returned by an event
handler that was triggered by
this event, unless...
keydown()

Triggers, or binds a function to
the keydown event of selected
elements

keypress()

Triggers, or binds a funct...
mouseup()

Triggers, or binds a function to
the mouse up event of
selected elements

one()

Add one or more event
handlers...
unbind()

Remove an added event
handler from selected
elements

undelegate()

Remove an event handler to
selected elements...
fadeIn()

Gradually changes the opacity,
for selected elements, from
hidden to visible

fadeOut()

Gradually changes the o...
toggle()

Toggles between hide() and
show(), or custom functions, for
selected elements

E. Macam-macam Jquery Slideshow
1...
01.

<a href="images/BIGIMAGE.JPG" class="MYCLASS" title="
MYTITLE">

02.

<img src="images/SMALLIMAGE.JPG" title="IMAGE T...
01.

<span class="notranslate" onmouseover="_tipon(this)"
onmouseout="_tipoff()"><span class="google-srctext" style="direc...
Ini akan instantiate jQzoom di default (standar) mode. Anda
dapat menggunakan lebih banyak pilihan (bagian Dokumentasi),
u...
07.

<span class="notranslate" onmouseover="_tip
on(this)" onmouseout="_tipoff()"><span class="googlesrc-text" style="dire...
14.

<span class="notranslate" onmouseover="_tipon(this
)" onmouseout="_tipoff()"><span class="google-srctext" style="dire...
align: left">preloadImages: true,</span> preloadImage
s: benar,</span>
06.

<span class="notranslate" onmouseover="_t
ipon...
align: left">//...MORE OPTIONS</span> / / ... OPSI LE
BIH</span>
13.

<span class="notranslate" onmouseover="_tipon(thi
s)...
Lindley Thickbox untuk menampilkan gambar yang lebih besar.
EOGallery adalah XHTML 1.0 dan mirip dengan CSS , telah diuji
...
sebelumnya. Dan seperti sebelumnya, script ini mendukung
tampilan keterangan opsional, ditambah tambahan preloading
gambar...
tambahan yang berupa gambar. Tapi itu hanya awal. Berikut
adalah beberapa keterangannya:
 Sesuaikan dimensi album yang di...
melihat gambar secara berurutan, dengan mengklik thumbnail
gambar sebelumnya dan berikutnya. Setiap slide gambar
didefinis...
kecil berdasarkan pada link itu "href" nilai. Cukup memberikan
link dalam pertanyaan baik itu text link atau thumbnail ima...
gambar script yang dimiliki pengunjung. Sekarang kita dapat
memiliki galeri gambar dari semua ukuran. Perangkap adalah
gam...
memiliki kebebasan untuk memilih dari pilihan posisi elemen, gaya
transisi dan fitur lainnya. Berikut contoh opsi-opsi yan...
opsi

panel_scale

jenis

senar

nilai
default

deskripsi

'Tanaman'

metode skala untuk gambar
panel. Pilihannya adalah '...
opsi

jenis

nilai
default

deskripsi

frame_width

int

70

lebar frame filmstrip dalam piksel.

frame_height

int

40

k...
orang yang ingin mengetahui tentang bahasa pemrograman yang berbasis
JQuery.
Demikian saya akhiri makalah ini, tak lupa kr...
DAFTAR PUSTAKA
Anonim. (2011). Sejarah JQuery. Diunduh dari http://pengenalanjquery.blogspot.com/2011/11/sejarah-jquery.ht...
Upcoming SlideShare
Loading in …5
×

penggunaan JQuery

792 views
598 views

Published on

tentang penggunaan dan cara untuk menggunakan JQuery

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
792
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
30
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

penggunaan JQuery

  1. 1. PENGGUNAAN JQUERY Makalah ini disusun untuk memenuhi tugas mata kuliah Teknologi Informasi dan Komunikasi Dosen Pengampu: Septia Lutfi, S. Kom, M. Kom Disusun Oleh: Fajar Satrio NIM. 1102412060 Rombel 3 JURUSAN KURIKULUM DAN TEKNOLOGI PENDIDIKAN FAKULTAS ILMU PENDIDIKAN UNIVERSITAS NEGERI SEMARANG 2013
  2. 2. KATA PENGANTAR Assalamualaikum Wr.Wb. Puji syukur senantiasa saya hanturkan kepada Allah SWT yang telah melimpahkan rahmat dan hidayah-Nya sehingga saya dapat menyelesaikan makalah dengan judul “Penggunaan JQuery” ini tepat pada waktunya, untuk memenuhi salah satu tugas mata kuliah Teknologi Informasi dan Komunikasi. Ada banyak kesulitan dalam penyelesaian tugas ini, namun berkat bantuan dari berbagai pihak, akhirnya kesulitan itu dapat saya atasi. Oleh karena itu, dengan segala kerendahan hati, saya mengucapkan terima kasih kepada semua pihak yang telah membantu dalam proses penyelesaian makalah ini. Dengan makalah ini, saya harap semoga makalah ini dapat bermanfaat bagi kita semua, dan mampu memberikan informasi tentang penggunaan JQuery Library. Masih banyak kekurangan dalam penyusunan makalah ini. Oleh karena itu, saya mengharapkan kritik dan saran yang membangun dari pembaca agar nantinya bisa menjadi pembelajaran yang baik bagi saya dan dapat membuat makalah yang lebih baik lagi. Atas kritik dan saran anda saya mengucapkan terima kasih. Wassalamualaikum Wr.Wb Semarang, 25 November 2013 Fajar Satrio
  3. 3. DAFTAR ISI Kata Pengantar Daftar Isi BAB I PENDAHULUAN A. Latar Belakang B. Rumusan Masalah C. Tujuan BAB II PEMBAHASAN A. Sejarah dan Pengertian 1. Sejarah 2. Pengertian B. JQuery Selector 1. JQuery Element Selectors 2. JQuery Attribute Selectors C. JQuery Event D. JQuery Effect E. Macam-macam JQuery Sledeshow 1. JQZoom Evolution 2. JQuery EOGallery 3. JQuery Dynamic Drive Image Gallery a. Lightbox image viewer b. Lightbox Gambar penampil v2.03a c. Facebox Image and Content Viewer d. Simple Control Gallery e. Touch Image Gallery f. Tooltip Description g. Photo Album Script h. PHP Photo Album Script i. Langkah Carousel Viewer j. FrogJS Gallery k. CMotion Gallery l. CMotion Gallery II m. Thumbnail Image Viewer n. Thumbnail Image Viewer II o. Choice Dynamic Image
  4. 4. 4. JQuery Flick Gallery 5. JQuery Galleria 6. JQuery Gallery View BAB III PENUTUP Daftar Pustaka
  5. 5. BAB I PENDAHULUAN A. Latar Belakang JQuery adalah javascript Library yaitu kumpulan kode / fungsi Javascript siap pakai, sehingga mempermudah dan mempercepat kita dalam membuat kode Javascript secara standar. Apabila kita membuat kode Javascript, maka diperlukan kode yang cukup panjang, bahkan terkadang sangat sulit dipahami, misalnya fungsi Javascript untuk membuat stripe (warna selang-seling) pada baris suatu tabel. Nah, disinilah peran jQuery sebagai Javascript Library, dimana kita bisa langsung memanggil fungsi yang terdapat di dalam Library tersebut, menariknya kita hanya memerlukan satu/dua baris untuk membuat warna selang-seling pada suatu tabel. Atas alasan banyaknya ketidaktahuan mengenai JQuery, selain untuk memenuhi tugas mata kuliah Teknologi Informasi dan Komunikasi, maka saya berusaha menyusun makalah ini dengan segenap kemampuan yang saya miliki. B. Rumusan Masalah 1. Bagaimana sejarah perkembangan JQuery? 2. Apa itu JQuery? 3. Apa yang dimaksud dengan JQuery selector? 4. Bagaimana menggunakan JQuery Event? 5. Bagaimana menggunakan JQuery Effect? 6. Jelaskan macam-macam JQuery Slideshow? C. Tujuan 1. Mengetahui bagaimana sejarah perkembangan JQuery. 2. Mengenal apa yang disebut JQuery. 3. Mengerti tentang JQuery Selector. 4. Menguasai bagaimana cara menggunakan JQuery Event. 5. Mengerti dan menguasai bagaimana cara menggunakan JQuery Effect
  6. 6. 6. Mengetahui dan memahami JQuery Slideshow BAB II PEMBAHASAN A. Sejarah dan Pengertian 1. Sejarah Semenjak diluncurkan pertama kali pada tahun 2006 oleh john Resig, jQuery sudah menarik perhatian mayoritas developer web. Buktinya, dalam tahun-tahun sesudahnya jQuery sudah banyak digunakan oleh website - website ternama di dunia seperti Google, Microsoft, intel , Nokia, Oracle , IBM, DELL, BBC, NBC, ESPN, EAPN, EA Sport, Twitter, Facebook, Amazon, Techorati, Youtobe Apple, Wordpress, Mozila, Netflix , Digg, Time, dan masih banyak lagi. Bahkan website lokalpun tidak mau ketinggalan, Lihat saja Detik, Studio 21 (21cineplex.com). Indosiar, Vivanews, Kompas, termasuk Pincuran.com tentunya dan sebagainya. Jquery Pertama kali dikembangkan oleh Jhon Resig pertama kali pada tahun 2005, saat itu dia terinspirasi dari kode Behavior, ketika itu Jhon merasa kode kode behavior tidak elegan dan bahkan sangat jelek, kemudian dia mulai memikirkan cara membuat library yang bagus dan ringan untuk javascript. Resig mencatat di situs webnya, ia menciptakan jQuery karena ia tidak puas dengan library yang saat itu tersedia dan merasa bahwa seharusnya frameworkframework tersebut bisa jauh lebih baik dengan mengurangi ”syntactic fluff” dan menambahkan kontrol khusus untuk tindakantindakan yang bersifat umum. Maka lahirlah JQUERY pada 14 januari 2006, dimana dengan penulisan code JQuery jadi lebih simple, gampang dan tentunya dengan hasil yang memuaskan. Diluncurkan versi pertama dari Jquery dan sampai sekarang masih terus dikembangkan dan disempurnakan. jQuery dengan cepat menemukan komunitas yang mendukung pengembangan script dan dengan cepat mendapatkan
  7. 7. momentum. Banyak pengembang datang untuk membantu menyempurnakan librari ini, dan akhirnya menghasilkan rilis stabil pertama dari jQuery, versi 1.0, pada tanggal 26 Agustus 2006. Sejak itu, jQuery sudah berkembang ke versi 1.7.1 dan sudah mempunyai plug-in yang banyak tersedia dari komunitas pengembang. Sebuah plug-in adalah ekstensi dari jQuery yang bukan bagian dari library inti. JQuery yang beralamatkan di http://jquery.com kurang lebih baru menginjak usia 3 tahun. Akan tetapi, jQuery sebenarnya bukanlah hal yang baru jika melihar “jeroan”-nya, karena berisi fungsi-fungsi yang ditulis dengan JavaScript, dan JavaScript itu sendiri telah diperkenalkan oleh Netscape sejak tahun 1995. Akan tetapi, tentu jQuery menawarkan fitur-fitur modern yang siap pakai, walaupun idenya sederhana, yaitu membuat sebuah library JavaScript, ternyata jQuery mampu menarik perusahaan-perusahaan besar yang mem-bundling jQuery kedalam produknya. Nokia akan mengintegrasikan jQuery kedalam platform web Run-Time, sedangkan Microsoft mengadopsi jQuery kedalam Visual Studio. 2. Pengertian
  8. 8. jQuery merupakan javascript Library atau kumpulan kode / fungsi Javascript siap pakai, sehingga mempermudah dan mempercepat kita dalam membuat kode Javascript. Secara standar, apabila kita membuat kode Javascript, maka diperlukan kode yang cukup panjang, bahkan terkadang sangat sulit dipahami, misalnya fungsi Javascript untuk membuat stripe (warna selang-seling) pada baris suatu table. Di sinilah peran JQuery sebagai Javascript Library, dimana kita dapat langsung memanggil fungsi yang terdapat di dalam library tersebut, dan hal yang menarik disini adalah kita hanya membutuhkan satu baris untuk membuat warna selang-seling pada suatu tabel. Dengan JQuery, suatu halaman web yang menjadi aplikasi web, jika dilihat sourcenya, akan terlihat seperti dokumen HTML biasa, tidak ada kode JavaScript yang terlihat langsung. Teknik pemrograman web seperti ini disebut sebagai unobstrusive JavaScript programming. JQuery memiliki kemampuan-kemampuan istimewa yaitu : a. Kemudahan mengakses elemen-elemen HTML b. Memanipulasi elemen HTML c. Memanipulasi CSS d. Penanganan event HTML e. Efek-efek javascript dan animasi f. Modifikasi HTML DOM g. AJAX h. Menyederhanakan kode javascript lainnya Guna memudahkan pada pemahaman JQuery, sangat dianjurkan terlebih dahulu paham dan menguasai pengkodean HTML, CSS dan Javascript. Secara standar, apabila kita membuat kode javascript, maka diperlukan kode yang sangat panjang. Bahkan terkadang sangat sulit untuk di pahami. Misalnya, fungsi javascript untuk membuat stripe (warna selang-seling) pada baris suatu tabel adalah sebagai berikut :
  9. 9. function stripe (id) { var even = false; var evenColor = arguments [1] ? arguments [1] : "#fff"; var oddColor = arguments [2] ? arguments [2] : "#eee"; var table = document.getElementById (id); if ( ! table) {return;} var tbodies = table.getElementsByTagName ("tbody"); for (var h = 0; h < tbodies.lenght; h++) { var trs = tbodies[h].getElementsByTagName("tr"); for (var i = 0; i < trs.lenght; i++) { if ( ! hasClass(trs[i])) && ! trs[i] . style.backgroundColor) { var tds = trs[i].getElementsByTagName("td"); for (var j = 0; j < tds.lenght; j++) { var mytd = tds[j]; if ( ! hasClass(mytd) && ! mytd.style.backgroundColor) { mytd.style.backgroundColor = even ? evenColor : oddColor; } } } } } }
  10. 10. JQuery juga disebut sebagai sebuah pustaka JavaScript kecil bersumber terbuka yang menekankan pada interaksi antara JavaScript dan HTML. Pustaka ini dirilis pada Januari 2006 di BarCamp NYC oleh John Resig dan berlisensi ganda di bawah Lisensi MIT dan GPL. Microsoft dan Nokia telah mengumumkan akan mengemas JQuery di platform mereka. Microsoft awalnya mengadopsinya dalam Visual Studio untuk digunakan dalam ASP.NET AJAX dan ASP.NET MVC Framework. Bukan itu saja JQuery juga disebut sebagai library Javascript yang gratis dan open source. Oleh karenanya JQuery dapat digunakan dengan bebas untuk keperluan pengembangan website. Tanpa library seperti jQuery, menerapkan Javascript mungkin akan lebih sulit, terutama untuk pemula yang baru belajar Javascript. Plugin tambahan seperti JQuery UI (user interface) semakin memudahkan pengguna untuk mengembangkan website yang cantik dan interaktif. Selain itu tersedia plugin-plugin lain yang makin memperkaya kemampuan jQuery. Sebenernya, JQuery akan terasa asing jika kita belum mengenal HTML dan JavaScript (JS). Jadi akan lebih baik apa bila sebelum belajar JQuery, pahami terlebih dahulu konsep HTML (dan PHP) dan JS baru belajar JQuery. JQuery disebut-sebut sebagai salah satu library JS. Jika di PHP kita mengenal framework, maka JQuery dapat dianggap salah satu “framework”nya JS. Pada kenyataannya jarang sekali sebuah situs dibuat murni JQuery. Biasanya JQuery diposisikan seperti sebuah ‘function’ atau class untuk di”tempel”kan pada sebuah web/aplikasi berbasis HTML atau PHP. Sekilas mengenai apa itu AJAX, Istilah AJAX pertama kali dikemukakan oleh Jesse James Garrett dalam artikelnya yang berjudul AJAX: A New Approach to Web Applications. Dalam artikel tersebut ia mengatakan bahwa AJAX sebenarnya bukanlah teknologi pemrograman web yang berdiri sendiri tetapi kombinasi
  11. 11. dari beberapa teknologi web yang sudah lebih dulu populer, yaitu XHTML/CSS, Document Object Model (DOM), XMLHttpRequest, dan JavaScript. Inti dari library jQuery sebenarnya adalah fungsi jQuery (jQuery Function ($)). Fungsi ini adalah jantung dan jiwa dari jQuery dan digunakan dalam setiap baris kode ketika jQuery diimplementasikan. Sebagian besar developer dalam pengimplementasian (penerapan) jQuery menggunakan shortcut $() sebagai pengganti dari sintaks jQuery(). Hal ini untuk meringkas kode, seperti semboyan dari jQuery sendiri, write Less Do More Library JavaScript tertentu juga menggunakan fungsi $(), sehingga konflik mungkin dapat terjadi ketika kita mencoba untuk menggunakan lebih dari satu library JavaScript secara bersamaan. jQuery menyediakan fungsi khusus untuk mencegah situasi ini dengan jQuery.noConflict(). Contoh script JQuery adalah sebagai berikut: <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> //letak menulis coding jquery </script> </head> </html> B. JQuery Selector Di dalam JQuery juga terdapat selector, selectors memungkinkan Anda untuk memanipulasi elemen HTML sebagai kelompok atau sebagai elemen tunggal. Pada penjelasan sebelumnya
  12. 12. kita telah melihat contoh cara memilih elemen HTML menggunakan jQuery. JQuery element selectors dan attribute selectors memungkinkan Anda untuk memilih elemen HTML (atau kelompok elemen) dengan nama tag, nama atribut atau konten. Selectors memungkinkan Anda untuk memanipulasi elemen HTML sebagai kelompok atau sebagai elemen tunggal. 1. JQuery Element Selectors, jQuery mirip CSS dalam hal memilih elemen HTML. Berikut contohnya : $("p") memilih semua elemen <p> $("p.intro") memilih semua elemen <p> yang mempunyai class="intro". $("p#demo") memilih elemen <p> yang mempunyai id="demo". 2. JQuery Attribute Selectors, JQuery mirip XPath dalam hal memilih elemen berdasarkan atribut yang ada. Berikut contohnya : $("[href]") memilih semua elemen dengan atribut href. $("[href='#']") memilih semua elemen dengan atribut href bernilai="#". $("[href!='#']") memilih semua elemen dengan atribut href dengan nilai bukan sama dengan "#". $("[href$='.jpg']") memilih semua elemen dengan atribut href yang mengandung ".jpg". Berikut ada beberapa contoh JQuery Selector: Selector Contoh Yang Dipilih * $("*") Semua elemen #id $("#lastname") Elemen yang id=lastname .class $(".intro") Semua elemen mempunyai class="intro" mempunyai yang
  13. 13. element $("p") Semua elemen <p> .class.class $(".intro.demo") Semua elemen yang mempunyai class=intro dan class=demo :first $("p:first") Elemen <p> yang pertama :last $("p:last") Elemen <p> yang terakhir :even $("tr:even") Semua genap :odd $("tr:odd") Semua elemen <tr> yang ganjil :eq(index) $("ul li:eq(3)") Elemen ke-empat dari suatu list (index starts at 0) :gt(no) $("ul li:gt(3)") Elemen-elemen dari suatu list dengan index lebih besar dari 3 :lt(no) $("ul li:lt(3)") Elemen-elemen dari suatu list dengan index kecil dari 3 :not(selector) $("input:not(:em pty)") Semua input elemen yang tidak kosong :header $(":header") Semua elemen <h1><h2>... :animated elemen <tr> yang header Semua elemen animasi :contains(text) $(":contains('W3S chools')") Semua elemen yang mengandung teks ‘W3Schools’ :empty $(":empty") Semua elemen yang tidak mempunyai child (elements) nodes :hidden $("p:hidden") Semua elemen tersembunyi <p> yang s1,s2,s3 $("th,td,.intro") Semua elemen yang dengan th, td, .intro cocok C. JQuery Event Salah satu kemampuan utama jquery adalah menangani event. Dalam pemograman jquery, biasanya kode-kode
  14. 14. pemograman diletakkan di dalam penanganan event yang terjadi pada suatu atau kelompok elemen yang dipilih. Hampir-hampir mirip dengan Visual Basic, biasanya suatu kode dijalankan apabila ada sesuatu yang terjadi (event) pada suatu elemen. Misalnya, kalau ada tombol di klik, maka action atau kode apa yang dijalankan, apabila ada combox dipilih, kode apa yang dijalankan, pada contoh jquery sebelumnya : $(".tombol1").click(function(){ $("p").hide(1000); }); Kode di atas berarti apabila terjadi event mengklik elemen yang mempunyai class=’tombol1’, maka lakukan fungsi hide() terhadap semua element <p>. Berikut daftar table JQuery Event: Method Description bind() Add one or more event handlers to matching elements blur() Triggers, or binds a function to the blur event of selected elements change() Triggers, or binds a function to the change event of selected elements click() Triggers, or binds a function to the click event of selected elements dblclick() Triggers, or binds a function to the dblclick event of selected elements
  15. 15. delegate() Add one or more event handlers to current, or future, specified child elements of the matching elements die() Remove all event handlers added with the live() function eror() Triggers, or binds a function to the error event of selected elements event.currentTarget The current DOM element within the event bubbling phase event.data Contains the optional data passed to jQuery.fn.bind when the current executing handler was bound event.isDefaultPrevented() Returns whether event.preventDefault() was called for the event object event.isImmediatePropagationStop Returns whether ped() event.stopImmediatePropagati on() was called for the event object event.isPropagationStopped() Returns whether event.stopPropagation() was called for the event object event.pageX The mouse position relative to the left edge of the document event.pageY The mouse position relative to the top edge of the document event.preventDefault() Prevents the default action of the event event.relatedTarget The other DOM element involved in the event, if any
  16. 16. event.result This attribute contains the last value returned by an event handler that was triggered by this event, unless the value was undefined event.stopImmediatePropagation() Prevents other event handlers from being called event.stopPropagation() Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event event.target The DOM element that initiated the event event.timeStamp This attribute returns the number of milliseconds since January 1, 1970, when the event is triggered event.type Describes the nature of the event event.which Which key or button was pressed for a key or button event focus() Triggers, or binds a function to the focus event of selected elements focusin() Binds a function to the focusin event of selected elements focusout() Binds a function to the focusout event of selected elements hover() Binds one or two functions to the hover event of selected elements
  17. 17. keydown() Triggers, or binds a function to the keydown event of selected elements keypress() Triggers, or binds a function to the keypress event of selected elements keyup() Triggers, or binds a function to the keyup event of selected elements live() Add one or more event handlers to current, or future, matching elements load() Triggers, or binds a function to the load event of selected elements mousedown() Triggers, or binds a function to the mouse down event of selected elements mouseenter() Triggers, or binds a function to the mouse enter event of selected elements mouseleave() Triggers, or binds a function to the mouse leave event of selected elements mousemove() Triggers, or binds a function to the mouse move event of selected elements mouseout() Triggers, or binds a function to the mouse out event of selected elements mouseover() Triggers, or binds a function to the mouse over event of selected elements
  18. 18. mouseup() Triggers, or binds a function to the mouse up event of selected elements one() Add one or more event handlers to matching elements. This handler can only be triggered once per element ready() Binds a function to the ready event of a document (when an HTML document is ready to use) resize() Triggers, or binds a function to the resize event of selected elements scroll() Triggers, or binds a function to the scroll event of selected elements select() Triggers, or binds a function to the select event of selected elements submit() Triggers, or binds a function to the submit event of selected elements toggle() Binds two or more functions to the toggle between for the click event for selected elements trigger() Triggers all events bound to the selected elements triggerHandler() Triggers all functions bound to a specified event for the selected elements
  19. 19. unbind() Remove an added event handler from selected elements undelegate() Remove an event handler to selected elements, now or in the future unload() Triggers, or binds a function to the unload event of selected elements D. JQuery Effect Salah satu kemampuan jquery adalah, adanya fungsi-fungsi efek yang siap pakai. Biasanya untuk membuat efek memudar di javascript, kita harus membuat kode yang lumayan panjang. Tapi dengan menggunakan jquery cukup menggunakan fungsi $(selector). Berikut contoh script JQuery effect: Method animate() Description Performs a custom animation (of a set of CSS properties) for selected elements clearQueue() Removes all queued functions for the selected element delay() Sets a delay for all queued functions for the selected element dequeue() Runs the next queued functions for the selected element
  20. 20. fadeIn() Gradually changes the opacity, for selected elements, from hidden to visible fadeOut() Gradually changes the opacity, for selected elements, from visible to hidden fadeTo() Gradually changes the opacity, for selected elements, to a specified opacity fadeToggle() hide() Hides selected elements queue() Shows the queued functions for the selected element show() Shows hidden selected elements slideDown() Gradually changes the height, for selected elements, from hidden to visible slideToggle() Toggles between slideUp() and slideDown() for selected elements slideUp() Gradually changes the height, for selected elements, from visible to hidden stop() Stops a running animation on selected elements
  21. 21. toggle() Toggles between hide() and show(), or custom functions, for selected elements E. Macam-macam Jquery Slideshow 1. JQZoom Evolution jQzoom adalah script yang besar dan sangat mudah digunakan untuk memperbesar apa yang Anda inginkan. Bekerja pada semua browser modern, seperti: Mozilla, Internet Explorer, Opera mini, Kompas, dan Google Chrome. JQZoom Evolution dirilis pada tanggal 3 Bulan Mei tahun 2011 Ada beberapa tipe JQZoom evolution, yaitu sebagai berikut: a. Zoom standar b. Zoom standar dengan thumbnail c. Membalikkan zoom d. Tarik zoom e. Batin zoom f. Selalu di zoom g. Resize, posisi zoom kustom popup, fadeIn, efek fadeout Berikut cara menggunakan JQZoom Evolution: Menggunakan jQZoom sangatlah mudah, tetapi Anda perlu menentukan elemen HTML anchor, yang akan menghasilkan zoom yang menampilkan sebagian dari gambar yang diperbesar. Caranya adalah sebagai berikut.
  22. 22. 01. <a href="images/BIGIMAGE.JPG" class="MYCLASS" title=" MYTITLE"> 02. <img src="images/SMALLIMAGE.JPG" title="IMAGE TIT LE"> 03. </a> 04. 01. <a href="http://www.mindprojects.it/projects/jqzoom/images/BIGIMAGE.JPG" clas s="MYCLASS" title="MYTITLE"> 02. <img src="SMALLIMAGE.JPG" title="IMAGE TITLE"> 03. </a> 04. Unsur jangkar mencakup gambar kecil yang ingin Anda zoom. Dengan skema ini elemen dan basis yang diperlukan adalah:  SMALLIMAGE.JPG: Merupakan gambar kecil yang ingin anda tampilkan.  BIGIMAGE.JPG: Merupakan gambar besar yang akan ditampilkan dengan JQZoom.  MyClass: Merupakan kelas jangkar, yang akan digunakan untuk instantiate script jQZoom dengan semua elemen yang cocok dengan kelas ini (Anda dapat menggunakan ID juga).  MYTITLE / IMAGE JUDUL: Judul jangkar dan / atau judul yang akan digunakan untuk menampilkan judul zoom dekat dengan jQZoom Jendela gambar. PERHATIKAN: SMALLIMAGE harus menjadi versione skala dari BIGIMAGE tersebut. Sekarang load plugin pada beban jendela.
  23. 23. 01. <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-srctext" style="direction: ltr; textalign: left">$(document).ready(function(){</span> $ ( Document). Ready (function () {</span> 02. <span class="notranslate" onmouseover="_tipon(thi s)" onmouseout="_tipoff()"><span class="google-srctext" style="direction: ltr; textalign: left">$('.MYCLASS').jqzoom();</span> $ ('MyCla ss.') Jqzoom ().;</span> 03. <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-srctext" style="direction: ltr; textalign: left">});</span> });</span> 01. <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-srctext" style="direction: ltr; textalign: left">$(document).ready(function(){</span> $ ( Document). Ready (function () {</span> 02. <span class="notranslate" onmouseover="_tipon(thi s)" onmouseout="_tipoff()"><span class="google-srctext" style="direction: ltr; textalign: left">$('.MYCLASS').jqzoom();</span> $ ('MyCla ss.') Jqzoom ().;</span> 03. <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-srctext" style="direction: ltr; textalign: left">});</span> });</span>
  24. 24. Ini akan instantiate jQzoom di default (standar) mode. Anda dapat menggunakan lebih banyak pilihan (bagian Dokumentasi), untuk menciptakan efek khusus atau kustom seperti pada contoh di bawah ini. 01. <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-srctext" style="direction: ltr; textalign: left">$(document).ready(function(){</span> $ ( Document). Ready (function () {</span> 02. <span class="notranslate" onmouseover="_tipon(thi s)" onmouseout="_tipoff()"><span class="google-srctext" style="direction: ltr; textalign: left">var options = {</span> Pilihan var = {</ span> 03. <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-srctext" style="direction: ltr; textalign: left">});</span> });</span> 04. <span class="notranslate" onmouseover="_tipon( this)" onmouseout="_tipoff()"><span class="googlesrc-text" style="direction: ltr; textalign: left">lens:true,</span> Lensa: benar,</span> 05. <span class="notranslate" onmouseover="_tipon( this)" onmouseout="_tipoff()"><span class="googlesrc-text" style="direction: ltr; textalign: left">preloadImages: true,</span> preloadImage s: benar,</span> 06. <span class="notranslate" onmouseover="_tipon (this)" onmouseout="_tipoff()"><span class="googlesrc-text" style="direction: ltr; textalign: left">alwaysOn:false,</span> AlwaysOn: palsu,< /span>
  25. 25. 07. <span class="notranslate" onmouseover="_tip on(this)" onmouseout="_tipoff()"><span class="googlesrc-text" style="direction: ltr; textalign: left">zoomWidth: 300,</span> zoomWidth: 300,</ span> 08. <span class="notranslate" onmouseover="_tip on(this)" onmouseout="_tipoff()"><span class="googlesrc-text" style="direction: ltr; textalign: left">zoomHeight: 250,</span> zoomHeight: 250, </span> 09. <span class="notranslate" onmouseover="_ti pon(this)" onmouseout="_tipoff()"><span class="google -src-text" style="direction: ltr; textalign: left">xOffset:90,</span> xOffset: 90,</span> 10. <span class="notranslate" onmouseover="_tip on(this)" onmouseout="_tipoff()"><span class="googlesrc-text" style="direction: ltr; textalign: left">yOffset:30,</span> yOffset: 30,</span> 11. <span class="notranslate" onmouseover="_tip on(this)" onmouseout="_tipoff()"><span class="googlesrc-text" style="direction: ltr; textalign: left">position:'left'</span> Posisi: 'kiri'</s pan> 12. <span class="notranslate" onmouseover="_tip on(this)" onmouseout="_tipoff()"><span class="googlesrc-text" style="direction: ltr; textalign: left">//...MORE OPTIONS</span> / / ... OPSI LE BIH</span> 13. <span class="notranslate" onmouseover="_tipon(this )" onmouseout="_tipoff()"><span class="google-srctext" style="direction: ltr; textalign: left">};</span> };</span>
  26. 26. 14. <span class="notranslate" onmouseover="_tipon(this )" onmouseout="_tipoff()"><span class="google-srctext" style="direction: ltr; textalign: left">$('.MYCLASS').jqzoom(options);</span> $ ('MyClass.') Jqzoom (pilihan);.</span> 15. <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-srctext" style="direction: ltr; textalign: left">});</span> });</span> 01. <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-srctext" style="direction: ltr; textalign: left">$(document).ready(function(){</span> $ ( Document). Ready (function () {</span> 02. <span class="notranslate" onmouseover="_tipon(thi s)" onmouseout="_tipoff()"><span class="google-srctext" style="direction: ltr; textalign: left">var options = {</span> Pilihan var = {</ span> 03. <span class="notranslate" onmouseover="_t ipon(this)" onmouseout="_tipoff()"><span class="googl e-src-text" style="direction: ltr; textalign: left">zoomType: 'standard',</span> zoomType: ' standar',</span> 04. <span class="notranslate" onmouseover="_t ipon(this)" onmouseout="_tipoff()"><span class="googl e-src-text" style="direction: ltr; textalign: left">lens:true,</span> Lensa: benar,</span> 05. <span class="notranslate" onmouseover="_ti pon(this)" onmouseout="_tipoff()"><span class="google -src-text" style="direction: ltr; text-
  27. 27. align: left">preloadImages: true,</span> preloadImage s: benar,</span> 06. <span class="notranslate" onmouseover="_t ipon(this)" onmouseout="_tipoff()"><span class="googl e-src-text" style="direction: ltr; textalign: left">alwaysOn:false,</span> AlwaysOn: palsu,< /span> 07. <span class="notranslate" onmouseover="_ti pon(this)" onmouseout="_tipoff()"><span class="google -src-text" style="direction: ltr; textalign: left">zoomWidth: 300,</span> zoomWidth: 300,</ span> 08. <span class="notranslate" onmouseover="_t ipon(this)" onmouseout="_tipoff()"><span class="googl e-src-text" style="direction: ltr; textalign: left">zoomHeight: 250,</span> zoomHeight: 250, </span> 09. <span class="notranslate" onmouseover="_t ipon(this)" onmouseout="_tipoff()"><span class="googl e-src-text" style="direction: ltr; textalign: left">xOffset:90,</span> xOffset: 90,</span> 10. <span class="notranslate" onmouseover="_t ipon(this)" onmouseout="_tipoff()"><span class="googl e-src-text" style="direction: ltr; textalign: left">yOffset:30,</span> yOffset: 30,</span> 11. <span class="notranslate" onmouseover="_t ipon(this)" onmouseout="_tipoff()"><span class="googl e-src-text" style="direction: ltr; textalign: left">position:'left'</span> Posisi: 'kiri'</s pan> 12. <span class="notranslate" onmouseover="_t ipon(this)" onmouseout="_tipoff()"><span class="googl e-src-text" style="direction: ltr; text-
  28. 28. align: left">//...MORE OPTIONS</span> / / ... OPSI LE BIH</span> 13. <span class="notranslate" onmouseover="_tipon(thi s)" onmouseout="_tipoff()"><span class="google-srctext" style="direction: ltr; textalign: left">};</span> };</span> 14. <span class="notranslate" onmouseover="_tipon(thi s)" onmouseout="_tipoff()"><span class="google-srctext" style="direction: ltr; textalign: left">$('.MYCLASS').jqzoom(options);</span> $ ('MyClass.') Jqzoom (pilihan);.</span> 15. <span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-srctext" style="direction: ltr; textalign: left">});</span> });</span> 2. JQuery EOGallery EOGallery adalah slideshow galeri animasi Web yang dibuat dengan jQuery . Hanya menggunakan fungsi jQuery Dasar dan Cody
  29. 29. Lindley Thickbox untuk menampilkan gambar yang lebih besar. EOGallery adalah XHTML 1.0 dan mirip dengan CSS , telah diuji pada Firefox, Safari, Bahkan Internet Explorer 6 dan bekerja dengan non-JavaScript dan / atau browser non-CSS. EOGallery dibuat untuk tujuan pengujian, mungkin ada bug dan system aneh yang tidak kita ketahui. 3. JQuery Dynamic Drive Image Gallery JQuery Dynamic Drive Image Gallery terbagi lagi menjadi: a. Lightbox image viewer Lightbox JS adalah, skrip mencolok yang berbasis elegan untuk melapisi versi yang lebih besar dari gambar di halaman web untuk layar pada saat klik gambar kecil. Ini snap untuk mengatur dan bekerja pada semua browser modern. b. Lightbox Gambar penampil v2.03a Lightbox Image Viewer 2.0 memperluas dari versi sebelumnya yaitu Lightbox Image Viewer dengan beberapa fitur baru. Jika versi aslinya sangat bagus untuk melihat gambar secara individual pada halaman, Lightbox 2.0 mendukung "pengelompokan" fitur baru yang memungkinkan untuk mengelompokkan gambar terkait pada halaman untuk browsing. Efek transisi untuk membesarkan gambar juga berbeda dari versi
  30. 30. sebelumnya. Dan seperti sebelumnya, script ini mendukung tampilan keterangan opsional, ditambah tambahan preloading gambar berikutnya ketika gambar dikelompokkan. c. Facebox Image and Content Viewer Facebox adalah lightbox Facebook gaya ringan yang dapat menampilkan gambar, divs, atau seluruh halaman jarak jauh (melalui Ajax) inline pada halaman dan on demand. Facebox menggunakan compact JQuery library sebagai mesin sistemnya, tidak seperti Lightbox v2.0 , yang menggunakan Prototype. d. Simple Control Gallery Untuk menambahkan kemampuan menampilkan galeri gambar saja setelah semua gambar dalam galeri telah dimuat. Mesin ini membutuhkan jQuery 1.5 +. e. Touch Image Gallery Touch Image Gallery adalah galeri gambar sederhana yang melayani browser mobile dan sejenisnya, dengan menyentuh / menggesek, selain cara tradisional navigasi. Galeri bisa dinavigasi dengan cara intuitif seperti berikut:  Dengan menggesekkan ke kiri atau kanan menggunakan jarijari di browser mobile, atau menyeret menggunakan mouse.  Dengan menekan atau mengklik baik pada sisi kiri atau kanan dari galeri.  Dengan mengklik auto yang dihasilkan peluru bawah galeri. f. Tooltip Description Penggunaan Tooltip Description adalah dengan Gerakkan mouse di atas link dan muncul gambar yang telah dipilih ditambah deskripsi yang sesuai pop up, dengan menggunakan skrip tooltip. Setiap tooltip didefinisikan dalam naskah kemudian dikaitkan dengan elemen pada halaman dengan memasukkan " rel "atribut ke dalamnya. Selain itu, setiap tooltip dapat dengan mudah berganti-ganti gaya yang membedakan satu dengan yang lainnya. g. Photo Album Script Photo Album skrip sangat ideal untuk menampilkan beberapa gambar sekaligus, dengan link ke siklus melalui batch
  31. 31. tambahan yang berupa gambar. Tapi itu hanya awal. Berikut adalah beberapa keterangannya:  Sesuaikan dimensi album yang diinginkan, seperti 3 dengan 2 gambar, 4 dengan 5 gambar dll  Untuk setiap gambar, tentukan deskripsi opsional, link, dan link target.  Script otomatis membangun link navigasi untuk memungkinkan pengunjung untuk siklus antara "batch" gambar dalam album.  Kemampuan untuk menjalankan kode sendiri setiap kali gambar dalam album diklik (via onselectphoto ). Hal ini memungkinkan untuk mengubah pengaturan default ketika pengguna mengklik gambar, seperti memuat link yang terkait dalam pop up gantinya. h. PHP Photo Album Script PHP Photo Album Script adalah Photo Album yang ditingkatkan script PHPnya untuk mengotomatisasi pengambilan semua gambar dalam direktori tertentu untuk penunjukan. Dengan link pagination dihasilkan untuk siklus melalui setiap halaman. Sebuah script PHP ( getalbumpics.php ) ditempatkan di direktori gambar yang diinginkan secara otomatis mendapatkan nama file dari semua gambar di dalamnya dan menciptakan array JavaScript untuk diproses lebih lanjut oleh script. Ketika Anda meng-upload atau memodifikasi gambar di dalam direktori, script secara otomatis akan menyesuaikan. i. Langkah Carousel Viewer Langkah Carousel Viewer menampilkan gambar atau HTML bahkan sisi-sisinya dapat bergulir ke kiri atau kanan. Pengguna dapat melangkah untuk setiap panel khusus pada permintaan, atau menelusuri galeri berurutan dengan melangkah melalui x jumlah panel. Sebuah animasi geser halus digunakan untuk transisi antar langkah. j. FrogJS Gallery FrogJS adalah galeri foto sekuensial yang mendukung deskripsi opsional dan link untuk masing-masing gambar. Jika
  32. 32. melihat gambar secara berurutan, dengan mengklik thumbnail gambar sebelumnya dan berikutnya. Setiap slide gambar didefinisikan sebagai HTML yang biasa terkandung dalam DIV tag khusus pada halaman, sehingga sangat mudah untuk menyiapkan opsi yang termasuk deskripsi sesuai dan link. k. CMotion Gallery CMotion Image Gallery adalah galeri skrip serbaguna yang menggunakan input paling intuitif, mouse pengguna untuk mengontrol itu. Pengguna dapat mengarahkan kedua arah scrolling gambar dan kecepatan hanya dengan menempatkan mouse di kedua spektrum dari galeri gambar. Mengklik pada gambar kemudian dapat memuat versi yang lebih besar dari gambar sebelumnya, menavigasi ke halaman dan lain-lain. Selain dari dimensi galeri, kita juga dapat menentukan kecepatan bergulirnya, dengan script kemudian menciptakan perguliran dari kecepatan 0-atas dan mendistribusikan secara merata di galeri. Script ini bekerja di semua browser modern yang DHTMLIE5 +, NS6 / Firefox 1.0 +, Opera 7 +. l. CMotion Gallery II CMotion Galeri II didasarkan pada pendahulunya Cmotion Gallery skrip, dimodifikasi oleh jscheuer1 untuk orientasi vertical. Skrip ini menggunakan input perancangan yang paling intuitif, Mouse pengguna untuk mengontrol aksi bergulirnya halaman. Pengguna dapat mengarahkan kedua arah scrolling gambar dan kecepatan hanya dengan menempatkan mouse di kedua spektrum dari galeri gambar. Mengklik pada gambar kemudian dapat memuat versi yang lebih besar dari itu, menavigasi ke halaman dan lain-lain. Selain dari dimensi galeri, kita juga dapat menentukan kecepatan bergulirnya halaman, dengan script kemudian menciptakan kecepatan perguliran dari kecepatan 0atas dan mendistribusikan secara merata di galeri. m. Thumbnail Image Viewer Thumbnail Image Viewer adalah penampil gambar sederhana yang dapat diterapkan untuk setiap link pada halaman untuk memuat gambar yang diinginkan dalam bentuk
  33. 33. kecil berdasarkan pada link itu "href" nilai. Cukup memberikan link dalam pertanyaan baik itu text link atau thumbnail image link-a rel atribut "thumbnail". n. Thumbnail Image Viewer II Serupa dengan fungsi pendahulunya Thumbnail Image Viewer, script ini dapat menampilkan gambar yang lebih besar saat thumbnail diklik dan berguling. Ini dapat dimanfaatkan untuk membiarkan pengunjung meninjau dari banyak gambar yang kemudian pilih gambar pilihan untuk melihat pada halaman yang sama. Fitur yang ada dalam Thumbnail Image Viewer II adalah:  Desain mencolok, mudah diatur dengan hanya menambah thumbnail link pada halaman "rel"dan" rev 'atribut. Itu saja.  Konfigurasi gambar yang lebih besar yang akan ditampilkan melalui "klik" atau "mouseover" thumbnail.  Tentukan apakah gambar diperbesar harus dimuat ketika beban halaman untuk tampilan lebih cepat, atau hanya download bila diminta untuk menghemat halaman awal waktu pembukaan.  Gambar diperbesar akan muncul opsional hyperlink.  Dua jenis efek transisi untuk membawa gambar diperbesar menjadi pandangan yang: "memudar" atau "mengungkapkan". Transisi juga dapat dinonaktifkan sama sekali.  Tentukan apakah "title" atribut dari link thumbnail harus ditampilkan sebagai teks deskripsi di bawah gambar yang diperbesar.  Tentukan beberapa daerah bagi gambar yang berbeda untuk ditampilkan. o. Choice Dynamic Image Choice Dynamic Image adalah pemilih gambar yang memungkinkan browser untuk melihat gambar dengan memilihnya dari daftar seleksi. Ini adalah dinamis dalam bahwa gambar TIDAK harus menjadi dimensi yang sama, pembatasan
  34. 34. gambar script yang dimiliki pengunjung. Sekarang kita dapat memiliki galeri gambar dari semua ukuran. Perangkap adalah gambar diunggah dengan menggunakan DHTML, NS 3 - dan IE 3 -. Browser ini low-end akan mendapatkan pesan peringatan menginformasikan mereka tentang hal ini ketika surfer mencoba untuk memilih gambar. 4. JQuery Flick Gallery FlickrGallery adalah plugin jQuery yang menyediakan cara untuk menanamkan gambar flickr ke situs web. Fitur ini membutuhkan jQuery dan style sheet. 5. JQuery Galleria Galleria adalah gambar kerangka galeri JavaScript yang menyederhanakan proses menciptakan galeri gambar yang indah untuk web dan perangkat mobile. 6. JQuery Gallery View Gallery View adalah upaya untuk menuliskan sebuah plugin tunggal yang mampu menciptakan berbagai jenis galeri. Tujuan gallery view adalah untuk menyediakan serangkaian pilihan untuk pengguna. Pengguna tidak hanya akan dapat menyesuaikan ukuran foto dan thumbnail, dan kecepatan transisi, tetapi ia juga akan
  35. 35. memiliki kebebasan untuk memilih dari pilihan posisi elemen, gaya transisi dan fitur lainnya. Berikut contoh opsi-opsi yang ada dalam Gallery View. opsi jenis nilai default deskripsi transition_speed int 1000 durasi transisi foto animasi dalam milidetik. transition_interval int 4000 mengurangi show_panels senar boolean penundaan antara transisi slideshow otomatis dalam milidetik. 'Ayunan' metode pelonggaran digunakan dalam foto dan animasi thumbnail. setiap metode kustom pelonggaran dapat digunakan. benar flag untuk beralih tampilan panel foto utama. diset false untuk membuat galeri korsel gaya. (tidak sepenuhnya dilaksanakan) show_panel_nav boolean benar flag untuk beralih tampilan tombol berikutnya dan sebelumnya di panel galeri. enable_overlays boolean palsu flag untuk beralih tampilan overlay gambar informasi. panel_width int 800 lebar panel gambar dalam piksel. panel_height int 400 ketinggian panel gambar dalam piksel. metode animasi yang digunakan panel_animation senar 'Memudar' untuk panel transisi gambar. Pilihannya adalah 'memudar', 'crossfade', 'slide'
  36. 36. opsi panel_scale jenis senar nilai default deskripsi 'Tanaman' metode skala untuk gambar panel. Pilihannya adalah 'tanaman', 'cocok'. overlay_position senar 'Bawah' posisi lapisan panel informasi. Pilihannya adalah 'bottom', 'top' pan_images boolean palsu flag untuk beralih berbasis hambatan panning gambar panel besar. 'Drag' Metode panning digunakan. 'Drag' = pengguna mengklik dan menyeret gambar ke dalam panci, 'track' = gambar secara otomatis panci berdasarkan posisi mouse pan_style start_frame senar int 1 Indeks yang menunjukkan image untuk ditampilkan ketika beban galeri show_filmstrip boolean benar flag untuk beralih tampilan navigasi filmstrip. show_filmstrip_nav boolean benar flag untuk beralih tampilan tombol navigasi berbasis filmstrip. benar flag untuk beralih play / pause button dan kemampuan untuk start / stop slideshow enable_slideshow boolean bendera untuk secara otomatis autoplay filmstrip_position boolean senar palsu 'Bawah' memulai slideshow ketika beban galeri lokasi filmstrip dalam kaitannya dengan panel. Pilihannya adalah 'top', 'kiri', 'bottom', 'benar'.
  37. 37. opsi jenis nilai default deskripsi frame_width int 70 lebar frame filmstrip dalam piksel. frame_height int 40 ketinggian frame filmstrip dalam piksel. frame_opacity mengapung 0.4 opacity default frame filmstrip (kisaran 0,0-1,0) frame_scale senar 'Tanaman' metode skala untuk gambar bingkai. Pilihannya adalah 'tanaman', 'cocok'. frame_gap int 5 jarak antara frame dalam pixel. show_captions boolean palsu flag untuk beralih tampilan keterangan frame (dihuni oleh gambar itu titleatribut). show_infobar boolean benar flag untuk beralih tampilan gambar meja bar. infobar_opacity mengapung 1.0 opacity default infobar (kisaran 0,01,0) BAB III PENUTUP JQuery merupakan suatu web design yang memanfaatkan kemudahan dalam menulis script library. Kemudahan-kemudahan tersebut tentu saja tidak terlepas dari keluhan para pengguna web yang mengatakan bahwa terlalu repot apa bila menulis script dengan menggunakan javascript. Dengan dibuatnya makalah ini saya dapat menyampaikan tentang bagaimana dan apa itu bahasa pemrograman yang berbasis JQuery. Saya harap makalah ini akan jadi sumber informasi bagi semua
  38. 38. orang yang ingin mengetahui tentang bahasa pemrograman yang berbasis JQuery. Demikian saya akhiri makalah ini, tak lupa kritik dan saran yang membangun demi perbaikan, saya harapkan dari semua pihak.
  39. 39. DAFTAR PUSTAKA Anonim. (2011). Sejarah JQuery. Diunduh dari http://pengenalanjquery.blogspot.com/2011/11/sejarah-jquery.html pada tanggal 21 November 2013. Rizaldi, Mustafa. (2012). Pengertian Jquery Javascript. Diunduh dari http://bisnisajidwi.blogspot.com/2012/04/pengertian-jqueryjavascript-library.html pada tanggal 21 November 2013. Tomy Kurniawan, Muhammad. (2012). Pengenalan Javascript, JQuery, AJAX, dan CSS. Diunduh dari http://radeninformatika.blogspot.com/2012/12/makalah-webstatis.html pada tanggal 21 November 2013. Anonim. (_____). Macam-macam JQuery. Diunduh dari http://belajarwebdesign.com/search/macam-macam-jquery/ pada tanggal 21 November 2013. Anonim. (_____). JQuery Effect Show() Method. Diunduh dari http://www.w3schools.com/jquery/eff_show.asp pada tanggal 21 November 2013. Cheyuz. (2012). Mengenal JQuery. Diunduh dari http://jagocoding.com/tutorial/16/Mengenal_jQuery_Apa_itu_jQue ry pada tanggal 21 November 2013.

×