Tag Archives: js

Javascript ile html nesnelerinin yerini değiştirme

Javascript ile html nesnelerinin yerini değiştirme, yukarı aşağı kaydırma ve nesne silme işlemlerini basitçe nasıl yapabiliriz, işte size ufak bir örnek.

Başlık

<input type='text' id='baslik' name='baslik' />Değer

<input type='text' id='deger' name='deger' />

<input type='button' value='Ekle' onclick="AddItem()" />

<input type='button' value='Temizle' onclick="Clear()" />

<div id="data-list" name="data-list">

    <ul>

    </ul>

    <div id="data-list-count"></div>

</div>

function AddItem() {

    var baslik = $("#baslik").val();

    var deger = $("#deger").val();

    var dataListCount = GetCount();

    var dataListObj = $("#data-list").find("ul");

    var removeBtnText = "<a href='#' onclick='RemoveItem(event)'>Çıkar</a> ";

    var upBtnText     = "<a href='#' onclick='UpItem(event)'     >Yukarı</a> ";

    var downBtnText   = "<a href='#' onclick='DownItem(event)'>Aşağı</a> ";

    var itemText = "<li>"+dataListCount+" - " + removeBtnText + downBtnText + upBtnText + "<span class='badge'>" + deger + "</span>" + baslik + "</li>";

    dataListObj.append(itemText);

    UpdateCount();

}

function RemoveItem(e) {

    var evt = e || window.event; // this assign evt with the event object

    var current = evt.target || evt.srcElement; // this assign curr

    if($(current).parent().is("li")) {

        $(current).parent().remove();

    }

    UpdateCount();

}

function UpItem(e) {

    var evt = e || window.event; // this assign evt with the event object

    var current = evt.target || evt.srcElement; // this assign curr

    var upItem = $(current).parent().prev();



    if (upItem !== null && upItem.is("li")) {

        $(current).parent().swapWith(upItem);

    }

    UpdateCount();

}

function DownItem(e) {

    var evt = e || window.event; // this assign evt with the event object

    var current = evt.target || evt.srcElement; // this assign curr

    var downItem = $(current).parent().next();



    if (downItem !== null && downItem.is("li")) {

        $(current).parent().swapWith(downItem);

    }

    UpdateCount();

}

function Clear() {

    var baslik = $("#baslik").val();

    var deger = $("#deger").val();

    var dataListObj = $("#data-list").find("ul");

    dataListObj.empty();

    UpdateCount();

}

$.fn.swapWith = function(swap_with_selector) {

    var el1 = this;

    var el2 = $(swap_with_selector);



    if ( el1.length === 0 || el2.length === 0 )

        return;



    var el2_content = el2.html();

    el2.html(el1.html());

    el1.html(el2_content);

};

function GetCount()

{

    return $("#data-list").find("ul").find("li").length;

}

function UpdateCount() {

    $("#data-list-count").text("Toplam " + GetCount() + " seçenek");

}