jQuery myDialog eklentisi

jquery Web tarayıcıların bizlere sunduğu alert, confirm ve prompt isimli dialog kutuları sayesinde javaScript yoluyla kullanıcılarla etkileşime geçebiliyoruz. Yazdığım yeni eklenti sayesinde bu dialog kutularını ekranda gösterirken, web sayfasının kararmasını sağlayabiliyorsunuz. Aynen lightbox örneklerinde olduğu gibi…

myAlert, myConfirm ve myPrompt

jQuery Alerts gibi eklentiler sayesinde tarayıcıların dialog kutuları yerine özel tasarlanmış dialog kutuları kullanabiliyorsunuz. Fakat ben özel tasarlanmış dialog kutularını pek tercih etmiyorum. Çünkü bunlar Firebug veya Opera Dragonfly gibi eklentilerle kolayca manipule edilebiliyorlar. Tarayıcıların kendi dialog kutularına ise müdahale edilemiyor. Ayrıca tarayıcılardaki dialog kutuları ekranda gösterilirken sesli olarak uyarı veriyorlar.

eklentiden öncesi

eklentiden sonrası

Eklenti nasıl kullanılıyor?

2 kilobayttan daha küçük olan jQuery myDialog eklentisini eBurhan Araçları sayfasından indirin ve web sayfanıza aşağıdaki gibi bağlayın:

<head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jquery.myDialog.js"></script>
</head>

Daha sonra yapacağınız tek şey, eskiden kullandığınız alert-confirm-prompt dialogları yerine artık myAlert-myConfirm-myPrompt kullanmak olacaktır.

<script type="text/javascript">
function ornekAlert()
{
    myAlert('bu bir myAlert örneğidir !');
}
</script>

<script type="text/javascript">
function ornekConfim()
{
    var cvp = myConfirm('bu bir myConfirm örneğidir !');

    if( cvp ) {
        alert('Tamam butonuna tıkladınız !')
    } else {
        alert('Vazgeç butonuna tıkladınız !')
    }
}
</script>

<script type="text/javascript">
function ornekPrompt()
{
    var cvp = myPrompt('bu bir myPrompt örneğidir !');

    if( cvp === null ) {
        alert('iletişim kutusuna birşey yazmadınız!');
    } else {
        alert('iletişim kutusuna "' + cvp + '" yazdınız');
    }
}
</script>

Eklentinin seçenekleri…

jQuery myDialog eklentisi, değiştirebilmeniz için size 3 tane seçenek sunuyor. Bu seçenekler arkaplanın (overlay) rengi ne olsun, arkaplan resmi gösterilsin mi gösterilmesin mi ve arkaplan ne kadar şeffaf olsun şeklindedir. Bu seçenekleri myDialog() fonksiyonuna parametre göndererek değiştebiliyorsunuz.

<script type="text/javascript">
myDialog({
    image: false,
    color: 'red',
    opacity: 0.4
});
</script>

bu seçeneklerin etkilerine aşağıdaki görüntülerden bakabilirsiniz:

Sonuç…

Gopof, SiteBilgi, Sunucu Tara ve gUrlConvert gibi web sitelerimde dialog kutularını bu şekilde kullanıyorum. Kullanımı kolay ve rahat olduğu için artık bunu bir jQuery eklentisi haline getirip yayınlamak istedim. Eğer indirmeden önce eklentinin kodlarına bakmak isterseniz renkli eklenti kodları sayfasına, eklentinin çalışır haline bakmak isterseniz demo sayfasına, eklentiyi indirmek isterseniz de eBurhan Araçları sayfasına bakabilirsiniz. Faydalı olması dileğiyle

6 yorum var

Eylos 21 Ağustos 2010 21:21

Yine, yeni, yeniden bir eklenti. Süpersin…
Fatih 22 Ağustos 2010 11:02

gerçekten çok kullanışlı uzun bir aradan güzel bir eklenti uygulaması teşekkürler.
Sinan 23 Ağustos 2010 15:28

eklenti için teşekkürler.hemen deneyeceğim.sağolasın eburhan .
Oğuz Özcan 5 Eylül 2010 03:05

Birde buna ekstradan dialog kutusunun görüntüsünü değiştirebilme özelliği eklenirse çok güzel olur.
Örnek vermek gerekirse :

Başlık kısmı, içerik kısmı ve alt kısım ayrılır. Bölümler html kodlarıyla hazırlanır ve bu kodlar zaten tasarlanmış olan bir json interface’i yardımıyla düzenlenir. json dosyaları düzenlenip tema adresi olarak verilir, buradan ajaxla bilgiler çekilir ve ekrana standart olan bu ekran yerine o ekran yerleştirilir. Hatta bu javascript dosyası baştan include ettirilip sınıf adı myDialog sınıfını çağırırken söylenmesi yeterli de olabilir.

gibi bir plan hazırladım kafamda.
mustafa yalçın 6 Eylül 2010 20:22

Güzel çalışma
Ekrem 27 Haziran 2011 17:58

Bu jQuery’nin yapamayacağı şey kalmayacak bu gidişle! Emeğine sağlık, güzel olmuş doğrusu!

eburhan.com