jQuery Değişken Kontrol.

Merhabalar,

Bazı durumda yapmış olduğunuz projelerde jquery değişkenleri global olarak kullanmanız ve başka bir yerden bu değişkeni okumanız gerekir eğer bu değişken yaratılmamış ise o sayfada bu kontrol işleminde değişken olmadığı için hata alırsınız. Bu hatayı alamamak için aşağıdaki kontrolu yapıyoruz.

[PHP]if(typeof(variable) != “undefined” && variable !== null) {

}[/PHP]

Ufak bir bilgilendirme idi umarım yararlı olur. 🙂

Ahmet KAYAR.

jQuery Template yapısı ve kullanımı.

JQuery Template Nedir?

jQuery template temelde javascript kodu ile html kodunu ayırmak için tasarlanmış bir yapıdır. Asp.net’in repeater’ı benzeri bir modeli vardır. Farkı; databinding javascript tarafından yapılır. Özellikle yoğun ajax kullanımının olduğu uygulamalarda, gelen json formatındaki dizileri bind etmek suretiyle kullanılır.

Web uygulaması geliştirilen her dille uyumlu olarak çalışabilen bu yapı. Asp.net geliştiricileri için çok daha kolaylık sağlamaktadır. Proje sırasında düzenlenmesi gerektiği durumlarda projenin tekrar derlenmesini gerektirmeden template dosyasını düzenlemesi ile bu çalışma yapılmış olacaktır.

jQuery Template kullanımı ve kod yapısı.

Kullanımı

jQuery template kullanımı için jquery.tmpl.js kodyasını projemize entegre etmemiz gerekmektedir.

http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js

http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js

Kod Yapısı

<script id="ornek-tmpl" type="text/x-jquery-tmpl">// <![CDATA[
   Kod Blogu Buraya gelecek.
// ]]></script>

Ufak bir örnekle bu kod yapısını biraz daha açalım.

Örnek Kod


<script id="members-list-tmpl" type="text/x-jquery-tmpl">// <![CDATA[
{{if Json}}
{{each Json}}
{{if State=="0" }}
	<li> Durum Aktif Değil. ${Name}-{{tmpl "#department-tmpl"}}</li>

{{else}}
	<li>Aktif:${Name} - {{html Department}}</li>

{{/if}}
{{/each}}
{{else}}
	<li>İçerik Bulunamadı.</li>

{{/if}}
// ]]></script><script id="department-tmpl" type="text/x-jquery-tmpl">// <![CDATA[
                <strong>${id}</strong>
// ]]></script>

