TEMMUZ10
Asp-Xml-Jquery ve Asp-Access-Jquery kullanarak accordion menü hazırlamak
Jquery ile uğraşmak çok zevkli oluyor. Hele de uğraşının içine ASP kodlamaları, XML, veritabanı bağlantıları girince tadından yenmiyor desek doğru olur.
Buradaki Jquery Accordion Menü örneği çok hoşuma gider ve projelerimde kullanmaktan zevk alırım.
Bir müşterim için kendi hazırladığım javascript acordion menü artık hoşuma gitmemeye başlamış ve aynı müşterim için yeni bir proje daha hazırlamam gerekiyordu. Aynı mantıkla çalışan bir accordion menü kullanmak gerektiği için yukarıda bahsi geçen menü örneğini kullanayım dedim.
Proje; aynı kategorilerden ve ürünlerden oluşan iki sitenin tek bir veri havuzundan yararlanmasını ön görüyordu. Birisine kategori eklenmesi durumunda yeni sitede de görüntülenmesi ve o kategoriye eklenen ürünün de yeni sitede teşhir edilmesi gerekiyordu. Neden diye soranlar olacaktır.
Müşterim aynı bilgileri tek tek iki ayrı veritabanına girmek istemiyor :)
Her neyse bu işlemi MSSQL yada MySQL veritabanı kullanarak yapabilirdim ama geç kalmış olmak problem oldu. Önceki site veritabanı olarak Ms Access kullanıyordu. Bende xml ile verileri yeni siteye taşımayı uygun gördüm (Bir süre için)
Yukarıda bahsi geçen Accordion Menu'yü XML'den gelen bilgilerle oluşturmak için kodlamaya başladım.
- Kodlanmış ve bitmiş hali için tıklayın
- Örnek XML dosyasını inceleyin
- Örnekte kullanılan css dosyasını inceleyin
Aşağıda XML veriler kullanarak Jquery ile Accordion Menü yapımının kodlarını bulacaksını. Bonus olarak da Veritabanı ile yapılmış halini istersiniz diye veritabanı ile çalışan halinin kodlarını ve çalışan halinide ekliyorum.
Kodlara geçelim. Bu kadar gevezelik yeter.
İlk olarak
JQuery'nin en son versiyonunu buradan indirebilirsiniz. İndirdikten sonra aşağıdaki gibi sayfanızın <head>...</head> kodları arasına ekliyoruz.
<script type="text/javascript" language="javascript" src="js/jquery.js"></script>
Css dosyamızıda hemen altına ekliyoruz.
<link href="css/acordion.css" rel="stylesheet" type="text/css" />
Menümüzün çalışması için gereken javascript kodlarına geldi sıra
Aşağıda, aynı görsele sahip fakat farklı kullanımlara sahip 3 menü için javascript kodumuz var. Kafanız karışmasın.
<script type="text/javascript">
$(document).ready(function()
{
// ilk menü için (Tıklandıkça işlem yapan menü) gerekli kodlar
$("#firstpane p.menu_head").click(function()
{
$(this).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
});
// ikinci menü için (MouseOver ile işlem yapan menü) gerekli kodlar
$("#secondpane p.menu_head").mouseover(function()
{
$(this).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
}); // Üçüncü menü için (Tıklandıkça işlem yapan menü -access db ile çalışan) gerekli kodlar
$("#thirdpane p.menu_head").click(function()
{
$(this).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
}); });
</script>
Kodlarda kullanacağımız 2 adet fonksiyonumuz ve Veritabanı bağlantı kodumuzu ekliyoruz.
<%
' XML dosyasına bağlanıyoruz
Function GETHTTP(adres)
Set StrHTTP = Server.CreateObject("MSXML2.ServerXMLHTTP.3.0" )
On Error Resume Next
StrHTTP.Open "GET" , adres, false
StrHTTP.sEnd If Err.Number = 0 Then
retStr =StrHTTP.responseText
Else
retStr = "Bilgi Alinamadi. Lutfen tekrar deneyiniz."
End If
Set StrHTTP = Nothing
GETHTTP = retStr
End Function
' XML'den gelen verileri parçalamak için kullanıyoruz
Function VeriCoz(Veri, Basla, Bit)
iBaslangic = Instr(Veri, Basla)
iBitis = Instr(Veri, Bit)
VeriCoz = Mid(Veri, iBaslangic+Len(Basla), iBitis-(iBaslangic+Len(Basla)))
End Function
' Veritabanına bağlanıyoruz
set objConn = Server.CreateObject("ADODB.Connection")
objConn.Open = "Driver={Microsoft Access Driver (*.mdb)};Dbq="& Server.MapPath("db\acordion.mdb")
%>
İlk menü örneğimizi oluşturuyoruz. İlk menü örneği, Münüyü oluşturmak için XML dosyasından alınan verileri kullanacak. Ve accordion işleminin oluşması için ana kategoriye tıklanması gereken bir yapıda olacak.
<div id="firstpane" class="menu_list">
<%
' XML dosyamıza bağlanıyoruz
strUrl = "http://localhost/acordion/db/kategori-liste.xml"
xmlveri = GETHTTP(strURL) ' Ana Kategorileri diziye atıyoruz
arrAnaKategori = Split(xmlveri,"<kategori>")
i = 0
for each AnaKategori in arrAnaKategori
if i > 0 Then
' Katregori Adımızı alıyoruz
strKategoriAdi = VeriCoz(AnaKategori,"<kategoriadi>","</kategoriadi>")
%>
<p class="menu_head"><% =strKategoriAdi %></p>
<%
' Kategorinin alt kategorilerini diziye atıyoruz
arrAltKategori = Split(AnaKategori,"<altkategori>")
%>
<div class="menu_body">
<%
ii = 0
for each AltKategori in arrAltKategori
if ii > 0 Then
' alt kategorimizin adını alıyoruz
strAltKategoriAdi = VeriCoz(AltKategori,"<altkatadi>","</altkatadi>")
%>
<a href="#"><% =strAltKategoriAdi %></a>
<%
end if
ii= ii+1
Next
%>
</div>
<%
end if
i= i+1
Next
%>
</div>
İkinci Menü örneğindeki kodlar yukarıdaki ilk menüdekinin aynısı tek fark menünün içinde bulunduğu div'in ismi. (Java script'te karışışklık olmasın diye). Yinede kodlarını buraya ekliyorum. Kodlar aynı ama işlev olarak mouseOver efekti ile acoordion işlemi gerçekleşiyor.
<div id="secondpane" class="menu_list">
<%
strUrl = "http://localhost/acordion/db/kategori-liste.xml"
xmlveri = GETHTTP(strURL) arrAnaKategori = Split(xmlveri,"<kategori>")
i = 0
for each AnaKategori in arrAnaKategori
if i > 0 Then
strKategoriAdi = VeriCoz(AnaKategori,"<kategoriadi>","</kategoriadi>")
%>
<p class="menu_head"><% =strKategoriAdi %></p>
<%
arrAltKategori = Split(AnaKategori,"<altkategori>")
%>
<div class="menu_body">
<%
ii = 0
for each AltKategori in arrAltKategori
if ii > 0 Then
strAltKategoriAdi = VeriCoz(AltKategori,"<altkatadi>","</altkatadi>")
%>
<a href="#"><% =strAltKategoriAdi %></a>
<%
end if
ii= ii+1
Next
%>
</div>
<%
end if
i= i+1
Next
%>
</div>
Üçüncü ve son örnek veritabanında bulunan verilerle oluşan bir menü.
<div id="thirdpane" class="menu_list">
<%
' Yukarıda veritabanına bağlanmıştık
' Kayıt setini oluşturuyoruz
Set objRs = Server.CreateObject("ADODB.RecordSet")
'Gerekli bilgileri almak için SQL sorgumuzu oluşturuyoruz
strSQL = "SELECt * FRom tblKategoriler WHERE fldKategoriSub = 0 ORDER by fldSira ASC"
'SQL sorgumuzun cevabını objRs isimli kayıt setimize yüklüyoruz
objRs.Open strSQL, objConn, 1, 3
' Eğer kayıt seti boş deilse
if Not objRs.EOF Then
' Kayıt setindeki bilgileri döngüye sokup almaya başlıyoruz
Do While Not objrs.EOF
%>
<p class="menu_head"><% =objRs("fldKategoriAdi") %></p>
<%
' Ana kategoriye ait alt kategorilerin listesi için aşağıdaki kod bloğunu kullanıyoruz
Set objRs1 = Server.CreateObject("ADODB.RecordSet")
strSQL = "SELECt * FRom tblKategoriler WHERE fldKategoriSub = "& objRs("fldKategoriID") &" ORDER by fldSira ASC"
objRs1.Open strSQL, objConn, 1, 3
if Not objRs1.EOF Then
%>
<div class="menu_body">
<%
Do While Not objrs1.EOF
%>
<a href="#"><% =objRs1("fldkategoriAdi") %></a>
<%
objrs1.MoveNext
Loop
%>
</div>
<%
end if
objrs1.Close
Set objRs1 = nothing
' Kayıt setindeki sonraki kayıtı alıp sayfaya yazmak için döngüyü devam ettiriyoruz
objRs.MoveNext
Loop
end if
objrs.Close
Set objRs = nothing
objConn.close
Set objConn = Nothing
%>
</div>
- Yukarıdaki üç örneğinde çalışır halini incelemek isterseniz tıklayın.
- Yukarıdaki üç örneği ve ilgili dosyaları içinde barındıran sıkıştırılmış dosyayı indirmek için tıklayın. (Lütfen indirdikten sonra virüs programınızla kontrol edin)
Bu yazı da burada bitiyor.
Umarım işinizi gören bir yazı olmuştur. Yorumlarınızla sayfamı şenlendirirseniz sevinirim :D
