Buradan birinci ve hiç çalışmayacak örneğimize bakabilirsiniz. Bu sayfamızda, sayfa yüklendikten sonra prettyPhoto ile rel’i uygun olanları bir galeri haline getiriyoruz. Ancak sayfa açıldığı anda bizim 2 galerimizde sayfada yüklü değil. Bu nedenle linklerimize prettyPhoto bind edilemiyor. Biz galeriyi .load yöntemi ile çağırırken birde function ekleyerek çağırdığımız sayfadan gelen linklerin onclick event’ine prettyPhoto’yı bind edelim.

birinci örnekteki linklerin onclick evenlerini şöyle düzenliyoruz ;

onclick="$('#resimler').load('images1.html',function(){ prettyBind(); });"

Bu eklemeyi yaptıktan sonra birde prettyBind adında function yazmamız gerekecek. Bu function ile load işleminden sonra linklere galeri özelliğini ekleyeceğiz. Fonksiyonumuz şöyle olacak;

function  prettyBind(){
$("a[rel^='prettyPhoto']").prettyPhoto();
}

Örneğimizin yeni haline buradan bakabilirsiniz.

Bu fonksiyonu ekledikten sonra örneğimizi açıp galerilere bir kaç kez tıkladıktan sonra firebug ile kodlarımızı incelediğimizde şöyle bir tablo çıkıyor karşımıza ;

Kodlarda böyle bir tekrar söz konusu olunca tabii ki gösterimde de sıkıntılar ortaya çıkıyor. Siz sayfayı açarak kendi denemelerinizi yapabilirsiniz ancak biz yinede bir resim ile gösterelim.

Peki bunları engellemek için ne yapmalıyız? Evet, yazımızın konusu da tam olarak bu noktada başlıyor. Bunu düzeltmenin 2 yöntemi var birisi prettyBind fonksiyonuna müdahale ederek yapabiliriz. Ancak bu geçici bir çözüm olacaktır. Biz burada prettyPhoto.js’ye müdahale ederek tüm projeyi hatta ileride yapacağımız projelerimizide bu dertten kurtarmış olacağız.

Şimdi, prettyPhoto.js dosyasını açıyoruz,

