Bu örneğin tam olarak yazılımda adı nasıl geçiyor açıkcası ben bile bilmiyorum ama çoğu kişinin zamanında zorlandığı ve çözüm aradığı bir durum olduğunu düşünüyorum ama tıklanan divin id'sini alma / tıklanan div ile başlayan çoğu şey :)
Örneğimizde resim galerisindeki resimleri sayfa yenilemeden silme işlemini göstereceğim. Tabi bu örnek daha da verimli hale getirilebilir input ekleyip makale / resim başlığını değiştirmek vs. gibi.
Yavaş yavaş kodlarımıza geçelim. Yorum satırlarını okumayı unutmayınız önemli bilgiler içerir.
index.php
Wm Aracı
<script></script>
$Count=1; //Renk adlı classlar vardı renk1 renk2 gibi bu classların otomatik olarak ayarlanması için bir syayaç ekledim böylelikle döngü içinde class isimleri değişecek
$Resimler = array('5', '9', '123', '33','42','22','666','23','25'); //Veritabanı kullanıp konuyu uzatmak istemedim bu yüzden burayı veritabanından geliyormuş gibi düşünebilirsiniz. Aynı durum zaten.
foreach($Resimler as $ResimID) { // Kaç adet resmimiz varsa hepsi ekrana gelene kadar döngümüz devam ediyor.
?>
ID=
$Count++;
}
?>
Göster
<script></script>
func.js
/*
$(document).ready(function () {
//Yapılacak işlemler
});
*/
$(".Box").click(function () {
var ID= $(this).attr("bilgi"); // Burada jQuery'nin attr metodu ile bilgi içindeki veriyi aldık ve bir değişkene atadık.
alert("Sahip olduğum İD="+ID+" ve şimdi silineceğim"); //Burada normal bir uyarı veriyorum
$(this).hide(500); // Yarım saniye de gerekli divi gizliyorum
//Dilerseniz burada ID değişkenini ajax kullanarak bir php dosyasına post edip
//gerekli işlemleri yapabilirsiniz.
/* Eğer post etmek isterseniz aşağıdaki ajax kodunu kullanabilirsiniz.
$.ajax({
type: "POST",
url: "ajax.php",
data:"ID=" + ID,
success: function(cevap){
$("#SonucBox").html(cevap);
},
error:function(){ $("#SonucBox").html("Hata oluştu."); }
});
}
*/
});
$(".TumunuGoster").click(function () {
$(".Box").show(); //Gizlenen divleri gösteriyorum.
});
ajax.php
$ID=$_POST['ID']; //Verimizi aldık
// gerekli db işlemleri ve sonuç
?>
style.css
html,body{
padding: 0px;
margin: 0px;
font-family: arial;
}
#WmAraci {
width: 600px;
margin: 0 auto;
}
.Box{
width: 190px;
margin: 5px;
height: 130px;
float: left;
font-size: 35px;
text-align: center;
padding-top: 60px;
font-weight: bold;
color:black
}
.Box:hover{opacity: .7;
cursor: pointer;
box-shadow: 2px 2px 2px 2px #888888;
}
.Renk1{background-color: #669999;}
.Renk2{background-color: #339999;}
.Renk3{background-color: #009933;}
.Renk4{background-color: #996633;}
.Renk5{background-color: #6633CC;}
.Renk6{background-color: yellow;}
.Renk7{background-color: #663333;}
.Renk8{background-color: red;}
.Renk9{background-color: #330099;}
.TumunuGoster{
width: 575px;
text-align: center;
background-color: green;
overflow: hidden;
padding: 10px;
font-weight: bold;
color: white;
font-size: 25px;
opacity: .8;
}
.TumunuGoster:hover{opacity: 1;cursor: pointer}
Çalışan Hali
MmreYR