Jquerynin kullanım lanalarını çok geniş olduğunu, günümüzde neredeyse tüm websitelerinde görsellik açısından bu kütüphanenin kullanıldığını biliyoruz. Bu makalemizde kod öbekleri vererek bunlarla neler yapabileceğimizi göreceğiz.

Linkleri yeni pencerede açmak

Gerekli kod

$('a[@rel$='external']').click(function(){
  this.target = "_blank";
});

Kullanım şekli

<a href="http://www.lepinskidesign.com.br/" rel="external">lepinskidesign.com.br</a>

gördüğünüz gibi rel=”external” olan tüm linkleri yeni encerede açtırıyor.

image preload (başka resim çağırma)

bu özellik ile normalde hover olarak kullandığımız resmin üzerine gelindiğinde başka bir resim gösterme olayını jquery ile basitçe yapıyoruz.

Gerekli kod

jQuery.preloadImages = function()
{
  for(var i = 0; i").attr("src", arguments[i]);
  }
};

kullanım şekli

$.preloadImages("image1.gif", "/path/to/image2.png", "some/image3.jpg");

Tarayıcı tespit etme

ziyaretçinin tarayıcısını tespit ederek yazı fontu vb elementleri dağiştirebilir.

//A. Target Safari
if( $.browser.safari ) $("#menu li a").css("padding", "1em 1.2em" );
//B. Target anything above IE6
if ($.browser.msie && $.browser.version > 6 ) $("#menu li a").css("padding", "1em 1.8em" );
//C. Target IE6 and below
if ($.browser.msie && $.browser.version <= 6 ) $("#menu li a").css("padding", "1em 1.8em" );
//D. Target Firefox 2 and above
if ($.browser.mozilla && $.browser.version >= "1.8" ) $("#menu li a").css("padding", "1em 1.8em" );

yazı boyutu değiştirme

$(document).ready(function(){
  // Reset Font Size
  var originalFontSize = $('html').css('font-size');
    $(".resetFont").click(function(){
    $('html').css('font-size', originalFontSize);
  });
  // Increase Font Size
  $(".increaseFont").click(function(){
    var currentFontSize = $('html').css('font-size');
    var currentFontSizeNum = parseFloat(currentFontSize, 10);
    var newFontSize = currentFontSizeNum*1.2;
    $('html').css('font-size', newFontSize);
    return false;
  });
  // Decrease Font Size
  $(".decreaseFont").click(function(){
    var currentFontSize = $('html').css('font-size');
    var currentFontSizeNum = parseFloat(currentFontSize, 10);
    var newFontSize = currentFontSizeNum*0.8;
    $('html').css('font-size', newFontSize);
    return false;
  });
});

Makale için yapılan aramalar

• jquery increasing fontsize