Кнопка свернуть модальные окно в Dle

Рубрика: Хаки для DLE » Хак DLE 11.2, 11.1, 11.0, 10.6, 10.5, 10.4, 10.3, 10.2, 10.1, 10.0, 9.8, 9.7, 9.6, 9.5, 9.4, 9.3, 9.2, 9.0
Кнопка свернуть модальные окно в Dle
В дле по умолчанию нет возможности свернуть в модальные окна, чтобы исправить эту ситуацию представляем хак «Кнопка свернуть модальные окно в Dle». После нескольких не больших правок, у вас будет кнопка свернуть в модальное окно.

Добавляем кнопку свернуть в модальные окна - этот хак для DLE потребует внести код в JS, CSS и TPL вашего шаблона DataLife Engine.

Итак! Установка хака
<a href="http://www.dle9.com/">дле</a>


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 значить можно использовать на dle 10.5

Скачать хаки дле другие вы можете у нас. как хак добавление кнопки свернуть в модальном окне информацию
  • 80
Рубрика: DLE хаки » Хак для DLE
Ранее » Запрет добавления новостей в пустые категории сайта« Далее Вывод ID группы в комментариях
Добавление комментарияОставить комментарий