chevron-left chevron-right

[jQuery] 10 ciekawych tricków które warto znać

W dzisiejszym artykule mam zamiar przedstawić Tobie 10 ciekawych, przydatnych tricków, które powinien znać każdy webmaster, a dzięki którym rozwiązanie wielu problemów w trakcie budowania stron WWW będzie łatwiejszych do rozwiązania.
Do zbudowania części tricków wykorzystałem najnowszą wersję biblioteki jQuery oznaczonej numerkiem 1.4.2. Dlatego też, warto się w nią zaopatrzyć przed dodaniem przedstawionych skryptów do swojego projektu.

  1. Blokada prawego przycisku myszy

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

  2. Otwieranie linków w nowym oknie

    Jeśli korzystacie z XHTML 1.0 Strict to zauważyliście, że nie pozwala on na dodawanie atrybutu target do linków w przypadku gdy strona ma być poprawnie zwalidowana.

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

  3. Wykrywanie przeglądarki

    $(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){
 
}
});

  4. 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;
  });
});

  5. Sprawdzenie czy element jest pusty

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

  6. Zastępowanie elementu innym

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

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

  8. 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);
});

  9. Blokowanie animacji jQuery

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

  10. Tryb bezkonfliktowy 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();
});

Mam nadzieję, że to zestawienie ciekawych kodów pomoże Ci w tworzeniu ciekawych stron WWW unikając zbędnych problemów.