Bu yazımızda, JQuery ile nesnelerin etrafını başka bir nesne ile nasıl saracağımızı inceleyeceğiz ve basit bir uygulama yapacağız.
Dom Nesnelerinin Etrafına Nesne Ekleme Fonksiyonları:
- .wrap() ://İstenilen nesnenin etrafına girilen nesne ayrı ayrı eklenir.
- .wrapAll(): //Tek bir nesne ile girilen seçicinin strafını çevreler. Wrap metodundaki gibi nesnelerin ayrı ayrı etrafını çevrelemek yerine hepsini birden içine alarak tek bir nesne ile çevreler.
- .wrapInner() ://İstenilen nesnenin içindeki veriyi html olarak verilen content ile çevreler.
- .unwrap() ://Nesne etrafına ayrı ayrı eklenen etki kaldırılır.
Uygulama:
Bu uygulamamızda sol taraftaki menüdeki ürünler tıklanınca "span" ile çevreleyeceğiz ve arkaplan rengini değiştereceğiz, daha sonra da ekle butonu ile sağ taraftaki bölüme geçireceğiz, sol taraftaki nesneyi de kaldıracağız.
- PHP Dersleri
- Ajax Dersleri
- Javascript Dersleri
- jQuery Dersleri
Seçili nesneleri bu kısma ekleyeceğiz...
CSS yapısı:
#area_product{
position:relative;
border:1px dashed #ff0000;
width:600px;
height:140px;
padding:5px;
clear:both;
}
#left_part{
width:280px;
border:1px solid green;
height:130px;
float:left;
}
#right_part{
width:280px;
border:1px solid gray;
height:130px;
float:left;
margin-left:5px;
}
#left_part ul li span{
background-color:green;
color:white;
}
.red_border{
border:2px solid red !important;
}
HTML yapısı:
<div id="area_product">
<div id="left_part">
<ul>
<li>PHP Dersleri</li>
<li>Ajax Dersleri</li>
<li>Javascript Dersleri</li>
<li>jQuery Dersleri</li>
</ul>
</div>
<div id="right_part">
<p>Seçili nesneleri bu kısma ekleyeceğiz...</p>
</div>
</div>
<button id="add_item">Nesne Gönder </div>
JQuery Kodları:
<script type="text/javascript">
$(document).ready(function(){
//Sağ taraftaki katmana '.red_border' sınıfını ekliyoruz
$("#right_part").addClass('red_border');
//seçilecek nesneleri ekleyeceğimiz diziyi oluşturuyoruz
var selected_item=new Array();
//nesne tıklandığında diziye ekliyoruz ve etrafını span ile sarıyoruz
$("#left_part ul li").click(function(){
//seçili değeri diziye ekliyoruz
selected_item.push($(this).html());
//seçili nesnenin içindeki yazıyı span ile çevreliyoruz
$(this).wrapInner('<span></span>');
});
$("#add_item").click(function(){
//Sağ taraftaki katmana '.red_border' sınıfını ekliyoruz
$("#right_part").addClass('red_border');
//icerik için ilk değerimizi veriyoruz
var content="";
//seçimle oluşturduğumuz dizi içindeki verileri elde ediyoruz
for(index in selected_item){
content +=selected_item[index]+",";
}
//İçeriğin son karakteri olan virgülü kaldırıyoruz
content=content.slice(0,-1);
//sol taraftaki bölümün içeriği olarak yazdırıyoruz
$("#right_part p").html(content);
//sol taraftaki span ile çevrili "li" etketlerini kaldırıyoruz
$("#left_part ul li").each(function(index){
return $(this).has("span").remove();
});
});
});
</script>
Açıklamalar:
Gerekli açıklamaları kodların üzerinde yaptığım için fazla detaya girmeyeceğim.
- 14. "selected_item.push(value)" uygulaması dizi içine "value" adlı veriyi ekliyor (push,pop vb..).
- 17. "$(this).wrapInner('<span></span>');" uygulaması ilgili nesnenin içerdiği html verisini "span" ile sardık "(wrapInner)", eğer "wrap" kullansaydık "li" etiketini saracaktı, oysa ki amacımız "li" içindeki verinin sarmalanması,
- 29. "for (index in dizi)" yapısı PHP deki foreach kalıbının bir benzeridir, dizi içindeki nesneleri getirir. Bu konu ile ilgili yazıyı inceleyebilirsiniz
- 34. "content.slice(0,-1);" yapısı, içeriği oluştururken en sonda kalan virgülü kaldırmak için kullanıldı ("-1" ile sondan bir önceki karaktere kadar demek istedik).
Kolay gelsin, görüşmek üzere...
