Kategori: jQuery

On yedinci jQuery dersimizde aşağıdakini öğrendik;
– jQuery ile Slider Uygulaması

Örnek Uygulamayı İndirin;
http://yadi.sk/d/Dh3Ir7rA21J1h

On altıncı jQuery dersimizde aşağıdakileri öğrendik;
– jQuery Error Metodu
– jQuery One Metodu
– jQuery Submit Metodu

Error Metodu Kullanımı

$("img").error(function(){
$(this).attr("src","http://www.uzmancevap.org/lib/theme/v1/images/noavatar_erkek.gif");
});

One Metodu Kullanımı

$("button").one("click", function(){
	$("span").toggle();
});

Submit Metodu Kullanımı

$("#deneme").click(function(){
	$("form").submit(function(){
		var deger = $("input[name=deneme]").val();
		if (deger == '') {
			alert("değer boş");
			return false
		}
		return true;
	}).submit();
});

Kaynak Dosyayı İndirin;
https://docs.google.com/open?id=0BxX-AwfGLF5vMkphbTRwOFlWQzg

Merhaba arkadaşlar, bugün sizlerle jquery ile hazırladığım basit font eklentisini paylaşacağım.. Bu eklenti ile kolay bir şekilde belli bir nesne ya da nesnelerde font değerlerini büyültüp küçültebilirsiniz.. Max ve min değerlerini belirleyebilirsiniz..

Eklenti için kullanabileceğiniz parametreler;
artir : Artırmak için hangi nesneyi kullanacaksanız o nesneyi bu parametreye atayın..
azalt : Azaltmak için hangi nesneyi kullanacaksanız o nesneyi bu parametreye atayın..
orjinal : Orjinaline döndürmek için hangi nesneyi kullanacaksanız o nesneyi bu parametreye atayın.. (isteğe bağlı)
min : Minimum kaç font azalacağını belirleyin.
max : Maksimum kaç font artacağını belirleyin.
alert_max : Maksimum sınır aşıldığında kullanıcıya alert ile bilgi verdirmek isterseniz bu parametreye mesajı yazın.
alert_min : Minimum sınıra ulaşıldığında kullanıcıya alert ile bilgi verdirmek isterseniz bu parametreye mesajı yazın.
standart : Standart fontun değerini belirleyebilirsiniz.. (Eğer css’de belirlemişseniz buna gerek yok)

Kullaımı;
jQuery ve eklenti dosyasını sayfanıza çağırıp ready işlemi yaptıktan sonra uygulamak istediğiniz nesneyi ya da nesneleri seçip aşağıdaki gibi parametreler girerek işleminizi yapabilirsiniz;

$(".nesne, h1, h2").pFont({
	artir: 'a.fontArtir',
	azalt: 'a.fontAzalt',
	orjinal: 'a.fontOrj',
	min: 10,
	max: 30,
	alert_max: 'Sınırı aştınız',
	alert_min: 'Minimuma ulaştınız'
});

İndirin;
http://yadi.sk/d/lGdbc1U_19q14

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");
});