Web sayfamızda ışıkları söndürme

Herkese merhabalar,

       Bu ilk teknik makalemde, sitelerde çoğu zaman gerek duyduğumuz zorunlu kullanıcı girişleri için bir alternatif yöntem olan sayfayı karartıp, sadece istenen verinin girilmesini sağlayan nesneye odaklandıran bir yöntemin nasıl yapıldığını sizlerle paylaşıyor olacağım.İlk yazım olduğu için kusurumuz var ise affola… :)

Bu işlemler için;

1-Daha hızlı ilerlemek adına jquery1.4.2 sürümünden faydalanacağız.Edinmek isteyen arkadaşlar için link burada

2-Projemizi asp.net ile geliştireceğimiz için visual studio 2010 ile ilerleyeceğiz.(Notepad yeterlidir)

3-Karartmak için kullanacağımız resim dosyasını buradan indirebilirsiniz.

Başlayalım…

burada yapmak istediğimiz şey “dim.png “isimli resmimizi herhangi bir nesnenin olayına bağlı bir fonksiyonda görünür yapmak daha sonra ise başka fonksiyonlarla bunu kaldırmak.

                                                          

 Yukarıda görüldüğü gibi projemize 1 adet webform, yukarıda belirttiğim resim dosyası ve jquery dosyasını eklemiş bulunmaktayız.

default.aspx ile işe başlayalım…

Öncelikle resim dosyasını barındıracak div elementimizi ve kullanıcıya girilmesi zorunlu veriyi girebilmesi için gerekli nesneleri barındıracak div elementimizi ekliyoruz… 

 

Yukarıda görüldüğü gibi 2 ana divimiz görülmektedir.Aşağıdaki css kodlarıyla birleştirerek bakılırsa neyin ne olduğu daha iyi anlaşılacaktır.Özetle “dim” isimli div aslında gizlidir.”content” isimli div ise sitemizde normal durumda gözükecek olan div imizdir.

Css Kodları:

 

sayfamızın arka plan rengini turuncu olarak seçiyoruz.(kararma bariz gözüksün)

dim isimli divimizin özellikleri gözükmekte.

Burada dikkat etmemiz gereken noktalar;

z index : 100

msgbox isimli divimizin z index degeri 200 dür.dolayısıyla msgbox isimli divimz  daha önde gözükecek ve kullanıcı buradan değer girebilecektir.

display:none

divimiz ilk başta gözükmeyecektir.

background-image

dim isimli png resmimiz divimizin arkaplan resmi olacaktır.bu resim yarısaydam ve siyahtır.Dolayısıyla “ışık söndürme” başlığının kaynağı aslında bu koddur ;)

msgbox isimli divimizn css kodlarında açıklanması gereken bir css kodu görmüyorum.(css bilmeyenler için Sayın Fatih Hayrioğlu‘nun sitesini incelemelerini öneririm.)

şimdi bu kodları sırayla açıklayalım:

1=>jquery nin sağladığı kolaylık ile sayfamızın load eventine bir metot bağlıyoruz.

2=>bağlanan metot “dim” isimli divin boyutunu sayfamızın boyutuna eşitliyor.Böylelikle istemcideki tarayıcı boyutu ne olursa olsun uyum sağlanabilmektedir.

3=>sayfamızın resize olayı için bir metot çalıştırıyoruz.Bu metot 2 numaradaki işlemi yapmaktadır.Böylelikle tarayıcı boyutu değiştiği zaman divimizin boyutlarıda otomatik olarak değişecektir.

4=>btnKarart butonunun click olayına bir metot tanımlıyoruz.Bu metot Jquery nin nimetlerinden faydalanarak dim isimli divimizi göstermeye yarayacaktır.

5=>btnTamam(kararınca gözüken buton)  butonunun click olayına bir metot tanımlıyoruz.Bu metot da dim isimli divimizi gizlemeye yarıyor.

(Ali Çavuşoğlu)

Reklamlar

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Connecting to %s