Yerel HTML5 İletişim Penceresi Oluşturma

İletişim penceresi, bir web sitesinin kullanıcı arayüzü tasarımında en sık kullanılan öğelerden biridir. Bildirimleri görüntülemek, abonelik formu taşımak, hataları/uyarıları bildirmek ve bir ziyaretçinin dikkatini önemli bilgilere çekmek dahil olmak üzere birçok amaç için kullanılır. Diyalog pencereleri etkin bir şekilde tasarlanıp doğru kullanıldığında kullanıcının işini kolaylaştırabilir.

Önceden, bir iletişim penceresi oluşturmak için Pop Easy, jQuery UI Dialog veya Twitter Bootstrap Modal gibi bir jQuery eklentisi kullanmanız gerekiyordu. Ancak şimdi HTML5'in yeni <dialog> öğesinin tanıtılmasıyla, geliştiricilerin bir web sayfasında açılır diyaloglar ve modlar oluşturması çok daha kolay hale geldi.

Başlangıçta <dialog> etiketi, konuşmaları işaretlemek için harika bir çözüm olarak HTML5 spesifikasyonuna girdi, ancak 2009'da HTML5 spesifikasyonundan çıkarıldı. Bununla birlikte, tekrar yeni bir biçimde geri döndü.

Bu yazıda, sizi <dialog> öğesinden geçireceğim ve bundan en iyi şekilde nasıl yararlanabileceğinizi göstereceğim. Hadi başlayalım!

<dialog> öğesini çalışırken görmek veya kodla oynamak istiyorsanız, canlı demoyu buradan görüntüleyin.

<dialog> Öğesi için Tarayıcı Desteği

Ne yazık ki, <dialog> için tarayıcı desteği şimdilik sınırlıdır. Öğe şu anda yalnızca Safari 6.0 ve Chrome Canary'de desteklenmektedir. Chrome Canary, etiketi tam olarak desteklese de, onu kullanmak için bir bayrağı etkinleştirmeniz gerekir. chrome://flags gidin ve "Deneysel Web Platformu özelliklerini etkinleştir" işaretini etkinleştirin.

Bayrağı etkinleştirdikten sonra, değişikliklerin etkili olması için tarayıcıyı yeniden başlatmanız gerekir.

HTMLDialogElement Arayüzü

<dialog> öğesinin HTML belirtimlerinde bulunan HTMLDialogElement arabirimi, iletişim kutularınızın görünmesini ve kaybolmasını sağlamak için kullanabileceğiniz çok sayıda özellik ve yönteme sahiptir. Bunlar aşağıdaki gibidir:

yöntemler:

HTMLDialogElement arabirimi, diyalogları açmak ve kapatmak için üç yönteme sahiptir.

• show() : Bu yöntem bir diyalog göstermek için kullanılır. Kullanıcılar, bir iletişim kutusu açık olduğu sürece HTML belgesinin diğer içeriğine erişmeye devam edebilir.
• showModal() : Bir kullanıcının bir web sayfasındaki diyalog penceresi dışında herhangi bir şeye erişmesini engelleyen bir "modal diyalog" başlatmak için kullanılır.
• close() : Bir diyaloğu kapatmak için kullanılır. returnValue özelliğini, returnValue özelliğini güncelleyecek isteğe bağlı bir parametre olarak iletebilirsiniz.

Özellikleri:

HTMLDialogElement arayüzüne dahil edilen iki özellik vardır.

• returnValue : İsteğe bağlı olarak close() işlevine geçirilen parametreyi alır.
• open : Bu özellik bir Boole değeridir. true ise, iletişim kutusu kullanıcıya görünür olacaktır. Aksi takdirde gizlenecektir.

Olaylar:

Bir iletişim kutusu kapatıldığında, bir close olayı tetiklenir.

 dialog.addEventListener('kapat', function() {
Diğer kod buraya gelecek…
});

Bu temel yöntemler ve özelliklerin yanı sıra <dialog> öğesi ayrıca şunları da destekler:

• form[method="dialog"] : Bir formu <dialog> ile entegre etmek için kullanılır. Yalnızca bir iletişim kutusu içinde geçerlidir.
• autofocus attribute : Bir iletişim kutusu içindeki bir form denetimine odaklanmak için kullanılır.
• cancel event : "Esc" ile kalıcı bir iletişim kutusu kapatıldığında bir cancel olayı tetiklenir

Şimdi <dialog> öğesinin temellerini anladıktan sonra, bazı örneklerle pratik yapalım.

İletişim Kutusu Oluşturma

İlk olarak size basit bir diyalogun nasıl oluşturulacağını göstereceğim. Aşağıda verilen kod, içeriği olan basit bir <dialog> öğesi, diyaloğu gizlemek için bir kapat düğmesi ve diyaloğu başlatmak için bir göster düğmesi tanımlar.

Duyarlı Kavşağa hoş geldiniz!
Mevcut Sitenizi Duyarlı Hale Getirin
çıkış

İletişim Kutusunu Göster

Yukarıdaki kodu tarayıcınızda test ettiğinizde, aşağıda verilen ekran görüntüsünde gösterildiği gibi, herhangi bir işlevsellik olmadan “İletişim Kutusunu Göster” düğmesi dışında hiçbir şey görmeyeceksiniz:

<dialog> öğesini açmak ve kapatmak için JavaScript .show() ve .close() kullanmanız gerekir.

 (işlev() {  
 	var dialog = document.getElementById('Dialog');
document.getElementById('showDialog').onclick = function() {  
dialog.show();  
};  
document.getElementById('closeDialog').onclick = function() {  
dialog.close();  
};
})();

