10 tricków w jQuery



Na dzisiaj przygotowałam kilka ciekawych tricków, które na pewno będą pomocne przy tworzeniu stron www i pomogą uniknąć zbędnych problemów. Zapraszam poniżej.

Blokada prawego przycisku myszy

$(document).ready(function(){
    $(document).bind("contextmenu",function(e){
        return false;
    });
});

Otwórz w nowym oknie

$(document).ready(function() {
   //Przykład 1: Każdy link się otworzy w nowym oknie
   $('a[href^="http://"]').attr("target", "_blank");

   //Przykład 2: Linki z atrybutem rel="external" będą się
                 otwierały w nowym oknie
   $('a[@rel$='external']').click(function(){
      this.target = "_blank";
   });
});

Wykrywanie przeglądarki użytkownika

$(document).ready(function() {
// Firefox 2 i wyżej
if ($.browser.mozilla && $.browser.version >= "1.8" ){

}

// Safari
if( $.browser.safari ){

}

// Google Chrome
if( $.browser.chrome){

}

// Opera
if( $.browser.opera){

}

// IE6 i starsze
if ($.browser.msie && $.browser.version < = 6 ){

}

// IE7/IE8
if ($.browser.msie && $.browser.version > 6){

}
});

Zmiana rozmiaru czcionki

$(document).ready(function() {
  // Restowanie rozmiaru, defaultowy rozmiar
  var oryginalnyRozmiar = $('html').css('font-size');
    $(".resetFont").click(function(){
    $('html').css('font-size', oryginalnyRozmiar);
  });
  // Powiększanie czcionki
  $(".powiekszRozmiar").click(function(){
    var obecnyRozmiar = $('html').css('font-size');
    var obecnyRozmiarNum = parseFloat(obecnyRozmiar, 10);
    var nowyRozmiar = obecnyRozmiarNum*1.2;
    $('html').css('font-size', nowyRozmiar);
    return false;
  });
  // Zmniejsz rozmiar czcionki
  $(".decreaseFont").click(function(){
    var obecnyRozmiar = $('html').css('font-size');
    var obecnyRozmiarNum = parseFloat(obecnyRozmiar, 10);
    var nowyRozmiar = obecnyRozmiarNum*0.8;
    $('html').css('font-size', nowyRozmiar);
    return false;
  });
});

Sprawdzenie czy element jest pusty

$(document).ready(function() {
  if ($('#id').html()) {
   // jakiś kod
   }
});

Zastępowanie elementu innym

$(document).ready(function() {
   $('#id').replaceWith('element zastępujący');
});

Klikalny div jak link

$(document).ready(function() {
  $("div").click(function(){
  //pobieranie adresu z atrybutu href danego linka
  window.location=$(this).find("a").attr("href"); return false;
	});
});

Zmiana klas elementu zależnie od szerokości okna przeglądarki

$(document).ready(function() {
   function sprawdzRozmiarOkna() {
	if ( $(window).width() > 1200 ) {
		$('body').addClass('duzy');
	}
	else {
		$('body').removeClass('duzy');
	}
   }
$(window).resize(sprawdzRozmiarOkna);
});

Blokowanie animacji jQuery

$(document).ready(function() {
    jQuery.fx.off = true;
});

Tryb bezkonfliktowy w jQuery

Dzięki temu można korzystać z innych bibliotek JavaScript bez obawy o konflikt między nimi.

$(document).ready(function() {
   var $jq = jQuery.noConflict();
   $jq('#id').show();
});

POWODZENIA!