Kategoria: Programowanie

3 funkcje jQuery, które wykorzystuje w każdym projekcie

JQuery stało się już dla mnie naturalnym elementem każdego serwisu. Nie pamiętam projektu w którym nie wykorzystywałbym tej genialnej biblioteki JavaScript. Poniżej chciałem pokazać kilka funkcji i elementów biblioteki, które znajdują się w każdym moim projekcie i jednocześnie zachęcam do dzielenia się swoimi kawałkami kodu, które najczęściej wspomagają wasz projekt.

Naprzemienne kolorowanie wierszy w tabelach

Zmienne kolory wierszy w tabeli znacząco wpływa na jej czytelność, a dzięki wykorzystaniu jQuery i CSS są one obecnie niezwykle łatwo osiągalne. Wystarczy w swoim projekcie zamieścić poniższą linijkę kodu:

$("tr:even").addClass("even");

Dodaje ona, do co drugiego wiersza tabeli, klase even. Wystarczy teraz w stylach CSS ustawić np:

table tr.even {background-color: #eee;}

i nasza tabela będzie prezentowała się znacznie lepiej i co najważniejsze o wiele łatwiejsza przy przeglądaniu ich wartości.

Czytaj dalej...

Klikalna mapa europy w HTML

W tej krótkiej notce chciałbym zwrócić uwagę na bardzo ciekawe rozwiązanie klikalnej mapy Europy i Polski bez wykorzystywania technologii flash. Tym chętniej o tym informuje, iż jest to rodzimy produkt stworzony przez Łukasza Popardowskiego (Winston Wolf). Do dyspozycji mamy:

Cała mapa jest wykonana w html i css przy użyciu jQuery i jednego obrazka png. Mapa udostępniona jest na licencji Creative Commons: Attribution-Share Alike 3.0 License co umożliwia jej stosowanie zarówno w prywatnych jak i komercyjnych projektach.

Czytaj dalej...

Piszemy prosty plugin TinyMCE – wstawianie kodu

TinyMCE jest jednym z najpopularniejszych i największych edytorów WYSIWYG stosowanych w systemach zarządzania treścią. Mimo swoich ogromnych możliwości, z czasem może zabraknąć nam pewnej funkcjonalności, która znacznie poprawiałaby pracę z naszym systemem. Dobrym przykładem takiego rozwiązania, jest menadżer obrazków. Możemy wybrać płatny plugin stworzony przez twórców TinyMCE, skorzystać z jednego udostępnionego przez innych użytkowników, lub napisać własny i dostosować do indywidualnych potrzeb. Menadżer obrazków, może być trochę zbyt skomplikowanym przykładem dla osób zaczynających przygodę z TinyMCE, dlatego postanowiłem pokazać podstawy tworzenia pluginów na bardzo prostym przykładzie: wyświetlanie kodu w naszych artykułach.

Przygotowanie plików i folderów

Wychodzę z założenia, że jeżeli chcesz napisać plugin do TinyMCE, to edytor jest zainstalowany i podpięty do swojej strony. W katalogu tiny_mce/plugins tworzymy katalog insertcode i przegrajmy do niego zawartość katalogu example.

W katalogu mamy następujące pliki i foldery:

  • katalog img – opcjonalny folder na pliki graficzne, w nim będziemy przechowywać ikonę naszego pluginu
  • katalog js – może zawierać pliki z naszymi skryptami, w przypadku skomplikowanych skryptów warto logikę działania skryptu zamieścić w osobnym pliku, ale ponieważ nasz przykład jest bardzo prosty, cały skrypt będzie zamieszczony w pliku dialog.html
  • katalog lang – zawiera wersje językowe dla naszego pluginu – opcjonalny.
  • plik dialog.html – plik w którym będzie strona otwierana przez nasz plugin, tutaj umieszcza się różnego rodzaje formularze, listy wyboru, przyciski itp.
  • pliki editor_plugin_src.js i editor_plugin.js – pliki odpowiedzialne za inicjacje wtyczki, istotny jest tylko plik editor_plugin.js, który powinien zawierać skompresowaną zawartość pliku źródłowego (editor_plugin_src.js), ja proponuje przenieść zawartość pliku z źródłem do editor_plugin.js.
Czytaj dalej...

Method Chaining w PHP

Chciałbym poświęcić chwilę bardzo ciekawej technice programowania, która z nie wiadomych dla mnie względów jest często nie doceniana i pomijana przy projektowaniu klas. Już na samym wstępie powinienem zaznaczyć, że ta technika nie jest konieczna do prawidłowego działania programu, jej głównymi zaletami jest zwiększenie czytelności kodu i częściowe jego skrócenie. Warto też wiedzieć, że Method chaining jest jedną z implementacji wzorca Fluent interface, zainteresowanych po więcej informacji na ten temat odsyłam do Wikipedii.

Implementacja, czyli return $this

Ponieważ, zagadnienie jest stosunkowo proste od razu przejdę do krótkiego przykładu przedstawiającego zastosowanie tej techniki. Według mnie naturalnym przykładem jest klasa obsługująca maile:

Czytaj dalej...

Skróty artykułów w systemach zarządzania treścią

Niejednokrotnie pisząc aplikację internetową spotykamy się z problemem wstępów do artykułów, wpisów na blogach czy aktualności, których pełna treść ukazuje się dopiero po kliknięciu w odpowiedni link. Chciałbym poświęcić chwile na przedstawienie trzech, prostych w implementacji sposobów, dzięki którym otrzymamy możliwość tworzenia takich skrótów zawartości naszej strony.

Pole skrótu w bazie

Jest to chyba najprostsze rozwiązanie, które sprowadza się do stworzenia dodatkowego pola w bazie danych, w którym będzie przechowywana skrócona wersja treści. Dzięki temu na stronie z listą artykułów, czy newsów pobieramy z bazy tylko wartość pola, w którym przechowujemy krótką wersję (np. introtext), a gdy chcemy wyświetlić szczegółową informacje to pobieramy dane z drugiego pola (fulltext).

Artykuły w bazie

Zalety:

  • łatwa implementacja, skrót artykułu otrzymujemy natychmiast bez dodatkowych ingerencji w zapytanie SQL
  • skrót nie musi zawierać fragmentu tekstu pełnego, oba pola mogą zawierać niezależną od siebie treść.

Wady:

  • powstaje kolejne pole w panelu administracyjnym do wypełnienia, często będące kilkoma akapitami tekstu pełnego.

Pierwsze n znaków

Jest to również bardzo prosta metoda, której podstawową zaletą jest całkowita automatyzacja tworzonego skrótu tekstu. Właścicielowi serwisu pozostaje tylko ustawienie do ilu znaków chciałby ograniczyć skrót. Implementacja takiego rozwiązania może być przeprowadzona w dwojaki sposób, po stronie serwerowej np w PHP:

Czytaj dalej...

Copyright © 2019 Webnote

Projekt i wykonanie: Tworzenie stron internetowych

Dodaj link