Различия

Здесь показаны различия между двумя версиями данной страницы.

--- help:qspider_interface [2024/03/12 16:58]
aleks_versus создано
+++ help:qspider_interface [2024/10/14 13:37] (текущий)
aleks_versus
@@ Строка 1: / Строка 1: @@
-====== Взаимодействие с интерфейсом и расширенные возможности qSpider ======
+====== Взаимодействие с интерфейсом (расширенные возможности qSpider) ======
-**qSpider** в отличие от классического плеера позволяет авторам более широко работать с выводимой на экран HTML-разметкой. В этом разделе описываются основные возможности плеера в плане работы с интерфейсом и разметкой HTML.
+**qSpider** в отличие от классического плеера позволяет авторам более широко работать с выводимой на экран HTML-разметкой.
-===== Темы оформления =====
+Управление интерфейсом и HTML-разметкой из кода игры осуществляется с помощью [[help:qspider_inclib|встроенной в плеер библиотеки]] "''qspider''". Чтобы воспользоваться этой библиотекой, необходимо подключить её в начале игры, как обычный модуль QSP:
+<sxh qsp>
+inclib 'qspider'
+</sxh>
+В **qSpider** вы можете:
+  * Создавать собственные [[help:qspider_themes|темы оформления]] и управлять ими.
+  * Взаимодействовать с HTML через [[help:qspider_spectags|специальные теги]].
+  * [[#Привязка%20элементов%20HTML-форм%20к%20QSP-переменными|Связывать элементы форм HTML]] со значениями переменных QSP.
+  * [[#Вызов%20QSP-кода%20по%20событию%20в%20плеере|Вызывать код QSP по событию]] в браузере (плеере).
+  * [[#Вызов%20команд%20плеера|Вызывать встроенную команду плеера]] при клике по HTML-элементу.
+===== Привязка элементов HTML-форм к QSP-переменными =====
+В **qSpider** Элементы HTML-форм (''%%input%%'', ''%%select%%'', ''%%textarea%%'' и др.) можно связать с QSP-переменной. Для этого нужно использовать специальный атрибут ''qsp-bind''.
+Связь двунаправленая — изменение переменной обновит элемент и изменение элемента (ввод текста или выбор опции) записываются в переменную.
+Примеры использования атрибута ''qsp-bind'':
+<sxh html>
+<input type="text" qsp-bind="$username">
+<input type="password" qsp-bind="$form_password">
+<input type="color" value="#e66465" qsp-bind="$color">
+<input type="checkbox" value="1" qsp-bind="enable">
+<select qsp-bind="$car">
+    <option value="mercedes">Mercedes</option>
+    <option value="audi">Audi</option>
+</select>
+</sxh>
+Это позволяет быстрее и проще создавать собственные диалоговые окна для взаимодействия с игроком.
+===== Вызов QSP-кода по событию в плеере =====
+Вы можете вызывать код QSP при определённых событиях в плеере с помощью новых атрибутов, начинающихся с префикса ''qsp-on:''.
+Поддерживаются следующие атрибуты:
+  * ''qsp-on:click'' — одинарный клик
+  * ''qsp-on:dblclick'' — двойной клик
+  * ''qsp-on:contextmenu'' — клик правой кнопкой
+  * ''qsp-on:mouseenter'' — наведение курсора
+  * ''qsp-on:mouseleave'' — выход курсора за пределы элемента
+Содержимым атрибутов должен быть валидный код QSP. Примеры использования атрибутов:
+<sxh html>
+<div qsp-on:click="exec: msg 'click'" qsp-on:dblclick="exec: msg 'dblclick'">Click me</div>
+<div qsp-on:contextmenu="exec: menu '$context_menu'">Right Click me</div>
+<div qsp-on:mouseenter="exec: pl 'enter'" qsp-on:mouseleave="exec: pl 'leave'">Hover me</div>
+</sxh>
+===== Вызов команд плеера =====
+Вы можете вызывать множество команд плеера по клику на HTML-элемент, используя специальный атрибут ''qsp-command''.
+Пример использования атрибута:
+<sxh html>
+<button qsp-command="resume">Resume</button>
+</sxh>
+Поддерживаются следующие команды плеера:
+  * ''%%quit%%'' — выход из игры на полку игр
+  * ''%%restart%%'' — перезапуск игры
+  * ''%%resume%%'' — продолжить игру (закрытие меню паузы)
+  * ''%%mute%%'' — выключить звук
+  * ''%%unmute%%'' — включить звук
+  * ''%%quicksave%%'' — быстрое сохранение
+  * ''%%quickload%%'' — быстрая загрузка
+  * ''%%pause:saves%%'' — открыть меню сохранения
+  * ''%%pause:preferences%%'' — открыть настройки
+  * ''%%scroll:main:bottom%%'' и ''%%scroll:main:top%%'' — прокрутка окна основного описания
+  * ''%%scroll:stats:bottom%%'' и ''%%scroll:stats:top%%'' — прокуртка окна доп описания
+Эти команды можно вызывать и непосредственно из кода QSP, если подключить [[help:qspider_inclib|встроенную библиотеку]] ''qspider''.
+Пример вызова команд из кода QSP:
+<sxh qsp>
+inclib 'qspider'
+@qspider_quit()
+@qspider_open_pause_screen('saves')
+</sxh>
+===== Другие статьи по qSpider =====
+  * [[help:qspider|qSpider — общая информация]]
+  * [[help:qspider_gamecfg|Конфигурационный файл]]
+  * [[help:qspider_aeroqsp|Особенности запуска и работы игр AeroQSP на qSpider]]
+  * [[help:qspider_themes|Темы оформления]]
+  * [[help:qspider_spectags|Специальные теги]]
+  * [[help:qspider_inclib|Встроенная библиотека]]
+  * [[help:qspider_standalone|Стандалон-сборка игры на qSpider]]

Документация QSPСайтФорум

Инструменты пользователя

Инструменты сайта

Различия

Инструменты страницы

Документация QSP
Сайт Форум