{"id":88,"date":"2007-01-21T13:46:10","date_gmt":"2007-01-21T12:46:10","guid":{"rendered":"http:\/\/eriz.pc-inside.org\/weblog\/tworzymy-wlasny-sidebar-widzety-i-hover-w-ie-88.html"},"modified":"2007-04-23T15:02:17","modified_gmt":"2007-04-23T14:02:17","slug":"tworzymy-wlasny-sidebar-widzety-i-hover-w-ie","status":"publish","type":"post","link":"https:\/\/eriz.pcinside.pl\/weblog\/tworzymy-wlasny-sidebar-widzety-i-hover-w-ie-88.html","title":{"rendered":"Tworzymy w\u0142asny sidebar – „wid\u017cety” i :hover w IE"},"content":{"rendered":"

Jak zapewne zauwa\u017cyli\u015bcie, m\u00f3j sidebar w ko\u0144cu przeszed\u0142 pewn\u0105 metamorfoz\u0119. Zgodnie z tym, co sobie obieca\u0142em<\/a> zmieni\u0142em go, bo by\u0142 „niedopracowany”. Teraz postanowi\u0142em go „u\u0142ebodwazerowa\u0107” i podzieli\u0142em go na jakby wid\u017cety – s\u0105 one raczej klasyczne. Dodatkowymi s\u0105: kalendarz, najnowsze wpisy, losowe wpisy. Co do samej postaci list z linkami – \u017ceby nie straci\u0142y na zawarto\u015bci i aby nie zajmowa\u0142y tyle miejsca, to postanowi\u0142em opisy pokazywa\u0107 dopiero po wskazaniu mysz\u0105 linka.<\/p>\n

Teraz opisz\u0119 jak utworzy\u0107 ka\u017cdy z takich widget\u00f3w u siebie.<\/p>\n

Najpierw troch\u0119 teorii.<\/p>\n

Wszystkie opisy, kt\u00f3re pokazuj\u0105 si\u0119 po wskazaniu mysz\u0105 na link s\u0105 oparte na pseudoklasie :hover<\/em>. Wszystko by by\u0142o OK, gdyby nie jeden problem: IE. Nie wiem, jak to jest w si\u00f3demce, ale we wszystkich pozosta\u0142ych na u\u017cycie :hover<\/em> bez jakichkolwiek hack\u00f3w przegl\u0105darka zezwala tylko dla elementu <a><\/strong>. Nie ma sensu pcha\u0107 osobnego skryptu tylko po to, aby pod IE si\u0119 m\u00f3g\u0142 opis pojawia\u0107. Owszem, mo\u017cna by by\u0142o wszystko wcisn\u0105\u0107 link, ale specyfikacja XHTML nie zezwala na umieszczanie link\u00f3w w linkach. Poza tym, inne obiekty niepotrzebnie by zmienia\u0142y wygl\u0105d. IE obs\u0142uguje technologi\u0119 zwan\u0105 behaviours<\/a>. Wykorzysta\u0142 to autor whatever:hover<\/a>, kt\u00f3ra pozwala na „normalne” u\u017cywanie pseudoklas :hover<\/em> czy :focus<\/em> we wszystkich elementach. Ma tylko jedn\u0105 wad\u0119 – nie mo\u017cemy ich u\u017cy\u0107 w dynamicznie tworzonych obiektach (np. poprzez AJAX).<\/p>\n

<\/p>\n

Aby uaktywni\u0107 csshover w IE:<\/p>\n

    \n
  1. \n

    Skopiuj plik csshover.htc<\/em> do jakiego\u015b katalogu. WXP od wersji z Service Packiem 2 wymaga r\u00f3wnie\u017c, aby serwer wysy\u0142aj\u0105cy plik ustawia\u0142 kodowanie na text\/x-component htc<\/em>. Je\u015bli Tw\u00f3j dziennik stoi na serwerze obs\u0142ugiwanym przez Apache, to utw\u00f3rz plik .htaccess<\/em> w katalogu z csshover i wpisz:<\/p>\n

    AddEncoding text\/x-component htc<\/code><\/p>\n

    Wolna linijka na ko\u0144cu .htaccess<\/em> jest niezb\u0119dna.<\/p>\n

    Mo\u017ce si\u0119 r\u00f3wnie\u017c zdarzy\u0107, \u017ce nie ma mo\u017cliwo\u015bci skorzystania z .htaccess<\/em> lub dziennik posiadamy na serwerze innym ni\u017c Apache. W\u00f3wczas zmieniamy nazw\u0119 csshover.htc<\/em> na csshover.php<\/em> i na jego pocz\u0105tku dodajemy:<\/p>\n

    <\/code>\n<\/li>\n

  2. W sekcji <head><\/strong> dopiszemy komentarz warunkowy<\/a>:
    \n<\/code>
    \nW zale\u017cno\u015bci od potrzeb zmieniamy \u015bcie\u017ck\u0119 do pliku albo rozszerzenie.\n<\/li>\n<\/ol>\n

    To tyle je\u015bli chodzi o obs\u0142ug\u0119 przez przegl\u0105darki, teraz przejd\u0119 do opisu wykonania poszczeg\u00f3lnych wstawek:<\/p>\n

    Znowu troch\u0119 teorii<\/h3>\n

    WordPress standardowo udost\u0119pnia nam pewien wachlarz funkcji<\/a>, kt\u00f3re mo\u017cemy wykorzysta\u0107 w swoim szablonie. W naszym wypadku oka\u017c\u0105 si\u0119 one po prostu… niewystarczaj\u0105ce. Tak, dobrze napisa\u0142em. Oryginalne funkcje narzucaj\u0105 nam jeden ustalony schemat np. list z linkami, kt\u00f3ry mo\u017cemy co najwy\u017cej oddzieli\u0107 jednym tagiem. Ale co w sytuacji, gdy chcemy zrobi\u0107 co\u015b wi\u0119cej? W\u0142a\u015bnie, niezbyt wiele. Mamy jednak mo\u017cliwo\u015b\u0107 wykorzystania w\u0142asnych skrypt\u00f3w PHP w szablonach. I w\u0142a\u015bnie z tego skorzystamy. \";)\"<\/p>\n

    Wi\u0119kszo\u015b\u0107 kodu (zapytania SQL), to skopiowane kawa\u0142ki oryginalnych funkcji WordPressa.<\/p>\n

    Kalendarz<\/h3>\n

    Tu nie ma si\u0119 za bardzo nad czym rozwodzi\u0107. Zreszt\u0105, kod produkowany przez WordPress jest dobrze dopracowany i odpowiednio skonstruowanym CSS-em mo\u017cna z nim zrobi\u0107 praktycznie wszystko. Co trzeba do kalendarza? Ano, tylko tyle: \":P\"<\/p>\n

    <\/code><\/p>\n

    Liczba w parametrze funkcji okre\u015bla ilo\u015b\u0107 znak\u00f3w, kt\u00f3ra b\u0119dzie wy\u015bwietlana w nag\u0142\u00f3wkach tabeli przy dniach tygodnia (np. 1 – „w”, 2 – „wt”).<\/p>\n

    Blogroll\/w\u0142asne linki, itp.<\/h3>\n

    Tu sytuacja b\u0119dzie troszk\u0119 bardziej skomplikowana, ale niekoniecznie. Po prostu b\u0119dzie wi\u0119cej PHP.<\/p>\n

    <\/p>\n