APA ITU JQUERY UI?

jQuery ini sebenernya kumpulan javaScript yang dibuat oleh mereka-mereka untuk mempermudah dalam melakukan penulisan untuk java script, seperti misalnya kita membuat sebuah animasi transisi pada layer di HTML, tidak perlu menuliskan dari awal transisinya yang saya yakin sangat panjang, setelah adanya jQuery hal-hal yang panjang tadi dapat dipersingkat kita tinggal menuliskan “.slideDown()”. Apalagi ada turunannya bernama jQueryUI — sangat membantu anda dalam mengindahkan halaman web.

IMPLEMENTASI

Disini saya tidak akan membahas tentang dasar-dasar HTML, CSS dan Java Script ya. Kita langsung mengimplementasikan penggunaan jQuery dan jQueryUI (karena jQueryUI membutuhkan jQuery :P).

ok, saya memiliki sebuah halaman sederhana sebagai berikut:

maka hasilnya akan seperti ini:

sekarang kita sudah memiliki halaman tanpa “bumbu”, karena kita menggunakan jQueryUI maka kita harus meng-include-kan file pendukung jQueryUI, seperti jQuery, jQueryUI, dan CSS sehingga kita menambahkan tag seperti berikut setelah tag </head>:

ketika koding ini di atas

<link rel="Stylesheet" href="pathAnda/page/css/cupertino/jquery-ui-1.8.13.custom.css" type="text/css" />

<script type="text/javascript" src='pathAnda/page/script/jquery/jquery-1.5.1.min.js'></script>

<script type="text/javascript" src='pathAnda/page/script/jquery/jquery-ui-1.8.13.custom.min.js'></script>

folder sesuai dengan yang anda buat, okey mas bro...

setelah itu tinggal kita gunakan tag-tag jQueryUInya. kita gunakan jQueryUInya seperti javaScript biasa, berikut implementasinya:

<script type="text/javascript">

$(document).ready(function() {

$("#Simpan").button();

});

</script>

hasilnya akan seperti ini:

perhatikan text #Simpan, itu merupakan ID dari tambolm yang kita buat, anda dapat mengimplementasikannya juga pada tag <div> sesuai dengan kebutuhan. selain ID anda jg dapat menggunakan CLASSnya biasanya pada <div class=”bla-bla”>. setelah itu perhatikan tombol yang kita buat, setidaknya nilai estetikanya lebih daripada sebelumnya. sekarang kita tambahkan lagi date picker untuk textfield tanggal. kita hanya menambahkan :

$("#tanggal").datepicker({

showOn: "button",

buttonImage: 'pathAnda/page/'+"images/calendar.gif",

showAnim:"show",

dateFormat:"dd-mm-yy",

buttonImageOnly:true

});

sekarang di samping text field terdapat gambar kalender yang dapat anda gunakan untuk menentukan tanggal. mudah bukan???
maka tampilan website yg akan kita buat akan semakin menarik. cukup sekian