jquery | Diplomasız Mühendis

Javascript tarafında oldukça fazla event ( olay ) var. JQuery ile birleştiğinde daha da fazla eventlara hatta özelleştirilmişlere dahi sahip olabiliyorsunuz. Bir projede form hazırlarken div nesnesinin show / hide durumuna göre başka bir nesnenin işlenmesi gerekiyordu. Ufak bir araştırma sonucu herhangi bir nesnenin – sadece div değil – show / hide durumlarına göre event atayabileceğimi buldum.

Aşağıdaki kod ile bu event ın tanımlamasını yapıyoruz

( function( $ )
{
  $.each(['show', 'hide'], function (i, ev)
  {
var el = $.fn[ ev ];
$.fn[ ev ] = function()
{
  this.trigger( ev );
  return el.apply( this, arguments );
};
  });
})(jQuery);

Örnek kullanım;

$( 'div' ).on( 'show', function()
{
$( 'span' ).html( 'div gösterim durumu açık' );
});
$( 'div' ).on( 'hide', function()
{
$( 'span' ).html( 'div gösterim durumu kapalı' );
});

Siz div veya kendi class / id her neyse artık $( ‘div’ ).show(); veya $( ‘div’ ).hide(); yaptığınızda span nesnesi içerisinde durumunu açıklayan yazıyı yazacak. Bu ihtiyaç bizim için sekmeli form işlemi yaparken verilen cevaplara göre bir sonraki sorunun ( her bir soru bir div içerisinde yapı olarak yer alıyor ) hangisi olacağını belirliyordu. Basit bir işlem için bu şekilde bir kullanıma gerek kalmayabilir fakat hareket güzel. 🙂

Denemedim fakat event ataması yapılırken each ile birlikte show / hide belirteci yapılırken farklı eventlar üzerinden event türetimi yapılabilir sanırım.

<script type="text/javascript">
$( document ).ready( function()
{
if ( $(window).width() <= 768 )
{
var open_drop_menu = '<style id="wi_style_id">@media (max-width: 768px) { .dropdown-menu,.table.dataTable>tbody>tr.child ul.dropdown-menu{display: none !important;} }</style>';

$( 'head' ).append( open_drop_menu );

setTimeout( function()
{
$( document ).delegate( '.dropdown-toggle', 'click', function()
{
if( $( 'style#wi_style_id' ).length > 0 )
$( 'style#wi_style_id' ).remove();
else
$( 'head' ).append( open_drop_menu );
} );

}, 2557 );
}
});
</script>

Etiket: jquery

JQuery ile Nesnenin Show / Hide Event Yakalama