Jquery ui ( Menggunakan Tab )

Tidak Ada Tanggapan

Yap artikel saya masih belum jauh dari namanya JQuery. JQuery bukan bahasa java ya tetapi bahasa javascript. Biasanya library ataupun komponen yang diawali dengan awalan "J" identik dengan namanya bahasa java. Oke sekarang langsung ke topik saja saya ingin memperkenalkan yang namanya JQUERYUI untuk downloadnya bisa di download di mari. Nah untuk membantu temen - temen dalam memahaminya ane kasih screenshotnya dulu yah..


Okeh langsung saja untuk bisa membuat halaman seperti ini






Membuat tab yang ada di jquery sangatlah mudah pertama tama setelah download jquery kemudian taruh file jquerynya di head..

<link href="css/jquery-ui-1.8.2.custom.css" rel="stylesheet" type="text/css">
<script language="javascript" src="javascript/jquery-1.4.4.min.js"></script>
<script language="javascript" src="javascript/jquery-ui-1.8.7.custom.min.js"></script>
<script language="javascript" src="javascript/jquery-1.4.4.min.js"></script>
<script language="javascript" src="javascript/jquery-ui-1.8.7.custom.min.js"></script>

Termasuk juga jquery-ui dan beserta Cssnya..

Okeh langsung aja ke kode htmlnya

<div id="tabs">
    <ul>
            <li><a href="#tab-1" id="tab1">Guru</a></li>
            <li><a href="#tab-2" id="tab2">Murid</a></li>
            <li><a href="#tab-3" id="tab3">Komite Sekolah</a></li>
            <li><a href="#tab-4" id="tab4">Wali Murid</a></li>
    </ul>
    <div id="tab-1">
  <table width="500">
            <thead>
                <tr>
                    <th>No</th>
                    <th>Nama Wali Murid</th>
                    <th>Id Wali Murid</th>
                    <th>Nomor Hp</th>
                    <th>Jabatan</th>
    </tr>
   </thead>
   <tbody>
    <tr>
    <!--isi data --!>
    </tr>
   </tbody>
  </table>
    </div>
    <div id="tab-2">
    </div>
    <div id="tab-3">
    </div>
    <div id="tab-4">
    </div>
</div>

Nah itu untuk kode htmlnya sekarang masih di tag head tambahkan kode javascript seperti ini

<script type="text/javascript>
$(function(){
  //ini kode untuk membuat tabas
    $('#tabs').tabs();
   //ini untuk meload data dengan jquery secara ajax
    url='datainput/guru.php?from=1&to=10';
    $('#tab-1').load(url);
    $('#tab1').click(function(){
        url='datainput/guru.php?from=1&to=10';
        $('#tab-1').load(url);
    });
    $('#tab2').click(function(){
        url='datainput/murid.php?from=1&to=10&klas=all';
        $('#tab-2').load(url);
    });
    $('#tab3').click(function(){
        url='datainput/komitesekolah.php?from=1&to=10';
        $('#tab-3').load(url);
    });
    $('#tab4').click(function(){
        url='datainput/walimurid.php?from=1&to=10';
        $('#tab-4').load(url);
    });

});
</script>

Nah kode tersebut berguna untuk meload data external dengan ajax jquery. Jadi apabila temen-temen meload tab tersebut otomatis nanti tab tersebut akan berisi data yang ada pada id masing masing tab.

Okeh untuk sekarang mungkin cukup pengenalan mengenai jquery ini. Kalau ada pertanyaan silahkan. Monggo. Semoga membantu