Kali ini kita akan coba membuat semua toggle livechat, berikut contoh toggle livechat yang ingin kita buat, toggle livechat.
Pada contoh tersebut kita membuat suatu bagian livechat menjadi bisa di-hidden dan bisa di-show, fitur tersebut tidak susah untuk dibuat, karena menggunakan jquery standard tanpa ada plugin tambahan yang harus dipanggil. Mari kita mulai membuat toggle livechat :
Buatlah 1 folder dengan nama Toggle Livechat. lalu buatlah file html dan beri nama index.html dan simpan pada folder yang tadi kita buat. Berikut HTML dari isi file index.html :
HTML
<div id=”chat”>
<button id=”act_chat”></button>
<div id=”main_chat”>
<div id=”head_chat”>
Chat With Us For User Who <strong>Already
Have ID</strong> or Install YM
</div><!– end of head_chat –>
<div id=”chat_dalam”>
<h1>Divisi Marketing</h1>
<table>
<tr>
<td width=”100″>Senkiong</td>
<td><a href=”ymsgr:sendim?support1″><img src=”http://opi.yahoo.com/online?u=support1&m=g&t=1″ border=”0″ /></a></td>
</tr>
<tr>
<td>Grace Kelly</td>
<td><a href=”ymsgr:sendim?support1″><img src=”http://opi.yahoo.com/online?u=support1&m=g&t=1″ border=”0″ /></a></td>
</tr>
<tr>
<td>Rudy</td>
<td><a href=”ymsgr:sendim?support1″><img src=”http://opi.yahoo.com/online?u=support1&m=g&t=1″ border=”0″ /></a></td>
</tr>
<tr>
<td>Farida</td>
<td><a href=”ymsgr:sendim?support1″><img src=”http://opi.yahoo.com/online?u=support1&m=g&t=1″ border=”0″ /></a></td>
</tr>
<tr>
<td>Dian</td>
<td><a href=”ymsgr:sendim?support1″><img src=”http://opi.yahoo.com/online?u=support1&m=g&t=1″ border=”0″ /></a></td>
</tr>
<tr>
<td>Retno</td>
<td><a href=”ymsgr:sendim?support1″><img src=”http://opi.yahoo.com/online?u=support1&m=g&t=1″ border=”0″ /></a></td>
</tr>
<tr>
<td>Lince</td>
<td><a href=”ymsgr:sendim?support1″><img src=”http://opi.yahoo.com/online?u=support1&m=g&t=1″ border=”0″ /></a></td>
</tr>
<tr>
<td>Ika</td>
<td><a href=”ymsgr:sendim?support1″><img src=”http://opi.yahoo.com/online?u=support1&m=g&t=1″ border=”0″ /></a></td>
</tr>
<tr>
<td>Rina</td>
<td><a href=”ymsgr:sendim?support1″><img src=”http://opi.yahoo.com/online?u=support1&m=g&t=1″ border=”0″ /></a></td>
</tr>
<tr>
<td>Yulia</td>
<td><a href=”ymsgr:sendim?support1″><img src=”http://opi.yahoo.com/online?u=support1&m=g&t=1″ border=”0″ /></a></td>
</tr>
</table>
<h1>Divisi Support</h1>
<table>
<tr>
<td width=”100″>Fanny</td>
<td><a href=”ymsgr:sendim?support1″><img src=”http://opi.yahoo.com/online?u=support1&m=g&t=1″ border=”0″ /></a></td>
</tr>
<tr>
<td>Grace Kelly</td>
<td><a href=”ymsgr:sendim?support1″><img src=”http://opi.yahoo.com/online?u=support1&m=g&t=1″ border=”0″ /></a></td>
</tr>
<tr>
<td>Rudy</td>
<td><a href=”ymsgr:sendim?support1″><img src=”http://opi.yahoo.com/online?u=support1&m=g&t=1″ border=”0″ /></a></td>
</tr>
</table>
</div><!– end of chat_dalam –>
</div><!– end of main_chat –>
<div class=”clear”></div>
</div><!– end of chat –>
Setelah kita membuat blok HTML, selanjutnya mari kita buat penggunaan jquerynya, berikut ini adalah blok javascript untuk penggunaan jquery :
JAVASCRIPT :
<script type=”text/javascript”>
$(function(){
$(“#act_chat”).click(function(){
var attr_class = $(this).attr(‘class’);
if(!attr_class){
$(“#chat”).animate({
marginRight: ‘0px’
}, 500);
$(this).addClass(‘show’);
}else{
$(“#chat”).animate({
marginRight: ‘-200px’
}, 500);
$(this).removeClass(‘show’);
}
});
});
</script>
Setelah membuat jquerynya, untuk mempercantik tampilan kita akan membuat cssnya, berikut css yang digunakan
CSS :
<style type=”text/css”>
body{
font-size: 12px;
font-family: arial;
}
/* CHAT STYLE */
#chat{
position: fixed;
margin-right: -200px;
margin-top: 10px;
width: 243px;
right: 0;
z-index: 100000;
}
#chat #act_chat{
background: none;
border: none;
cursor: pointer;
}
#chat #act_chat{
background: url(images/btn_livechat.png) top left no-repeat transparent;
width: 43px;
height: 130px;
float: left;
display: block;
}
#chat #head_chat{
background: url(images/bg_head_chat.png) top left repeat-x transparent;
height: 34px;
padding: 10px;
border: 1px solid silver;
border-bottom: none;
}
#chat #chat_dalam{
background: url(images/bg_chat.png) top left repeat-x #ededed;
min-height: 100px;
padding: 20px;
padding-top: 10px;
border-left: 1px solid silver;
border-right: 1px solid silver;
}
#chat #chat_dalam h1{
background: url(images/border_h1.png) bottom left repeat-x transparent;
color: #c38102;
font-size: 14px;
padding-bottom: 10px;
margin-bottom: 10px;
}
#chat #chat_dalam table{
margin-bottom: 20px;
}
#chat #main_chat{
background: url(/images/top_chat.png) top left repeat-x transparent;
width: 198px;
padding-top: 3px;
border-bottom: 1px solid silver;
float: left;
}
</style>
Save semua coding tersebut dan jalankan dibrowser anda, jangan lupa untuk memanggil file jquerynya. :
<script type=”text/javascript” language=”javascript” src=”jquery-1.4.2.js”></script>
Selamat Mencoba, semoga berhasil..
Jika Masih gagal, silahkan download source di atas di link berikut >> jquery toggle livechat
Kunjungi www.proweb.co.id untuk menambah wawasan anda.