PL

Funkcje JustZix ›

Panel akcji — 6 typów kontrolek

Panel akcji to drugi pływający pasek JustZix — ten z interaktywnymi kontrolkami, którymi sterujesz stroną w locie. Każda akcja jest jednym z sześciu typów i przypięta do katalogu lub zestawu reguł, więc pojawia się dokładnie tam, gdzie jej potrzebujesz.

Pobierz za darmo Zobacz przykłady

Czym jest pasek akcji

O ile pierwszy pasek JustZix służy do włączania i wyłączania reguł, panel akcji to coś więcej niż przełączniki. To zestaw interaktywnych kontrolek, którymi sterujesz stroną w trakcie pracy — uruchamiasz kod na żądanie, podajesz mu wartości i przełączasz tryby.

Pasek jest przypięty do katalogu, grupy lub zestawu reguł. Gdy dany katalog jest aktywny na bieżącej stronie, jego akcje pojawiają się w pływającym panelu; gdy nie pasuje — panel pozostaje pusty. Dzięki temu na stronie sklepu widzisz inne kontrolki niż na panelu administracyjnym. Pasek pamięta swoją pozycję, a prawy klik chowa go do końca sesji.

Sześć typów kontrolek

Każda akcja ma etykietę, kolor i opcjonalny skrót klawiszowy. Wybierasz jeden z sześciu typów w zależności od tego, czego potrzebujesz:

  • BUTTON — przycisk fire-and-forget; kliknięcie po prostu uruchamia kod JS.
  • SELECT — lista rozwijana; opcje statyczne lub generowane z JS, a wybór jednej z nich odpala akcję.
  • INPUT — pojedyncze pole tekstowe w stylu paska poleceń; wpisujesz wartość i zatwierdzasz.
  • SLIDER — suwak sterujący zmienną CSS na żywo, np. jasnością strony albo poziomem powiększenia.
  • TEXTAREA — wielolinijkowy notatnik podręczny, którego treść jest zapamiętywana osobno dla każdej domeny.
  • TOGGLE3 — trójstanowy przełącznik segmentowy, idealny do trybów typu dev / staging / prod.

Od prostego kliku po wartość wejściową

Najprostszy typ to BUTTON — jeden cel, jedno kliknięcie. SELECT i TOGGLE3 dodają wybór: zamiast osobnego przycisku na każdy wariant trzymasz jedną kontrolkę z kilkoma stanami. INPUT i TEXTAREA idą krok dalej i przyjmują tekst, który podajesz w danym momencie — kod akcji odczytuje tę wartość i robi z nią to, co zaprojektujesz.

SLIDER jest wyjątkowy, bo działa płynnie: przeciągasz uchwyt, a powiązana zmienna CSS zmienia się natychmiast, bez zatwierdzania. To naturalny wybór do regulacji, które chce się widzieć w czasie rzeczywistym.

Akcje uruchamiają kod na żądanie

Pod każdą kontrolką kryje się mały fragment CSS lub JavaScript. Różnica wobec zwykłej reguły jest taka, że reguła działa automatycznie przy wczytaniu strony, a akcja czeka — uruchamia się dopiero wtedy, gdy jej użyjesz. To idealne do operacji, których nie chcesz wykonywać za każdym razem: wyczyść formularz, wygeneruj dane testowe, przełącz motyw, wyślij stronę do innego narzędzia.

Ponieważ kod akcji wykonuje się w tym samym świecie co reguły, ma dostęp do DOM strony i do globali JustZix, więc jeden przycisk może wywołać wieloetapowy workflow. Panel akcji zamienia statyczny zestaw reguł w mały, dopasowany do strony pulpit sterowania.

Powiązane wpisy z bloga

Wpisy, które omawiają to zagadnienie dokładniej.

