jQuery türkiye!: events/cilick

events/cilick etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

jQuery UI/Effects/effect kullanımı

Merhabalar bi başka makale ile birlikte sizlerleyim. Bu yazımda sizlere UI/Effects/efeect kullanımı hakkında biraz bilgi vereceğim. jQuery UI effect ile belirttiğimiz Id'ye bağlı nesnenin gösterimi UI efektleri ile gösterebiliriz. Öreği ve demosu için buraya bakabilirsiniz.

<html>
<head>
  <link href="libs/jqueryui/1.8/themes/base/jquery-ui.css"
rel="stylesheet" type="text/css"/>
  <script src="libs/jquery/1.4/jquery.min.js"></script>
  <script src="libs/jqueryui/1.8/jquery-ui.min.js"></script>
  <script src="latest/ui/effects.core.js"></script>
<script src="latest/ui/effects.explode.js"></script>
<style type="text/css">
  div { margin: 0 auto; width: 100px; height: 80px;

background: blue; position: relative; }
</style>
  <script>
  $(document).ready(function() {
    $("#tiklanacak").click(function () {
      $("#div_id").effect("slide");
    });
  });
  </script>
</head>
<body style="font-size:62.5%;">
 
<span id="tiklanacak">BURAYA TIKLA</p>
 
<div id="div_id"></div>
 
</body>
</html>

Yukarıdaki kod parçasında $("#tiklanacak").click(function () kısmında: #tiklanacak ID'li nesneye tıklandığında $("#div_id").effect("slide"); #div_id ID'li nesneyi slide effect'i ile göster diyoruz. Ayrıca "slide" yerine aşağıdaki efektleri kullanabilirsiniz.

'blind', 'bounce', 'clip', 'drop', 'explode', 'fold', 'highlight', 'puff', 'pulsate', 'scale', 'shake', 'size', 'slide', 'transfer'

Konu hakkında ayrıntılı bilgi ve soru cevap için coderler jQuery UI/Effects/effect kullanımı forumunu ziyaret edin.

jQuery UI/Effects/Blind kullanımı

jQuery ile belirlediğiniz nedneyi kapatmak ister misiniz? Bu kullanıcı arayüzü sayesinde istediğiniz nesneyi tek tıklama ile kapatabilirsiniz. İsterse nesnenin tag'ını belirtir ister nesnenin Id numarasını belirtirsiniz.

<html>
<head>
<link href="jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="1.4/jquery.min.js"></script>
<script src="jqueryui/1.8/jquery-ui.min.js"></script>
 <style type="text/css">
   div { margin: 0px; width: 100px;

height: 80px; background: green;

border: 1px solid black; position: relative; }
 </style>
 
<script>
$(document).ready(function()
{
 $("div").click(function ()
 {
      $(this).hide("blind", { direction: "horizontal" }, 1000);
 });
});
</script>
</head>
<body style="font-size:62.5%;">
  <div id="merhaba"></div>
</body>
</html>

Yukarıdaki kod parçası ile div nesnenesine(yeşil kutu) tıklandığı zaman kutu sağdan sola doğru kapanacaktır.
direction : "vertical" yada "horizontal" senecekleri bulunmakta.
Ayrıca hide yerine show yazarsanız kapalı nesneyi çıkarmış olacaksınız. Yani işlemin tam tersi.
Şimdi Id adını bellirttiğimiz nesnenin etiketini kapatalım.

$("div").click(function ()
// DIV KISMININ ÖRNEĞİ
<div></div>

yukarıda kısmı aşağıdaki gibi yapınca sadece belirttiğimiz ID nesneleri değişecek.

$("#div_adi").click(function ()
// DIV KISMININ ÖRNEĞİ
<div id="div_adi"></div>

Konu hakkında detaylı bilgi ve örnekler için sizi buraya alalım. Ayrıca konu hakkında soru-cevap için sizi coderler jQuery UI/EffectsBlind kullanımı forumlarına alalım.

jQuery Ajax .serialize() kullanımı

Bu fonksiyon sayesinde form elementlerinde bulunan radio button, checkbox, selectbox, listbox gibi nesnelerin click olayında get işlemimizin referansını değiştirebiliyoruz. Biraz daha açıklama yapmak gerekir se, form içindeki verileri post ederken bir kaç seçenek sunmanız gerekebilir. Bir adet seçim kutusu ve seçim kutusu seçildiği andan itibaren link adresimize yansıyacaktır. Bu konuyu en iyi örneklerle açıklayabiliriz.

Checkbox'ın değerine tıklandığı andan itibaren belirttiğimiz id'li adres alanında check=check1 eklenecektir. Get işlemini düşünün bunun jQuery ile geliştirilmiş ve hızlandırılmış hali.

Devamı »

jQuery show(gösterme) efekti

Bir önceki dersimizde jQuery hide(gizleme) efekti ile ilgili bir takım konulara deyinmiştik. Şimdi ise bu işlemin tam tersini bir yandan da kardeş işlevini anlatacağız. Gösterme efekti sayesinde gizlenmiş bir nesneyi show efekti ile gösterebiliriz. Bu konuyu iyice anlamak ve örnekleri uygulayabilmeniz için jQuery hide(gizleme) efekti dersini okumanızı tavsiye ediyorum.



$(function()    {    $('#ac').click(function(){$('#div_id').show('slow');});    });  

<div id="div_id">  jQuery türkiye! </div>  

<a href="#" id="ac"> Buna Basınca Aç </a>

Yukarıdaki kodu kullandığımız zaman tarayıcı ön yüzünde, Buna Basınca Aç linkine tıklandığı andan itibaren div'in kapladığı bölümü yavaşça açılacaktır. Kodları biraz açıklamak gerekirse;
#ac id'li değere tıklandığında #div_id ID'li nesneyi aç('yavaş')
Burada slow yerine fast yazar isek yavaş yavaş kapatmak yerine hızlı kapatacaktır eğer boş bırakır isek '' hiç bir efekt vermeden kapatacaktır.

Events/Click - Olaylar/tıklama dersleri için buraya tıklayınız. Ayrıca ingilizce ayrıntılı örnekler için jQuery Show bakınız.

Sayfalar

jQuery UI/Effects/effect kullanımı

jQuery UI/Effects/Blind kullanımı

jQuery Ajax .serialize() kullanımı

jQuery show(gösterme) efekti