kminek.pl

Sflaczers – czyli moje podejście do tematu widgetu Flakera Grzegorz Wójcik

26 May, 2009  |  Artykuły, JavaScript

Dla niezorientowanych – [1] flaker.pl to popularny w niektórych kręgach (zwłaszcza tzw. [2] geeków i [3] nerdów) serwis na modłę Twittera. Taki mikro-blog i agregator RSS w jednym. Sflaczers to prosty skrypt działający w oparciu o [4] jQuery, który jest efektem mojej zabawy z API flaker.pl i który z powodzeniem może być stosowany na blogach i innych stronach jako zamiennik ich domyślnego widgetu (który jest nader ograniczony IMHO).

Główne zalety Sflaczersa:

Demo

Skrypt w działaniu (wraz z przykładowym kodem CSS) można [5] zobaczyć tutaj.

Instalacja

  1. [6] Pobierz plik sflaczers.js i bibliotekę jQuery. Dołącz skrypty na swojej stronie w sekcji <head>:
  1. <head>
  2. <script type="text/javascript" src="jquery.js"></script>
  3. <script type="text/javascript" src="sflaczers.js"></script>
  4. </head>

Wskazówka: jQuery możesz podlinkować bezpośrednio z serwerów Google w ten sposob:

  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  1. W kodzie HTML strony, w miejscu gdzie ma pojawić się widget, umieść pusty element <div> i nadaj mu jakieś id:
  1. <body>
  2. <div id="flaker"></div>
  3. </body>
  1. Uruchom Sflaczersa – możesz to zrobic umieszczając następujący kod bezpośrednio pod divem z drugiego punktu:
  1. <script type="text/javascript">
  2. var sflaczers1 = new Sflaczers({
  3. id: 'flaker', //id diva z drugiego punktu
  4. login: 'jankowalski' //twój login na flaker.pl
  5. });
  6. </script>

Wskazówka: jeśli wrzucanie kodu JS w kod HTML strony mąci Twoje poczucie estetyki, możesz podpiąć powyższy kod pod event DOM ready w jQuery:

  1. $(document).ready(function () {
  2. var sflaczers1 = new Sflaczers({id: 'flaker', login: 'jankowalski'});
  3. });
  1. W tym momencie Sflaczers powinien już działać. Pozostaje tylko dostosować wygląd widgetu za pomocą CSS. Poniżej zaprezentowany jest dynamicznie generowany kod HTML widgetu wraz z klasami CSS:
  1. <div id="flaker">
  2.  
  3. <div class="sflaczers-nav">
  4. <a href="#" class="sflaczers-nav-newest">« Nowsze wpisy</a>
  5. <a href="#" class="sflaczers-nav-oldest">Starsze wpisy »</a>
  6. </div>
  7.  
  8. <ul class="sflaczers-entries">
  9. <li class="sflaczers-entries-li">
  10.  
  11. <a class="sflaczers-author-link">Jan Kowalski</a> <a class="sflaczers-source">(flaker)</a>:
  12.  
  13. Tekst wpisu... <a class="sflaczers-comments-link">komentarze (1)</a>
  14.  
  15. <ol class="sflaczers-comments">
  16. <li class="sflaczers-comments-li"><a class="sflaczers-commenter-link">Pan Komentarz</a>: tekst komentarza...</li>
  17. </ol>
  18.  
  19. </li>
  20. </ul>
  21.  
  22. </div>

Pozostałe opcje

Parametr limit pozwala określić liczbę wyświetlanych wpisów:

  1. <script type="text/javascript">
  2. var sflaczers1 = new Sflaczers({
  3. id: 'flaker',
  4. login: 'jankowalski',
  5. limit: 5 //pokaż 5 wpisów
  6. });
  7. </script>

Parametr avatars aktywuje wyświetlanie avatarów (1 sposób):

  1. <script type="text/javascript">
  2. var sflaczers1 = new Sflaczers({
  3. id: 'flaker',
  4. login: 'jankowalski',
  5. limit: 5,
  6. avatars: true //pokaż avatary
  7. });
  8. </script>

Avatary mają swoje klasy CSS i umieszczane są w elementach listy w następujący sposób (dla wpisów i komentarzy):

  1. <li class="sflaczers-entries-li"><img src="avatar.jpg" class="sflaczers-author-avatar">...
  2. <li class="sflaczers-comments-li"><img src="avatar.jpg" class="sflaczers-commenter-avatar">...

Alternatywnie, za pomocą parametru cssavatars, avatary mogą być „wypluwane” jako obrazki tła CSS w elementach listy (2 sposób):

  1. <script type="text/javascript">
  2. var sflaczers1 = new Sflaczers({
  3. id: 'flaker',
  4. login: 'jankowalski',
  5. limit: 5,
  6. cssavatars: true //pokaż avatary jako obrazki tła elementów <li>
  7. });
  8. </script>
  1. <li style="background-image: url(avatar.jpg); background-repeat: no-repeat; background-position: 0pt 0pt;" class="sflaczers-entries-li"><a class="sflaczers-author-link">Jan Kowalski</a>...
  2. <li style="background-image: url(avatar.jpg); background-repeat: no-repeat; background-position: 0pt 0pt;" class="sflaczers-comments-li"><a class="sflaczers-commenter-link">Pan Komentarz</a>

Pobierz

-----

Wydrukowano z: https://www.kminek.pl/sflaczers/

Lista adresów URL występujących w tekście:

© 2007-2019 kminek.pl