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

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.

Jquery Hesablama İşlemi

Yapmış olduğunuz projelerde kimi durumda site içerisinde sayfa yenilemeden anlık hesaplama yaptırmanız gerekiyor işte bu noktada jquery veya ajax devreye giriyor 🙂 ben se her ikisini birden kullanayım dedim 🙂 Aşağıda projemde kullanmış olduğum hesablama fonksiyounu umarım işine yarar 🙂

Js Kod

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js” type=”text/javascript”></script>
<script type=”text/javascript” language=”javascript”>
function hesabla()
{
price = document.getElementById(“price”).value; // id’si price olan elemntin değerini alıyoruz.
masraf=document.getElementById(“masraf”).value; //id’si masaf olan elementin değerini alıyoruz.
toplam=parseInt(price)+parseInt(masraf); // Matematiksek işleme sokuyoruz
kdv=toplam*0.18; // kdv hesaplandı.
toplamkdv=toplam*1.18; // toplam kdv hesaplandı.
$(‘#kdv’).html(kdv); // id’si kdv olan div’e değer atıyoruz
$(‘#toplam’).html(toplamkdv); // id’si toplam olan div’e değer atıyrouz.
}

</script>

 

Uygulama Kodu

<input name=”price” type=”text” id=”price”  onkeyup=”hesabla()” /> // Değer Girildiği anda hesaplama işlemi çalışacak.

<input  id=”masraf”  onkeyup=”hesabla()”  type=”text” name=”masraf” /> // Değer Girildiği anda hesaplama işlemi çalışacak.

<div id=”kdv”></div> // İşlemin kdv değeri gelecek.

<div id=”toplam”></div> // İşlemin Toplam Değeri Gelecek

 

İyi Çalışmalar.

 

 

jQuery Menü Yapımı

jQuery ile gerçekten 3 – 5 satır kod ile inanılmaz şeyler yapabiliyoruz. biraz da css (style) bilgisi ile web sitenizi zenginleştirebilirsiniz. 2 örnegim olan jQuery menu kodlaması gayet basitir.
1.Adım ——
Bir Adet html sayfası oluşturalım.
sonra editorümüz aracılıgıyla bu sayfayı açalım (not defteri , dreamweaver vs.)
head taglarının arasına gerekli dosyaları çagıralım.

 
<script src="jquery-1.2.3.min.js" type="text/javascript"></script>
<script src="menu.js" type="text/javascript"></script>
<script src="jquery-1.2.3.min.js" type="text/javascript"></script> <script src="menu.js" type="text/javascript"></script>  

2.Adım ——
Bir Adet text dosyası açıp icine şu kodları ekleyin. sonra uzantısını (*.txt) silip yerine (*.js) yazalım ÖRNEK : menu.js 

 
function mainmenu(){
$(" #menu ul ").css({display: "none"}); // Opera Fix
$(" #menu li").hover(function(){
$(this).find('ul:first').css({visibility: "visible",display: "none"}).show();
},function(){
$(this).find('ul:first').css({visibility: "hidden"});
});
} 

$(document).ready(function(){
mainmenu();
}); 

3.Adım ——
Aynı şekilde bir txt dosyası açıp şu kodları girelim. sonra uzantısını (*.txt) silip yerine (*.css) yazalım ÖRNEK : style.css 

 
#menu, #menu ul{
margin:0;
padding:0;
list-style-type:none;
position:relative;
line-height:1.5em;
height: 30px;
width: auto;
}

#menu a{
display:block;
padding:0px 5px;
border:1px solid #ff0000;
color:#fff;
text-decoration:none;
background:url(button.png);
}

#menu a:hover{
border:1px solid #000000;
color:#fff;
background:url(button.active.png);
}

#menu li{
float:left;
position:relative;
}

#menu ul {
position:absolute;
display:none;
width:auto;
top:1.5em;
}

#menu li ul a{
width:190px;
height:30;
float:left;
} 

#menu ul ul{
top:auto;
} 
#menu li ul ul {
left:190px;
margin:0px 0 0 10px;
} 

#menu li:hover ul ul, #menu li:hover ul ul ul, #menu li:hover ul ul ul ul{
display:none;
}
#menu li:hover ul, #menuli li:hover ul, #menu li li li:hover ul, #menu li li li li:hover ul{
display:block;
} 

4.Adım ——
Sayfamızın içine (body tagları arasına) gerekli kodları girelim. 

burada alt menun alt menusu ve onunda alt menusu ekleyebilrisiniz 😀 bunu dahada ileri görtürmek siizn elinizde. 

 
<ul id="menu"> 
 <li><a href="#">örnek 1</a>  <ul>   <li><a href="#">örnek 1.1</a>  <ul>   <li><a href="#">1.1.1</a></li>   <li><a href="#">1.1.3</a></li>  </ul>  </li>  </ul>  </li>   <li><a href="#">örnek 1</a></li>   <li><a href="#">örnek 2</a></li>   <li><a href="#">örnek 3</a></li>   <li><a href="#">örnek 4</a></li>   <li><a href="#">örnek 5</a></li>  </ul> 

Bu Örnegi
BURADAN inceleyebilirsiniz
BURADAN indirebilirsiniz