11.05.15, 13:12
0 комментарий
  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 шаблоне! Так что если что то криво отображается правьте под себя!

ДЕМО на нашем сайте.

Автор: Vitnet
Внес правки и подготовил мануал: SX2
Проверено на: DLE 10.4

Напишите своё мнение