informasi tentang penggunaan JQuery

2. SEJARAH JQUERY
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. Kemudian terciptalah JQuery dan dirilis
pertama kali pada tahun 2006

3. APA ITU JQUERY ?
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.

4. APA SAJA YANG ADA DALAM
JQUERY ?
1.
2.
3.
4.
5.
6.
7.
8.
Kemudahan mengakses elemen-elemen HTML
Memanipulasi elemen HTML
Memanipulasi CSS
Penanganan event HTML
Efek-efek javascript dan animasi
Modifikasi HTML DOM
AJAX
Menyederhanakan kode javascript lainnya

5. JQUERY SELECTOR
JQuery Element
Selectors
JQuery Selector
JQuery Attribute
Selectors

6. 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".

7. 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".

8. JQUERY ENENT
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);

9. JQUERY EFFECT
Salah satu kemampuan jquery adalah, adanya fungsifungsi 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).

10. MACAM-MACAM JQUERY
SLIDESHOW
1.
2.
3.
4.
5.
6.
JQZoom Evolution
JQuery EOGallery
JQuery Dynamic Drive Image Gallery
JQuery Flick Gallery
JQuery Galleria
JQuery Gallery View

11. JQZOOM EVOLUTION
jQzoom adalah script yang besar dan sangat mudah
digunakan untuk memperbesar apa yang Anda inginkan.
Contoh scriptnya adalah sebagai berikut:
01.
<a href="images/BIGIMAGE.JPG" class="MYCLASS" title="
MYTITLE">
02.
<img src="images/SMALLIMAGE.JPG" title="IMAGE TIT
LE">
03.
04.
</a>

12. JQUERY EOGALLERY
EOGallery adalah slideshow galeri animasi Web yang dibuat
dengan jQuery . Hanya menggunakan fungsi jQuery Dasar
dan Cody 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.

13. JQUERY DYNAMIC DRIVE IMAGE
GALLERY
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
Lightbox image viewer
Lightbox Gambar penampil v2.03a
Facebox Image and Content Viewer
Simple Control Gallery
Touch Image Gallery
Tooltip Description
Photo Album Script
PHP Photo Album Script
Langkah Carousel Viewer
FrogJS Gallery
CMotion Gallery
Cmotion Gallery II
Thumbnail Image Viewer
Thumbnail Image Viewer II
Choice Dynamic Image

14. 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.

15. 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.

16. 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.

17. SIMPLE CONTROL GALLERY
Untuk menambahkan kemampuan
menampilkan galeri gambar saja setelah
semua gambar dalam galeri telah
dimuat. Mesin ini membutuhkan jQuery
1.5 +.

18. 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.

19. 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 bergantiganti gaya yang membedakan satu dengan yang lainnya.

20. PHOTO ALBUM SCRIPT
Photo Album skrip sangat ideal untuk
menampilkan beberapa gambar sekaligus,
dengan link ke siklus melalui batch
tambahan yang berupa gambar.

21. 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.

22. 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.

23. FROGJS GALLERY
FrogJS adalah galeri foto sekuensial yang mendukung
deskripsi opsional dan link untuk masing-masing gambar.
Jika 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.

24. 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.

25. 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.

26. 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 kecil berdasarkan pada link
itu "href" nilai. Cukup memberikan link dalam
pertanyaan baik itu text link atau thumbnail image
link-a rel atribut "thumbnail".

27. 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.

28. 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
gambar script yang dimiliki pengunjung.

29. JQUERY FLICK GALLERY
FlickrGallery adalah plugin jQuery yang
menyediakan cara untuk menanamkan
gambar flickr ke situs web. Fitur ini
membutuhkan jQuery dan style sheet.

30. JQUERY GALLERIA
Galleria adalah gambar kerangka galeri
JavaScript yang menyederhanakan
proses menciptakan galeri gambar yang
indah untuk web dan perangkat mobile.

31. 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 memiliki kebebasan untuk
memilih dari pilihan posisi elemen, gaya transisi dan fitur
lainnya.