Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!
Подобные просьбы и вопросы - будут игнорироваться!
Красивое Модальное Окно используя Vex. Создание, Управление и Настройка
Дата добавления: 06.02.2014 - 17:27
Категория: Хаки / Дополнения, Уроки / Литература / Пособия
Добавил: Buger
Количество просмотров: 2042
Количество комментариев: 0
Рейтинг материала: 3.0 / 2
БЕСПЛАТНО
рейтинг
3.0
/
голосов
2
Модальные окна это очень полезная функция, когда вы хотите сделать взаимодействия пользователей с вашим сайтом. Иногда, модальное окно вызывается как окно используемое для отображения какого либо диалога.
В этой статье мы познакомим вас с прекрасным помощником для создания модального окна, а именно с использованием библиотеки jQuery Vex.
В этой статье мы познакомим вас с прекрасным помощником для создания модального окна, а именно с использованием библиотеки jQuery Vex.
Vex - полноценный и высоко настраиваемый Javascript библиотека которая помогает вам с легкостью создать модальные окна. Этот прекрасный jQuery плагин заменяет собственное диалоговое окно браузера.
Основные Настройки
Во-первых, мы должны приготовить Vex сценарий. Вы можете скачать его выше.
Затем, подключаем jQuery в заголовке (<head>...</head>) следующий сценарий:
Для использования Vex, вы так же должны подключить скачанные файлы vex.js и vex.css . Вместо использования vex.js и vex.dialog.js вы можете просто включить vex.combined.js или vex.combined.min.js.
Создайте папку например: /VEX/ и загрузите файлы.
Теперь мы добавим те Vex библиотеки , вот так:
Применение Vex
Самые простые способы находятся в Vex vex.dialog.alert, vex.dialog.confirm и vex.dialog.prompt. И существует vex.dialog.open комбинации этих методов для более раннего использования, например, чтобы создать форму, логин или несколько модальных окон.
И теперь, мы постараемся построить простое модальное окно входа с помощью метода vex.dialog.open. Прежде чем мы начнем, мы должны сначала применить тему, мы использовали вариант defaultOptions.className. Чтобы применить тему, вы можете легко добавить тему имя в качестве значения параметра вот так.
Как уже упоминалось выше, vex.dialog.open метод, в принципе, является комбинацией из 3 других методов. Следующий код является более сложной демо, в котором мы называем предупреждение, подтвердить, и внутреннее приглашение, чтобы создать диалоговое окно входа в систему.
Так, наш логин в поле будет отображаться следующим образом.
Основные Настройки
Во-первых, мы должны приготовить 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" />
<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.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).
Есть много других средств для создания модальных окон, но Vex является достаточно полным и высоко настраиваемым. Вы можете добавить предупреждения, запросы, подтверждения, бланки или другие параметры ввода в поле и даже анимировать. Другие функции применяются в несколько модальных диалоговых окон внутри модальных окон, отлично и плавно работает в мобильных устройствах.
Vex также поставляется с тем, чтобы сделать диалоги в соответствии ваших стилей, так и в CSS или САСС. Кроме того, он совместим с большинством современных браузеров и очень легкий - всего +7 КБ под уменьшенной (2кБ уменьшенные + gzip).
