Fandom Developers Wiki
Advertisement

QDmodal, betiklerinin kalıcı bir diyalog görüntülemesine izin veren bir kitaplıktır. CSS esnek kutu düzeni kullanılarak karmaşık stil olmadan uyarlanabilir bir düzen sağlar. QDmodal, hem normal MediaWiki vikilerini (ör. Vikipedi) hem de Fandom viki platformunu (görüntülendiği vikinin temasıyla eşleşeceği) destekler.

Kullanım[]

Kütüphaneyi yükleme[]

Öncelikle, QDmodal betiğinin yüklendiğinden emin olmanız gerekir:

if (mw.libs.QDmodal) {
    // QDmodal kitaplığı zaten yüklenmiştir. İşlevimizi doğrudan çalıştırabiliriz!
    doThingsUsingModal();
} else {
    // Yüklü değil, QDmodal kitaplığını getirin (ve önbelleğe alınmasına izin verin),
    // sonra yüklendikten sonra işlevimizi çalıştırın
    $.ajax({
        cache: true,
        dataType: "script",
        url: "https://dev.fandom.com/load.php?mode=articles&articles=MediaWiki:QDmodal.js&only=scripts"
    }).done(doThingsUsingModal);
}

Alternatif olarak, kütüphanenin, kütüphane yüklemesini çözen bir jQuery taahhüdü ile yüklenip yüklenmediğini kontrol etmek isterseniz, bunun gibi bir şey yapabilirsiniz:

$.Deferred(function (promise) {
	if (mw.libs.QDmodal) {
		promise.resolve(mw.libs.QDmodal);
	} else {
		$.ajax({
			cache: true,
			dataType: "script",
			url: "https://dev.fandom.com/load.php?mode=articles&articles=MediaWiki:QDmodal.js&only=scripts"
		}).done(function () { 
            promise.resolve(mw.libs.QDmodal);
        });
	}
});

A third way is to use hook to synchronize loading.

importArticle({
    type: 'script',
    article: 'u:dev:MediaWiki:QDmodal.js'
});
mw.hook('dev.qdmodal').add(function(QDmodal) {
    // QDmodal is the modal constructor
    new QDmodal("my-modal-id");
    // You can also access it with `mw.libs.QDmodal`
});

Modalı kullanma[]

Betik yüklendikten sonra, mw.libs.QDmodal yapıcısını kullanarak yeni bir modal başlatabilirsiniz:

var myModal = new mw.libs.QDmodal("my-modal-id");

myModal değişkeni bir modal nesnesi olacaktır.

Modalı göstermek için, modal nesnenin show işlevini bağımsız değişkeni olarak bir veri nesnesi ile kullanın:

myModal.show({
    content: "Modal içinde içerik olarak gösterilecek bir HTML dizesi veya jQuery nesnesi.",
    title: "Modal başlıkta gösterilecek salt metin dizesi.",
    buttons: [{
        text: "Düğme Bir",
        href: "https://example.com/",
        attr: {
            id: "my-modal-button-one"
        }
    }, {
        text: "Düğme İki",
        handler: function (event) {
            // düğme tıklandığında bir şey yapın
        },
        condition: function (modal) {
            // bu düğmenin dahil edilip edilmeyeceğini kontrol edin
        }
    }]
});

Veri nesnesine bir onBeforeShow özelliği dahil edildiyse, işlevi, modal DOM'a eklenmeden önce ve herhangi bir kanca çalıştırmadan önce çalıştırılacaktır. Veri nesnesine bir hook özelliği dahil edildiyse, mod DOM'a eklenmeden önce ancak onBeforeShow ögesinden sonra tetiklenecektir. Veri nesnesine bir onShow özelliği dahil edildiyse, işlevi DOM'a mod eklendikten sonra çalıştırılacaktır. Veri nesnesine isteğe bağlı özellikler de dahil edilebilir: bunlar, bir kanca veya olay işleyici içinde kullanılmak üzere geçerli modal içerik hakkında bilgi depolamak için yararlı olabilir.

Modalı gizlemek için, modalı nesnenin hide işlevini kullanın:

myModal.hide();

Modal gösterildiğinde iletilen veri nesnesine bir onHide özelliği dahil edildiyse, işlevi, modal DOM'dan kaldırılmadan önce çalıştırılacaktır. Bu işlev false döndürürse, modal gizlenmez.

Nesne ayrıntıları[]

Modal nesnesi[]

Anahtar Tür Açıklama
$content JQuery nesnesi Modal içindeki ana içerik alanı.
$title JQuery nesnesi Modal içindeki başlık ögesi.
$footer JQuery nesnesi Modal içindeki altbilgi ögesi.
visible boole Modalın şu anda görüntülenip görüntülenmediği.
data nesne Veri nesnesi, modalın geçerli içeriğini temsil eder. Modal görünmüyorsa, bu null olur.
$element JQuery nesnesi Tüm modal ögesi.
$container JQuery nesnesi Modalın üst ögesi (arka planı karartmak için kullanılır).

Veri nesnesi[]

Anahtar Açıklama
content Modal içinde içerik olarak gösterilecek bir HTML dizesi veya jQuery nesnesi.
title Modal başlıkta gösterilecek salt metin dizesi.
hook mw.hook API kullanılarak tetiklenecek bir kancanın adı. Modal nesnesi, kanca işlevine geçirilecek. Modal DOM'a eklenmeden önce tetiklendiğini, ancak onBeforeShow işlevinin sonra çağrıldığını unutmayın.
loading Bu değer Doğruluk ise, bir SVG resmi, dönen bir animasyon görüntüleyerek kipin içeriğinin yerini alacaktır.
buttons Modal altbilgiye eklenecek bir düğme nesnesi dizisi.
onBeforeShow Modal nesnenin show işlevi her çağrıldığında işlev çalışır. Modal nesnesi işleve aktarılacak. Modal DOM'a eklenmeden önce ve herhangi bir kanca ateşlenmeden önce çalıştırıldığına dikkat edin.
onShow Modal nesnenin show işlevi her çağrıldığında işlev çalışır. Modal nesnesi işleve aktarılacak. Modalın DOM'a eklenmesinden sonra çalıştırıldığına dikkat edin.
onHide İşlev, modal nesnenin hide işlevi her çağrıldığında çalışır. Modal nesnesi işleve aktarılacak. Modal DOM'dan önce çalıştırıldığını unutmayın. Bu işlev false döndürürse, modal gizlenmez.

Düğme nesnesi[]

Anahtar Açıklama
text Düğmede görüntülenecek metin.
href Düğmeye her tıklandığında gidilecek URL. Bunun, düğmeyi bir <span> ögesinden bir <a> çengele değiştireceğini unutmayın.
handler Düğmeye her tıklandığında işlev çalışır. jQuery click olay nesnesi işleve geçirilecektir.
condition Bu özellik mevcutsa ve bir işlev ise, işlev çalıştırılacaktır. modal nesne işleve aktarılacak. Bu işlev bir Truthy değeri döndürürse, düğme yalnızca modal altbilgiye eklenir.
attr Düğme ögesine eklenecek özellik adları ve değerlerden oluşan nesne. jQuery'nin attr işlevine olduğu gibi iletilir ve kimlik, veri öznitelikleri vb. eklemek için kullanılabilir.
Advertisement