Cara Memuat dan Menganimasikan Konten dengan jQuery

Indonesian (Bahasa Indonesia) translation by Husain Ali Yahya (you can also view the original English article)

Dalam tutorial ini kita akan merubah situs biasamu dan mengembangkannya dengan menggunakan jQuery. Kita akan menambahkan ajax functionality sehingga konten yang dimuat ke dalam kontainer yang relevan tanpa membuat pengguna harus bernavigasi ke halaman lain. Kita juga akan mengintegrasikan beberapa animasi yang menarik.

Pertama, saya telah menaruh sbuah layout sederhana untuk contoh ini. Berikut adalah screenshot dan kode HTML yang kami gunakan.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>mmm... Ajax!</title>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
@import url(css.css);
</style>
<script type="text/javascript" src="js.js"></script>
</head>
<body>
    <div id="wrapper">
    <h1>ajax ... nettuts</h1>
    <ul id="nav">
        <li><a href="index.html">welcome</a></li>
        <li><a href="about.html">about</a></li>
        <li><a href="portfolio.html">portfolio</a></li>
        <li><a href="contact.html">contact</a></li>
        <li><a href="terms.html">terms</a></li>
    </ul>
    <div id="content">      
        <h2>Welcome!</h2>
        <p>Text</p>
    </div>
    <div id="foot">Tutorial by James for NETTUTS</div>
</div>
</body>
</html>

Langkah 1

Pertama, unduh versi paling stabil terakhir dari jQuery dan sambungkan dengan dokumenmu.

1	<script type="text/javascript" src="jQuery.js"></script>

Satu hal terbaik, menurut saya, tentang jQuery adalah kesederhanaannnya. Kita bisa meraih fungsi yang dideskripsikan di atas dengan efek menarik hanya dalam beberapa baris kode.

Pertama mari muat jQuery dannmemulai sebuah fungsi ketika dokumen telah siap (ketika DOM telah dimuat)

1
2	$(document).ready(function() {
3	// Stuff here
4	});

Langkah 2

Apa yang kita lakukan adalah membuatnya sehingga ketika pengguna mengklik di link dalam menu navigasi, browser tidak akan menavigasi ke halaman tersebut namun akan memuat konten tersebut di halaman yang sama.

Kam ingin menargetkan link di dalam menu navigasi dan menjalankan fungsi ketika dia diklik

1
2	$('#nav li a').click(function(){
3	// function here
4	});

Mari rangkum apa yang kita ingin fungsi ini lakukan secara berurutan.

Menghapus konten halaman yang sekarang.
Mendapatkan dan menambahkan ke konten DIV

Kita harus menentukan halaman apa untuk mendapatkan data ketika link diklik. Yang perlu kita lakukan adalah mendapatkan atribut 'href' dari link yang diklik dan menjadikannya sebagai halaman yang datanya akan dipanggil. Dan juga kita perlu menentukan disekitar mana halaman yang akan ditarik - karena kita tidak ingin mengambil SEMUA data, hanya data di dalam 'content' div, jadi:

1
2	var toLoad = $(this).attr('href')+' #content';

Untuk mengilustrasikan kode di atas mari pikirkan p-engguna mengklik link 'about' yang terhubung dengan 'about.html; - di situasi ini variabelnya bisa menjadi : 'about.html #content - ini adalah variabel yang akan kita minta panggil di ajax. Pertama, kita harus membuat sebuah efek yang menarik untuk halaman konten yang sekarang. Daripada sekedar membuatnya menghilang kita bisa menggunakan fungsi 'hide' di jQuery seperti ini:

1
2	$('#content').hide('fast',loadContent);

Fungsi di atas menyembunyikan div #content secara cepat, dan ketika efeknya selesai makan fungsi "loadContent" (memuat konten baru [melalui ajax]) akan dijalankan - fungsi yang akan dibuat nanti (di langkah 4 )

Langkah 3

Ketika konten yang lama telah menghilang dengan efek yang menarik, kita tidak ingin meninggalkan pengguna sebelum konten yang baru tiba ( terutama ketika mereka memili koneksi internet yang lambat ) jadi kita akan membuat grafik "loading" kecil sehingga mereka tahu sesuatu sedang berjalan di latar belakang.

1
2	$('#wrapper').append('<span id="load">LOADING...</span>');
3	$('#load').fadeIn('normal');

Ini adalah CSS terapan untuk #load div yang baru dibuat:


#load {
	display: none;
	position: absolute;
	right: 10px;
	top: 10px;
	background: url(images/ajax-loader.gif);
	width: 43px;
	height: 11px;
	text-indent: -9999em;
}

