====== Специальные HTML-теги ======

В **qSpider** добавлены специальные теги, которые позволяют различным образом взаимодействовать с разметкой HTML. Они помогут в отладке игры, проектировании интерфейса для взаимодействия с игроком, и для оформления внешнего вида вашей игры.

Все специальные теги — сдвоенные. То есть состоят из открывающей и закрывающей части.

**Обратите внимание.** Теги позволяют взаимодействовать со значениями как глобальных, так и локальных переменных, однако локальные переменные уничтожаются сразу после выполнения блока кода, в котором они объявлены. Поэтому если вы используете специальные теги для взаимодействия с локальными переменными, вы можете не увидеть их работу без искусственной задержки (''%%wait%%'').

===== Текущее значение переменной =====

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

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

Атрибуты тега:

  * ''%%name%%'' — название переменной или массива.
  * ''%%index%%'' — числовой индекс ячейки массива.
  * ''%%key%%'' — строковый индекс ячейки массива (строковый ключ).

Примеры использования:

<sxh html>
<qsp-variable name="money"></qsp-variable>
<qsp-variable name="counts" index="5"></qsp-variable>
<qsp-variable name="$items" key="knife"></qsp-variable>
</sxh>

===== Отображение по условию =====

**qsp-show** — содержимое данного тега будет отображаться только если выполняется условие, прописанное в атрибуте ''%%when%%''.

Атрибуты тега:

  * ''%%when%%'' — должен содержать валидное условие QSP (как для операторов ''%%if%%'', ''%%elseif%%'' или ''%%while%%''), при выполнении которого содержимое тега будет отображаться.

Примеры использования:

<sxh html>
<qsp-show when="should_show=1">Этот текст будет виден только когда значение перменной should_show будет равно 1</qsp-show>
<qsp-show when="usehtml = 1 and flag = 1">Флаг выставлен.</qsp-show>
<qsp-show when="no obj('Ваза')">Ваза стоит на столе.</qsp-show>
</sxh>

===== Динамическое применение стилей =====

**qsp-style** — этот тег подгружает на страницу стили CSS из указанной в атрибуте ''%%from%%'' переменной QSP. В AeroQSP для таких целей использовалась переменная ''%%$STYLESHEET%%''. В qSpider вы можете использовать любую удобную вам переменную.

Атрибуты тега:

  * ''%%from%%'' — название переменной, из которой следует подгружать стили.

Пример смены стилей без перезахода на локацию:

<sxh qsp>
*p '<qsp-style from="$styles"></qsp-style>'
*p '<span class="universal">Какого цвета этот текст?</span>'

act "Сменить цвет":
  flag = 1 - flag
  if flag:
    $styles = '.universal {color:red;}'
  else:
    $styles = '.universal {color:blue;}'
  end
end
</sxh>

===== Управление регионами =====

**qsp-region** — позволяет обновить часть экрана без перезахода на локацию, или разного рода принудительного очищения и перерисовки всей разметки на экране.

Атрибуты тега:

  * ''%%name%%'' — название региона, с которым планируется взаимодействие.

Регионы можно создавать как в файлах тем, так и выводить непосредственно из кода QSP.

Пример региона:

<sxh html>
<qsp-region name="market-items"></qsp-region>
</sxh>

Для обновления региона из кода QSP используются функции [[help:qspider_inclib|встроенной библиотеки]] ''qspider''.

Пример замены содержимого региона новым:

<sxh qsp>
@qspider_update_region('market-items', '<strong>Здесь больше ничего нет.</strong>')
</sxh>

===== Управление слоями =====

**qsp-layer** — даёт возможность быстро показывать и скрывать большие фрагменты отображения. Слои рисуются один поверх другого, что даёт возможность делать наложения элементов интерфейса друг на друга, или создавать модальные окна.

По умолчанию все слои скрыты!

Атрибуты тега:

  * ''%%name%%'' — название слоя, нужно для управления.
  * ''%%index%%'' — порядок отображения слоя относительно других слоёв.

Пример слоя:

<sxh html>
<qsp-layer name="prompt-popup">Кошелёк или жизнь?</qsp-layer>
</sxh>

Для управления отображением слоёв из кода QSP нужно использовать функции [[help:qspider_inclib|встроенной библиотеки]] ''qspider''.

Пример //включения// слоя:

<sxh qsp>
@qspider_show_layer('prompt-popup')
</sxh>

===== Другие статьи по qSpider =====

  * [[help:qspider|qSpider — общая информация]]
  * [[help:qspider_gamecfg|Конфигурационный файл]]
  * [[help:qspider_aeroqsp|Особенности запуска и работы игр AeroQSP на qSpider]]
  * [[help:qspider_interface|Взаимодействие с интерфейсом]]
  * [[help:qspider_themes|Темы оформления]]
  * [[help:qspider_inclib|Встроенная библиотека]]
  * [[help:qspider_standalone|Стандалон-сборка игры на qSpider]]