Dari http://docs.jquery.com/UI/Theming/API kita melihat class-class dalam CSS yang digunakan untuk interaction class. Class-class itu adalah
- .ui-state-default
Class ini dirancang diaplikasikan untuk keadaan default elemen yang dapat diklik - .ui-state-hover
Class ini dirancang diaplikasikan saat mouseover elemen yang dapat diklik - .ui-state-focus
Class ini dirancang diaplikasikan saat keyboard focus elemen yang dapat diklik - .ui-state-active
Class ini dirancang diaplikasikan saat mousedown elemen yang dapat diklik
Saat ini kita akan menambah even mouse over kepada suatu elemen dengan source code nya sebegai berikut :
<!DOCTYPE html>
<html>
<head>
<title>JQuery UI Interactions</title>
<link rel=”stylesheet” href=”development-bundle/themes/base/jquery.ui.all.css”>
</head>
<body>
<div class=”ui-widget”>
<div class=”ui-state-default ui-corner-all”>
<a href=”#”>Ini di dalam class ui-state-default ui-corner-all</a>
</div><!–end of ui-state-default ui-corner-all–>
</div><!–end of ui-widget–>
<script src=”development-bundle/jquery-1.6.2.js”>
</script>
<script>
$(function() {
$(“.ui-widget a”).hover(
function()
{
$(this).parent().addClass(“ui-state-hover”);
}
,function()
{
$(this).parent().removeClass(“ui-state-hover”);
}
)
$(“.ui-widget a”).active(
function()
{
$(this).parent().addClass(“ui-state-active”);
}
,function()
{
$(this).parent().removeClass(“ui-state-active”);
}
)
});
</script>
</body>
</html>
Hasil dari coding ini bisa dilihat di http://aris.proweb.asia/interactions.html .
Kunjungi www.proweb.co.id untuk menambah wawasan anda.