Виджет для Adobe Muse "Удобная форма". Виджет является доработкой и "продолжением" виджета "Маска ввода" (которая была выпущена в июне 2014 г. и имела хорошую популярность среди пользователей) Демо-сайт: http://muse-widgets.ru/demo/cool-form/ Обзор виджета на блоге: http://muse-widgets.ru/blog/widget-udobnaja-forma Видеообзор (видеоинструкция): http://youtu.be/TZepIlb63mw ==ВАЖНО!== В комплекте идет две версии виджета: "[MW]Маска ввода v7" - это для старых версий программы, включает в себя только сам виджет настроек, которые можно применить к стандартной форме Muse; и "[MW]Удобная форма" - это для последней версии программы, актуальной на 1 декабря 2014 г., включает в себя не только виджет настроек (который также можно применить для стандартной формы), но и две уже готовые формы ("Расширенная" и "Заказать звонок"), у которых есть функция отключения поля Email. Инструкция по применению комплекта "[MW]Удобная форма": 1.Установите виджет в вашу библиотеку путем открытия файла "[MW]Удобная форма.mulib", либо открыв программу, в панели "библиотека" нажмите на значек, в нижнем левом углу,"Импорт библиотеки". 2.Поместите на страницу сайта (в пределах фиксированной ширины страницы) модуль настроек "Настройки эффектов и маски ввода" - это блок упраления виджетом. Если сайт многостраничный, рекомендуется поместить его на странице-шаблоне ("Шаблон-А"), тогда его действие будет распространятся на все страницы сайта и на все формы, по-этому, его нужно поместить только один раз! 3.Из комплекта виджета, поместите форму ("Расширенная форма" или "Форма заказа звонка") на страницу сайта. Данные формы уже готовы к применению и их поля уже имеют "магические" свойства. Откройте параметры формы и задайте необходимые настройки (название формы, email). Дизайн полей форм настраивается стандартными инструментами программы, точно так же, как и формы из стандартной библиотеки. - Если нужно сменить иконку в поле, то подготовьте заранее подготовленную картинку и в положении поля "Стандартное", смените заливку изображением. - Если нужно сменить фоновый цвет поля в разных состояниях, то также воспользуйтесь инструментом "Заливка". Рекомендуется для разных состояний полей (при наведении, нормальное, в фокусе...) создать разный цвет заливки, например, слегка тонированный - тогда при смене состояний будет виден эффект "выцветания". Если во всех состояниях сделать просто белую заливку, эффекта, соответствено, видно не будет. Также, стандартными инструментами настраивается шрифт полей. - Если в расширенной форме какие-либо поля лишние, вы можете их просто выделить у удалить. Поле "email" в данной форме отключаемо, его можно также удалить. Как настроить выпадающий список? В поле "выпадающий список" можно прописать любое количество пунктов. Для этого, просто перечислите варианты через запятую с пробелом, например: "Вариант 1, Вариант 2, Вариант 3, Вариант 4" и т.д. Не расстраивайтесь, что весь список не влезет в размеры поля, вы можете продолжать вписывать варианты, даже когда текст выйдет за пределы поля - на сайте будет отображаться все, как надо. К сожалению, в пределах одной страницы, можно использовать только одно поле с выпадающим списком. Если у вас несколько форм на странице и в каждой будет такое поле, то его значение будет у всех форм одинаковое. 4.Задайте общие настройки для всех форм в модуле настроек "Настройки эффектов и маски ввода". - "Плавность затухания эффектов при наведении" - задайте значение (в мс.) плавности смены состояний полей и кноки. Чем выше значение, тем медленнее будет происходить переход между состояниями, например от "Стандартного" на "При наведении". - "Коэффициент масштабирования элементов формы при наведении" - если значение равно "0", то размеры элементов при наведении мыши изменяться не будут. Если значение больше "1", например "1.05", то элемент формы будет увеличиваться. Если менее "1", нгапример, "0.95", то элемент будет уменьшаться. - "Символ маски ввода телефона" - это символ, который показывается до того, как номер телефона введен. По умолчанию, это "Х", вы можете задать свой вариант, например "*", "-", "_" или "#". - "Шаблон маски ввода телефона" - в качестве маски использована цифра "9", вместо нее нельзя написать что-то другое. Но вы можете сменить кол-во цифр, вставить/убрать пробелы, тире между ними, а так же скобки. Код страны можно задать любой, по умолчанию "+7". - "Тема оформления календаря" - тут все просто. При использования поля для ввода даты, вы можете выбрать один из 24 шаблонов дизайна выпадающего календаря. - "Выбор года Откл./Вкл." и "Выбор месяца Откл./Вкл." - запрещает или разрешает пользователю сайты использовать соответствующие опции в выпадающем календаре. - "Список email-серверов для автозаполнения" - в этой настройке уже прописаны самые популярные email-серверы почтовых сервисов, вы можете расширить этот список, дописав дополнительные адреса через запятую и в одинарных ковычках. Для чего это? При заполнении поля email, после написания знака @, функция автоматически заполнит окончание адреса, в зависимости от первой буквы адреса сервера. - "Замена стандартной кнопки и подключение плавного эффекта при наведении курсора". Эта галочка включает подмену стандартной кнопки в форме. Для чего это? Возможно, вы знаете, что стандартная кнопка формы, при выгрузке сайта на хостинг становится в виде картинки. При этом, плавную смену состояний кнопки, чтобы это было кросс-браузерно, не возможно. Т.е. чтобы сделать плавную смену фона, нужно, чтобы этот фон был в виде заливки цветом, а не картинкой. Данная опция и настройки ниже, как раз-таки и предназначена для кроссбраузерного решения, чтобы при наведении курсора мыши происходило плавное "выцветание" фона. Вы можете использовать эту опцию на свое усмотрение. Если, все-же, не понятно, для чего это, то оставьте галочку отключенной. Как задать эффекты и маску ввода к стандартным формам Adobe Muse? Если у вас уже готовый сайт и готовая рабочая форма, вы, при помощи виджета также сможете "оживить" ее - дабавить эффекты, маску ввода и календарь. Эту инструкцию также стоит применять при использовании виджета на 7-ой версии Muse. Для этого необходимо выполнить следующие шаги: 1.Поместите на страницу сайта (в пределах фиксированной ширины страницы) модуль настроек "Настройки эффектов и маски ввода" - это блок упраления виджетом. Если сайт многостраничный, рекомендуется поместить его на странице-шаблоне ("Шаблон-А"), тогда его действие будет распространятся на все страницы сайта и на все формы, по-этому, его нужно поместить только один раз! 2.Поместите на страницу форму из стандартной библиотеки Muse (если она еще не помещена). Сначала полностью создайте для формы необходимый дизайн и настройки (если еще не создано). Рекомендуется для разных состояний полей (при наведении, нормальное, в фокусе...) создать разный цвет заливки, например, слегка тонированный - тогда при смене состояний будет виден эффект "выцветания". Если во всех состояниях сделать просто белую заливку, эффекта, соответствено, видно не будет. 4.После того, как дизайн формы и полей закончен, в настройках формы отключите галочку "редактировать вместе" - это обязательное действие!!! Если этого не сделать, то работать виджет не будет. 5.Следующий шаг очень важен, именно он будет определять, каким именно полям будут задаваться определенные функции. В виджете уже заложены определенные css-классы, которые задают свойства полю. Нам нужно задать специальный класс для поля, а это сделать не сложно прямо встроенными возможностями программы. Перед началом "операции" обязательно посмотрите видеоинструкцию о том, как задать произвольный класс для любого объекта Muse: http://muse-widgets.ru/blog/page/kak-prisvoit-css-klass-k-ljubomu-obektu-v-adobe-muse Виджет управляет следующими классами, которые вы должны научиться присвапивать (посмотрев видео по ссылке выше): maska - для создания в любом поле маски ввода номера телефона. date - для создания в любом поле выпадающего календаря. email - для создания в любом поле функции автозаполнения емайл. select - для создания выпадающего списка. Можно создать только одно поля такого типа. Допустим, нам нужно задать маску ввода номера телефона. Для этого, выделяем необходимое поле, открываем панель инструментов "Стили графики" и создаем новый стиль. По умолчанию новый стиль будет иметь нименование на кириллице, нам это не нужно, путем двойного щелчка по новому стилю, переименуйте его, как maska - это действие добавит соответствующий css-класс для заданного поля формы. Если у вас несколько форм на сайте, задайте этот стиль для всех полей, где требуется шаблон ввода номера телефона. Точно также задаются стили для других эффектов полей (date, email, select). Таким образом, мы можем задать на сайте любое кол-во полей с определенными свойствами. Это дает виджету огромное преимущество перед его первой версией и перед виджетами других разработчиков, поскольку больше не требуется искать в коде ID элементов и нет ограничения по кол-ву полей. На этом все. Удачных разработок! !!! Внимание, данный виджет имеет защиту от незаконного распространения (бесплатного или перепродажи). Вы можете поделиться виджетом с другом, хотя и это не желательно, но массово распространять его запрещено. В случае, если будет обнаружена массовая раздача виджета в каких-либо источниках (на сайтах, в окрытых или закрытых группах, на файлообменниках) его работоспособность будет прекращена у ВСЕХ без исключения пользователей. Все пользователи, купившие виджет на сайте http://muse-widgets.ru , будут оповещены об отключении заранее. И если факт нарушения будет устранен, отключение не произойдет. Повторная активация платная и равняется половине первоначальной стоимости виджета. Тому, кто сообщит о факте нарушения, повторная активация осуществляется бесплатно. По-этому, друзья, не в ваших интересах портить отношения с разработчиком виджета и вашими заказчиками. Давайте научимся ценить чужой труд и тогда ваша коллекция будет регулярно пополняться не только новыми платными, но и крутыми бесплатными виджетами. Спасибо за понимание !!! _________________________________________________________________ _________________________________________________________________ Разработчик виджета: Александр Бузмаков Каталог виджетов: http://muse-widgets.ru Группа ВКонтакте: https://vk.com/musewidgets Блог автора: http://muse-widgets.ru/blog/