Обмен технологиями

Учебное пособие по Axure: интерактивное создание бокового меню приложения

2024-07-08

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Сегодня я покажу вам, как использовать меню ящиков в Axure. В меню ящика необходимо добиться двух интерактивных эффектов, а именно:

Взаимодействие первое

Эффект масштабирования пунктов меню уровня 1 и уровня 2 в меню ящика.

Логика реализации: настройка состояния переключения динамической панели и реализация «тяни/тяни оригинал».

Взаимодействие 2

Переключение выбранного состояния пункта меню

Реализуйте логику: установите выбранное состояние во вспомогательном представлении.

Рассмотрим этапы реализации:

Взаимодействие 1: Эффект масштабирования пунктов меню уровня 1 и уровня 2 в меню ящика.

шаг 1

1. Перетащите динамическую панель и отрегулируйте ее размер.

2. Дважды щелкните динамическую панель, задайте имя динамической панели: «Меню 1», добавьте 2 состояния динамической панели с именами соответственно: Свернуть, Развернуть.

Шаг 2

1. Дважды щелкните сложенное состояние, чтобы перейти на страницу состояния «свернуто».

2. Перетащите прямоугольник на страницу и задайте имя «Меню 1-Свернуть». Измените размер меню 1 и введите текст «Меню 1».

3. Перетащите изображение со стрелкой раскрывающегося списка и отрегулируйте размер.

Шаг 3

Добавьте стили наведения курсора мыши и выделения «Меню 1-Свернуть» и установите цвет шрифта: синий и цвет заливки: светло-серый соответственно.

Шаг 4

Вариант использования при настройке щелчка мыши прямоугольника «Меню 1-Свернуть»:

Выберите действие «Переключить состояние панели», установите «Меню 1» для переключения в состояние «Расширенное» и выберите атрибут «Компонент Push/Pull».

Шаг 5

1. Скопируйте содержимое динамической панели в «свернутом» состоянии на страницу «развернутого» состояния.

2. На странице статуса «Развернуть» измените имя прямоугольника на «Меню 1-Развернуть».

Взаимодействие 2: Переключение выбранного состояния пунктов меню

Шаг 6

1. Скопируйте «Меню 1-Развернуть» в качестве подменю, измените текст компонента имени и назовите его: Подменю 1.

2. Установите событие щелчка мыши в подменю 1, выберите действие «Установить выбранное» и настройте текущий компонент для выбора.

Шаг 7

1. Скопируйте несколько подменю в пакетном режиме, измените текст и назовите их соответственно.

2. После выбора всех нескольких подменю установите имя группы выбора: 1

Предварительный просмотр, чтобы увидеть эффект.