bazen herhangi bir html nesnesi buton input radiobutton yada
function ac(id){
window.open ("asd.php="+id,"yenipencere","location=1,status=1,scrollbars=1,width=100,height=100");
}
tarayıcılar arasındaki uyumsuzluk oldugunda tasarımın bozuk görünmesi hem bizi hemde ziyaretciyi rahatsız edebilir bunun kontrölünü yapmak boynumuzn borcu bu zamanlarda. bunu yapmak için kullandımız server dili (php,asp) vb.. diller ilede yapabilirz. Sunucunun yükünü azaltmak ve yükü client e bırakmak için javascript kullanabilirz. javascript ham kodlar ile bunu yapmak zahmetli olabilir sizin için jquery kütüphanesi ile rahat ve sorunsuz bir şekilde yapabilirsiniz. örnek kodlara bakalım
if($.browser.mozilla) {
alert("kullandıgınız tarayıcı firefox");
} else {
alert("kullandınız tarayıcı firefox degil lütfen firefox ile ziyaret ediniz");
}
bunun gibi.
şimdide explorer mi ve hangi sürümü
if($.browser.msie) {
if($.browser.version == '6.0') {
alert("explorer 6");
} else if ($.browser.version == '7.0') {
alert('explorer 7 kullanıyorsun');
} else {
alert('son sürüm');
}
}
Bu şekilde jquery browser nesnesi yazmamız gerekn onca koddan kuratırdı bizi
$(document).ready(function () {
$.timer(3000,function() {
a();
});
});
function a() {
$.ajax({
type:'GET',
url:'stok.php',
success: function (msg) {
$('div#adi').html(msg);
}
});
}
BUndan bir öncek konuda jquery ile 1. elente ulaşmayı anlatmıştım. Şimdi ise bunun tam tersi olan last son elemente ulaşmayı anlatacam
$(document).ready(function(){
alert($(‘.ornek span:last’).show());
});
Jquery kullanarak belirli bir nesne içersinden 1.secmek istiyorsanız :first methodunu kullanabilrisiniz. first methodunu daha iyi anlamak için bir örnek uygylama yapalım
$(document).ready(function(){
alert($(‘.ornek span:first’).show());
});
bu şekilde ornek sınıfı altındaki spanların içinden ilk sıradakini alır ve size gösterir.
Gelecek derste görüşmek üzere
Jquery ile ileri geri uygulaması yaparak sayfalarnıza renk katabilirsiniz şimdi örnek bir uygulama sizle riçin paylaşıyorum
$(document).ready(function(){
$('.son_haberler span').hide();
$('.son_haberler span:first').show();
var toplam = $('.son_haberler span').length;
var deger=0;
$('#sonraki').click(function(){
$('.son_haberler span').hide();
if(deger===toplam-1){
deger=0;
$('.son_haberler span:first').show();
}else{
deger++;
$(".son_haberler span:eq("+deger+")").show();
}
});
$('#onceki').click(function(){
$('.son_haberler span').hide();
if(deger===toplam-1){
deger = toplam-1;
$('.son_haberler span:last').show();
}else{
deger--;
$(".son_haberler span:eq("+deger+")").show();
}
});
});
AAAAAAAAAAAAAAAAAAAAAA
BBBBBBBBBBBBBBBBBBBBBB
CCCCCCCCCCCCCCCCCCCCCC
DDDDDDDDDDDDDDDDDDDDDDD
EEEEEEEEEEEEEEEEEEEEEEE
FFFFFFFFFFFFFFFFFFFFFFF
Önceki
Sonraki
Jquery işlerimizi oldukca kolaylaştırıyoruz biliyorsunuz. Şimdi çok sık kullanılmasa formlarda kulandımız select içinden bazen bize secili ona metnin index yani value degerine ihtiyac duyarsınız şimdi bunu almak için bir örnekle sizlere açıklayım.
Jquery KOdlarımız
$('#ogrenciid').change(function(){
alert($('#ogrenci').val());
});
HTML KODLARIMIZ
KOlay gelsin
Sayfa doğrudan başka bir sayfaya gidiyorsa kolay. Seçenekler:
1) Bir tane loader image hazırlayı display:hidden; diyeceksin. Form submit edildiğinde imajı göstereceksin.
01 |
<form id="login_form" action="login.php" method="post"> |
02 |
... |
03 |
</form> |
04 |
<div id="loading" style="display:none;">...</div> |
05 |
06 |
<script> |
07 |
$('#login_form').submit(function() { |
08 |
$('#loading').show(); |
09 |
}); |
10 |
</script> |
2) Bir lightbox ya da jquery ui dialog gibi bir yapıyı form submit edildiği zaman göstereceksin.
01 |
<form id="login_form" action="login.php" method="post"> |
02 |
... |
03 |
</form> |
04 |
<div id="loading" style="display:none;">...</div> |
05 |
06 |
<script> |
07 |
$('#login_form').submit(function() { |
08 |
$('#loading').dialog({ |
09 |
modal: true, // keyfe göre false da olabilir |
10 |
autoOpen: true, |
11 |
width: 100, |
12 |
title: 'Yükleniyor, lütfen bekleyin' |
13 |
}); |
14 |
}); |
15 |
</script> |
(jQuery UI ‘ı include etmeyi unutmayın)
Jquery ile Yukarı Çık Butonu Yapma
Bugünlerde Jquery ile fazla ilgilenmeye başladım. Gerçekten artık Flash‘ın yerini alabilecek bir yöntem jquery. Jquery ile birçok şey yapmak mümkün. İletişim formundan, slide galeriye birçok uygulama yapmak mümkün. Hatta çek-bırak rozeti bile yine jquery ile yapılıyor. Bugün de yine wordpress bloglarında gördüğüm yukarı çık butonunu sadece iki javascript kodu ile bloglarınıza eklemeyi anlatacağım. Sayfadan az bir şey aşağı indiğinizde sağ tarafta beliriyor bu buton. Vereceğim javascripti kendinize göre düzenleyebilirsiniz. JS dosyasının içinde resim boyutu ve resim adresi var. Dediğim gibi bunu değiştirebilirsiniz.Bu uygulamayı şu şekilde ekliyoruz:
Dosya upload ve jquery ile upload sınıfı
Size yeni yazdığım upload nesnesini tanıtmak istiyorum.Aslında bu güncellenmiş sürüm daha önceki sürümün hataları giderildi yeni özellikler getirildi.
Bu dosya upload nesnesi sayesinde çok kolay bir şekilde upload yapabileceksiniz.Çok esnektir ve tüm ihtiyaçlarınızı giderecek şekildedir,indirdiğiniz zaman içerinde farklı örnekler bulunmaktadır.
Bu sınıfın tüm değişkenlerini ingilizce olarak yazdım çünkü phpclasses sitesindede yayınlanmaktadır.
