BLOG
jQuery pHolder Eklentisi (Güncellendi)
Tayfun Erbilen ekledi. 11 Eylül 2012 Salı
Merhaba arkadaşlar, placeholder özelliğini çoğumuz biliyoruzdur eminim.. Ve tabiki bazı tarayıcıların desteklemediğini de biliyoruzdur :) Bu yüzden placeholder'ın aynısını jquery ile yapıp bir eklenti haline getirdim.. Oldukça basit ve kullanışlı bir eklenti oldu :)
Güncelleme:
Arkadaşlar bu güncelleme ile tek seferde tüm inputlara bu eklentiyi uygulayabilirsiniz.. Eğer text paremetresini girmezseniz input'un değerini alacaktır.. Örnek bir kullanım;
Eklenti kullanımı (ilk html'de bir input ekleyelim);
<input type="text" name="kelime" rel="pHolder" value="sitede ara.." /> <input type="text" name="kelime2" rel="pHolder" value="blogda ara.." />
Evet şimdi jquery.pHolder.js dosyasını sayfanıza jquery dosyası ile birlikte çağırdıktan sonra yazmanız gereken jquery kodu aşağıdadır;
$(function(){
$("input[rel*=pHolder]").pHolder();
});İşte bu kadar basit bir kullanımı var :) Dosyayı indirdiğinizde içerisinde 2 farklı js dosyası mevcut.. Birisi sıkıştırılmış olanı, bir diğeri ise geliştirilebilir olanı.
Demo;
İndirme Linki;
http://yadi.sk/d/GpOO304FdQfc Gözat
Kaydol:
Kayıt Yorumları (Atom)
HAKKIMDA
2009'dan beri web işleriyle uğraşan, aynı zamanda amatör müzikle de uğraşan sıradan birisi..
Google Drive'dan sonra Yandex Disk.
YanıtlaSilHer ikisi de kullanışlı, hepsine şans vermek lazım (:
Silinput tagının içine, placeholder="Bişeyler Ara" /> yazarsanız böylede oluyor direkt olarak :)
YanıtlaSilKeşke açıklamamı okusaydın :) Çalışmayan tarayıcılar için bu eklentiyi hazırladım zaten, neyse.
SilBu şekilde her input için bir satır jQuery kodu yazmamız gerekir ki bu bir sürü satır eder. Onun yerine basit bir algoritma düşünebiliriz. Placeholder'ı olan inputlarda tıklanınca sil, dışarı tıklanınca placeholder'ı value yap gibi :)
YanıtlaSilhttp://jsfiddle.net/YusufYildiz/bA6qL/
Evet dediğin şekilde güncelleme getirdim bu konuyla ilgili, bende sonradan garipsedim kullanmaya başlayınca ^^ Şimdi kullanışlı oldu işte.
Silgüzel bir paylaşım tayfun hoca
YanıtlaSilyalnız textarealarda çalışmıyor
$(function(){
$("textarea[rel*=pHolder]").pHolder();
});
kodu yukarıdaki gibi düzenlesen'de çalışmıyor nedeni nedir.. acaba
Hocam denedim bir sorun yok.. Textarea'da rel="pHolder" şeklinde yazmanız gerekiyor.. Ve textarea içine default değeri atamınız gerekiyor.
SilHTML;
<textarea rel="pHolder">Bu bir denemedir..</textarea>
jQuery;
$("textarea[rel*=pHolder]").pHolder();
teşekür ederim hocam hallettim ama farklı bir mantıkla tşk.
Silayriyetten cevap verdiğin içinde tşk.
bir sorum var jquery ile şunu yapmak istiyorum < içerik > ileri basıldığında < içerik2 > olacak geri basıldığında geri dönecek içerikler sayısız olacak ne kadar eklersem o kadar. bunu nasıl yaparım?
YanıtlaSilBasit bir slider sistemi dediğiniz.. Bunun içinde ileride bir ders hazırlayabilirim.
SilŞaka gibi ama tam bunu yapacakken işe biraz ara verip birkaç site dolaşayım diye düşünüyordum.. :) Bir anda bu eklenti çıktı karşıma.. Teşekkürler Tayfun.
YanıtlaSil