Интернет магазин шабонов
Форма входа

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

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

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

Дата добавления: 06.02.2014 - 17:27
Добавил: Buger
Количество просмотров: 1718
Количество комментариев: 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).






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