TEMMUZ10

Asp-Xml-Jquery ve Asp-Access-Jquery kullanarak accordion menü hazırlamak

ASP Programlama kategorisinde | [1675 ] kez okunmuş | [3] Yorum » | Yorum Yaz »

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.

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

Tamamını Okuyun
1