jQuery UI/Effects/toggle ile belirttiğimiz html nesnelerini açıp kapatabiliriz. User Interface için mükemmel özellik olan toogle fonksiyonu işe yarar sonuçlar vermektedir.
$("#tiklanacak_yazi").click bu kısımda #tiklanacak_yazi ID'li nesneye tıklandığı zaman $("#nesne").toggle("slide", {}, 2000); bu kısımdaki #nesne ID'li nesneyi aç kapat diyoruz. Ayrıca 2000 yazan yeri saniye değerini belirtmektedir. Arttırabilir veya azaltabilirsiniz.
<html> <head> <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
rel="stylesheet" type="text/css"/> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> <script src="http://ui.jquery.com/latest/ui/effects.core.js"></script> <script src="http://ui.jquery.com/latest/ui/effects.slide.js"></script> <style type="text/css"> div { display: none; margin: 0px; width: 100px; height: 80px; background: blue; position: relative; } </style> <script> $(document).ready(function() { $("#tiklanacak_yazi").click(function () { $("#nesne").toggle("slide", {}, 2000); }); }); </script> </head> <body style="font-size:62.5%;"> <span id="tiklanacak_yazi">BURAYA TIKLA</span> <div id="nesne"></div> </body> </html>
Ayrıca Slide yazan yeri değiştirebilirsiniz. Kullanılabilir diğer efektler : blind', 'clip', 'drop', 'explode', 'fold', 'puff', 'slide', 'scale', 'size', 'pulsate'jQuery UI/Effects/toggle kullanımı ile ilgili detaylı bilgi ve yardım için coderler forumlarını ziyaret ediniz.
Hiç yorum yok:
Yorum Gönder