myn.divYap()

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)

anaElem	Yeni oluşturulan DIV elementinin ekleneceği ana elementi belirler. Eğer, belirtilmezse document.body içine eklenir.
kimlik	DIV elementinin ID özniteliğini belirler.
icerik	Düz metin veya HTML içeriğini belirler.
sinif	class özniteliğini belirler.
arkaRenk	Arka plan rengini belirler.
gen	Genişliğini belirler.
yuk	Yüksekliğini belirler.
ust	Üstten olan uzaklığını belirler.
sol	Soldan olan uzaklığını belirler.

Dönüş Değeri

yeniDiv

Yeni 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);
}