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

19 11 мая 2017
Версия DLE: Любая
Стоимость: FREE

ionCube Loader: NOT

Последнее обновление: НЕ БЫЛО


 Подписаться 0 Скачать

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

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

Автор: denldv
Внес правки и подготовил мануал: SX2
Итак!

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 шаблоне! Так что если что то криво отображается правьте под себя!
Изменений не было!
Нет файлов для загрузки!
Нет видео!
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.


Подписка на новости

Подписаться

Кто онлайн
2 посетителя на сайте. Из них:
Гости2