T
trgy
Misafir
Jquery derslerine Toggle methodu ile devam ediyoruz. Toggle methodu çok kullanışlı bir method olup bir çok site üzerinde kullanımaktadır. Toggle methodunu kısaca tanımlamak gerekirse hem show hem de hide methodlarını içeren bir methoddur.
Türkçe anlamı
toggle, bir işlemden diğerine geçmek.,
Örnek Toggle methodu
Kullanımı
Yukarıda verdiğim örnekte Tıkla beni! yazısına tıkladığımızda kutu açılacaktır. Bir daha tıkladığımızda ise kutu kapanacaktır. İşlem önceliğine biz karar verebiliyoruz. css kodlarından display: none; seçeneğini kaldırırsak bu sefer kutu açık bir şekilde gelir karşımıza tıkladığımızda kapanır.
Demo - Kaynak Kodlar
Türkçe anlamı
toggle, bir işlemden diğerine geçmek.,
Örnek Toggle methodu
Kullanımı
Kod:
toggle()
toggle(4000) // 4000 zaman belirtir. 4000 = 4 saniye
toggle('slow') // slow'un Türkçe karşılığı yavaş demektir.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="jquery.min.js" type="text/javascript">
</script>
<style type="text/css">
#box {
background-color: red;
width: 300px;
height: 300px;
display: none;
}
</style>
<script type="text/javascript">
$(function() {
$('a').click(function() {
$('#box').toggle('slow');
});
});
</script>
</head>
<body>
<div id="box"></div>
<a href="#">Tıkla beni!</a>
</body>
</html>Yukarıda verdiğim örnekte Tıkla beni! yazısına tıkladığımızda kutu açılacaktır. Bir daha tıkladığımızda ise kutu kapanacaktır. İşlem önceliğine biz karar verebiliyoruz. css kodlarından display: none; seçeneğini kaldırırsak bu sefer kutu açık bir şekilde gelir karşımıza tıkladığımızda kapanır.
Demo - Kaynak Kodlar
arkadaşlar burdaki div yerine harici bir sayfayı aç kapa yapabiliyor muyuz?