Jump to content
  • Урок девятый. Новые возможности. Параметр <color>

    Всем доброго времени суток.

    Недавно вышло замечательное обновление Muse, которое очень качественно повлияло на возможности для разработчиков виджетов. Теперь стало намного проще работать с цветом и файлами, которые пользователю необходимо выбирать или добавлять для работы виджета.

    Но теперь все по порядку.

    Новые параметры работают в версии Muse 2014.3 и старше. Для этого в <HTMLWidget formatNumber=”3”> указываем формат 3.

    Оба параметра содержат уже давно известные нам атрибуты name и label. О них мы сегодня не будем говорить. Мы поговорим о более интересных специфических параметрах.

    Параметр Выбора цвета (<color>)

    Параметр позволяет в меню виджета открыть мини-окно где пользователь может удобно выбрать цвет, как и при выборе цвета любого другого элемента в Muse. Данные из этого параметра передаются в виджет как в формате RGB (0, 0, 0) так и в формате HEX (#000000). Способ передачи определяться при создании виджета.

    Значение цвета по-умолчанию - ( defaultValue ) – изначальное значение параметра цвета при первом его размещении в Adobe Muse. Может быть задано как в формате RGB (0, 0, 0) так и в формате HEX (#000000). (Обязательный атрибут)

    Формат RGB ( rgbColor ) – Имеет формат да или нет (true, или false). Если включен, то передаст в виджет цвет в формате RGB через запятую (Пример: 255, 255, 255).

    Формат HEX( formatHexColor )  – Имеет формат да или нет (true, или false). Если включен, то передаст в виджет цвет в формате HEX через запятую (Пример: #ff0000).

    Поддержка отсутствия цвета ( supportsNoneColor ) - Имеет формат да или нет (true, или false). Если включен, позволит пользователю не выбирать цвет, другими словами – выбрать прозрачный цвет.

    Теперь сразу разберем параметр на примере:

    Для первого примера возьмем уже известный нам Text Shadow.

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

    <number name="redColor" defaultValue="0" min="0" max="255" stap="1" snap="1" />
    <number name="greenColor" defaultValue="0" min="0" max="255" stap="1" snap="1" />
    <number name="blueColor" defaultValue="0" min="0" max="255" stap="1" snap="1" />

    И передавался в виджет следующим образом:

    text-shadow: 1px 1px 1px rgba({param_redColor}, {param_greenColor}, {param_blueColor}, 1);

    Теперь же все стало намного проще и удобней. Одна строка – один параметр:

    <color name="shadowColor" rgbColor="true" defaultValue="0, 0, 0"/>

    А вот как теперь будет выглядеть передача параметра в виджет:

    text-shadow: 1px 1px 1px rgba({param_shadowColor}, 1);

    Для второго пример возьмем параметр цвета секунд в таймере обратного отсчета.

    Ранее цвет секунд в таймере задавался через параметр текст:

    <text name="colorTimerSec" defaultValue="#FF0000" />

    Вполне понятно, но не удобно для выбора. Приходилось вручную копировать значение цвета где-то и переносить его в заданное поле.

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

    <color name="colorTimerSec" formatHexColor="true" defaultValue="#FF0000" />

    При этом суть передачи в само тело виджета не поменялось:

    .sectext
    {
    color: {param_colorTimerSec};
    }

    В следующем мини-уроке мы рассмотрим параметр передачи файлов <file> на конкретном примере.

    Вопросы к этому уроку задавайте в комментариях ниже.

    User Feedback

    Recommended Comments

    вышла новые функции если можно напишите  об этом тоже  примерами зарание спасибо

    Share this comment


    Link to comment
    Share on other sites

    Join the conversation

    You can post now and register later. If you have an account, sign in now to post with your account.
    Note: Your post will require moderator approval before it will be visible.

    Guest
    Add a comment...

    ×   Pasted as rich text.   Restore formatting

      Only 75 emoji are allowed.

    ×   Your link has been automatically embedded.   Display as a link instead

    ×   Your previous content has been restored.   Clear editor

    ×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...