contact

Contact Person
Pin BB : 5AB31960
SMS : 082288467823
WA : 081275371724
call : 081275668074

Cara Membuat Halaman Dinamis dengan Jquery

Posted in Javascript Jquery Life at 02 Januari 2017 With 0 Comments

Tuturial kali ini kita akan membahas cara membuat Halaman Dinamis dengan Jquery , Untuk membuat halaman berganti pada 1 file saja biasanya dicontent , kita membutuhkan jquery / PHP , karna HTML tidak bisa melakukan hal ini, Nah.. disini kita akan membuat contoh dengan Jquery, Untuk membuat halaman dinamis dengan Jquery disini Kita membutuhkan 3 buah file yang akan kita buat yaitu :

1. Index.html
2. halaman1.html
3. halaman2.html

▼ Download Source Code Dibawah Ini ▼


Note : buat folder dengan nama JS , dan simpan jquery di dalam folder js js/jquery-1.11.2.min.js ( file jquery dapat anda download disini) jika tidak ingin di download silahkan gunakan code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

ok.. langsung saja kita ke script membuat halaman dinamis dengan jquery nya :

Load Halaman Dinamis dengan Jquery

Index.html

<html>
<head>
<title>Ganti Halaman Dinamis Suckittrees.Com</title>
<style>
    .container {
                height:100px;
                width:100%;
    }
    .kolom1 {
                height:100px;
                width:20%;
                background-color:grey;
                float:left;
    }
    .kolom2 {
                height:100px;
                width:80%;
                background-color:red;
                float:right;   
    }
</style>
<script type="text/javascript" language="javascript" src="js/jquery-1.11.2.min.js">
<script>
 $(document).ready(function(){
$(".kolom1 ul li a").click(function(e){
e.preventDefault();
var url=$(this).attr('href');
$.ajax({
    type : 'GET',
    url  : url,
    success: function(data){
        $(".kolom2").fadeOut(300, function(){
        $(".kolom2").html(data).delay(250).fadeIn(300);
        });
    }
});
});
 });
</script>
</head>
<body>
<div class="container">
    <div class="kolom1">
        <ul>
            <li><a href="halaman1.html">Handphone</a></li>
            <li><a href="halaman2.html">Komputer</a></li>
        </ul>
    </div>
    <div class="kolom2">
        Halaman Awal
    </div>
</div>
</body>
</html>

halaman1.html

<html>
<head>
<title>Halaman1.html</title>
</head>
<body>
Ini Halaman 1 Handphone
</body>
</html>

halaman2.html

<html>
<head>
<title>Halaman2.html</title>
</head>
<body>
Ini Halaman 2 Komputer
</body>
</html>

 

Artikel Terkait

Diskusi