Bu yazımızda jQuery ile hazırladığımız bir sayfada, Ajax isteği ile Reaction Framework olayları oluşturup istediğimiz sayfayı animasyonlu bir şekilde tarayıcımıza nasıl getireceğimizi öğreneceğiz.
Öncelikle arayüz sayfamızı hazırlayarak başlıyoruz. Arayüz sayfamızda HTML ve CSS yardımıyla sayfa yapımızı oluşturalım. HTML sayfamızın (index.cfm) <body> etiketleri arasına aşağıdaki HTML kodu yazıyoruz:
<div class="page">
<div>
<ul id="menu">
<li id="about"><a href="#" title="about">About</a></li>
<li id="portfolio"><a href="#" title="portfolio">Portfolio</a></li>
<li id="contact"><a href="#" title="contact">Contact</a></li>
</ul>
<br style="clear:both;" />
</div>
<div id="outcontent">
<div id="loading">LOADING</div>
<div class="content"></div>
</div>
</div>
Sayfamızdaki <head> etiketleri arasına aşağıdaki CSS kodunu yazıyoruz:
<style type="text/css">
body { margin:0 auto 0 auto; color:#000; font-family:Georgia, "Times New Roman", Times, serif; font-size:16px; background-color:#666666; }
.page { margin:100px auto 0 auto; width:750px;}
#menu { list-style:none; margin:0px; padding:0px;}
#menu li { list-style:none; display:inline; }
li.active a { background-color:#FFF;color:#000; }
#menu li a,#menu li a:link { float:left; background-color:#3c3c3c; margin-right:5px; padding:7px; color:#FFFFFF; text-decoration:none; width:6em; text-align:center;}
#menu li a:visited { }
#menu li a:hover { background-color:#327cc8 }
#menu li a:active { background-color:#FFF;color:#000; }
.content {
background-color:#FFF; padding:10px; height:300px; margin:0px; }
#loading { clear:both; background:url(wait.gif) center top no-repeat; text-align:center;padding:33px 0px 0px 0px; font-size:12px;display:none; font-family:Verdana, Arial, Helvetica, sans-serif; }
#outcontent {clear:both; background-color:#FFFFFF; }
</style>
Daha sonra <head> etiketleri arasına yani yukarıdaki CSS’in üstüne jQuery kodumuzu ekliyoruz:
<script>
// When the document loads do everything inside here ...
$(document).ready(function(){
$('.content').load('page.cfm'); //by default initally load text from page.cfm
$('#menu a').click(function() { //start function when any link is clicked
$(".content").slideUp("slow");
var content_show = $(this).attr("title"); //retrieve title of link so we can compare with php file
$.ajax({method: "get",url: "page.cfm",data: "event="+content_show, beforeSend: function(){$("#loading").show("fast");}, //show loading just when link is clicked
complete: function(){ $("#loading").hide("fast");}, //stop showing loading when the process is complete
success: function(html){ //so, if data is retrieved, store it in html
$(".content").show("slow"); //animation
$(".content").html(html); //show the html inside .content div
}
}); //close $.ajax(
}); //close click(
}); //close $(
</script>
Kodları birleştirip index.cfm dosyasını kaydettiğimizde arayüzü tamamlamış oluyoruz. index.cfm About, Portfolio ve Contact linklerine tıklandığında page.cfm dosyasına Ajax isteği gönderiyor ve ilgili sayfayı “event” paremetresinde belirtiyor. page.cfm de gelen parametrenin değerine bakarak ilgili dosyayı görüntülüyor. Sırada Reaction Framework’le hazırlayacağımız page.cfm ve page.cfc dosyaları var. page.cfm dosyasının içeriği oldukça basit:
<cf_controller component="page" eventList="about,portfolio,contact" />
<cfinclude template="#template#" />
Gördüğünüz üzere page.cfm controller component’i olarak page.cfc’yi kullanıyor ve about, portfolio ve contact eventlerini destekliyor. Ve template değişkeninde adı yazan dosyayı tarayıcıda görüntülüyor. page.cfc içeriği ise şöyle:
<cfcomponent extends="Reaction.Controller">
<cffunction name="onStart" access="public">
<cfset view.template="default.cfm" />
</cffunction>
<cffunction name="about" access="public">
<cfset view.template="about.cfm" />
</cffunction>
<cffunction name="portfolio" access="public">
<cfset view.template="portfolio.cfm" />
</cffunction>
<cffunction name="contact" access="public">
<cfset view.template="contact.cfm" />
</cffunction>
</cfcomponent>
onStart olayı her zaman ilk çalışan olaydır ve template değişkeninin ilk değerini belirliyor. Diğer olaylardan herhangi biri çalıştırıldığında template değişkeninin değeri değiştiriliyor. page.cfm ise template değişkenindeki dosyayı çalıştırıyor.
Bugünlük bu kadar soru ve görüşleriniz için yorum bırakabilirsiniz.
Murat Demirci 