ASP-XML-Jquery ve Access Kullanarak Akordiyon Menü Hazırlamak

İsimli konu WH 'Web Tasarım ve Hazır Kodlar' kategorisinde, DonArtuR üyesi tarafından 9 Haziran 2010 tarihinde yazılmıştır. ASP-XML-Jquery ve Access Kullanarak Akordiyon Menü Hazırlamak hakkında bilgi ve tartışmalar.

  1. 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


    Kod:
    <script type="text/javascript" language="javascript" src="js/jquery.js"></script>
    Css dosyamızıda hemen altına ekliyoruz.


    Kod:
    <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.


    Kod:
    <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.


    Kod:
    <% ' 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.


    Kod:
    <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.


    Kod:
    <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ü.


    Kod:
    <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)
    9 Haziran 2010
    #1
  2. ASP-XML-Jquery ve Access Kullanarak Akordiyon Menü Hazırlamak Cevapları

soru sor

ASP-XML-Jquery ve Access Kullanarak Akordiyon Menü Hazırlamak