javascript - JQuery UI 对话框 - 需要添加一个最小化按钮

Question

更新 - 没有 JQuery UI 插件的方法

** 我已经添加了这个问题的答案，它在不使用任何插件的情况下解决了这个问题(IMO 对所涉及的 JS/CSS 有指导意义)。您的 CSS 可能需要有所不同，但这是一个好的开始 **

--

我熟悉 jQuery 但不熟悉 jQuery UI。我观察到一个元素使用 jQuery UI 的 .dialog() 方法将实际容器包裹在指定元素周围，通常是 div。

标题栏和 x 或关闭按钮也在标题栏的右上角“绘制”或自动处理。

我的目标是在关闭按钮旁边添加一个最小化按钮，如果单击它会使对话框最小化(栏仍然可见，其他所有内容都隐藏，并且栏移动到页面底部附近)，如果在最小化时单击它会最大化对话框。

我当然可以使用我自己的 HTML/CSS/JS 来完成此操作，方法是创建按钮并将其完全定位在绘制的栏/容器中。但是在 jQuery UI 中是否有更原生的方式来做到这一点(无需额外的插件)？谢谢你的帮助!

Answer 1

以下 JS 和 CSS 成功地创建了一个最小化/最大化按钮，无需任何额外的插件。如果您不能或不想安装插件，这可能会有所帮助:

Javascript:

$('#chatPanel').dialog({
    width : 475,
    dialogClass : 'fixedPosition presav-chatPanel',
    open: function(event, ui){
        var panel = $('.presav-chatPanel');
        if(panel.hasClass('presav-minimize')){
            //maximize the panel
            panel
                .removeClass('presav-minimize')
                .attr('style', panelStyleMaximized);
            $('.presav-chatPanel .ui-dialog-titlebar-minimize span')
                .removeClass('ui-icon-plusthick')
                .addClass('ui-icon-minusthick');
        }

        //build the minimize button if not already built
        if(!$('.presav-chatPanel .ui-dialog-titlebar .ui-dialog-titlebar-minimize').length){
            $('.ui-dialog-titlebar').append('<a href="#" style="right:40px;" class="ui-dialog-titlebar-minimize ui-corner-all" role="button"><span class="ui-icon ui-icon-minusthick">minimize</span></a>');
            $('.presav-chatPanel .ui-dialog-titlebar .ui-dialog-titlebar-minimize').on('click', function(){
                var panel = $('.presav-chatPanel');
                var style = panel.attr('style');
                if(panel.hasClass('presav-minimize')){
                    //maximize the panel
                    panel
                        .removeClass('presav-minimize')
                        .attr('style', panelStyleMaximized);
                    $('.presav-chatPanel .ui-dialog-titlebar-minimize span')
                        .removeClass('ui-icon-plusthick')
                        .addClass('ui-icon-minusthick');
                }else{
                    //minimize the panel
                    panelStyleMaximized = style;

                    panel
                        .addClass('presav-minimize')
                        .attr('style', 'width: 200px; z-index: 1015; bottom: 0px; right: 20px; top: inherit; left: inherit;');
                    $('.presav-chatPanel .ui-dialog-titlebar-minimize span')
                        .removeClass('ui-icon-minusthick')
                        .addClass('ui-icon-plusthick');
                }
                return false;
            });
        }           
    },
    close: function(event, ui){
        //When the UI panel is closed, assume that it should re-open in a maximized state; however the place to maximize is the .open() method
    },
});

CSS(与最小化状态相关，并为可拖动性覆盖十字准线):

.presav-chatPanel .ui-dialog-titlebar-minimize{
    /* base taken from jquery-ui.min.css:
    position: absolute;
    right: 40px;
    top: inherit;
    width: 20px;
    padding: 1px;
    height: 20px; */

    position: absolute;
    border-radius: 0;
    outline: none;
    background: transparent;
    right: 38px !important;
    border: 1px solid #FFF;
    width: 20px !important;
    height: 20px !important;
    margin: inherit !important;
    top: inherit !important;
    /* margin: -10px 0 0 !important; */
    padding: 0 !important;
    text-align: center;
}
.presav-minimize #chatPanel{
    display: none !important;
    bottom: 0 !important;
    right: 10px !important;
}
.presav-minimize .ui-dialog-titlebar{
    cursor: default !important;
}