Usage

İçe aktarma

Betiğini kendi betiğiniz aracılığıyla içe aktarmak için şunu kullanın:

importArticle({
    type: 'script',
    article: 'u:dev:MediaWiki:UI-js/code.js'
});

Betiğinin işlevi hemen kullanılamayacak, ancak mw.hook aracılığıyla bir kanca çağıracak. Oluşturucu işlevinin var olduğundan emin olmak için şunları kullanabilirsiniz:

mw.hook('dev.ui').add(function(ui) {
    // Kodunuzu burada kullanın
    // `ui` parametresi oluşturucu işlevidir
    // Bu noktada `window.dev.ui` içinde de mevcuttur
});

İşlev

UI-js, DOM ögeleri oluşturmak için kullanılan tek bir işlevi gösterir. Tek bir parametreyi, aşağıdaki olası özelliklere sahip bir nesneyi kabul eder:

attr

Ögenin tüm özelliklerini ve değerlerini içeren nesne.

checked

Bir onay kutusunun işaretlenip işaretlenmediğini belirlemek için kullanılır.
Öge bir onay kutusu değilse, bu parametrenin ayarlanması hiçbir şey yapmaz.

children

Geçerli ögenin alt ögeleri için yapılandırmaları temsil eden nesne dizisi.
Kütüphane işlevine iletilebilen herhangi bir geçerli değer, bu dizinin geçerli bir ögesidir.

classes

Ögenin birden fazla sınıfı varsa bu, sınıfı attr aracılığıyla ayarlamaktan daha kullanışlı bir özelliktir.
Ayrıca, class bir ayrılmış sözcüktür ve ES3 uyumluluğu için özellik adlarında kullanılmamalıdır.

condition

Ögenin oluşturulması gerekiyorsa.
Bazı ögelerin yalnızca belirli koşullar altında görüntülenmesi gerektiğinde mantığı basitleştirmek için kullanılır.

data

Ögenin tüm veri özniteliklerini içeren nesne.
Teknik olarak attr seçeneğiyle aynıdır ancak her özniteliğin önüne data- eklenir.

events

Tüm olay dinleyicileri olan nesne.
Bu nesnenin anahtarları olay adlarıdır, değerler ise bu olayları işlemek için kullanılan işlevlerdir.

html

Ögenin iç HTML'si.
Yalnızca HTML'nin betik tarafından tanınan nesnelere kolayca dönüştürülemediği durumlarda kullanılmalıdır (örneğin, HTML başka bir kaynaktan indirildiyse), aksi takdirde gerekli DOM düğümlerini oluşturmak için betiğinin işlevselliğini kullanın.

parent

Ögenin zaten var olan başka bir DOM öğesine eklenmesi gerekiyorsa, seçiciyi temsil eden bir dize olarak buraya iletilebilir.

selected

Ögenin seçili dizini.
<select> açılır listeleri için kullanılır.

style

Ögenin CSS özelliklerine sahip nesne.
Bu seçenek, geçerli sürümde her zaman çalışmıyor. Lütfen bu parametrenin çalışmadığı durumlar için hata raporları gönderin.

text

Ögenin metin içeriği.

type

Ögenin türü. Örneğin, bir div ögesi yapmak istiyorsanız, div olarak ayarlanmalıdır.
Ayarlanmazsa, belge parçası oluşturacaktır.

İşleve basit bir dize iletilirse, dizenin içeriğini içeren basit bir metin düğümü oluşturur.

Examples

Aşağıdaki örnekler, DOM ögeleri oluşturmak için ui işlevinin kullanılmasıdır. Bu işlevin nasıl elde edileceğine ilişkin talimatlar "İçe aktarma" bölümünde görülebilir ve parametreleri hakkında daha fazla bilgi "İşlev" bölümündedir.

ui("Bu bir metin düğümü");

Bu bir metin düğümü

ui({type: 'div'});

<div></div>

ui({
    text: 'Bu metin içeren bir div',
    type: 'div'
});

<div>Bu metin içeren bir div</div>

ui({
    attr: {
        class: 'thisisatest',
        id: 'testdiv'
    },
    type: 'div'
});

<div class="thisisatest" id="testdiv"></div>

ui({
    style: {
        color: 'red'
    },
    text: 'Bu kırmızı metin',
    type: 'div'
});

<div style="color: red;">Bu kırmızı metin</div>

ui({
    data: {
        test: 'Test bir',
        test2: 'Test iki'
    },
    type: 'div'
});

<div data-test="Test bir" data-test2="Test iki"></div>

ui({
    events: {
        click: function() {
            console.log('Test');
        }
    },
    text: 'Beni tıklayın!',
    type: 'div'
});

<div>Beni tıklayın!</div>

ui({
    children: [
        {
            text: 'İlk açıklık',
            type: 'span'
        },
        {
            text: 'İkinci açıklık',
            type: 'span'
        }
    ],
    type: 'div'
});

<div>
    <span>İlk açıklık</span>
    <span>İkinci açıklık</span>
</div>

ui({
    parent: 'body',
    text: 'Metin',
    type: 'div'
});

<div>Metin</div>

var ug = mw.config.get('wgUserGroups');
ui({
    condition: ug.indexOf('sysop') !== -1,
    text: 'Hizmetli, bunu görebilirsin!',
    type: 'div'
});

<div>Hizmetli, bunu görebilirsin!</div>

ui({
    classes: [
        'wds-button',
        'wds-is-secondary'
    ],
    type: 'div'
});

<div class="wds-button wds-is-secondary"></div>