Конструктора Яндекс карт , пришлось воспользоваться наиболее известным jQueryUI . Он безусловно хорош, но избыточен. Минифицированная версия основного файла весит более 200 кб плюс еще на 100 кб стилей, и на 50 файлов со спрайтами. В комплексе, этот пакет решает несколько проблем, поэтому я его и использовал в конструкторе, однако если нужен только определенный функционал, то лучше использовать другие плагины.
Мне потребовался плагин для создания диалоговых окон. При том без обилия настроек для первого использования, но при этом чтобы они были, когда я захочу, что-то не стандартное.
Таких плагинов очень много, но все они обладают рядом недостатков. Поэтому снова берем все в свои руки, и пишем нужный плагин с нуля.
Вот, что из этого вышло.
Простой плагин для создания кастомизированных модальных окон с кнопками.
The simple jQuery Plugin for customizable modal windows with custom buttons. Отзывчивый к разным расширениям дизайн, легковесный, и просто в кастомизации плагин
Исходный код на GitHub илиСкачать (zip) .
Плагин умеет открывать простой текст, HTML, любой контент, будь то изображение, форма или iframe (YouTube, Vimeo, Google Maps). Плагин работает прекрасно на любых платформах и браузерах, за счет CSS правил, практически без JS манипуляций.
Для удобства работы плагин реализует несколько удобных глобальных функций, аналогичных оригинальным: jAlert, jConfirm, jPrompt
Как использовать
<link rel="stylesheet" type="text/css" href="/jquery.dialog.css"/>
<script src="/jquery.js"></script>
<script src="/jquery.dialog.js"></script>
Alert
Простой аналог JS функции Alert
Попробовать
Confirm
Аналог JS функции Confirm
jConfirm('Вы уверены?', function() {
jAlert('Вы выбрали "OK"')
}, 'Заголовок')
Попробовать
Prompt
Диалог аналогичный JS функции Prompt с полем ввода
jPrompt('Введите свое имя', function(e, value) {
jAlert('Ваше имя "'+value+'"')
})
Попробовать
Диалог загрузки
Диалог показывается в момент начала какой-либо загрузки
jWait('Пожалуйста ждите')
Попробовать
Изображение
Покажем элемент галереи, как это делает fancybox
$('<img src="/images/beautiful-eyes-wallpaper.png" alt="Изображение" title="Изображение" />')
.dialog({modal:false});
Открыть картинку
Youtube видео
Диалог с открытием youtube видео ролика
jAlert('<iframe width="560" height="315" src="//www.youtube.com/embed/fk24PuBUUkQ" frameborder="0" allowfullscreen></iframe>');
Открыть видео для просмотра
Кастомизация кнопок
Диалог со своими кнопками
var vimeo = '<iframe src="//player.vimeo.com/video/10848092" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>';
$(vimeo).dialog({
title: 'Vimeo видео',
buttons:{
'Перейти на Vimeo': function () {
location = 'http://vimeo.com/10848092';
},
'Закрыть': function() {
this.dialog('hide')
},
'Alert': function () {
jAlert("Я в порядке");
return false;
},
'Любой текст, он не будет выведен в кнопке':$('<a href="http://xdan.ru">Просто кнопка в виде ссылки</a>')
}
})
Диалог с Vimeo плеером и с пользовательскими кнопками
Большой объем данныъ
jAlert('<iframe width="1024" height="6993" src="//ru.wikipedia.org/wiki/JQuery" frameborder="0" allowfullscreen></iframe>');
Открыть большую статью из Википедии
Полный список опций
Название
Значение
по умолчанию
Пример
title ''
$("<div>Hello world<div>").dialog({title: 'Vimeo video'});
jAlert('Hello!', function(){}, 'My Title');
Необязательный параметр, заголовок диалогового окна
buttons {}
Список кнопок
$('<div>Кто был первым космонавтом?</div>').dialog({
buttons:{
'Гагарин': function () {
jAlert('Вы правы!');
return false;
},
'Путин': function () {
jAlert('Вы не правы!')
return false;
},
'Армстронг': function () {
jAlert('Нет, он был первый на Луне');
},
'Закрыть': function() {
this.dialog('hide')
},
'Еще вариант кнопки закрытия': true,
'Любой текст':$('<a href="http://xdan.ru">Просто ссылка</a>') // custom button
}})
closeFunction fadeOut
jQuery метод с помощью которого диалог будет закрываться
$('<div>Привет</div>').dialog({closeFunction:'hide'})
showFunction fadeIn
jQuery метод с помощью которого диалог будет открываться
$('<div>Привет</div>').dialog({showFunction:'show'})
closeBtn true
Показывать кнопку закрытия окна в правом верхнем углу
$('<div>Привет</div>').dialog({closeBtn:false})
closeOnClickOutside true
Закрывать диалоговое окно, когда пользователь кликнул где-либо вне его
$('<div>Привет</div>').dialog({closeOnClickOutside:false})
closeOnEsc true
Закрывать диалоговое окно при нажатии клавиши Escape
$('<div>Привет</div>').dialog({closeOnEsc:false})
clickDefaultButtonOnEnter true
Запускать обработчик события нажатия дефолтной кнопки по нажатию Enter
$('<div>Hello</div>').dialog({clickDefaultButtonOnEnter:false})
zIndex 10
Часто, случается так, что на сайте могут быть элементы z-index которых выше, чем у диалога. Это можно обойти, завад z-index
$('<div>Привет</div>').dialog({zIndex:10000})
modal true
Если false то окно будет запущено без оверлея, т.е. без фона
$('<div>Hello<.div>').dialog({modal:false})
shown true
После создания диалога, он будет показан автоматически. Если вы хотите произвести какие-либо манипуляции с ним, до показа, то указывайте shown false
var $dlg = $('<div>Hello</div>').dialog({shown:false});
$dlg.dialog('show');
removeOnHide true
Когда диалог закрывается, он польностью удаляется из DOM. Чтобы этого избежать можно сделать так removeOnHide:false
var $dlg = $('<div>Привет</div>').dialog({removeOnHide:false});
$dlg.dialog('hide');
$dlg.dialog('show');
hideGlobalScrollbar true
При открытии диалога у всего сайта исчезает скроллбар. Если вам не нужно такое поведение то используйте это свойство в false
var $dlg = $('<div>Привет</div>').dialog({hideGlobalScrollbar:false});
Методы
resize Используется для пересчета позиции при изменении сдержимого диалога (только при modal:false)
var $dlg = $('<div></div>').dialog({shown:false, modal:true});
var image = new Image();
image.onload = function() {
$dlg
.resize('content', '<img src="'+image.src+'">')
.resize('show')
.resize('resize')
}
image.src = './image.png';
ok Запускаем обработчик дефолтовой кнопки
var $dlg = jAlert('Привет', function() {jAlert('I fired')});
$dlg.dialog('ok');
hide Закрыть окно
var $dlg = jAlert('Привет', function() {jAlert('Меня нажали')});
$dlg.dialog('hide');
show Открыть скрытое окно
var $dlg = $('<div></div>').dialog({shown:false});
$dlg.dialog('show');
title Установка загаловка окна
var $dlg = jAlert('Hi', function() {}, 'First Title');
$dlg.dialog('title', 'Second Title');
content Установка содержимого диалога
var $dlg = jAlert('', function() {}, 'First Title');
$dlg.dialog('content', 'Hi'.repeat(100));
Функции помощники
jAlert Аналог «alert»
function (msg, callback, title){...}
jAlert('Привет мир', function (){jAlert(111)},'Title')
jConfirm Аналог «confirm»
function (msg, callback, title){...}
jConfirm('Вы уверены?', function (){jAlert(111)},'Title')
jPrompt Аналог «prompt» function
function (msg, default_value, callback, title){...}
jPrompt('Введите свое имя?','Иван', function (){jAlert(111)},'Ваше имя')
jWait Показ окна загрузки
function (title, with_close, not_close_on_click){...}
dialog
var $dlg = jWait('Please wait!', false, true);
$.get('index.php',function () {
$dlg.dialog('hide');
})
Этот плагин назревал уже очень давно. В процессе создания Конструктора Яндекс карт, пришлось воспользоваться наиболее известным jQueryUI. Он безусловно хорош, но избыточен. Минифицированная версия основного файла весит более 200 кб плюс еще на 100 кб стилей, и на 50 файлов со спрайтами. В комплексе, этот пакет решает несколько проблем, поэтому я его и использовал в конструкторе, однако если нужен только определенный функционал, то лучше использовать другие плагины.
Комментарии
Мне необходимо создать свой confirm, т.к. у стандартного нет возможности покрасить текст
Для этого условия
else if($('#cause').val() == 25){
strMessage1 = (typeof strMessage1 !== 'undefined') ? strMessage1 : 'Проверьте кодировку';
//return !!confirm( strMessage1 );
return !!confirm( strMessage1 );
//return !!lnv.confirm( strMessage1);
}