Kategori arşivi: Jquery

Genel, Jquery

Jquery ile Timer Kullanımı ve Örneği

Yorum yapın

jquery timer zamanlayıcı

Jquery ile timer kullanarak istediğiniz fonksiyonu veya kod kümesini belli zaman aralıklarında çalıştırabilirsiniz

Kullanışlı bir javascript kütüphanesi olan çoğu işlemi kısa yoldan yapabiliyoruz

Aşağıdaki örnekte jquery ile timer kullanımına örnek verdim

Verilen örnekte 3 saniyede bir ekrana alert verdiriyoruz

alert in olduğu satırı silip içerisinde çalışmasını istediğiniz şeyleri yazabilirsiniz.

(3000 milisaniye değeridir)

<!doctype html>

<!-- Sayfaya jquery kütüphanesini dahil ediyoruz -->
<script src="http://www.mehmetcanyegen.com.tr/wp-content/uploads/2014/06/jquery-1.11.1.min3.js"></script>

<script>

$(document).ready(function(){
setInterval(function() {
alert("1");
}, 3000);
});
</script>

setInvertal ile başlayan kısım timer görevini görüyor.

Bunu document.ready içerisine yazarak sayfa ilk açıldığında çalışmasını sağlıyoruz

Ayrıca sayfa ilk yüklendiğinde çalışmasını istediğimiz JavaScript kodlarını direk olarak yazmaktansa document.ready içerisine yazarak oluşacak load problemlerinden de kurtarmış oluyoruz.

Page load olarak çalışmasını istediğiniz kodları document.ready içerisinde kullanmaya özen gösterin

Jquery

Jquery Kullanarak Belli Bir Alanı Gizlemek

Yorum yapın

jquery gizleme

 

Jquery ile span gizleme nasıl yapılır?

Jquery ile span içerisini gizleme, bu span’ın display özelliğini none yaparak yapılabilir.

Tekrar görünür yapmak için display özelliğini inline yapabilirsiniz.

 


<!doctype html>

<!-- Sayfaya jquery kütüphanesini dahil ediyoruz -->
<script src="http://www.mehmetcanyegen.com.tr/wp-content/uploads/2014/06/jquery-1.11.1.min2.js"></script>

<script>

function gizle(){
$("#alan1").css( "display", "none" );
}

</script>

<input type="button" value="gizle" onclick="gizle();">
<br />
<span id="alan1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</span>

Buttona tıkladığınızda alan1 id sine sahip span içeriği gizlenecektir

 

Ajax, Jquery

Sayfaya Jquery Kütüphanesini Ekleme

Yorum yapın

jquery eklemeJquery sayfaya nasıl eklenir?

Kullanışlı bir javascript kütüphanesi olan jquery i yazdığınız web uygulamasına dahil etmek için aşağıdaki kod parçasını sayfanızın header bölümüne ekleyin.

Jquery i sunucunuza direk olarak internet üzerinden de dahil edebilirsiniz, veya sunucunuza indirip de kullanabilirsiniz.

Direk sunucunuzdaki jquery dosyasını kullanmak için http://code.jquery.com/jquery-1.11.1.min.js adresindeki dosyayı veya jquery.com adresindeki son sürümü indirip sunucunuza yükleyin, sunucunuz üzerinden link verin


<script src="http://www.mehmetcanyegen.com.tr/wp-content/uploads/2014/06/jquery-1.11.1.min1.js"></script>
Ajax, Genel, Jquery, Php

Php – Ajax ile post yapmak

Yorum yapın

jquery ajax post

Php ile sayfa yenilemeden ajax kullanımına örnek vereceğim

Örneğimizde 2 tane sayfa oluşturuyoruz;
1-) Php kodlarımızın bulunduğu, veritabanına bağlanıp kayıt eklemeyi sağlayan sayfa(haberekle.php)
2-) Asıl görünecek olan ve ajax kodlarının bulunduğu sayfa(index.htm)

Örneğe başlamadan önce şunu da belirteyim, bu şekilde kullanım sadece mantığı kavramanız içindir, oluşacak güvenlik açıklarını önlemek için php dosyanıza çeşitli filtrelemeler koymanız gerekir, bunlara değinmiyorum

haberekle.php içeriği;


<?php

//haber değişkenine posttan gelen datayı aktardık

$haber = $_POST['haber'];

//haber değişkenindeki değeri veritabanına yazdırdık

mysql_query("insert into haberler (haber) values ('$haber')");

Php tarafında post ile gelen değeri veritabanına yazıyoruz
mysql_query yi kullanmadan önce veritabanı bağlantısı kurmayı unutmayın

index.htm içeriği;


<!doctype html>

<!-- Sayfaya jquery kütüphanesini dahil ediyoruz -->
<script src="http://www.mehmetcanyegen.com.tr/wp-content/uploads/2014/06/jquery-1.11.1.min.js"></script>

<script>

function veritabaninaYaz(){
var deger = $("#inputDeger").val();

$.post("haberekle.php", {haber: haber});

$("#inputDeger").val('');
alert('kayıt gönderildi');

}

</script>
<input type="text" id="inputDeger">
<input type="button" value="Gönder" onclick="veritabaninaYaz();">

JavaScript tarafında text inputta bulunan değeri post ile php sayfasına gönderiyoruz, daha sonra inputtaki değeri silip, ekrana kayıt gönderildi şeklinde uyarı verdiriyoruz