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