<input id="gsbtn" value="Göster" type="button" />
<div id="hddv" style="width:65px; height:65px; background-color:#666;"></div>
$("#gsbtn").click();
$("#hddv").show();
gsbtn button una click fonksiyonumuzu atamış olduk. Bu atamadan sonra yapmak istediğimiz gizleme özelliğini click içinde oluşturuyoruz$("#gsbtn").click(function(){
// yapmak istediklerimizi bu kısımda düzenliyoruz.
$("#hddv").show(); veya $("#hddv").show('slow'); veya $("#hddv").show('fast');
//show özelliğimizin iki tane parametresi var slow ve fast bunlarıda örneklerde göreceğiz.
});
HTML görünüm
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>jQuery - show()</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#hdbtn").click(function () {
// eğer butona tıklanmış ise gizleme işlemini gerçekleştiriyoruz.
$("#hddv").hide();
});
$("#hdbtnsl").click(function () {
$("#hddvsl").hide('slow'); //slow parametresini kullanıyoruz. yavaş yavaş gizliyoruz.
});
$("#hdbtnfs").click(function () {
$("#hddvfs").hide('fast'); //fast parametresini kullanıyoruz. hızlı gizliyoruz.
});
$("#gsbtn").click(function () {
// eğer butona tıklanmış ise gösterme işlemini gerçekleştiriyoruz.
$("#hddv").show();
});
$("#gsbtnsl").click(function () {
$("#hddvsl").show('slow'); //slow parametresini kullanıyoruz. yavaş yavaş gösteriliyor.
});
$("#gsbtnfs").click(function () {
$("#hddvfs").show('fast'); //fast parametresini kullanıyoruz. hızlı gösteriliyor.
});
});
</script>
</head>
<body>
<div style="float:left;">
<input id="hdbtn" value="Gizle" type="button" />
<div id="hddv" style="width:65px; height:65px; background-color:#666;"></div>
<input id="hdbtnsl" value="Slow gizle" type="button" />
<div id="hddvsl" style="width:65px; height:65px; background-color:#666;"></div>
<input id="hdbtnfs" value="Fast gizle" type="button" />
<div id="hddvfs" style="width:65px; height:65px; background-color:#666;"></div>
</div>
<div style="float:right;">
<input id="gsbtn" value="Göster" type="button" />
<input id="gsbtnsl" value="Slow göster" type="button" />
<input id="gsbtnfs" value="Fast göster" type="button" />
</div>
<div style="clear:both; float:none;"></div>
</body>
</html>
İsterseniz testlerinizi HTML editörden yapabilirsiniz.
Örnek :
Hiç yorum yok:
Yorum Gönder