Jika fungsi jQuery adalah menyederhanakan kode javascript, plugin jQuery berfungsi
menyederhanakan kode jQuery itu sendiri. Karena itu, dengan plugin jQuery, akan
jauh lebih simple dan ringkas dalam penulisan kode javascript.
jQuery UI (User Interface)
jQuery UI, merupakan plugin
yang sangat popular bagi programmer untuk membuat berbagai efek diataranya:
Datepicker, Tabs, Dialog dan lain sebagainya. Untuk lebih jelasnya berikut adalah
langkah penggunaan jquery UI.
Download jQuery UI
di http://jqueryui.com/download. pilih versi yang stable misalnya : jquery-ui-1.10.2.custom
Extract file jquery-ui-1.10.2.custom
pada folder website anda.
Panggil file CSS
utama jQuery UI, yaitu jquery.ui.all.css <link
rel="stylesheet" type="text/css"
href="development-bundle/themes/base/jquery.ui.all.css" />
Panggil library
jQuery <script
type="text/javascript" src="js/jquery-1.9.1.js"></script>
Panggil library
utama jQuery UI, yaitu jquery.ui.core.js <script
type="text/javascript"
src="development-bundle/ui/jquery.ui.core.js"></script>
Panggil library
komponen UI yang ingin digunakan, misalnya datepicker, yaitu jquery.ui.datepicker.js <script
type="text/javascript" src="development-bundle/ui/jquery.ui.datepicker.js"></script>
PLUGIN DATEPICKER
<html>
<head>
|
3
|
|
4
|
<script type="text/javascript"
src="js/jquery-1.9.1.js"></script>
|
5
|
<script
type="text/javascript"
src="development-bundle/ui/jquery.ui.core.js"></script>
|
6
|
<script
type="text/javascript"
src="development-bundle/ui/jquery.ui.datepicker.js"></script>
<script
type="text/javascript">
$(document).ready(function(){
$("#tanggal").datepicker();
});
</script>
</head>
<body>
<label
for="tanggal">Masukkantanggal</label><input
type="text" id="tanggal" />
</body>
Apabila kode tersebut dijalankan,maka akan
tampil sebuah textbox dan jika di klik akan keluar tanggal seperti gambar di samping.
