Панель действий — 6 типов элементов

Панель действий — это вторая плавающая панель JustZix, та, что с интерактивными элементами управления, которыми вы управляете страницей на лету. Каждое действие — один из шести типов и привязано к папке или набору правил, поэтому появляется именно там, где нужно.

Скачать бесплатно Смотреть примеры

Что такое панель действий

Если первая панель JustZix служит для включения и выключения правил, то панель действий — это больше, чем переключатели. Это набор интерактивных элементов управления, которыми вы управляете страницей прямо в работе — запускаете код по требованию, передаёте ему значения и переключаете режимы.

Панель привязана к папке, группе или набору правил. Когда эта папка активна на текущей странице, её действия появляются в плавающем панеле; когда она не совпадает — панель остаётся пустой. Поэтому на странице магазина видны другие элементы, чем на админ-панели. Панель запоминает своё положение, а правый клик скрывает её до конца сессии.

Шесть типов элементов

У каждого действия есть метка, цвет и необязательная горячая клавиша. Вы выбираете один из шести типов в зависимости от задачи:

BUTTON — кнопка fire-and-forget; клик просто выполняет код JS.
SELECT — выпадающий список; статические или сгенерированные JS опции, выбор одной запускает действие.
INPUT — одиночное текстовое поле в стиле командной строки; вы вводите значение и подтверждаете.
SLIDER — ползунок, управляющий CSS-переменной вживую, например яркостью страницы или масштабом.
TEXTAREA — многострочный блокнот, содержимое которого запоминается отдельно для каждого домена.
TOGGLE3 — трёхпозиционный сегментный переключатель, идеален для режимов вроде dev / staging / prod.

От простого клика до введённого значения

Самый простой тип — BUTTON: одна цель, один клик. SELECT и TOGGLE3 добавляют выбор: вместо отдельной кнопки на каждый вариант вы держите один элемент с несколькими состояниями. INPUT и TEXTAREA идут дальше и принимают текст, который вы подаёте в момент действия — код действия читает это значение и делает с ним то, что вы задумали.

SLIDER стоит особняком, потому что работает непрерывно: тянете ручку — и связанная CSS-переменная меняется мгновенно, без подтверждения. Это естественный выбор для настроек, которые хочется видеть в реальном времени.

Действия запускают код по требованию

За каждым элементом стоит небольшой фрагмент CSS или JavaScript. Отличие от обычного правила в том, что правило выполняется автоматически при загрузке страницы, а действие ждёт — оно срабатывает только тогда, когда вы им пользуетесь. Это идеально для операций, которые не нужны каждый раз: очистить форму, сгенерировать тестовые данные, переключить тему, отправить страницу в другой инструмент.

Поскольку код действия выполняется в том же мире, что и правила, у него есть доступ к DOM страницы и к глобалям JustZix, так что одна кнопка может запустить многошаговый workflow. Панель действий превращает статический набор правил в небольшой пульт управления, подогнанный под страницу.

Похожие статьи блога

Статьи, которые раскрывают эту тему подробнее.

Типы действий Три действия, заслуживающие места на панели: чистый URL, CSV, PIP Три универсальных действия JustZix, полезных почти везде: копировать чистый URL, экспортировать таблицу в CSV и Picture-in-Picture. Типы действий BUTTON: самое простое действие JustZix — fire-and-forget с кастомизацией по кнопке BUTTON — самый старый и самый используемый тип действия JustZix. Клик = выполни код в MAIN world. Никакого состояния, никакой memory — чистая функция. Полная кастомизация (фон, цвет текста, padding) + customStyles для попиксельной интеграции в панель действий. Типы действий SLIDER: контроллер CSS-переменных внутри вкладки — яркость, зум, font-size под пальцем Действие SLIDER — это нативный <input type="range"> на панели действий. Перетаскивание вживую обновляет memory без выполнения кода (событие input), отпускание выполняет код (событие change). value — это Number, не String. Сценарии: яркость, зум, font-size, скорость анимации — управляемые как физический фейдер. Типы действий SELECT static vs js: два варианта dropdown на панели действий — какой когда SELECT — это dropdown на панели действий JustZix. Два варианта: static (опции захардкожены в схеме) и js (код генерирует опции динамически). Первый отлично подходит для фиксированных пресетов (Light/Dark, выбор языка), второй — для динамических списков (категории из DOM, hotkey-закладки). Типы действий INPUT: однострочное действие как мини командная строка на панели действий JustZix INPUT — это нативный <input type="text"> на панели действий. Enter → blur → выполни код. Постоянная memory по вкладке (sessionStorage + chrome.storage.local). Ключевая разница vs TEXTAREA: Enter активирует действие. Сценарии: командная строка, быстрый поиск, переопределение фильтров, кастомная навигация URL. Типы действий TEXTAREA: многострочный блокнот на панели действий — черновики, заметки, сниппеты по доменам Действие TEXTAREA (v2.13.21) — это нативный <textarea> на панели действий JustZix. Постоянная memory по вкладке (sessionStorage + бэкап chrome.storage.local). Enter = нативный перенос строки (НЕ blur). Код запускается при blur. Сценарии: QA-блокнот, черновики комментариев, сниппеты SQL/curl/JSON по доменам.

Другие возможности

{ } Внедрение CSS и JavaScriptСоздавайте правила CSS и JavaScript для любого домена или пути URL. Скрывайте элементы, исправляйте вёрстку, добавляйте свою логику. ⊞ Иерархическая организацияПапки, группы, наборы правил и действия образуют дерево, которое держит порядок — от одной правки CSS до сотен правил. ◉ Шаблоны URL с подстановочными знакамиПривязывайте правила к точному адресу, всему сайту или всем субдоменам. Знак * охватывает любой фрагмент, а шаблоны-исключения держат правило на месте. ◐ Плавающая кнопкаНебольшая круглая кнопка на странице показывает состояние правил цветом и переключает всё одним кликом. Правый клик открывает панель по каждому правилу. ⌨ Программные API — JZ и JUSTZIXДва глобальных объекта — JZ и JUSTZIX — позволяют вашим правилам нажимать кнопки действий и писать прямо в Output Console, без DevTools. ⇄ Синхронизация между устройствамиОдин ключ связывает все браузеры. Правила, папки и настройки распространяются с разрешением конфликтов по сущностям, без массовой перезаписи. ⇗ Обмен и резервные копииДелитесь папкой, группой или правилом по короткой ссылке со сроком 1–48 ч и защищайте данные автоматическими облачными бэкапами. ▣ Окна на странице — CSS, JS и консолиПять окон разработчика прямо на странице: редакторы CSS и JS, консоль REPL, просмотр логов и AI-ассистент — без DevTools.

Все возможности →