Jika Anda meng-hosting sendiri website Anda, dan Anda menggunakan jQuery (juga jQuery UI), mungkin masalah utama Anda adalah lambatnya akses web tersebut. Mungkin ini akibat server yang kita yang sedikit lambat, atau file jQuery dan jQuery UI yang memang besar sehingga waktu downloadnya agak lama, atau bisa jadi karena bandwidth server kita kecil. Pilihan manapun tidak menyenangkan karena kita ingin website kita tampil cantik, tetapi juga cepat.

Ada solusi baru yang ditawarkan Google. Lagi-lagi Google ya. Hebat emang si Google. Anda bayangkan saja, client-client website kita mendownload file JavaScript dan CSS yang dibutuhkan jQuery dan jQuery UI dari server Google yang cepat, handal dan bandwidthnya mungkin tidak terbatas.

Masalah
Masalahnya, sampai saat ini belum ada tutorial lengkap tentang cara pakai jQuery UI yang disediakan Google agar tetap menampilkan theme yang cantik. Tutorial ini saya share karena sebelumnya saya sempat mengalami masalah ketika ingin mencobanya. Masalahnya antara lain:
1. Saya tidak tahu path file JavaScript-nya
2. Ketika saya beri fungsi pada $ seperti halnya Script jQuery lainnya, ternyata jQuery tetap tidak nongol
3. Ketika akhirnya saya menemukan solusinya, jQuery bisa nongol tapi theme jQuery UI belum bisa keluar, terpaksa saya pakai file CSS dan gambar yang saya host sendiri

Solusi
Setelah saya menemukan masalah-masalah ini, memang saya Googling, tetapi solusinya hanya berfungsi untuk mengatasi satu per satu masalah di atas. Tidak mencakup semuanya. Akhirnya ketika saya berhasil merajut solusi-solusi itu jadi satu, sebaiknya saya share saja di sini supaya teman-teman bisa juga menikmatinya, dan saya juga nggak lupa.

Ini contoh penggunaannya untuk menampilkan komponen Accordion.

Tambahkan baris-baris ini di dalam tag HEAD HTML Anda

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script>
// Tolong, jangan buang nama saya ya: Amri Shodiq, yah sekedar credit lah
google.load("jquery", "1.3.2");
google.load("jqueryui", "1.7.1");

google.setOnLoadCallback(function(){
$("#accordion").accordion();
});
</script>

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/ui-darkness/jquery-ui.css" type="text/css" media="screen" />


Tambahkan contoh ini di dalam tag BODY HTML Anda

<div class="demo">
<div id="accordion">

<h3><a href="#">Section 1</a></h3>
<div>
<p>
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</p>
</div>
<h3><a href="#">Section 2</a></h3>
<div>
<p>
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
suscipit faucibus urna.
</p>

</div>
<h3><a href="#">Section 3</a></h3>
<div>
<p>
Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
</p>

<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
<h3><a href="#">Section 4</a></h3>

<div>
<p>
Cras dictum. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
mauris vel est.
</p>

<p>
Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos.
</p>

</div>
</div>
</div>

Mau coba? Silakan. Jangan lupa kasih back link ya. Thanks.