search check home clock-o tag tags chevron-left chevron-right chevron-up chevron-down twitter facebook github rss comment comments terminal code

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

[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.

  • Odnośnie trybu bezkonfliktowego to w dokumentacji jQuery jest tak:
    var $j = jQuery.noConflict();

    $j(document).ready(function(){
    $j(„div”).hide();
    });

    Czyli definiujemy argument przed $(document)

  • Piotr

    Fajne tricki, przyda się 🙂