myNotlar Logo

myn.divYap()


Internet Explorer Firefox Opera

myn.divYap() fonksiyonu, bir kaç özelliği belirtilerek yeni bir DIV elementi oluşturulmasını sağlar.

DIV elementi, sayfada görsellik ve esneklik gibi konular söz konusu olduğunda akla ilk gelen HTML elementlerden biridir. Kullanım alanı çok geniş olduğu için üzerinde oluşturma ve biçimlendirme gibi işlemler yoğun olarak yapılmaktadır. Bu da kod kalabalığına neden olmaktadır. myn.divYap() fonksiyonu, en azından bir fikir vererek ve biraz ötesinde birçok yerde pratiklik kazandırarak kod kalabalığını azaltmayı amaçlamaktadır.

Sözdizimi

yeniDiv = myn.divYap(anaElem, kimlik, icerik, sinif, 
			arkaRenk, gen, yuk, ust, sol)
anaElemYeni oluşturulan DIV elementinin ekleneceği ana elementi belirler. Eğer, belirtilmezse document.body içine eklenir.
kimlikDIV elementinin ID özniteliğini belirler.
icerikDüz metin veya HTML içeriğini belirler.
sinifclass özniteliğini belirler.
arkaRenkArka plan rengini belirler.
genGenişliğini belirler.
yukYüksekliğini belirler.
ustÜstten olan uzaklığını belirler.
solSoldan olan uzaklığını belirler.

Dönüş Değeri

yeniDivYeni oluşturulan DIV örneğinin referansı döner.

myn.divYap() fonksiyonunun, hiçbir parametresi zorunlu değildir. Böyle olduğu için aşağıdaki gibi kullanılabilir ki bu da sadece hiçbir özniteliği belirlenmemiş yeni bir DIV elementi oluşturulmasını sağlar.

    var yeniDiv = myn.divYap();

Üstteki kullanımının yanında, kimlik ile ID, icerik ile HTML içeriği ve dolayısıyla düz metin olarak içeriği ve sinif ile daha önce hazırlanmış bir CSS class belirtilebilir. sinif ile CSS class belirtildiğinde arkaRenk, gen, yuk, ust ve sol parametrelerinin belirtilmesine ihtiyaç olmayabilir. Fakat, özellikle sayfa üzerinde konumlandırmayı sağlayan sol ve/veya ust parametrelerinin kullanılması gerektiğinde yeni oluşturulan elementin style.position özelliğinin otomatik olarak absolute değerini alacağı unutulmamalıdır.

sol ve ust parametrelerinin ve yuk ve gen parametrelerinin çift olarak kullanılmasına gerek yoktur. Sadece birine değer atanabilir. Fakat, kullanılmayacak olana null değer atanmalıdır.

Kullanım Örneği

Aşağıdaki örnek myn.divYap() fonksiyonu ile üç farklı şekilde DIV elementi oluşturulmasını göstermektedir.

<script type="text/javascript" src="mynotlar_divYap.js"></script>

<style type="text/css">
.ornekSinif
{
    border:dotted 2px red;
    background-color:#A0A0FF;
    width:150px;
    height:100px;
    float:left;
}
</style>

<input type="button" value="Sade divYap" onclick="sadeDiv()" />
<input type="button" value="Sınıf divYap" onclick="sinifDiv()" />
<input type="button" value="Parametreli divYap" onclick="paramDiv()" />

<table><tr>
    <td id="ornekCerc1"></td>
    <td id="ornekCerc2"></td>
    <td id="ornekCerc3"></td>
</tr></table>

<script type="text/javascript">

var cerc1 = document.getElementById("ornekCerc1");
var cerc2 = document.getElementById("ornekCerc2");
var cerc3 = document.getElementById("ornekCerc3");

function sadeDiv() {    // Sade divYap
    var yeni = myn.divYap();
    
    yeni.style.backgroundColor = "green";
    yeni.style.height = "50px";
    yeni.innerHTML = "myNotlar";
    cerc1.appendChild(yeni);
}
function sinifDiv() {   // Sınıf divYap
    var yeni = myn.divYap(cerc2, "div2", "Yeni İçerik", "ornekSinif");
    yeni.style.height = "50px";
}
function paramDiv() {   // Parametreli divYap
    var yeni = myn.divYap(cerc3, "div3", "Selam!", null, 
                    "#AA9988", null, "50", null, null);
}
    
</script>
Test Edin

mynotlar_divYap.js

/*
    "myn.divYap()" Fonksiyon Betiği v1.0
    
    Telif Hakkı (c) 2008, mynotlar.com, Tüm hakları saklıdır.
    http://www.mynotlar.com 
*/

(window.myn = myn = window.myn || {}).divYap = 
function( m, y, n, o, t, l, a, r, s) {
    _os = (_o = document.createElement("div")).style;
    _o.id = y;
    if(l) _os.width = l + "px";
    if(a) _os.height = a + "px";
    _os.backgroundColor = t || "";
    _o.innerHTML = n || "";
    _o.className = o;    
    if((s!=null&&r!=null)||(s!=null||r!=null)) {    
        if(s != null) _os.left = s + "px";
        if(r != null) _os.top = r + "px";
        _os.position = "absolute";
    }return (m || document.body).appendChild(_o);
}
 
myNotlar Hakkında
Telif Hakkı © 2007-2009 mynotlar.com Tüm Hakları Saklıdır. Kopyalanamaz. Yayınlanamaz.
E-Posta : support@myNotlar.com

| Tek Kişilik Oyunlar | Sudoku | Oyunlar |