Typy akcji Trzy akcje warte miejsca w pasku: czysty URL, CSV, PIP Trzy uniwersalne akcje JustZix, które przydają się niemal wszędzie: kopiowanie czystego URL, eksport tabeli do CSV i Picture-in-Picture. Typy akcji BUTTON: najprostsza akcja JustZix — fire-and-forget z customizacją per-button BUTTON to najstarszy i najczęściej używany typ akcji JustZix. Klik = run code w MAIN world. Bez state, bez memory — czysta funkcja. Pełna customizacja (kolor tła, tekstu, paddings) + customStyles dla pixel-perfect integration z paskiem akcji. Typy akcji SLIDER: kontroler CSS variables wewnątrz karty — jasność, zoom, font-size z palca Akcja SLIDER to natywny <input type="range"> w pasku akcji. Live drag aktualizuje memory bez odpalania kodu (input event), release odpala kod (change event). Value jest Number, nie String. Use case: brightness/zoom/font-size/animation-speed sterowane jak fizycznym suwakiem. Typy akcji SELECT static vs js: dwie wariacje dropdownów w pasku akcji — kiedy która SELECT to dropdown w pasku akcji JustZix. Dwie wariacje: static (hardcoded options w schemacie) i js (kod dynamicznie generuje options). Pierwszy idealny dla stałych presetów (Light/Dark, language pick), drugi dla dynamicznych list (kategorie z DOM, hotkeyed bookmarks). Typy akcji INPUT: single-line akcja jako mini command bar w pasku akcji JustZix INPUT to natywny <input type="text"> w pasku akcji. Enter → blur → run code. Persistent memory per-tab (sessionStorage + chrome.storage.local). Kluczowa różnica vs TEXTAREA: Enter triggeruje akcję. Use case: command bar, quick search, filter overrride, custom URL navigation. Typy akcji TEXTAREA: multi-line scratch pad w pasku akcji — drafty, notatki, snippety per domena Akcja TEXTAREA (v2.13.21) to natywny <textarea> w pasku akcji JustZix. Persistent memory per-tab (sessionStorage + chrome.storage.local backup). Enter = natywny newline (NIE blur). Code odpala się na blur. Use case: scratch pad QA, drafty komentarzy, SQL/curl/JSON snippety per domena.

Pozostałe funkcje

{ } Wstrzykiwanie CSS i JavaScriptTwórz reguły CSS i JavaScript dla dowolnej domeny lub ścieżki URL. Ukrywaj elementy, popraw układ, dodaj własną logikę — pełna kontrola nad każdą stroną. ⊞ Hierarchiczna organizacjaKatalogi, grupy, zestawy reguł i akcje tworzą drzewo, które utrzymuje porządek od jednej poprawki CSS po setki reguł w wielu projektach. ◉ Wzorce URL z wildcardamiDopasuj reguły do dokładnego adresu, całej witryny lub wszystkich subdomen. Znak * obejmuje dowolny fragment, a wzorce wykluczające trzymają regułę tam, gdzie ma być. ◐ Pływający przyciskMały okrągły przycisk na stronie pokazuje stan reguł kolorem i pozwala włączać je jednym kliknięciem. Prawy klik otwiera panel ze sterowaniem każdą regułą z osobna. ⌨ Programatyczne API — JZ i JUSTZIXDwa globalne obiekty — JZ i JUSTZIX — pozwalają Twoim regułom JS klikać przyciski akcji programatycznie i logować wprost do Output Console, bez DevTools. ⇄ Synchronizacja między urządzeniamiJeden klucz synchronizacji łączy wszystkie przeglądarki. Reguły, foldery i ustawienia propagują się z rozstrzyganiem konfliktów per encja, bez hurtowego nadpisywania. ⇗ Udostępnianie i backupyUdostępnij katalog, grupę lub regułę krótkim linkiem wygasającym po 1–48 h, a swoje dane chroń automatycznymi backupami w chmurze. ▣ Okna na froncie — CSS, JS i konsolePięć okien deweloperskich renderowanych wprost na stronie: edytor CSS i JS, konsola REPL, podgląd logów i asystent AI — bez otwierania DevTools.

Wszystkie funkcje →