Javascript JQuery UI对话框-需要添加最小化按钮 更新-不带JQuery UI插件的方法

**我为这个问题添加了一个答案，它解决了这个问题，而不使用任何插件（这对所涉及的JS/CSS很有启发性）。您的CSS可能需要有所不同，但这是一个良好的开端**

--

我熟悉jQuery，但不熟悉jQueryUI。项目使用jQueryUI的

.dialog（）

方法，我观察到该方法将实际容器包装在指定元素周围，通常是一个div

标题栏和

x

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

我的目标是在“关闭”按钮旁边添加一个最小化按钮，如果单击该按钮，将最小化对话框（栏保持可见，其他所有内容隐藏，并且栏移动到接近页面底部），如果在最小化时单击，将最大化对话框

---

我当然可以用我自己的HTML/CSS/JS来实现这一点，方法是创建按钮并将其绝对定位到上面绘制的条/容器中。但是在jQueryUI中有没有一种更自然的方法来实现这一点（没有额外的插件）？谢谢你的帮助

下面的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
    },
});

可能的重复可能的重复。

.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;
}