Tutorial

Menggunakan Ajax Untuk membangun Tab

Ditulis Oleh oscorp

Sunday, 30 August 2009

Ketika orang berpikir tentang Ajax dan Web 2.0, mereka umumnya ingat tentang kehebatan dan kecepatan tampilan yang disajikan Itu terasa bekerja di tempat, tanpa refresh halaman, yang memberi daya tarik tersendiri dari Ajax. Itu tidak sepenuhnya melakukan refresh halaman HTML yang menyebabkan aplikasi tidak berkedip dan menyajikan hasil perubahan isi yang sangat cepat. Pada artikel ini, saya mulai dengan contoh sederhana penggunaan Ajax , yaitu jendela tab.

Tabbed windows atau Jendela Tab

Tab menyajikan cara termudah untuk menempatkan banyak data dalam area yang relatif sempit. Prototype.js merupakan JavaScript library dengan Ajax-enabled yang mampu membangun jendela tab Dynamic HTML (DHTML) ridiculously dengan sangat mudah, seperti yang ditunjukkan dalam Listing 1.

Untuk men Download Prototype. js Silahkanklik sumber berikut ini

Listing 1. index.html

                
<html>
<head>
<script src="prototype.js"></script>
</head>
<body>
<a href="javascript:void loadTab( 'tab1.html' )">Tab 1</a> |
<a href="javascript:void loadTab( 'tab2.html' )">Tab 2</a> |
<a href="javascript:void loadTab( 'tab3.html' )">Tab 3</a>
<div id="content" style="padding:5px;border:2px solid black;">
</div>
<script>
function loadTab( tab ) { 
  new Ajax.Updater( 'content', tab, { method: 'get' } );
}
loadTab( 'tab1.html' );
</script>
</body>
</html>

Di bagian atas file, kita sisipkan Prototype.js library, yang menangani semua pekerjaan Ajax. Kemudian, Anda akan melihat daftar link ke berbagai halaman, yang masing-masing dipanggil dengan loadTab untuk memperbarui isi halaman. Content area adalah <div> dengan ID "content ". loadTab memanggil fungsi Ajax.Updater untuk memperbarui konten <div> dengan file HTML tertentu.

Listing 2 menunjukkan tab pertama file HTML. Semua file yang lain serupa dengan yang ini.

Listing 2. tab1.html

Listing 2. tab1.html

Tab 1

Ketika saya arahkan ke file dalam browser saya, saya melihat sesuatu seperti Gambar 1.

Gambar 1. Halaman tab awal

Lalu, ketika aku klik tab kedua, saya melihat konten yang ditunjukkan pada Gambar 2.

Gambar 2. Setelah mengklik tab kedua

Anda dapat mencapai fungsi ini dengan menggunakan hidden<div> tag dengan konten, kemudian beralih ke visibilitas mereka. Keuntungan dari pendekatan Ajax adalah bahwa konten yang dibuat dan diambil hanya bila diperlukan saja. Jadi, waktu untuk meload suatu isi akan berkurang atau bahkan dihilangkan apabila user tidak menginginkan isi tersebut.

Untuk live demo Jendela tab silahkan klik disini.

Bersambung Kebagian 2 (",)..

» 1 Comment

1"just test" by wonk_e& at Friday, 11 September 2009 10:03

good post bozz...

» Post Comment