Kategori: JavaScript

Merhaba arkadaşlar, bu gece yarınki heyecanımdan dolayı uyku tutmadığı için bir şeyler yapayım dedim ve aklıma yazı kısaltma eklentisi yazmak geldi.. Çok uğraştırmadı zaten, tıkır tıkır da çalışıyor maşallah (:

Eklenti Parametreleri;
limit : Karakter limitini belirtme (standart = 20)
nokta : Kısaltma yapıldığında sonuna nokta koyulup koyulmayacağını belirtme (standart = true / yani konulsun demek istemiyorsanız false yapın değeri)
goster : Yazıyı kısaltıp devamını okumak için link çıksın istiyorsanız bu değer true olmalıdır.. Standart olarak true’dur.. Eğer link çıkmasın sadece yazı kısalsın derseniz değerini false yapmanız gerekir..
gizle : Eğer devamını göster dediğinizde tekrar gizlemek isterseniz bu değeri true yapmalısınız.. Standart olarak değeri true’dur.. Gösterilen şeyi tekrar gizlemek istemiyorsanız değerini false yapın
text : Göster linkinde ne yazacağını belirler (standart = göster)
text2 : Gizle linkinde ne yazacağını belirler (standart = gizle)

Eklenti Kullanımı;
jQuery kütüphanesini çağırın. jquery.pKisalt.min.js (eklenti dosyasını) çağırın. Ve daha sonra kisaltmak istediğiniz nesneyi html sayfanızda seçip eklentiyi uygulayın;

$(function(){
	$("div.nesne").pKisalt({
		limit : 100,
		text  : "(devamını göster)",
		text2 : "(tekrar gizle)"
	});
});

Download / İndirin;
http://yadi.sk/d/VpcDS5kJ19py8

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ı.

İndirme Linki;
http://yadi.sk/d/GpOO304FdQfc

On beşinci jQuery dersimizde aşağıdakileri öğrendik;
– jQuery :checked Filtresi
– jQuery width ve height Metodları
– jQuery load Metodu

:checked filtresi kullanımı

$("button").click(function(){
	var val = $("input[type=checkbox]:checked").val();
	if (val) alert("işleme devam edebilirsiniz..");
	else alert("kuralları kabul etmeniz gerekiyor!");
});

Width ve Height Metodları Kullanımı

/* Genişlik Değerini Alır */
var width = $("div.deneme").width();
alert(width);

/* Genişlik Değeri Atar */
$("div.deneme").width(500);

/* Yükseklik Değerini Alır */
var height = $("div.deneme").height();
alert(height);

/* Yükseklik Değeri Atar */
$("div.deneme").height(500);

Load Metodu Kullanımı

$("img#resim").load(function(){
	alert("Resim yüklendi!");
});

On üçüncü jquery dersimizde yeni bir örnek uygulama hazırlayacağız..
– jQuery ile Sayfalama Yapımı

/* Erbilen.NET - jQuery Dersleri */
/* jQuery ile Sayfalama Yapımı*/

// toplam li sayısı
var toplamLi = $("ul#liste li").size();

// sayfa veri sayısı
var veriSayisi = 5;

// Sayfalamayı uygula
$("ul#liste li:gt(" + (veriSayisi - 1) + ")").hide();

// sayfa sayısı bulalım
var sayfaSayisi = Math.round(toplamLi / veriSayisi);

// sayıyı yuvarlayalım
// Sayfa linklerini ekleyelim
for (var i = 1; i <= sayfaSayisi; i++)
{
        $("#sayfalama").append('<a href="javascript:void(0)">' + i + '< /a>');
}

// İlk sayfaya aktif classı ekle
$("#sayfalama a:first").addClass("aktif");

// Sayfalama içindeki a'lardan birine tıklandığında
$(document.body).on("click", "#sayfalama a", function(){
    // indis değerini al (1 fazlası şeklinde)
    var indis = $(this).index() + 1;
    // toplam gözüken veri sayısını bul
    var gt = veriSayisi * indis;
    // aktif class işlemleri
    $("#sayfalama a").removeClass("aktif");
    $(this).addClass("aktif");
    // listedeki tüm lileri gizle
    $("ul#liste li").hide();
    // for ile toplam gözüken veri sayısı - veriSayisi işlemi yap ve veriSayisi kadarını göster
    for (i = gt - veriSayisi; i < gt; i++)
    {
        $("ul#liste li:eq(" + i + ")").show();
    }
});

On ikinci jQuery dersimizde aşağıdakileri öğrendik;
– jQuery Focus Metodu
– jQuery Clone Metodu
– jQuery Wrap Metodu

Focus Metodu Kullanımı

$("input[name=kelime]").focus();

Clone Metodu Kullanımı

var clone = $("#div").clone();
$("#div").after(clone);

Wrap Metodu Kullanımı

$(".deneme").wrap('<div class="erbilen1"></div>');

On birinci jQuery dersimizde aşağıdakileri öğrendik;
– jQuery html – text – val Metodları
– jQuery addClass – removeClass – toggleClass Metodları
– jQuery Prepend Metodu

Html Metodu Kullanımı

$("button.b1").click(function(e) {
   var deger = $("#div1").html();
   alert(deger);
});

Text Metodu Kullanımı

$("button.b2").click(function(e) {
   var deger = $("#div2").text();
   alert(deger);
});

Val Metodu Kullanımı

$("button.b3").click(function(e) {
   var deger = $("input[name=deger]").val(); 
   alert(deger);
});

addClass Metodu Kullanımı

$("button.b4").click(function(e) { $("#div3").addClass("erbilen2");});

removeClass Metodu Kullanımı

$("button.b5").click(function(e) {
   $("#div4").removeClass("erbilen2");
});

toggleClass Metodu Kullanımı

$("button.b6").click(function(e) { 
   $("#div5").toggleClass("erbilen2");
});

toggleClass Metodu Kullanımı

$("button.b7").click(function(e) {
   $("#div6").prepend("<button>Yeni Buton</button>");
});

Onuncu jQuery dersimizde aşağıdakileri öğrendik;
– jQuery serialize Metodu
– jQuery hasClass Metodu
– jQuery Change Metodu

Serialize Metodu Kullanımı

$("button").click(function(e) {
   var deger = $("form#form1").serialize();
    alert(deger);
});

hasClass Metodu Kullanımı

var sonuc = $("div").hasClass("erbilen");
if (sonuc){
   alert("Erbilen divi bulunuyor..");
}

Change Metodu Kullanımı

$("input[name=avatar]").change(function(e) {
   alert("resim seçildi");
});

Dokuzuncu jQuery dersimizde aşağıdaki örnek uygulamayı hazırladık;
– jQuery ile Tab Uygulaması

Yedinci jQuery dersimizde aşağıdakileri öğrendik;
– jQuery hover Metodu
– jQuery size – length Metodu
– jQuery fade Metodları
     * fadeOut
     * fadeIn
     * fadeTo
     * fadeToggle

Hover Metodunun Kullanımı

$("div.hover").hover(function(){
	$("div.diger").hide();
}, function(){
	$("div.diger").show();
});

Size Metodu Kullanımı

var toplamLi = $("ul li").size();
alert(toplamLi);

fadeOut Metodunun Kullanımı

$("button.b1").click(function() {
	$("div.div1").fadeOut(1000);
});

fadeIn Metodunun Kullanımı

$("button.b2").click(function() {
	$("div.div2").fadeIn();
});

fadeToggle Metodunun Kullanımı

$("button.b3").click(function() {
	$("div.div3").fadeToggle();
});

fadeToggle Metodunun Kullanımı

$("button.b4").click(function() {
	$("div.div4").fadeTo(2000, 0.3);
});

Altıncı jQuery Dersimizde aşağıdakileri öğrendik;
– jQuery remove Metodu
– jQuery toggle Metodu
– jQuery slide Metodları
     * slideUp
     * slideDown
     * slideToggle

Remove Metodunun Kullanımı

$("button#btn1").click(function(){
	$("div.div1").remove();
});

Toggle Metodunun Kullanımı

$("button#btn2").click(function(){
	$("div.div2").toggle();
});

slideUp Metodunun Kullanımı

$("button#btn3").click(function(){
	$("div.div3").slideUp();
});

slideDown Metodunun Kullanımı

$("button#btn4").click(function(){
	$("div.div4").slideDown(1000); // 1snde göster
});

slideToggle Metodunun Kullanımı

$("button#btn5").click(function(){
	$("div.div5").slideToggle();
});