Форма входа

    Бесплатный раздел

    Уважаемые друзья и пользователи сайта ART-UCOZ!

    Уведомляем вас о том, что мы приняли трудное, но обдуманное решение о закрытии проекта в качестве Интернет-магазина ART-UCOZ. С 05.11.2022 года сайт ART-UCOZ.RU продолжит работать в качестве каталога файлов, статей и информации. Будет закрыт только раздел интернет-магазина!

    Все товары были перенесены в наш новый проект SHOPTHEMES - Vendor Marketplace (https://shopthemes.ru), над которым мы долго работали и продолжаем улучшать его в настоящее время.
    Вас ждут: личный кабинет, возможность пополнения баланса на любую сумму, зачисление бонусов за посещение, перевод средств между пользователями, вывод средств (для продавцов), личный чат, больше новых цифровых товаров и многое другое.

    Уважаемые пользователи!
    Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
    Подобные просьбы и вопросы - будут игнорироваться!

    Красивое Модальное Окно используя Vex. Создание, Управление и Настройка

    Дата добавления: 06.02.2014 - 17:27
    Добавил: Buger
    Количество просмотров: 3.5k
    Количество комментариев: 0
    Рейтинг материала: 3.0 / 2
    Красивое Модальное Окно используя Vex. Создание, Управление и Настройка
    рейтинг 3.0
    /
    голосов 2
    Модальные окна это очень полезная функция, когда вы хотите сделать взаимодействия пользователей с вашим сайтом. Иногда, модальное окно вызывается как окно используемое для отображения какого либо диалога.

    В этой статье мы познакомим вас с прекрасным помощником для создания модального окна, а именно с использованием библиотеки jQuery Vex.



    Vex - полноценный и высоко настраиваемый Javascript библиотека которая помогает вам с легкостью создать модальные окна. Этот прекрасный jQuery плагин заменяет собственное диалоговое окно браузера.

    Основные Настройки

    Во-первых, мы должны приготовить Vex сценарий. Вы можете скачать его выше.
    Затем, подключаем jQuery в заголовке (<head>...</head>) следующий сценарий:
    Код
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>

    Для использования Vex, вы так же должны подключить скачанные файлы vex.js и vex.css . Вместо использования vex.js и vex.dialog.js вы можете просто включить vex.combined.js или vex.combined.min.js

    Создайте папку например: /VEX/ и загрузите файлы.

    Теперь мы добавим те Vex библиотеки , вот так:
    Код
    <script src="/VEX/vex.combined.min.js"></script>  
    <link rel="stylesheet" href="/VEX/vex.css" />  
    <link rel="stylesheet" href="/VEX/vex-theme-os.css" />

    Применение Vex

    Самые простые способы находятся в Vex vex.dialog.alert, vex.dialog.confirm и vex.dialog.prompt. И существует vex.dialog.open комбинации этих методов для более раннего использования, например, чтобы создать форму, логин или несколько модальных окон.

    И теперь, мы постараемся построить простое модальное окно входа с помощью метода vex.dialog.open. Прежде чем мы начнем, мы должны сначала применить тему, мы использовали вариант defaultOptions.className. Чтобы применить тему, вы можете легко добавить тему имя в качестве значения параметра вот так.
    Код
    vex.defaultOptions.className = 'vex тема os';

    Как уже упоминалось выше, vex.dialog.open метод, в принципе, является комбинацией из 3 других методов. Следующий код является более сложной демо, в котором мы называем предупреждение, подтвердить, и внутреннее приглашение, чтобы создать диалоговое окно входа в систему. 
    Код
    <script>  
    vex.defaultOptions.className = 'vex-theme-os';  
    vex.dialog.open({  
      message: 'Please enter your username and password:',  
      input: "<input name=\"username\" type=\"text\" placeholder=\"Username\" required />\n<input name=\"password\" type=\"password\" placeholder=\"Password\" required />",  
      buttons: [  
        $.extend({}, vex.dialog.buttons.YES, {  
          text: 'Login'  
        }), $.extend({}, vex.dialog.buttons.NO, {  
          text: 'Back'  
        })  
      ],  
    });  
    </script>

    Так, наш логин в поле будет отображаться следующим образом.



    Заключение

    Есть много других средств для создания модальных окон, но Vex является достаточно полным и высоко настраиваемым. Вы можете добавить предупреждения, запросы, подтверждения, бланки или другие параметры ввода в поле и даже анимировать. Другие функции применяются в несколько модальных диалоговых окон внутри модальных окон, отлично и плавно работает в мобильных устройствах.

    Vex также поставляется с тем, чтобы сделать диалоги в соответствии ваших стилей, так и в CSS или САСС. Кроме того, он совместим с большинством современных браузеров и очень легкий - всего +7 КБ под уменьшенной (2кБ уменьшенные + gzip).




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


    Поделись с друзьями: