Poznámky k jQuery

Vydáno: 21.06.09 Kategorie:

Doplňující selector pro $(this) (např. v pluginu, kde je potřeba vybrat jen prvek s učitou třídou apod.)

$($(this),'.ui-sortable'); //vybere ty které mají navíc třídu .ui-sortable
$(this).find("#" + itemID); //najde  pouze to, co má nastaveno určité ID

if($("#taglist").length) {..} //pokud existuje element s id: taglist

$("button", this).hide(); //schovej button který se nachází v označeném prvku this

Události v jquery

// Vícenásobná událost (hover, nebo focus)
        $(".atrakce").live('hover focus',
                function () {
                        $(this).addClass("active").corner("round 5px");
                        Cufon.replace($("h2 a", this));
                }
        );
//Událost (blur nebo mouseleave)
        $(".atrakce").live('blur mouseleave',
        function () {
                        $(this).removeClass("active").uncorner();
                        Cufon.replace($("h2 a", this), {color: '#39474D' });
                }
        );

Stylování designových prvků

Nastylování uspořádaného seznamu (ol – li)

Např. budu chtít, aby čísla v seznamu (která se automaticky vytváří v ol seznamech) měli jinou barvu než text v odrážce). Teoreticky mohu nastavit barvu pro ol > li a text obalit nějakým prvkem, kterému mohu poté nastavit barvu jinou, ale pokud budu chtít pod číslo dát např. pozadí, již to nebude tak jednoduché. V jquery to jde snadno:

$("ol.pocitadlo li").addClass("j_styled");
$("ol.pocitadlo li").each(function (i) {
  i = i+1;
  $(this).prepend('<span class="listnumber">' + i + '</span>');
 });

Nejprve si ke seznamu přidám třídu j_styled, podle které poznám, že na ní byl aplikován javascript. (V css si tak např. zruším automatické očíslování (list-style:none), margin zleva a místo něj dám padding zleva).
Následně se projdou všechny položky seznamu a očíslují se fyzicky. Tzn. do každého li bude na začátku vložen span se třídou listnumber a číslo podle pořadí. A s tím si už v CSS každý jistě poradí dle potřeby.

Drobečky: Weblog » jQuery » Poznámky k jQuery

Komentáře

  1. jitka.palanova · 11 11 2009 - 20:36

    # 1

    Ahojky!!



Přidat komentář








Formát Texy