• Автор:

    Flesha
  • Добавлено:

    июн 10, 2015
  • Комментариев:

    0
  • Просмотров:

    524

Хак Добавляем кнопку свернуть в модальные окна DLE

Хак Добавляем кнопку свернуть в модальные окна DLE

Всем известно что в DLE нет такой реализации по умолчанию! После не больших правок, у Вас появится кнопка свернуть в модальных окнах!

Для реализации данного хака потребуется править JS , CSS и TPL

Установка:

1. Открываем любой JS файл и вставляем туда код ниже:
var _init = $.ui.dialog.prototype._init;
$.ui.dialog.prototype._init = function() {
// инициализация библиотеки
_init.apply(this, arguments);

// установка некоторых переменных заранее
var dialog_el = this;
var dialog_id = this.uiDialogTitlebar.next().attr('id');

//добавление иконки сворачивания окна
this.uiDialogTitlebar.append('<a href="#" id="' + dialog_id + '-minbutton" class="ui-dialog-titlebar-minimize ui-corner-all">' + '<span class="ui-icon ui-hide">minimize</span></a>');

//добавление состояния свернутых окон
$('#dialog-minimized').append('<div class="dialog-minimized ui-widget ui-state-default ui-corner-all ui-state-hover" id="' + dialog_id + '_minimized">' + this.uiDialogTitlebar.find('.ui-dialog-title').text() + '<span class="ui-icon ui-active">newwin</span></div>');

// создание события "hover" для кнопок сворачивания
$('#'+dialog_id+'-minbutton').hover(function() {
$(this).addClass('ui-state-hover');
}, function() {
$(this).removeClass('ui-state-hover');
}).click(function(e) {
dialog_el.close();
e.preventDefault();
$('#'+dialog_id+'_minimized').show();
});

// создание второго события по клику, которое разворачивает свернутое окно
$('#'+dialog_id+'_minimized').click(function(e) {
$(this).hide();
dialog_el.open();
e.preventDefault();
});
}


2. Открыть engine.css и вставить:
#dialog-minimized{position:fixed;bottom:0px;left:5px;}
.ui-dialog .ui-dialog-titlebar-minimize{margin:-10px 0 0 0;padding:1px;position:absolute;right:2.3em;top:50%;width:16px;height:16px;}
.dialog-minimized{float:left;padding:5px 10px;font-size:12px;cursor:pointer;margin-right:2px;display:none;}
.dialog-minimized .ui-icon{display:inline-block !important;position:relative;cursor:pointer;}
.dialog-minimized span{margin:-10px 0 0 0;position:absolute;display:block;right:-5px;top:5px;width:16px;height:16px;}
.ui-hide {background-position: -64px -128px;}
.ui-active {background-position: -48px -82px;}
.ui-active:hover{opacity:0.6;}


3. Открыть main.tpl и перед закрывающим тегом:
</body>


Вставить:
<div id="dialog-minimized"></div>


Готово!

Все стили применялись на Default шаблоне! Так что если что то криво отображается правьте под себя!

Автор: denldv
Внес правки и подготовил мануал: SX2
Проверено на: DLE 10.4
Вернуться
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.