avatar Tomasza Cekało

Dodawanie funkcjonalności

W poprzednim odcinku pokazywałem jak połączyć metro ui css z gridstackiem, w tej ze statycznej strony zrobimy apkę.

CRUD

W dzisiejszym odcinku chcę dodać trochę opcji do powstającej apki. Kafelki co prawda dają się przesuwać, lecz są zdefiniowane wcześniej i ich stan nie jest zapisywany. Należy więc dodać przede wszystkim:

  • zapis i odczyt kafelków
  • dodawanie kafelków
  • usuwanie kafelków
  • edycję kafelków, w tym:
    • zmianę napisów
    • wybór ikon
    • edycję typów kafelków
    • podmianę zdjęć
    • kolorowanie kafli i ich części

Jak by to miało wyglądać?

Widzę to tak: przycisk u góry, "Add New" i "Edit", które wyświetlą okienko dialogowe pytające o parametry kafla. Do tego jakaś strefa z ikoną kosza, do której można przeciągnąć elemnty do usunięcia, ewentualnie przycisk. Każdy kafelek powinien dać się zaznaczyć, tak by można było użyć przycisku Edit:

 	 		$(".tile").click(function(){
selecting($(this));
});

function selecting(item){
$(".tile.selected").removeClass("selected");
item.addClass("selected");
}

Sporo czasu zajęło mi dojście do tego, w jaki sposób wyświetlać okienka dialogowe. Do wyboru miałem jQueryUI Dialog oraz ten "metrowy". Ostatecznie zdecydowałem się na ten drugi, gdzieniegdzie wspomagając się własnym kodem. Moje własne okienka są elementami typu div z style="display: none;". Następnie w kodzie wyświetlane są odpowiednim kodem jQuery: $("#cp1").css("display","block");. Do tego opracowałem formularz tworzenia/edycji nowego kafelka oraz włączania/wyłączania części sekcji w nim. Wystarczyło użyć odpowiednich selektorów w jQuery :).

Na dziś to koniec. Do zrobienia na daną chwilę trzeba jeszcze naprawić otwieranie okna tworzącego kafle, po tym sprawić by apka zaczęła dodawać elementy na stronę.

Web Statistics