Jadi, secara dasar 'load' diatur ke display:none, tapi ketika fungsi fadeIn dimulai ( di kode di atas）itu akan muncul di pojok kanan atas situs dan menampilkan GIF hingga hilang kembali.

Langkah 4

Sejauh ini, ketika pengguna mengklik sebuah link hal di bawah yang akan terjadi:

Halaman yang ada akan hilang dengan efek menarik.
Pesan memuat akan muncul

Sekarang, mari kita tulis fungsi loadContent yang telah disebut tadi:

1
2	function loadContent() {
3	$('#content').load(toLoad,'',showNewContent)
4	}

Fungsi loadContent adalah memanggil halaman yang diinginkan, lalu ketika selesai, akan memanggil fungsi 'showNetContent':

1
2	function showNewContent() {
3	$('#content').show('normal',hideLoader);
4	}

Fungsi showNetContent menggunakan fungsi show jQuery (yang sebenarnya nnama yang sangat membosankan untuk sebuah efek keren) untuk membuat konten baru muncul di dalam div '#content‘ . Setelah dipanggil maka akan menjalankan fungsi 'hideLoade':

1
2	function hideLoader() {
3	$('#load').fadeOut('normal');
4	}

kita harus ingat untuk 'return false' di akhir dari fungsi klik - sehingga browser tidak bernavigasi ke halaman

Harus sekarang berjalan sempurna. Kamu bisa lihat contohnya di sini: [LINK]

Ini kodenya sejauh ini:


$(document).ready(function() {

    $('#nav li a').click(function(){
    
    var toLoad = $(this).attr('href')+' #content';
    $('#content').hide('fast',loadContent);
    $('#load').remove();
    $('#wrapper').append('<span id="load">LOADING...</span>');
    $('#load').fadeIn('normal');
    function loadContent() {
    	$('#content').load(toLoad,'',showNewContent())
    }
    function showNewContent() {
    	$('#content').show('normal',hideLoader());
    }
    function hideLoader() {
    	$('#load').fadeOut('normal');
    }
    return false;
    
    });
});

Langkah 5

Kamu bisa berhenti di situ tapi jika kamu meningkatkannya, sangat penting untuk menambahkah sedikit pekerjaan kecil. Masalah dengan solusi yang sekarang bahwa itu menelantarkan URL. Bagaimana jika pengguna ingin mengklik link ke salah satu 'pages'？ - tidak ada cara bagi mereka karena URL nya selalu sama.

Jadi, lebih baik jika kita menggunakan nilai 'hash' di URL untuk mengindikasikan apa yang user sedang lihat. Jadi jika mereka melihat konten 'about; maka URL nya adalah : 'www.website.com/#about'. Kita hanya perlu menambahkan satu baris kode ke fungsi 'click' untuk menambahkan hash ke URL ketika pengguna klik di link navigasi:

1
2	window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);

Kode di atas pada dasarnya merubah nilai hash URL ke nilai dari atribut 'href' dari link yang diklik ( tanpa bagian '.hrml' nya ) Jadi ketika pengguna mengklik link 'home' (href=index.html) maka nilai hash nya akan terbaca '#index'.

Dan juga, kita ingin membuat mungkin bagi pengguna untuk mengetik URL dan mendapatkan halaman yang tepat. Untuk melakukannya kita cek nilai hash ketika situs dimuat dan mengganti dengan konten yang sesuai:


var hash = window.location.hash.substr(1);
var href = $('#nav li a').each(function(){
    var href = $(this).attr('href');
    if(hash==href.substr(0,href.length-5)){
        var toLoad = hash+'.html #content';
        $('#content').load(toLoad)
    } 
});

disini dimasukkan semua kode javascript yang dibutuhkan: (ditambah pustaka jQuery)


$(document).ready(function() {
	
    // Check for hash value in URL
    var hash = window.location.hash.substr(1);
    var href = $('#nav li a').each(function(){
        var href = $(this).attr('href');
        if(hash==href.substr(0,href.length-5)){
            var toLoad = hash+'.html #content';
            $('#content').load(toLoad)
        } 
    });
    
    $('#nav li a').click(function(){
    
    var toLoad = $(this).attr('href')+' #content';
    $('#content').hide('fast',loadContent);
    $('#load').remove();
    $('#wrapper').append('<span id="load">LOADING...</span>');
    $('#load').fadeIn('normal');
    window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
    function loadContent() {
    	$('#content').load(toLoad,'',showNewContent())
    }
    function showNewContent() {
    	$('#content').show('normal',hideLoader());
    }
    function hideLoader() {
    	$('#load').fadeOut('normal');
    }
    return false;
    
    });
});

Selesai...

Hal yang bagus dari metode ini adalah bahwa ini bisa diadaptasi dan diterapkan dalam situs dalam beberapa menit. Ini sepenuhnya ramah dan situsnya akan bekerja normal meskipun pengguna mematikan JS.

Lihat Contoh Hasil Akhir

Unduh HTML, JS, CSS & Gambar