Tarafından Yazıldı Bir javascript uygulaması olan messageBox’un amacı görsel olarak web projelerimizi zenginleştirmektir. Eski moda window.open()’dan kurtarır bizi. Popup engelleyicilerle derdi olanlar için de kullanılabilir.
Bir çok web sayfasında kullanılan lightbox ve Facebook’da sık sık karşılaştığımız sayfa içi pencerelere benzer. (Lütfen daha net görebilmek için demoya bakın.)
- Esnek bir yapısı vardır. Bu uygulamayı kullanarak kendi alert (uyari), confirm (onay) pencerelerinizi yaratabilirsiniz.
- Bir çok tarayıcıda çalışır (test edilenler: ie6-7-8-9, firefox 3.6, chrome 6.0) (lütfen tarayıcı testlerinizi yapın ve yorum olarak bu makalenin altına ekleyin.)
- Mesaj kutularının içerikleri html ile oluşturulabilir.
- Küçük boyutludur. 10,4 kb (minified: 7.94 kb)
Dosya boyutu : Uygulamanın boyutu daha küçük olabilirdi. İçerisinde var olan bir çok işlem Internet Explorer desteğini sağlamak içindir. Internet explorer(6-7-8) sabit (position:fixed) konumlandırmayı desteklemediği için resize ve scroll olaylarında bir çok işlem yaptırmak durumundaydım. Bu yüzden boyut arttı. Tabi framework kullanmamanın da kendi fonksiyonlarımızı yazarak dosya boyutunu artırdığını unutmayalım.
Neden framework (jquery, mootools, prototype.js vs) kullanmadım : Burada uygulamanın geliştirilmesinin tarihini kısaca anlatayım. Önce şuanda olduğu gibi framework’süz bir şekilde geliştirdim uygulamayı. Ardından aynı uygulamayı jquery kullanarak tekrar geliştirdim. Bir çok kez sil baştan yeniden yazdım kodları. Farklı kodlama tekniklerini denedim. Hem kullanım alanını genişletmek hem de tarayıcılara ek yük bindirmemek için en son olarak herhangi bir çatı kullanmamaya karar verdim. Zaten kullanacağım çatının da çok az yararı olacaktı. Bir kaç fonksiyon için jquery kullanmaya değmez diye düşündüm.
Örnek sayfayı görebilmek için buraya tıklayın.
Uygulamayı indirebilmek için buraya tıklayın.
Boyutun küçültülmüş halini (minified) indirebilmek için buraya tıklayın.
Kullanım:
Uygulamanın sitil kodları aşağıdaki gibidir ve istediğiniz şekilde düzenleyebilirsiniz:
.message-box-overlay { background-color:#000; opacity:0.4; filter:alpha(opacity=40); } .message-box { font-size:12px; font-family:Tahoma; background-color:#fff; overflow:hidden; text-align:left; padding:8px; } .m-box-table td.tl, .m-box-table td.br { width:10px; height:10px; } .m-box-table td.tl { background:url(images/topleft.png) no-repeat; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/topleft.png',sizingMethod='scale'); } .m-box-table td.tr { background:url(images/topright.png) no-repeat; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/topright.png',sizingMethod='scale'); } .m-box-table td.bl { background:url(images/bottomleft.png) no-repeat; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bottomleft.png',sizingMethod='scale'); } .m-box-table td.br { background:url(images/bottomright.png) no-repeat; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bottomright.png',sizingMethod='scale'); } .m-box-table td.tc { background:url(images/transparent.png) repeat-x; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/transparent.png',sizingMethod='scale'); } .m-box-table td.bc { background:url(images/transparent.png) repeat-x; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/transparent.png',sizingMethod='scale'); } .m-box-table td.ml { background:url(images/transparent.png) repeat-y; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/transparent.png',sizingMethod='scale'); } .m-box-table td.mr { background:url(images/transparent.png) repeat-y; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/transparent.png',sizingMethod='scale'); }
En basit olarak bir mesaj penceresi gösterebilmek için şu kodu çalıştırmalısınız:
messageBox.show("Merhaba Dünyalı");Bu işlem sol üst köşede mesaj penceresi gösterecektir.
messageBox nesnesi temel olarak 2 metoda sahiptir.
show ve close.
Tahmin edilebileceği gibi show mesaj penceresini gösterir ve close ise mesaj penceresini kapatır.
show fonksiyonunun yapısı:
3 argüman alır.
1.si gösterilecek içeriktir ki html destekler.
2.si gösterilecek pencerenin dikey olarak konumudur. Girilmesi zorunlu değildir. Girilmezse sıfır (0) kabul eder ve pencere en üstte gösterilir. Bu alana top,middle,center,bottom kelimelerini ya da pixel olarak uzaklığı ifade eden sayısal (numerik) bir konumlandırma değeri girebilirsiniz. middle ile center (script için) aynı anlama karşılık gelmektedir ve dikey olarak ekranın ortasını tanımlamaktadır.
3.sü ise gösterilecek pencerenin yatay olarak konumuzudur. Girilmesi zorunlu değildir. Girilmezse sıfır (0) kabul eder ve pencere en solda gösterilir. Değer olarak 2. argümandaki değer türlerinin aynısını girebilirsiniz.
2. ve 3. argümanlar için girilecek değerler string türünde olmalıdır.
“top” : en üst. sadece 2. argümanda kullanılabilir.
“bottom” : en alt. sadece 2. argümanda kullanılabilir.
“left” : en sol. sadece 3. argümanda kullanılabilir.
“right” : en sağ. sadece 3. argümanda kullanılabilir.
“center” veya “middle” : orta. 2. ve 3. argümanlarda kullanılabilir.
anlamlarını taşımaktadırlar.
close fonksiyonunun yapısı :
Açılan messageBox penceresini kapatma işlemi için messageBox nesnesinin close metodunu çalıştırmanız yeterlidir.
Kapama işlemi için örnekler:
messageBox.show("<a href='messageBox.close()'>Beni Kapat</a>");Uygulama ayarları:
messagebox.js dosyasının içerisinde /* SETTINGS */ ile başlayıp /* END SETTINGS */ ile biten aralıkta ayar satırları bulunuyor.
top_distance : 200, overlay_close : false, animation : false, // or "fade" min_width : 300, max_width : 900,
top_distance, üstten uzaklık. (Eğer konumlandırma için show metodunun ilk argümanı top girilmişse geçerli sayılır.)
overlay_close, arka plana tıklandığında mesaj penceresinin kapatılıp kapatılmayacağı belirlenir.
animation, messageBox penceresinin açılırken ve kapanırken ne tür bir animasyon kullanacağını belirler. Şuan için animasyon olarak sadece “fade” desteklenmektedir. Yakın zaman “slide” animasyon türüde eklenecektir.
min_width, messageBox penceresinin alabileceği minimum genişliktir.
max_width, messageBox penceresinin alabileceği maximum genişliktir.
Not : Yakında zamanda uygulamaya min_height ve max_height özellikleri de eklenecektir.
Örnek sayfayı görebilmek için buraya tıklayın.
Uygulamayı indirebilmek için buraya tıklayın.
Boyutun küçültülmüş halini (minified) indirebilmek için buraya tıklayın.
Uygulamayı örnek dosyasıyla birlikte indirmek için buraya tıklayın.
