JQuery UI

JQuery UI merupakan plugin komponen user interface (hal-hal yang berhubungan dengan antarmuka pengguna) berupa interaksi, widget berfitur lengkap dan efek animasi yang berada di bawah sistem JQuery. Setiap komponen dibangun sesuai dengan arsitektur kerja JQuery (menemukan sesuatu, kemudian memanipulasinya) dan memiliki kemampuan untuk menerima tema yang bermacam-macam sesuai dengan keperluan desain.
Sejauh yang Saya pelajari selama ini, dibandingkan dengan kemampuannya sebagai pembuat efek-efek animasi baru yang tidak ada di dalam JQuery, peran JQuery UI lebih mendominasi ke dalam hal-hal yang berhubungan dengan pembuatan aplikasi online dengan standar yang sangat baik:

JQuery UI ThemeRoller

JQuery UI ThemeRoller

Meskipun entah kenapa saat ini JQuery UI tidak begitu populer di internet. Mungkin karena ini adalah bahasa yang lumayan sulit dan bisa dibilang "terlalu lengkap".
Slider, Button, Dialog Box, Accordion, Alert Messages, Tooltip, Tabs, Date Picker, Progressbar dan entah apa lagi. Bahkan juga Autocomplete seperti halnya fitur HTML5.
Semuanya begitu lengkap hingga sangat mudah sebenarnya ketika seorang programmer menemukan sebuah konsep aplikasi online, JQuery UI bisa mengatasi beberapa masalah yang tersisa seperti tema, objek, variabel dan termasuk dukungan browser penuh (setidaknya selalu diusahakan begitu sampai sekarang).

CSS3 Button Generator merupakan salah satu aplikasi yang dibangun dengan JQuery UI.

Contoh Instalasi JQuery UI dalam Bidang Kerja

<link rel='stylesheet' type='text/css' href='jqueryui-theme.css' />
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript' src='jqueryui-1.8.1.js'></script>
<script type='text/javascript'>
// Lakukan sesuatu di sini...
</script>

Google Ajax Libraries API (CDN) (?)

JQuery UI siap pakai dari Google yang dapat digunakan:

Framework JQuery UI

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js'></script>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js'></script>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js'></script>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js'></script>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js'></script>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js'></script>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js'></script>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js'></script>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js'></script>

dan seterusnya sampai versi terakhir di tahun 2011 ...

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js'></script>

CSS

Revisi CSS mengikuti revisi Framework JQuery UI:

<link rel='stylesheet' type='text/css' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/themes/base/jquery-ui.css' />

...

<link rel='stylesheet' type='text/css' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css' />

Dokumentasi

Library ini tergantung pada JQuery. Anda juga harus memuat JQuery sebelum memuat modul ini. Versi 1.8.3 tidak didokumentasikan karena jangka waktu revisi yang pendek (saat Anda mencoba mengakses JQuery UI 1.8.3, yang keluar adalah JQuery UI 1.8.4):

Mulai belajar JQuery UI »

Referensi:

• JQuery UI
• Google Libraries API
• Google Libraries API - JQuery UI