Dziudek's jogger

Przypomniałem sobie ostatnio o pewnym gadżecie jaki mają do dyspozycji przeglądarki, a który jest bardzo przydatny gdy na przykład zapisujemy stronę - chodzi mi o designMode. designMode umożliwia edytowanie zawartości dokumentu, a co za tym idzie gdy chcemy zapisać stronę to możemy np. zostawić tylko interesujące nas elementy ;) Zresztą sami zobaczcie - wpiszcie w pasek adresu przeglądarki poniższy kod JavaScript:

javascript:document.body.contentEditable = 'true'; document.designMode='on'; void 0

Po zatwierdzeniu adresu można edytować sobie treść strony. Według mnie najlepszy edytor ma Firefox, Internet Explorer też ma całkiem dobry, natomiast Opera wypada tutaj najgorzej bo nie można nawet zmienić rozmiaru obrazka. Ogólnie bardzo przydatny bajer dla tych, którzy tworzą edytory WYSIWYG na strony i jak już wcześniej wspominałem - zapisują strony na dysk - można wtedy dodać sobie jakiś komentarz tam gdzie potrzeba i wyrzucić niepotrzebne elementy ;)

Jeszcze mała ciekawostka jaką wykryłem przy swoich zabawach z designMode - Firefox ma z nim pewne problemy, a dokładniej nie z samym designMode co z działaniem po jego użyciu ;) Gdy po wyedytowaniu strony przeszedłem sobie na Google to zaczęły się dziać cuda ;) Po kliknięciu przycisku szukania zobaczyłem takie coś:

Dodatkowo zauważyłem, że nie można aktywować niektórych pól tekstowych :O Właśnie najciekawsze jest to, że niektórych - w panelu administracyjnym WordPressa nie mogłem aktywować żadnego pola od dodawania wpisu - tytuł, treść czy nowa kategoria - ale już pola od wysyłania pliku na serwer działały. Ciekawe zjawisko - na szczęście restart ognistego liska pomógł ;)

Gdy już dodamy do naszej strony różne efekty, na przykład bazujące na bibliotece moo.fx to nagle zauważymy, że nasz kod jest bardzo bogaty we wszelkiego rodzaju zdarzenia "onclick", "onmouseover", "onload" itd. Im więcej efektów, tym więcej tego rodzaju zdarzeń. Powiedzmy sobie szczerze - chyba każdy by chciał aby można było trzymać kod JavaScript całkowicie oddzielony od kodu (X)HTML swojej strony ? I tu z pomocą przyjdzie nam klasa Behaviour , który pozwoli nam na dołączanie zdarzeń do elementów bez ingerowania w kod dokumentu :) Pozwolę sobie krótko wyjaśnić jak to cudo (a właściwie cudeńko bo waży zaledwie 7.95kB, a po skompresowaniu nawet niecałe 3-4 kB) działa ;)

Czytaj dalej...

• moo.fx - wstęp
• moo.fx.js
  • Fx.Base
  • Fx.Style
  • Fx.Styles
• moo.fx.transitions.js
• moo.fx.pack.js
  • Fx.Scroll
  • Fx.Color
• moo.fx.utils.js
• accordion.js

Właśnie skończyłem dodawanie elementów kursu moo.fx do bloga :) Cała biblioteka jest moim zdaniem warta bliższej uwagi, a jednocześnie chciałbym zobaczyć czy taki opis przypadnie Wam do gustu, bo nie ukrywam, że to ma być dopiero początek. W planach mam także opisanie innych bibliotek - moo.fx poszło na pierwszy rzut ponieważ jest małą biblioteką, a jednocześnie dającą ogromne możliwości :) Parę spraw dotyczących kursu - jeżeli ktoś ma jakieś propozycje, komentarze dotyczące całego kursu, to prosiłbym o ich umieszczanie w komentarzach do tego wpisu, albo do spisu treści całego kursu ;) Natomiast uwagi dotyczące poszczególnych części prosiłbym zamieszczać w komentarzach do poszczególnych działów kursu :)

Życzę miłej lektury kursu moo.fx i z góry dziękuję za wszystkie opinie, uwagi i propozycje ;)

accordion.js to ostatni plik wchodzący w skład biblioteki moo.fx , oferujący jednocześnie chyba najbardziej nas interesujący efekt – możliwość operowania na grupie elementów.

Czytaj dalej...