di halaman mentions jika kita klik halaman akan ter-load tanpa load seluruh halaman dan link di address bar berubah menjadi http://twitter.com/#!/mentions . Nah sekarang saya akan share sedikit bagaimana koding nya.
- Code: Select all
<html>
<head>
<style>
ul.tab_ajax {height:5px;; margin:0; padding:0;}
ul.tab_ajax li {float:left; margin:0; padding:0; list-style:none;}
ul.tab_ajax a {padding:5px 10px; border:1px solid #999; margin-right:2px; text-decoration:none; background:#ccc; color:#FFF; text-shadow:1px 1px 2px #000;}
ul.tab_ajax a.current {color:#333; text-shadow:none; background:#F5F5F5; border-bottom:1px solid #F5F5F5; cursor:default;}
.tab_content {border:1px solid #999; width:640px; min-height:300px; background:#F5F5F5; padding:5px;}
.tab_content div {color:#333; font-size:11px;}
</style>
<!-- Panggil Library jQuery dan jQuery tools Library terlebih dahulu-->
<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
<script type="text/javascript">
$(function(){
//menggunakan ajax start function untuk memanggil elemen id loading dan ketika ajax sudah terpanggil elemen id loading disembunyikan
$('#loading').ajaxStart(function(){
$(this).fadeIn();
}).ajaxStop(function(){
$(this).fadeOut();
});
//tabs menggunakan ajax history
//di tabs kita, effect nya ditambahkan ajax dan history bernilai boolean
$("ul.tab_ajax").tabs("div.tab_content > div", {effect: 'ajax', history: 'true'});
});
</script>
<title>Ajax tabs + History</title>
</head>
<body>
<!-- style pada loading di NONE -->
<h5 id="loading" align="center" style="display:none;">Loading...</h5>
<ul class="tab_ajax">
<li><a href="content.php?q=1">Tutorial terbaru</a></li>
<li><a href="content.php?q=2">Tutorial terpopuler</a></li>
<li><a href="content.php?q=3">Daftar demo file</a></li>
</ul>
<br class="all" />
<div class="tab_content"><div style="display:block;"><!-- content akan diletakan disini--></div></div>
</body>
</html>
Nah itu untuk halaman utamanya. dan untuk halaman content yang akan di load oleh ajax pada link yg terdapat di elemen tab_ajax sebagai berikut
content.php
- Code: Select all
<?php
$q = $_GET['q'];
if($q==1){ echo 'Halaman pertama';}
elseif($q==2){echo 'Halaman kedua';}
elseif($q==3){echo 'Halaman ketiga';}
else{'Halaman yang anda cari tidak ditemukan';}
?>
Nah, kita sudah membuat tab dengan ajax
sudah berhasil dan untuk membuat agar link menjadi lebih rapi lg seperti twitter kalian cukup menggunakan file htaccess dan merubah link yg ditujucontoh : pada link tutorial populer kita akan ubah menjadi index.php/#!/populer
jadi di htaccess anda harus diubah dahulu.
Contoh sederhana :
- Code: Select all
RewriteEngine On
RewriteRule ^!/populer$ content.php?q=2[L]
seperti itu saja. Oh ya kenapa kita tambah hanya ! nya saja tidak dengan # nya juga. Karena ajax tabs sudah otomatis mengisi pada tiap link jika belum di ubah dengan htaccess link kita menjadi index.php/#content.php?q=1 alamat url jadi kelihatan berantakan (menurut saya sih
). Untuk sampai saat ini facebook format ajax nya masih seperti diatas. jika di twitter sudah lebih rapi dan jika sudah dirubah di file htaccess nya. Kita juga ubah link nya menjadi
- Code: Select all
<li><a href="!/populer">Tutorial terpopuler</a></li>
Cukup sekian semoga bermanfaat
jika ada pertanyaan silakan di post atau ym ke alfredcrozbyNb : Kode diatas belum sempet di test karena ngetik langsung di forum. Jadi jika ada kesalahan tolong dikoreksi.
ya di trit ini? 
News
Site map
SitemapIndex
RSS Feed