Jquery Effect dan event pada html

Banyak plugin pada jquery salah satunya adalah effect jquery, web akan semakin interaktif dan cantik dengan adanya plugins ini. Pada kesempatan ini penulis akan membahas fungsihide dan toggle pada jquery dan event pada html yaitu onmouseover dan onmouseout . Tentu saja masih banyak yang lain lagi dan bisa di pelajari disini. Langsung saja kepada contoh:
index.php
<script type=’text/javascript’ src=’jquery.js’></script>
<?
$koneksi= mysql_connect(‘localhost’,’root’,’rsgmadm’);
$db= mysql_select_db(‘test’);

function getdata(){
$s="select NIM from tblmahasiswa";
$q= mysql_query($s);
$no=1;

while ($data=mysql_fetch_array($q)){
$nim=$data[‘NIM’];

$toggle="onmouseover=lihatdata(‘$nim’);
onmouseout=hidedata(‘$nim’)";
echo "<tr>
<td class=’tbltd’>$no</td>
<td class=’tbltd’ ".$toggle.">$nim </td>
<td><div id=\"tmptoggle_".$nim."\" style=’display:none;position:absolute;

background-color:teal;color:white;padding:5px;-moz-border-radius: 10px;-webkit-border-radius: 10px;’></div></td>
</tr>";
$no++;
}
echo"
<script text=’javascript’>
function lihatdata(nim){
$(‘#tmptoggle_’+nim).toggle();
$(‘#tmptoggle_’+nim).load(‘ambil.php?get=ambildata&nim=’+nim);
}
function hidedata(nim){
$(‘#tmptoggle_’+nim).hide();
}
</script>";
}

?>
<style>
.tbltr{
color:blue;
border:1px dotted grey;
font-size:14;
}
.tbltd{
border:1px dotted grey;
font-size:13;
}
</style>

<div id=’formutama’>
<table>
<tr>
<th align=’center’ class=’tbltr’>No</th>
<th align=’center’ class=’tbltr’>NIM</th>
</tr>
<? getdata()?>
</table>
</div>


ambil.php

<? $koneksi= mysql_connect(‘localhost’,’root’,’rsgmadm’);
$db= mysql_select_db(‘test’);

$get=$_REQUEST[‘get’];
switch($get){
case ‘ambildata’:
ambildata();
break;
}

function ambildata(){
$nim=$_REQUEST[‘nim’];
$s="select * from tblmahasiswa where NIM=’$nim’";
$q= mysql_query($s);
$datamhs=mysql_fetch_array($q);
echo $datamhs[‘NAMA’]." | ".$datamhs[‘ALAMAT’];
}
?>

Pertama mari kita lihat script pada file index.php
<script type=’text/javascript’ src=’jquery.js’></script>
script tersebut adalah script eksternal, adalah syarat utama dalam menggunakan framework jquery. setelah itu ada variabel yang menghubungkan dengan database. Langsung ke pokok masalah
$toggle=”onmouseover=lihatdata(‘$nim’);
onmouseout=hidedata(‘$nim’)”;

Onmouseover adalah kondisi saat kursor menunjuk salah satu nim pada tabel yang ada. Saat itulah akan dipanggil fungsi lihatdata yang sekaligus mengirim parameter nim ke server.
function lihatdata(nim){
$(‘#tmptoggle_’+nim).toggle();
$(‘#tmptoggle_’+nim).load(‘ambil.php?get=ambildata&nim=’+nim);
}

Pada fungsi ini mendefinisikan bahwa server akan mengirim data dengan parameter nim ke file ambil.php dengan action fungsi ambildata, dimana data tersebut akan diletakkan pada objek $(‘#tmptoggle_’+nim) dengan menggunakan effect toogle jquery. Objek ini sendiri telah didefinisikan saat query pada fungsi getdata().
Sedangkan onmouseout adalah kondisi dimana kursor meninggalkan nim yang tadinya dipilih. Saat kursor meninggalkan nim tersebut maka akan mengeksekusi fungsi hidedata() yang mengirim parameter nim. Pada fungsi ini object $(‘#tmptoggle_’+nim) yang tadinya terlihat menjadi tersembunyi yaitu dengan memanfaatkan effect hide jquery.
function hidedata(nim){
$(‘#tmptoggle_’+nim).hide();
}

Lanjut ke baris berikutnya yaitu
<style>
.tbltr{
color:blue;
border:1px dotted grey;
font-size:14;
}
.tbltd{
border:1px dotted grey;
font-size:13;
}
</style>

script diatas hanyalah css yang akan dipanggil sebagai class oleh table pada html berikut
<div id=’formutama’>
<table>
<tr>
<th align=’center’ class=’tbltr’>No</th>
<th align=’center’ class=’tbltr’>NIM</th>
</tr>
<? getdata()?>
</table>
</div>

Nah getdata ini adalah fungsi php yang dipanggil pada html.
Berikut adalah sintaks asli dari jquery untuk effect diatas
$(selector).toggle(speed,callback,switch)
$(selector).hide(speed,callback)

fungsi tersebut dapat dipelajari disini.
sedangkan untuk event handler ada disini.
Demikian sedikit pembahasan dari penulis mudah-mudahan bermanfaat dan dapat digunakan oleh pembaca.

Tinggalkan Balasan

Please log in using one of these methods to post your comment:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s