Tag Archives: jquery

jQuery UI Datepicker’a Zamanı Eklemek

Posted on by
1

Bu aralar jQuery UI ve ASP.NET MVC ile bayağı haşır neşirim ve bugün Datepicker‘ın bir sorunu ile karşılaştım. Sorun DateTime nesnesindeki zamanın (saat, dakika ve saniyeden bahsediyorum), Datepicker ile başka bir tarih seçince kaybolmasıydı. Nasıl olur diye düşünürken ve dateFormat‘ı kurcalarken, zamanı dateFormat içerisine yazdırmak geldi aklıma. Yani, dateFormat “dd.mm.yy” iken ben yanına ekstradan, sanki bir formatmış gibi zamanı koyacaktım, mesela “dd.mm.yy 00:13:48“.

Sonuç olarak buradaki kod türedi.

Not: Bu projede ben sadece tarihi değiştirtmek istiyordum. Eğer siz ikisinide değiştirtmek istiyorsanız başka çözümler öneririm

imgPreview: Yeni jQuery Eklentisi

Posted on by
Reply

Twitter’dan takip ettiğim bir kullanıcı olan “jquery” sayesinde öğrendiğim bu eklentiyi size tanıtacağım.
imgPreview isminde de anlaşılacağı gibi resim linkinin üzerine geldiğiniz zaman bunu bir kutu içerisinde açıyor ve bu sayede onu tıklamadan önizleme yapmış oluyorsunuz. Bunun bide şu şekilde bir yardımcı yanı olabilir, resme tıkladığımız an resim önceden yüklendiğinden ötürü açılması için zaman kaybetmeyeceğiz.

Örnek kod:

$('#imgpreview-demo a').imgPreview({
    imgCSS: {
        // Limit preview size:
        height: 200
    },
    onShow: function(link){
        // Animate link:
        $(link).stop().animate({opacity:0.4});
        // Reset image:
        $('img', this).stop().css({opacity:0});
    },
    onLoad: function(){
        // Animate image
        $(this).animate({opacity:1}, 300);
    },
    onHide: function(link){
        // Animate link:
        $(link).stop().animate({opacity:1});
    }
});

Daha detaylı açıklama ve demo için buraya bakabilirsiniz.

jQuery ile JSON’dan Veri Çekmek

Posted on by
4

Bu aralar üzerinde çalıştığım bir projeden dolayı JSON verisini işlemem gerekti ve önce php fonksiyonlarıyla bunu başarmayı denedim ama gördüm ki hem yavaş çalışıyordu hemde bir yığın kod birikintisi projeyi kaplıyordu.

Sonra farkettim ki aslında JSON jQuery için yaratılmış! PHP’de yapmak istediğimi 10 satırı geçmeden jQuery’de rahatça yapabiliyorduk..

Neyse konuya gelelim. Projemdeki gibi Twitter API‘yi kullanarak size nasıl kolayca veri çekeceğimizi göstereceğim. Öncelikle Twitter’da bir aramadan gelen JSON’da ne gibi bilgiler var?

  1. Results: Aradığımız kelime “Results” array’i içinde dödürülüyor. Bu array’in içinde saklanılan bilgiler ise:
    • Yazılan yazı*
    • Yazıyı yazan*
    • (varsa) Kime cevap olarak yazıldığı
    • Profil resmi* ..
  2. Bu arama için dönen diğer bilgiler ise:
    • Aranılan kelime*
    • Sonraki&Önceki sayfa adresi
    • Yenileme adresi
    • Max_ID

Biz şimdi yapacağımız mini projede yanında yıldız olanları kullanacağız. Bundan önce Max_ID’nin işlevinden bahsetmek istiyorum.

Düşünün ki “Google” kelimesini aratıyorsunuz. Dünyada twitter’ı kullanan milyonlarca insanın 10%’unun “Google” kelimesini siz arama yaparken girdiğini düşünsek, siz sonuç sayfalarında dolandıkça yenileri eklenecek ve yenileri eklenecek. Bunu engellemek için siz arama yaptığınız anda Max_ID tanımlanıyor ve arama sonuçları o ana kadar o kelimeyi içeren sonuçları gösteriyor.

Kodlamaya Başlıyoruz

Öncelikle jQuery’i kullanacağımızdan </head> etiketinden önce buradan indirmemiz gereken dosyayı ekliyoruz:

&lt;script type=&quot;text/javascript&quot; src=&quot;jquery.js&quot;&gt;&lt;/script&gt;

jQuery Kodu

Yukarıda yıldızlı belirtmiş olduğumuş verileri çekmeye başlıyoruz, dikkat edin kaç satır aldı? :) 

var url = &quot;http://search.twitter.com/search.json?callback=?&amp;amp;q=gkaans&quot;; 

		$.getJSON(url, function(JSON){
			$('#search ul').empty();
			$.each(JSON.results, function(i, results){
				$('#search ul').append('&lt;li&gt;&lt;img src=&quot;' + results.profile_image_url + '&quot; /&gt;&lt;span&gt;' + results.text + ' - &lt;a href=&quot;http://twitter.com/' + results.from_user + '&quot;&gt;' + results.from_user + '&lt;/a&gt;&lt;/span&gt;&lt;/li&gt;');
			});
		});

JSON.results’u $.each kullanarak results‘a eşitledik ve results.variable_ismi kullanarak teker teker verileri kolayca çektik.

HTML Kodu ise..

&lt;div id=&quot;search&quot;&gt;
&lt;ul&gt;&lt;/ul&gt;
&lt;/div&gt;

Hiçte zor değil!.. Buyrun demo sayfası..