HTML5 ve CSS3 Programlama için AJAX'te Özel Bir İletişim Kutusu Nasıl Oluşturulur - mankenler

AJAX, HTML5 ve CSS3 programcılarının özel diyalog kutuları yapmasına izin verir. JavaScript, birkaç iletişim kutusu (uyarı ve komut istemi iletişim kutuları) sağlar, ancak bunlar oldukça çirkin ve nispeten esnek değildir. JQuery UI, herhangi bir div'ı sanal bir iletişim kutusuna dönüştürmek için bir teknik içerir. Diyalog kutusu temayı izler ve yeniden boyutlandırılabilir ve hareket ettirilebilir.

İletişim kutusunun oluşturulması zor değildir, ancak kodla açıp kapatabilmeniz gerekir; aksi takdirde uygun bir iletişim kutusu gibi davranmaz (bu, işlem sırasında bir pencereyi taklit eder system):

1. Bir iletişim kutusu olarak kullanmak istediğiniz div'yi oluşturun.

   Bir div oluşturun ve bir iletişim kutusu düğümüne çevirebilmeniz için bir kimlik verin. Başlık özniteliğini ekleyin ve başlık iletişim kutusunun başlık çubuğunda görünür.

   İletişim sınıfı, yüklü sayfa temasıyla tutarlı, hareket edebilen, büyükçe ölçeklendirilmiş bir iletişim kutusu oluşturmanıza izin verir.
   

2. Div'yi bir iletişim kutusu haline getirin.

   div öğesini init () işlevindeki bir jQuery iletişim kutusu düğümüne çevirmek için dialog () yöntemini kullanın:

   $ ("# dialog"). iletişim ();
   

3. İletişim kutusunu varsayılan olarak gizle.

   Genellikle bir tür olay gerçekleşene kadar iletişim kutusunun görünmesini istemezsiniz. Bu özel örnekte, kullanıcı bir düğmeyi tıklatana kadar iletişim kutusunun görüntülenmesini istemeyebilirsiniz. Diyalog kutusunun çağırılıncaya kadar görünmeyeceği şekilde, diyalog kutusunu init () fonksiyonuna kapatmak için bazı kodlar koyabilirsiniz.

4. İletişim kutusunu kapatın.

   Bir iletişim kutusunu kapatmak için iletişim kutusu düğümüne bakın ve iletişim kutusundaki () yöntemini tekrar çağırın. Bu sefer, tek bir değeri "yakın" parametre olarak gönderirsiniz ve iletişim kutusu hemen kapanır:

   // başlangıçta iletişim kutusunu kapat $ ("# dialog"). iletişim ("yakın");
   

5. X'i tıklamak otomatik olarak iletişim kutusunu kapatır.

   Diyalog kutusunda çoğu pencere sisteminde Pencereyi Kapat simgesine benzeyen küçük bir X bulunur. Kullanıcı, bu simgeyi tıklatarak iletişim kutusunu kapatabilir.

6. İletişim kutusunu koduyla açıp kapatabilirsiniz.

   Açık iletişim kutusu ve Kapat iletişim kutusu düğmeleri iletişim kutusunun davranışını denetleyen işlevleri çağırır. Örneğin, Açık Diyalog düğmesine eklenen fonksiyon:

   function openDialog () {$ ("# dialog"). dialog ("açık");} // son openDialog