Genelde blog kullanıcılarının birçok widget’ları vardır ve daha da eklemeyi düşünürler. Fakat düşündüm ki ben de çok widget ürettim bununla birlikte widget listem bu şekilde uzamaya devam ettikçe, görsellikten ve etkili olmaktan çıkıyor. Başka kimin böyle bir sorunu vardır diye araştırırken Chris’in blog’unda ve onun harika çözümünü, portatif widget’ları (“Collasible Widgets”) bulduk.
Fikir gerçekten hoş ama diğer taraftan görünüm tipini direkt olarak hiç göstermemeye veya blok halinde göstermeye ayarlamak, keskin ve kaba geçişlere sebep olmaktadır. Animasyonlu div geçişleri için çok miktarda js kodları olduğu için, animasyon ile daraltacak veya genişletecek bir çözüm aramaya karar verdim. Hızlı bir arama sonucu DynamicDrive’da hazır bir animasyon bulduk. Gerek görsel açıdan, gerek kullanışlılık olarak çok verimli bir çözüm gibi duruyor.
Artık kalan iş sadece bu js dosyalarını doğru bir şekilde BlogEngine’e koymak ve js dosyasını yapılandırmaktır. Bunu yapmak için, ilk olarak js dosyasını web uygulamanızın kök dizinindeki js klasörünün içine ekleyiniz. ( Eğer böyle bir klasörünüz yoksa kök dizinde js adında yeni bir klasör oluşturun)
Sonra, bu js dosyalarını çalışma zamanında oluşturulmuş sayfalara koymanız gereklidir. Bu noktada, BloeEngine iyi bir sayfa yapılandırmasına sahiptir. Bu yüzden çok kolay bir şekilde AddJavaScriptInclude fonksiyonu ile js dosyalarını BlogEngine.Core/ Web /Controls/ BlogBasePage.cs dosyasına ekleyebilirsiniz. Aşağıdaki kodları BlogBasePage.cs içinde 89. Satıra ekleyiniz.
1: // Animasyonlu Panel için JS dosyalarını ekleyin
2: AddJavaScriptInclude(Utils.RelativeWebRoot + "js/jquery-1.2.2.pack.js");
3: AddJavaScriptInclude(Utils.RelativeWebRoot + "js/animatedcollapse.js");
4:
5: //Ve orjinal kod ile devam edin
6: AddJavaScriptInclude(Utils.RelativeWebRoot + "blog.js");
7: if (User.IsInRole(BlogSettings.Instance.AdministratorRole))
Sonra, gerektiğinde daralacak ve genişleyecek portatif widget geçişleri için widget’lari kendi aralarında yapılandırılması gerekmektedir. App_Code/ Controls/ WidgetBase.cs’i aşağıdaki düzenlemeniz değişiklikleri tamamlamanız için yetecektir.
1: if (ShowTitle)
2: // Daralır ve genişleyebilir geçişli yapı için başlık metnini aktif bir link olarak değiştiriniz
3: sb.Append("<a href=\"javascript:animatedcollapse.toggle('widgetContent" + WidgetID + "')\"><h4>" + Title + "</h4></a>");
4:
5: // eski başlık
6: //sb.Append("<h4>" + baslik + "</h4>");
7: else
8: sb.Append("<br />");
9:
10: // contentDiv i değiştirin ve widgetContent ile başlayan bir id veriniz.
11: sb.Append("<div id=\"widgetContent" + WidgetID + "\" class=\"content\">");
12:
13: writer.Write(sb.ToString());
14: base.Render(writer);
15: writer.Write("</div>");
16: writer.Write("</div>");
17:
18: // Widget için Animasyonlu Portatif panelinizi başlatın.
19: writer.Write("<script type=\"text/javascript\"> animatedcollapse.addDiv('widgetContent" + WidgetID + "', 'fade=1'); animatedcollapse.init();</script>");
Hepsi bu kadar, bunun bir örneğini http://www.kvnc.net/ adresinde widgetların başlıklarına tıklayarak görebilirsiniz. Web sayfanızda pürüzsüz geçişlere ve animasyonlu ögelere sahip olmak kötü bir şey olmasa gerek .
Kodları indirebileceğiniz adres: AnimatedWidgets-BlogEngine.NET.rar (21.97 kb)
Not: Bu makale Kıvanç Özüölmez'in sitesinden alınarak Türkçe'ye çevrilmiştir. Orjinali için bu bağlantıyı ziyaret edebilirsiniz.
Saygılarımla,
Cemil UZUN