JQuery İle Sanal Klavye

Ödeme sistemlerinde genellikle kullanılan sanal klavyeleri görmüşsünüzdür. Merakımızın sonucu olarak aşağıdaki gibir bir yapı oluştu. Merak edenler için ödeme sistemlerinde kullanılan sanal klavyenin yapım aşamaları aşağıdadır. Sanal klavyenin çözümünü, tasarımını ve sanal klavye üzerinde tuş basım yani keypress olayının tetiklenmesi aşağıdaki gibidir. Bu arada farklı yöntemlerde mevcuttur.

Şimdi olayın yapım aşamasında aşağıdaki gibi bir yapı kullandık.

Okumaya devam et “JQuery İle Sanal Klavye”

JQuery ile Nesnenin Show / Hide Event Yakalama

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.

Chrome Javascript ile Barkod / QR Okuyucu Problemi

Standart el terminalleri ve barkod okuyucular ile stok / depo takibi yaptığımız bir sistem üzerinde yeni nesil teknoloji olan QR ( kare kod ) okutma sırasında problemler yaşadık.
Problem el terminalinin QR KOD u okuması sonrasında Chrome üzerinde CTRL+J yapması. Chrome üzerinde indirilenler sayfası açılmakta ve aynı zamanda QR içerisinde New Line yani enter ( \n ) özelliğini pas geçiyordu.

Aşağıdaki Javascript Kod parçacığı ile birlikte bu problemin üstesinden geldik. Bizim canımız yandı sizinkiler yanmasın;


window.document.getElementById( 'collect_seri' ).addEventListener('keydown', function(event)
    {
    console.log( event );
    if( event.keyCode == 13 || event.keyCode == 17 ||  event.keyCode == 74 )
{
if( event.keyCode == 13 || event.keyCode == 17 )
$( '#collect_seri' ).val( $( '#collect_seri' ).val()+"\n" );
if( event.ctrlKey != false )
event.preventDefault();
return;
}
    });

“collect_seri” ID li nesne textarea nesnesidir. Siz problem yaşadığınız nesne veya nesnelere işlem yapabilirsiniz.

Jquery DataTable Dropdown Problemi

Projelerinizde Jquery DataTable kullanıyorsanız ve datatable içerisinde de dropdown menüler kullanıyorsanız problemler yaşayabilirsiniz.
Problem; mobil olarak web sayfanızı açtığınızda dropdown menülerin açık ve kapatılamaz olmasıdır.
Aşağıdaki kod satıları ile bu problemin üstesinden geldik fakat mantık hatasından dolayı çift tıklayıp ( iki kere ekrana bastıktan sonra ) etkileşime geçmektedir. Düzeltip kullanabilirsiniz .

<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>