suvi.rahmagmail.com
Pertemuan 9
9.1 Tujuan : 1. Mahasiswa dapat memahami mengenai jQuery core, jQuery ui dan
jQuery tool 2. Mahasiswa dapat menggabungkan minimal 2 item jQuery
.
9.2 Materi :
1. Java Script 2. jQuery
3. CSS
9.3 Dasar Terori :
plugin merupakan salah satu factor utama yang membuat jQuery begitu cepat naik daun popular, dua pembuat plugin yang paling popular yaitu jQuery UI dan JQuery Tools.
A. jQuery UI = jQuery UI user Interface merupakan plugin yang paling popular
dikalangan programmer jQuery. JQuery UI dibuat untuk menciptakan efek efek yang canggih dari komponen library pelengkap jQuery, diantara : accordion, datepicker,
dialog, slider, dll
Instalasi jQuery UI
1. Download jQuery UI di http:jqueryui.comdownload
, maka akan tampil halaman downloadnya, klik aja langsung link Current stable, maka file jQuery UI akan
tersimpan dikomputer anda. 2. Filenya masih berbentuk kompresi, maka ekstrak dahulu.
3. Untuk mencobanya, silahkan klik versi demonya ada di file index.html
Prinsip Menggunakan jQuery UI sebagai contoh jquery-ui-1.7.2.custom
1. Copykan folder jquery ui ke folder utama website kita, contoh folder jquery-ui
2. Panggil file CSS utama jQuery UI, contoh : ui.all.css
Skrip : link rel= stylesheet type= textcss
Href= development- bundlethemesbaseui.all.css
3. Panggil library jQuery, contoh : jquery-1.3.2 yang terdapat pada folder development- bundle.
Skripnya : script type= textjavascript src= development-bundlejquery- 1.3.2.js script
4. Panggil library utama jQuery UI, yaitu ui.core.js yang terdapat di folder development-
bundleui skripnya : script type= textjavascript src= development- bundleuiui.core.js script
5. Terakhir panggil library komponen jQuery UI yang ingin digunakan. Contoh
datepicker. Skrip : script type= textjavascript src= development- bundleuiui.datepicker.js script
a. Percantik Tanggal dengan Datepicker Skrip :
html head
Panggil Css utama library jQuery ui
suvi.rahmagmail.com
link type=textcss href=development-bundlethemesbaseui.all.css rel=stylesheet
script type=textjavascript src=development-bundlejquery-1.3.2.jsscript
script type=textjavascript src=development-bundleuiui.core.jsscript
script type=textjavascript src=development-bundleuiui.datepicker.jsscript script type=textjavascript
document.readyfunction{ tanggal.datepicker{
dateFormat:dd-MM-yy changeMonth : true ,
chaneYear : true
}; }; script
head body style=font-size:65;
MASUKKAN TANGGAL: input id=tanggal type=text bodyhtml
hasilnya : Datepicker dengan tambahan fungsi bulan dan tahun bisa dirubah
b. Accordion
