[jQuery] 10 ciekawych tricków które warto znać
This post is 16 years old. Browsers and tools may have changed since then, so check the code against current documentation before you use it.
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.
-
Section 1Blokada prawego przycisku myszy
Example 1JavaScript $(document).ready(function(){ $(document).bind("contextmenu",function(e){ return false; }); });
-
Section 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.
Example 2JavaScript $(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"; }); });
-
Section 3Wykrywanie przeglądarki
Example 3JavaScript $(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){ } });
-
Section 4Zmiana rozmiaru czcionki
Example 4JavaScript $(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; }); });
-
Section 5Sprawdzenie czy element jest pusty
Example 5JavaScript $(document).ready(function() { if ($('#id').html()) { // jakiś kod } });
-
Section 6Zastępowanie elementu innym
Example 6JavaScript $(document).ready(function() { $('#id').replaceWith('element zastępujący'); });
-
Section 7Klikalny div jak link
Example 7JavaScript $(document).ready(function() { $("div").click(function(){ //pobieranie adresu z atrybutu href danego linka window.location=$(this).find("a").attr("href"); return false; }); });
-
Section 8Zmiana klas elementu zależnie od szerokości okna przeglądarki
Example 8JavaScript $(document).ready(function() { function sprawdzRozmiarOkna() { if ( $(window).width() > 1200 ) { $('body').addClass('duzy'); } else { $('body').removeClass('duzy'); } } $(window).resize(sprawdzRozmiarOkna); });
-
Section 9Blokowanie animacji jQuery
Example 9JavaScript $(document).ready(function() { jQuery.fx.off = true; });
-
Section 10Tryb bezkonfliktowy jQuery
Dzięki temu można korzystać z innych bibliotek JavaScript bez obawy o konflikt między nimi.
Example 10JavaScript $(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.
About the author
