Jquery Mask en basitinden istediğiniz kısmı maskeleme özelliği. Jquery Mask eklentisi ile maskeleme zımbırtısı gerçekten çok basit. Özellikle bir işlem aktifken veya bir form gönderilirken herhangi bir bölge üzerinde işlem yapılmasını istemiyorsak bu eklentiyi devreye sokuyoruz ve biz isteyene kadar o bölgede işlem yapılamıyor. Üstelik bu anlattığım olayı iki tıkla yapabiliyoruz. Gerçekten çok beğendim bu eklentiyi. Bundan sonraki projelerde elimin altında olacak sayılı Jquery eklentilerinden biri.
Hemen geçelim bunun nasıl yapıldığına. Öncelikle aşağıda vereceğim dosyaları indireceksiniz. Daha sonra ise sitemizin <head></head> tagları arasına js ve css dosyalarını include edeceğiz:
<link href="jquery.loadmask.css" rel="stylesheet" type="text/css" /> <script type='text/javascript' src='jquery.loadmask.js'></script>
yalnız ben bunu yazarken sayfanızda Jquery’nin olduğunu varsayıyorum. Eğer Jquery hali hazırda yoksa onu da dahil edin.
Kütüphaneleri ekledikten sonra işimiz kalıyor maskenin nerede ve nasıl devreye gireceği nasıl kaybolacağı. Hemen geçelim örnek kullanıma
Herhangi bir divin maskelenmesi.
<div id="maskele">
lorem ipsum cart curt burada form olduğunu düşünün ola niyazi yetiş lorem ipsum elden gidiyor bir kez daha lorem gardaş vs vs
</div>
<a id="tetikle" href="javascript://">Tetikle</a>
<a id="iptalet" href="javascript://">İptal</a>
<script>
$(document).ready(function(){
$("#tetikle").bind("click", function () {
$("#maskele").mask("Bekleyin...");
});
$("#iptalet").bind("click", function () {
$("#maskele").unmask();
});
});
</script>
Ne yaptık?
Önce maskelenecek alanımızı belirledik ve idsini maskele dedik. Class da belirleyebilirdik ama neyse karıştırmayalım şimdi o mevzuyu kafa karışmasın. Neyse maskelenecek alan belirlendikten sonra bu maskeleme işini tetikleyecek ve iptal edecek linkleri belirledik. Bunlara da idler verdik ve daha sonra geldik mask eklentisini işe yarar kılacak js kodlarını yazmaya. Burada da dedik ki eğer tetikle idli [$("#tetikle").bind("click", function ()] linke tıklanırsa maskele divinin icabına bak ve ekrana Bekleyin… yaz. Daha sonra ise eğer iptalet idli linke tıklanırsa maskeleme işini iptal et. İşlem bu kadar.
Peki Linke Tıklamadan İptal Edebilir miyiz?
Tabi neden olmasın. Diyelim bir form vs. gönderiyorsunuz ve form işlemi başarıya ulaştığında maskenin kalkmasını istiyorsunuz. Bu durumda yapmanız gereken tek şey eklentinin unmask fonksiyonunu çağırmanız olacak. İsterseniz form gönderme fonksiyonunu düzenleyin isterseniz form gönderildikten sonra ekrana gelecek html yazınızda
<script>$("#maskele").unmask();</script>
şeklinde ekrana basın. Her türlü olur.
