Son zamanlarda yaygın olarak kullanılan javascript kütüphanelerinden JQuery’i duymayanımız yoktur. Bu yazımızda bir ASP.NET projesinde JQuery kütüphanesinin BlockUI eklentisini kullanarak kullanıcıları bir süreliğine engellemeyi işleyeceğiz.
     Bu işlemi gerçekleştirebilmek için öncelikle yapmamız gereken JQuery kütüphanesini projemize eklemek olacaktır.
Gerekli dosyalar :

jquery.blockUI.js (14,88 kb)

jquery-1.3.2-vsdoc2.js (188,54 kb)

 
Vakit kaybetmeden hemen başlayalım;
Sayfamızın CSS tasarımını aşağıdaki şekilde kullanacağız.
<center>
        <div id="menu" style="background-image:url('Images/AspNetLogo.png'); background-repeat:no-repeat; height: 44px; width: 108px;"></div>
        <div id="icerik" style="background-color: ActiveCaption; height: 500px; width: 500px;"></div>
</center>

AspNetLogo isimli resme tıkladığımızda (“menu”), “icerik” isimli alanımızı 1 saniye boyunca engelleyeceğiz. JavaScript kodumuzu yazmaya başlayalım;
    <script type="text/javascript" language="javascript" src="JQuery/jquery-1.3.2-vsdoc2.js"></script>
    <script type="text/javascript" language="javascript" src="JQuery/jquery.blockUI.js"></script>
    <script type="text/javascript" language="javascript">
        $(document).ready(function() {
            $('#menu').click(function() {
                $('#icerik').block({ message: '<h4>Engellenmiş İçerik...</h4>', timeout: 2000 });
            });
        });
    </script>

Yazdığımız JavaScript kodlarından biraz bahsetmek gerekirse;
$('#menu').click(function() { });
“menu” isimli div alanımız tıklandığında çalışacak işlemleri içermektedir.
            $('#icerik').block({ message: '<h4>Engellenmiş İçerik...</h4>', timeout: 3000 });


ise, “icerik” isimli div alanımızı bulup block özelliğini çalıştırıp block özelliğimize message ve timeout seçeneklerini eklemektedir. message seçeneğimize html komutları girilebilmektedir. timeout seçeneği ise engellenen içeriğin kaç milisaniye engelleneceği bilgisini içerir. Örneğimizde 3000 milisaniye (3 saniye) kullandık.

 
Eğer bütün sayfamızı engellemek isteseydik yazacağımız JavaScript kodu aşağıdaki şekilde olacaktır;
        $(document).ready(function() {
            $('#menu').click(function() {
                $.blockUI({ message: '<h4>Engellenmiş Sayfa...</h4>', timeout: 3000 });
            });
        });

 
Sayfamızın tamamını engellemek yerine growlUI ile sadece bir uyarı da gösterebiliriz. Bu işlem için gerekli kodumuz;
        $(document).ready(function() {
            $('#menu').click(function() {
                $.growlUI('DeveloperMania.NET', 'JQuery (BlockUI)', 2000);
            });
        });


şeklindedir. Bu kod ile birlikte başlığı DeveloperMania.NET olan, altında JQuery (BlockUI) yazan bir pencere açılıp 2 saniye süresince gösterilmiştir.
 

Bu örneklere ek olarak BlockUI’ı ayrıntılı incelemek isteyenler aşağıdaki adresi ziyaret edebilirler;
http://www.malsup.com/jquery/block/

Konu anlatımı için hazırlanan örnek :
 
2009_10_JQuery_BlockUIProject.rar (52,09 kb)
 
Kolay gelsin. İyi çalışmalar.
 
Doğukan DEMİR
Eastern Mediterranean University
Department of Computer Engineering