[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. Sekcja 1Blokada prawego przycisku myszy

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

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

2. Sekcja 2Otwieranie 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"; }); });

   $(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. Sekcja 3Wykrywanie 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){   } });

   $(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. Sekcja 4Zmiana 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; }); });

   $(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. Sekcja 5Sprawdzenie czy element jest pusty

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

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

6. Sekcja 6Zastępowanie elementu innym

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

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

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

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

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

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

9. Sekcja 9Blokowanie animacji jQuery

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

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

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

    $(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.