Bu yazımda Jquery ile hazırladığım uygulamalardan birini daha sizlerle paylaşacağım. Ayrıca hem basit yapısını hem de örnek olması açısından Ajax ile
- Yazılım Uzmanları
- 14 Mayıs 2018
- 359 kez görüntülendi.
Bu yazımda Jquery ile hazırladığım uygulamalardan birini daha sizlerle paylaşacağım. Ayrıca hem basit yapısını hem de örnek olması açısından Ajax ile Rss okuma örneği yaparak bu örneği sizlere sunacağım. Uygulamam ise belli bir alanda bulunan elementlerin belli bir süre aralığında sürekli birer birer slayt şeklinde kayması ile oluşuyor. Oldukça faydalı ve kullanışlı bir uygulama olduğunu düşünüyorum. Bu örneği daha kullanışlı yapmak için de Rss okuma örneğini Ajax ile Class kullanarak hazırladım. Böylece hem örneğimi hem de Ajax ile Class kullanma mantığını daha iyi anlayacağımızı düşünüyorum. Şimdi uygulamamızın yapısına, kodlarına ve örneğimizin de kodlarına bakalım.
Öncelikle tek tek kayan alan uygulamsı için kullandığım html yapı şu şekilde olmalı.
<div id="alan"> <p><b>Birinci Alan</b></p> <p>İkinci Alan</p> <p>Üçüncü Alan</p> <p>Dördüncü Alan</p> <p>Beşinci Alan</p> </div>
Bu yapıyı kullanan ve tek tek kaymasının sağlayan Jquery kodlarım ise şöyle olmalı.
<script type="text/javascript"> var aktif=0, gosterim_adeti=5; var dizi = new Array(); $(document).ready(function(){ var boyut = $("#alan p").length; for(var i=0; i<boyut; i++) { dizi[i] = $("#alan p:eq("+i+")").html(); } $("#alan").html(""); for(var i=0; i<gosterim_adeti; i++) { $("#alan").append("<p>"+dizi[i]+"</p>"); } setInterval(degistir, 2000); function degistir() { aktif = (aktif + 1)%boyut; $("#alan").html(""); var ilk = aktif-1; if(ilk<0)ilk = ilk+boyut; $("#alan").append("<p>"+dizi[ilk]+"</p>"); for(var i=aktif; i<aktif + gosterim_adeti;i++) { $("#alan").append("<p>"+dizi[(i%boyut)]+"</p>"); } $("#alan p:first").slideUp(500); $("#alan p:last").css("height","0px").animate({height:"40px"},600); //verdiğimiz yükseklik css ile belirttiğimiz yükseklik //ayrıca alan id'li elementin yüksekliğini hesaplayarak vermeliyiz. } }); </script>
Görüldüğü uygulama kodlarımız böyle. Daha önce de belirttiğim gibi bu uygulamayı Ajax ile Class kullanma yöntemi ile Rss okuma biçiminde hazırladım. Bu örnek için html yapımız ve script kodlarımız tamamen aynı. Fakat script kodlarında Ajax kullandığımız için çağırdığımız yerde birkaç değişiklik var. Bu değişiklikleri de örneği inceleyerek görebilirsiniz. Şimdi ise Ajax ile Rss okuma örneğimizin kodlarına bakalım.
public partial class jquery_slayt_alan : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } [WebMethod] public static List<rss> rss_getir() { System.Threading.Thread.Sleep(500); XmlTextReader okuyucu = new XmlTextReader("http://www.mehmetduran.com/rss.aspx"); XmlDocument dokuman = new XmlDocument(); dokuman.Load(okuyucu); XmlNode node = dokuman.SelectSingleNode("/rss"); XmlNodeList title = dokuman.SelectNodes("/rss/channel/item/title"); XmlNodeList link = dokuman.SelectNodes("/rss/channel/item/link"); List<rss> r = new List<rss>(); for (int i = 0; i < 20; i++) { rss ro = new rss(); ro.title = title.Item(i).InnerText; ro.link = link.Item(i).InnerText; r.Add(ro); } return r; } } public class rss { public string title { get; set; } public string link { get; set; } }
örüldüğü gibi Ajax ile Rss okuma işlemi de böyle. Umarım faydalı bir çalışma olmuştur.
İyi Çalışmalar!
Bu yazıya 0 yorum yapılmış.