function _buildOverlay(){

kod bloğunu buluyoruz ve hemen altına

$('div.pp_pic_holder,div.pp_overlay,div.ppt').remove();

kodlarını yapıştırıyoruz. Peki burada ne yapıyoruz? Linkleri bir each ile dönmeye başladığı zamanda, daha önceki galerileri .load ile her çağırdığımızda sayfaya otomatik olarak eklenen “pp_pic_holder,pp_overlay,ppt” classlarına sahip divleri temizliyoruz, fonksiyon yenisini ekliyor. Böylece karışıklık ortadan kalkmış oluyor.

Son olarak yeni prettyPhoto.js dosyamız ile yeni ve sorunsuz galerimize bakalım. Buradan galerimizin son haline bakabilirsiniz.

prettyPhoto.js dosyamızın son haline buradan ulaşabilirsiniz

Jquery ile bir formda yer alan input elemanlarından “type=text” yani tipi yazı olanları kapsayan bir script yazalım. Doğrulama esnasında ihtiyacımız olan 3 şey ;

<ul>
	<li>O elemanın boş olup olamayacağı</li>
	<li>Boş değil ise kaç karakterden az olamayacağı</li>
	<li>Özelleştirilmiş hata mesajı</li>
</ul>

Oluşturduğumuz standart inputlarda bu alanlar tabii ki yer almamaktadır. Biz kendimiz oluşturmalı yada var olan attributeleri(özellikleri) kendimize göre kullanmalıyız.

Ben elemanın value(değer) kontrolü için required(gerekli) diye bir özellik eklemeyi tercih ettim. En az kaç karakter olacağını ise rel özelliğinden belirleyeceğim.Özelleştirilmiş hata mesajı için ise hata özelliğini kullanacağız.

Örnek input kodumuz :

HTML tarafında yapmamız gerekenler bu kadar. Asıl konumuz olan js tarafında ise jQuery ile hiç zorlanmadan fonksiyonlarımızı yazabileceğiz. 3 farklı fonksiyon yazmamız gerekecek.

<ol>
	<li>Value kontrol işlemleri için</li>
	<li>Hata mesajı göstermek için</li>
	<li>Hata mesajını ekrandan silmek için</li>
</ol>

1. Fonksiyonumuz : inputValueKontrol

Kısaca yapacaklarımızı anlatmak gerekirse : Öncelikle tüm inputları foreach ile döngü içerisine alarak kontrol ediyoruz. Required değeri 1 olanların valuelarına bakıyoruz. Eğer value uzunluğu (length) rel değerinden az ise bir hata mesajı çağırıyoruz yoksa işleme devam ediyoruz.

Kodlarımızı kısaca açıklayalım. İlk fonksiyonumuz olan inputValueKontrol ile başlayalım.

$(‘input’).each(fucntion(){}); ile tüm inputları bir diziye atadıktan sonra bir döngü içerisinde tek tek inceleyeceğiz.
Döngümüz başladıktan sonra incelemekte olduğumz inputun required özelliğinin 1 olup olmadığını kontrol ediyoruz. Peki bir inputun özelliklerini nasıl alırız :

$(this).attr(“required”) şeklinde, bulunduğumuz input’un attributelarından(özelliklerinden) istediğimize ulaşabiliriz.

if($(this).attr(“required”)==”1″) satırı ile validation’a açık olan inputları seçiyoruz.

var tur = $(this).attr(“rel”);
var hata = $(this).attr(“hata”); Burada tur istenilen verinin uzunluğunu hata ise istenilen veri uzunluğuna erişilmediği zaman gösterilecek hatayı dönderecektir bize. Eğer hata mesajımız yok ise daha önceden belirlediğimiz mesajı göstermesi için şu satırları ekleyelim :

if(!hata){hata = “Bu alanı boş bırakamazsınız”;}

Fonksiyonumuzun çalışmaya başladığı nokta input’un onblur event’ıdır.

$(this).blur(function(){});

Fonksiyonumuz başladığına göre gerekli kontrollerimize başlayabiliriz. Öncelikle tur değişkenimizin varlığına göre bir kontrol yapıyoruz ve required değeri 1 iken rel değeri 1′den büyük ve boş değilse yapılacakları belirlemek için şu satırları ekliyoruz :

if(tur>1 & tur != ""){}

İstenilen değer 1′den büyük ve boş değilse değeri kontrol ediyoruz. Eğer değer uzunluğu istenilen uzunluktan büyük değilse hata mesajını gösteriyoruz ve input’un kenarlıklarını şekillendiriyoruz.

var thisValue = $(this).val();
var thisValueLength = thisValue.length;
if(thisValueLength<tur){
$(this).css("border","solid 1px #f00");
hataMesaj(hata);
}else{
$(this).css("border","1px solid #C0C0C0");
hataMesajiSil();
}

Eğer değerler doğru isede input’un kenarlıklarını eski haline çeviriyoruz ve mevcut olan hata mesajını siliyoruz.

Birde tur (yani rel) değerinin olmadığı durumlar var. Bu inputların değerinin boş olamayacağı anlamına geliyor. Aynı işlemleri rel’i 1 kabul ederek tekrar uyguluyoruz.

 var thisValue = $(this).val();
var thisValueLength = thisValue.length;
if(thisValueLength==0){
$(this).css("border","solid 1px #f00");
hataMesaj(hata);
}else{
$(this).css("border","1px solid #C0C0C0");
hataMesajiSil();
}

Inputların değer kontrol işlemlerine ait kodların inputValueKontrol fonksiyonunda olduğunu söylemiştik. Bu fonksiyona ait kodlar aşağıdaki gibidir.

Şimdi hata mesajlarını ekrana yazdıran fonksiyonumuz hataMesaj‘ı yazalım.Bu fonksiyonun mantığı çok basit. Tek parametre ile gösterilecek mesajı alıyoruz ve bunu bir div etiketinin içerisine ekledikten sonra sayfaya ekliyoruz. Ekstra olarak yaptığımız tek işlem bu div etiketinin sayfada ekli olup olmadığını kontrol etmek. Eğer daha önceden eklenilmiş bir etiket var ise sadece içeriğini değiştiriyoruz ve en son hata mesjını ekliyoruz. En son olarakda bu mesajın 30 saniye sonra kendisini imha etmesini sağlıyoruz

En son fonksiyonumuz ise ekrana yazdığımız hata mesajını kaldırma fonksiyonu. Bunu açıklamaya sanırım gerek yok.

Örnek uygulamaya buradan ulaşabilirsiniz.

Her zaman gerekmesede işinizin düştüğü zamanlar mutlaka olmuştur. Benim bir projede, proje tamamlandıktan sonra QueryString‘den bilgi çekmem gerekti. Yazılım tarafı tamamlandığı için bir şey yapılması uzun zaman alacağından yazılımcının can simidi olan Javascript’e başvurmayı denedim ve şimdilerde çok hoşuma giden bir script çıktı ortaya.

Şimdi küçük ama işlevsel olan fonksiyonumuzu yazalım;

//adres çubuğundaki adresi tamamen alıyoruz
var tumAdres=String(this.location);
//adresimizi split ile "?"'den ikiye bölüyoruz
veri=tumAdres.split("?")[1];
//verimizi aldığımıza göre kullanalım
//şimdilik alert olarak görüntüleyelim
alert(veri);

Bu basit örneğimize buradan ulaşabilirsiniz.

Peki bu nasıl bir işlevsellik katabilirki bize? Eğer bir sayfada birden fazla saklı öğeniz (display:none) varsa işinize yarama ihtimalide vardır.

Kodumuzda biraz değişikliğe gittikten sonraki örneğimizde daha açık bir şekilde anlayacağınıza eminim.

//adres çubuğundaki adresi tamamen alıyoruz
var tumAdres=String(this.location);
//adresimizi split ile "?"'den ikiye bölüyoruz
veri=tumAdres.split("?")[1];
//bu veri bir öğenin id'si olsun
//aldığımız id ile bir eleman varmı bakalım
if(document.getElementById(veri){
//eğer var ise display i block olsun
document.getElementById(veri).style.display = 'block';
}

Bu örneğimizede buradan ulaşabilirsiniz. Burada dikkat etmemiz gereken nokta; javascript kodlarımızın işlem yapılacak olan divlerden sonra yazılması veya window.onload’a tanımlanmasıdır.

Eğer tam manası ile Reques.QueryString fonksiyonuna ihtiyacınız var ise bunun için biraz zaman ayırmalı veya http://andrewu.co.uk/tools/request/ bu adresi ziyaret etmelisiniz.

• LiveSearch John Nunemaker versiyonu, prototype versiyonu.
• John Resig’in modifiyeli versiyonu.

Hangisi daha iyi, daha performanslı derseniz, şu an için hiç deneme şansım olmadı ve eldeki örneklerden ise bu daha iyi diyemeceğimiz için sytanxı düzgün olan versiyonu seçmek daha mantıklı sanırım.

Li tagları arasında olan arama şemantiğini istediğiniz gibi değiştirebilirsiniz. Aramanın en göz alıcı noktası ise aradığınız (kelime/harf/cümle) betiği harf harf alması.

Bu ilk bakışta güzel bir örnek ancak kullanıma göre can sıkabilir.

IPhone bildiğiniz gibi OS X mobile işletim sistemi kullanıyor. Hangi javascripti destekleyeceklerini en azından ben merakla bekliyordum. Bugün okuduğuma göre Jquery 1.1.3.1 ile IPhone‘un seçimi olmayı başarmış. Başarmış diyorum çünkü IPhone 2 piyasaya çıkalı 2 hafta olmadan 3-4 milyon arasında sattı bile. Yani piyasada gerçekten çok önemli yer edinen bir telefonun(kendi üzerinde tarayıcısı olan) hangi kütüphaneyi seçeceği bizler için önemli.

2 hafta önce aldığım karar ile Jquery‘e geçmiş olan ben bu karardan oldukça memnunum.

Şimdi kendi ihtiyaçlarımız doğrultusunda basit bir js kütüphanesi yazmaya başlayalım.

Kütüphanemizdeki en temel öğe doğal olarak bir DOM referansı olan document.getElementById‘dır. Bir çok js işleminde ihtiyaç duyduğumuz bu referansa en kolay ve akılda kalıcı şekilde nasıl ulaşabiliriz? PHP ve Js Kütüphanesi kullananlarımızın alışkın olduğu $ ile ulaşalım. O zaman kütüphanemizin ilk fonksiyonunu yazalım ;

function $(id)//buradada parametre olarak idyi kullanıyoruz
{
      return document.getElementById(id);
}

Bu fonksiyonumuz ile ilgili bir kaç örneğe buradan ulaşabilirsiniz.

Birinci fonksiyonumuzu oluşturduk. Bu fonksiyonu kullandıkça çok seveceğinize eminim. Çünkü işlerimizi çok kolaylaştırıyor.

İkinci fonksiyonumuz olan $v, id’sini verdiğimiz bir tag’ın (input,select,textarea tagları) value’sunu döndürecek bize.

function $v(id)//buradada parametre olarak idyi kullanıyoruz
{
return document.getElementById(id).value;
}

Bu fonksiyonumuz ile ilgili bir kaç örneğe buradan ulaşabilirsiniz.

Burada dikkat çekmek istediğim bir nokta var. Bu fonksiyon ile tagların sadece değerlerini alabiliyoruz. Yani bir inputun değerini değiştirmek için şu kodu yazarsak çalışmayacaktır :

$v('id') = 'yenideğer';

Bu işlemi gören bir fonksiyonu, az önce yazdığımız $ fonksiyonundan türetebiliriz :

function $v(id)//buradada parametre olarak idyi kullanıyoruz
{
return document.getElementById(id).value;
}

Üçüncü fonksiyonumuz olan $cssC, önceki fonksiyonlara göre daha komplike bir yapıya sahip olacak. Bu fonksiyonumuza 3 parametre yollayarak istediğimiz HTML etiketi üzerinde CSS değişikliklerini gerçekleştireceğiz. Bu fonksiyonumuzda paramaetre sayımız fazla olduğu için öncelikle parametrelerimizi açıklayalım ;

id : Üzerinde değişiklik yapmak istediğimiz etiketimizin tanımlayıcı değeri.
tag : Etiketimizin üzerinde değişiklik yapmak istediğimiz CSS etiketini temsil ediyor.
yenideger : CSS etiketinin alacağı yeni değeri temsil ediyor.

Fonksiyonumuz aşağıdaki gibi ;

function $cssC(id,tag,yenideger)
{
satir = '$(id).style.'+tag+' = yenideger'; //fonksiyonumuzu satir adlı bir degisken atıyoruz
eval(satir); //eval ile satir değişkenini çalıştırıyoruz ve fonksiyonumuz görevini yerine getiriyoruz
}

Bu fonksiyonumuz ile ilgili bir kaç örneğe buradan ulaşabilirsiniz.

Başlangıç olarak 3 fonksiyon tanımlamış bulunmaktayız. Bir sonraki yazımızda fonksiyonlarımızı biraz daha komplike hala getirerek devam etmek dileğiyle.

Ehh adamlar yapmışken bakmamak olmaz dedim.İncelemelerim sonunda gördümki harbiden çok güzel sistemler, nerede ise örnek aldıklarından başarılılar. Uygulamaların en güzel yanları ise gayet pratik olmaları.

Uygulamaları sıralamak gerekirse;

• Lightbox : herkesin bildiği ve şu an sitede de kullandığım resim gösterim aracının bir benzeri. Bence gayet başarılı.
• image menu: Bu uygulama ise flasha rakip bir css uygulaması.Flash kullanmak istemeyenler için gayet uygun bir çalışma.
• Validate: Form kontrollerine js ile farklı bir açıdan bakmışlar. .NET’teki form kontrollerine benzettim ben şekil olarak ama, sayfa ortasında dandun seslerle çıkan uyarılar yerine böyle bir uygulama sanırım daha sempatik olur
• Rounded Corners: Resim ve tabloların köşelerine ovalleştirmek için kullanılabilecek çok hoş bir js-css çalışması.
• Sortable Table: Adından da anlayacağınız gibi tablo içinde sıralama uygulaması

İnşallah ilerleyen zamanlarda bunlarla ilgili ufak tefek scriptlere yer vereceğim.

Bu çalışma sırasında hazırladığım ve bir çok kişinin işine yarayacağını düşündüğüm bir kodu anlatacağım.

Başlığımızın konusu olan Js ile Div oluşturan kod şöyle

function yap(){
var varmi = document.getElementById(’d');<em>//d id’li bir dokümanı tanımlıyoruz</em>
if (!varmi){ // eğer bu döküman yok ise oluşturacağız
var newdiv = document.createElement(’div’); //<em>burada bir adet div oluşturuyoruz</em>
newdiv.setAttribute(’id’, “d”);//id’sini d olarak tanımlıyoruz
newdiv.style.width = 300;//genişliğini belirliyoruz
newdiv.style.height = 300;//yüksekliğini belirliyoruz
newdiv.style.position = “absolute”;//pozisyonunu absolute olarak belirliyoruz
newdiv.style.left = 150; //sol boşluğu ayarlıyoruz
newdiv.style.top = 150; //üst taraf boşluğu
newdiv.style.background = “#ff”; //arkaplan rengini belirliyoruz
newdiv.style.border = “4px solid #000″; // kenarlık rengi ve stili
newdiv.style.padding = “5px”; //div dolgusu
document.body.appendChild(newdiv); // en son olarak oluşturduğumuz div’i dosyamıza ekliyoruz
}
}

Yukarıdaki kod ile resmimizi göstereceğimiz div‘i oluşturmuş olduk.Şimdide bu div’in içerisine 1 adet resim tag’ı oluşturalım.

function resimac(adres,id){
var resim =  document.createElement(’img’); // bir img tagıoluşturuyoruz
resim.setAttribute(’src’,adres); // src’sunu adres diye bir değişkene atıyoruz
resim.setAttribute(’id’,'res’); //id’sini res olarak belirliyoruz
var veri = document.getElementById(’d').appendChild(resim); //en son olarak id’si <em>d </em>olan bir element’e id’si res olan resim tagımızı ekliyoruz
}

Resim açma işlemlerimiz tamamlanmış bulunuyor. Bu işlemlerin ardından, açmış olduğumuz div’i ve içerisindeki resmi yok edecek bir fonksiyon daha yazalım

function sil(id) {
var silinecek = document.getElementById(id); // silinecek nesneyi belirliyoruz
document.body.removeChild(silinecek); // en son olarak nesneyi siliyoruz
}

Dosyalar;
resimAc.js
index.html

Neyse kodumuza gelelim. Kodumuz yazılış amacı olarak tüm divleri kapatmaya yönelik ve aşağıdaki gibi orjinali ;

function divkapat(islem) {
var tum_divler = document.getElementsByTagName(’div’); //divleri tanımladık
var tum_divler_adet = tum_divler.length;//kaç adet div var ona bakıyoruz
var i; //değişkenimizi tanımladık
for(i=0; i< tum_divler_adet; i++) {
tum_divler[i].style.display = islem
}  //bir for döngüsü ile divlerimizin style.display özelliğini divkapat fonksiyonunda gönderdiğim parametre ile değiştirdik.
}

< a href=# onClick=divkapat(’none’); >açkapa< /a>
< a href=# onClick=divkapat(”); >açkapa< /a>

Bu haliyle bir işime yaramıyor .Neden derseniz ; son zamanlarda Tablosuz tasarıma takmış biri olarak, tüm divlerimin kapanması demek sayfanın bembeyaz bir hal alması demektirki bunu hiç istemem. Menü başlıklarını div, açılacak kısımları span olarak tanımladım. Javascript kodumuzuda şu şekilde düzenledim ;

function divkapat(islem,oge,ogeislem) //yukarıdaki koddan farklı ama açıklamasını aşağıda yapacağım
{
var tum_divler = document.getElementsByTagName(’span’);
var tum_divler_adet = tum_divler.length; var i;
for(i=0; i< tum_divler_adet; i++) {
tum_divler[i].style.display = islem
}
document.getElementById(oge).style.display = ogeislem ;
}

İlk kodumuzda fonksiyonumuz tek parametre ile çağrılırken ben bu sayıyı 3 ‘e çıkardım. Sebebine gelmeden önce 1 adet menü örneğinin kodlarınıda yazalım

<div id="1″ class="ac" onclick="divkapat('none','1a','');">bu 1</div>
<span id="1a" class="acilan" style="display: none">Aa 1a alt menu</span>
<div id="2″ class="ac" onclick="divkapat('none','2b','');">bu 2</div>
<span id="2b" class="acilan" style="display: none">Aa 2b alt menu</span>
<div id="3″ class="ac" onclick="divkapat('none','3c','');">bu 3</div>
<span id="3c" class="acilan" style="display: none">Aa buda 3c alt menu </span>

3 parametreli fonksiyon tetikleyicimiz şu satırlarda = onClick=”divkapat(’none’,’1a’,”)”
Neden 3 parametreli,

• 1. parametre tüm spanları kapatıyor.
• 2. parametre işlem yapılaacak olan span Id’sini belirliyor
• 3. parametre, 2. parametrede belirtilen span’ın display değerini alıyor

Sanırım 3. parametrenin boş olduğuna dikkat etmişsinizdir. Başlangıç değer olarak “display:none” alıyorlar, görünür hale getirmek için ” kullanıyoruz. Peki boş göndereceksek neden 3. parametreyi yolluyoruz. İşimizi tam yapmak için açtığımız menülere birerde kapatma butonu bırakırız diye düşünerek yaptım Kapatma butonun linkide şöyle olacak onClick=”divkapat(’none’,’1a’,’none’)” .

Kullanılabilir haline ulaşmak için Buraya tıklayınız.

Örnek kodları İndirmek için Buraya tıklayınız.