Şimdi “İletişim Kutusunu Göster” düğmesine tıklarsanız, tarayıcıda iletişim penceresini görebilirsiniz. “Çıkış”a tıklamak diyalog penceresini kapatacaktır. İşte ekran görüntüsü:

Diyaloğa Stil Ekleme

Diğer öğelere yaptığınız gibi, iletişim kutunuza CSS stilleri ekleyebilirsiniz. Varsayılan olarak, iletişim penceresi diğer öğelerin üzerine bindirilirken yatay olarak ortalanmış olarak görüntülenecektir. Varsayılan konumdan memnunsanız ve bakın, başka CSS gerekmez. Aksi takdirde, aşağıda yaptığım gibi, iletişim penceresini zevkinize göre sığdırmak ve tasarlamak için kendi CSS'nizi ekleyebilirsiniz:

 diyalog {
üst: %28;
genişlik: 400 piksel;  
kenarlık: 1px katı rgba(0, 0, 0, 0.3);
sınır yarıçapı: 15 piksel;
kutu gölgesi: 0 3px 7px rgba(0, 0, 0, 0.3);
üst kenarlık: 5 piksel katı #eb9816;
}
buton{
ekran: satır içi blok;
sınır yarıçapı: 3 piksel;
sınır: yok;
yazı tipi boyutu: 0.9rem;
dolgu: 0.4rem 0.8em;
arka plan: #eb9816;
kenarlık-alt: 1 piksel katı #f1b75c;
Beyaz renk;
yazı tipi ağırlığı: kalın;
marj: 0 0.25rem;
metin hizalama: merkez;
}
düğme: fareyle üzerine gelin, düğme: odak {
opaklık: 0.92;
imleç: işaretçi;
}

Kalıcı İletişim Kutusu Oluşturma

Kullanıcılarınızın HTML içeriğinize erişmesini engellemek istiyorsanız, kalıcı iletişim pencerelerini kullanabilirsiniz. Kalıcı iletişim penceresi, iletişim kutusunun görüntülenmesi dışındaki diğer her şeyi grileştirdiği için, kullanıcılar iletişim penceresi açıkken grileştirilmiş metni seçemez veya seçmek için düğmelere tıklayamaz.

Modal oluşturma, diyalog oluşturmaya benzer, tek fark .showModal() yerine .show() kullanılmasıdır. HTML kodunda herhangi bir değişiklik yapmanıza gerek yoktur.

(işlev() {  
 	var dialog = document.getElementById('Dialog');
document.getElementById('showDialog').onclick = function() {  
diyalog. showModal(); 
};  
document.getElementById('closeDialog').onclick = function() {  
dialog.close();  
};
})();

Varsayılan diyaloglar yatay olarak ortalanmış olarak görüntülenirken, modsal diyaloglar görünüm alanında yatay olarak ortalandığı gibi dikey olarak da görüntülenir. Ayrıca, “Escape” tuşuna basarak kalıcı bir iletişim kutusunu kapatabilirsiniz.

Kalıcı İletişim Kutusu Arka Plan Rengi Ekleme

<dialog> öğesi, yalnızca Modal İletişim Kutularıyla çalışan "::backdrop" adlı bir sözde öğeye sahiptir. Bu öğeyi kullanarak, kullanıcılara erişilebilir olmadığını bildirmek için ana sayfayı karartabilirsiniz. Standart CSS özelliklerinden yararlanarak bir arka planı konumlandırabilir ve biçimlendirebilirsiniz:

 dialog::zemin{
pozisyon: sabit;
üst: 0;
sol: 0;
sağ: 0;
alt: 0;
arka plan rengi: rgba(0, 0, 0, 0.7);
}

Bir Form ile <dialog> Uygulaması

Bir form, <dialog> öğesiyle form method="dialog" kullanılarak entegre edilebilir. Form gönderildiğinde, iletişim penceresi kapanacak ve dialog.returnValue özelliği aracılığıyla gönder düğmesinin değerini döndürecektir.

Form iletişim kutusunun HTML kodu:

Kullanım şartlarını kabul ediyor musunuz?
Metninizi buraya girin!

Evet
Numara


Form İletişim Kutusunu Aç

Form iletişim kutusu için aşağıdaki JavaScript'i kullanın.

var formDialog = document.getElementById('formDialog');
document.getElementById('showformDialog').onclick = function() {  
formDialog.showModal();  
};
document.getElementById('gönder').onclick = function() {
formDialog.close(değer);
};
document.getElementById('formDialog').addEventListener('kapat', function() {
uyarı(formDialog.returnValue);
});

Not : Daha iyi anlamak için demomda Dialog yerine formDialog kullanıyorum.

<dialog> öğesini çalışırken görmek veya kodla oynamak istiyorsanız, canlı demoyu buradan görüntüleyin.

Çözüm

<dialog> öğesinin reenkarnasyonu ile geliştiricilerin jQuery eklentisi kullanmadan diyaloglar oluşturması çok daha kolay hale geldi. Chrome Canary ve Safari 6.0, <dialog> öğesini düzgün bir şekilde yorumlasa da, diğer tarayıcıların öğeyi desteklemesini sağlamak için bir çoklu dolgu mevcuttur.

Diğer HTML5 özellikleri hakkında bilgi edinmek istiyorsanız, HTML5 Dosya API'si ile Kavramaya Başlamak bölümüne göz atabilir veya HTML5 Bağlam Menüsü Niteliği hakkında bilgi edinmek isteyebilirsiniz.