Yukarıda kod yapısını açıklayacak olursak.

  1. id=”members-list-tmpl” type=”text/x-jquery-tmpl” : jQuery Template yapımızı tanımlamak için kullandığımız tag yapısı. ID alanı jquery templatemizin ismi ve type alanı da içerisinde yer alan kodların jquery tmpl olduğunu belirtiyor.
  2. 2.       {{if Json}} : Gelen datamızın içeriğinin olup olmadığı  kontrol ediyoruz.Eğer gelen data  yok ise. {{else}} kodu ile ekrana vermek istediğimiz uyarı mesajını yazıyoruz.
  3. 3.       {{each Json}} : Gelen datamızı döngüye sokmamızı sağlar.
  4. 4.       ${Name} : Data içerisinde yer alan veriyi bu şekilde ekrana basıyoruz. “${degisken}”. Earch olarak kullanmadığımız yani sadece tek veri gelen kısımlarda ise “${dataAdi.degisken}”  olarak kullanıyoruz.
  5. 5.       {{tmpl “#department-tmpl”}} :  Gelen datamızı ortak olarak birkaç yer de kullandığımı template yolluyoruz bu sayede kod fazlalığından kurtulmuş oluyoruz.
  6. 6.       {{html Department}} : Gelen datamızın içeriğinde eğer html kod varsa bu şekilde kullanarak gelen içeriğin browser tarafından işlenmesini sağlaya biliyoruz bu kodu kullanmazsak gelen içeriğimizi düz metin olarak ekranda gösterecektir.
  7. 7.       {{wrap “#examplewrap-tmpl”}}: Şu anki örneğimizde bu konu hakkında bir örnek mevcut değil ancak kullanımı şu şekilde. Tmpl kullanımının amacı gibi kod fazlalığını önlemek açısında ortak olarak kullanılan bir wrap-tmpl tanımlanıp bu kod ile içeriğimizi sarmamızı sağlaya biliriz. Yani bu kod kullandığımızda gelen tmpl içeriğimiz saracaktır.

Script Taraflı kod Kullanımı

 

$(“#members-list-tmpl”).tmpl(jsonData).appendTo(“#members-list”);

Bu yazmış olduğumuz kodu şu şekilde açıklaya biliriz. Html içerisinde tanımlamış olduğumuz tmpl alanını jquery tmpl metodunu kullarak sistem tarafıdan oluşturduğumu jsonData nesnemizi gönderiyor ve hangi alan bu işlemini uygulanması gerektiğini belirtiyoruz.

Yani: #members-list-tmpl templat’i kullarak jsonData verilerini #members-list id’li alna uygula.

jQuery Template ile ilgili örnek projeye jqueryTemplate‘den ulaşabilirsiniz.

İyi Çalışmalar.
Ahmet KAYAR

Asp.net Fancybox Postback Problemi.

Merhabalar;

Bu günkü yaşamış olduğum bir problemi yazmak istedim. Geliştirmiş oluğumuz  proje üzerinde Fancybox kullanıyorduk ve proje gereği Fancybox içinde bir buton ile güncelme yapmamız gerekti ancak bu işlem standart Fancybox ayarları ile yapılamadı o yüzden Fancybox içinde aşağıdaki düzenlemeyi yapmamız gerekti.

Fancybox Js içindeki.

 $('body').append(
tmp         = $('
'), loading     = $('
'), overlay     = $('
'), wrap        = $('
') );

Bu kodu Aşağıdaki gibi düzenliyoruz.

$('form').append(
    tmp         = $('<div id="fancybox-tmp"></div>'),
    loading     = $('<div id="fancybox-loading"><div></div></div>'),
    overlay     = $('<div id="fancybox-overlay"></div>'),
    wrap        = $('<div id="fancybox-wrap"></div>')
        );

Artık Fancybox Postback işlemi tamamlanmış oldu.

Umarım yararlı olur.

İyi Çalışmalar.

Ahmet KAYAR.

jQuery Manşet Sistemi

Merhabalar Yapmış olduğunuz web siterinden kullanmak için jQuery ile yapmış olduğum jQuery Manşet Sistemini Paylaşmak istedim sizin. Sistem çok basit ve geliştirile bilir. Yakında bu sistemin otomatik olarak geçiş yapanını paylaşmayı planlıyorum.

İyi Çalışmalar.

jQuery Manşet Sistemi Örneği İçin tıklayınız.

jQuery Manşet Sistemi İndirmek İçin tıklayınız.

Ek Düzenleme: Bir arkadaşımızın maili üzerinde bu düzenlemeyi yapıyorum çalışmanızda yapmış olduğunuz. Manşet alanın alanını(resim kısmının kapsayan alanın) owerflow:hidden yapmayı unutmayınız aksi taktirde üzerinde hızlı çektiğinizde diğer divler alt alta gözükeceklerdir.

Javascript İle İki Tarih Arasındaki Farkı Bulma

Javascript İle İki Tarih Arasındaki Farkı Bulma

Merhaba Arkadaşlar üzerinde çalışmış olduğum Rentecar Projesinde Kiralama Süresini hesaplatmak için iki tarih arasındaki farkı bulmam gerekmekteydi. Bu İşlemi Aslında php ile yapabilirdim. Ancak tarihleri kullancı değiştire bilmesi gerektiği için. Javascript ile Yapmam gerekti. Googlede Arama Soncunda bulduğum Sinan Doğan Arkadaşımızın Kodunu Sizinle Paylaşmak İstedim. Umarım Benim Olduğu gibi sizinde işinize yarar. İyi Çalışmalar.

Kod:

 <script type="text/javascript">
Date.gunfark= function(s1,s2) {
var t=s1.split(/D+/);
var z=s2.split(/D+/);
var d1=new Date(t[2]*1, t[1]-1, t[0]*1);
var d2=new Date(z[2]*1, z[1]-1, z[0]*1);
var birgun= 24 * 60 *60 * 1000;
var f= Math.floor((d1-d2) / birgun ) ;
return f;

}
function buton_onclick()
{
var tarih1 = BirinciVeri.value;
var tarih2 = IkinciVeri.value;
var sonuc = Date.gunfark(tarih1, tarih2);
alert(sonuc);
}</script>

Kodların Asıl Yazan Sinan Doğan Arkadaşımıza da Çok Teşekkürederim.

Sinan Doğanın Makalesi İçin Tıklayınız.

Gelen İstek üzerine örnek çalışma hazırladım arkadaşlar buradan ulaşabilirsiniz.

İyi Çalışmalar

Ahmet KAYAR