Question

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

** 我为这个问题添加了一个答案，无需使用任何插件即可解决该问题（这对有关JS / CSS的IMO具有指导意义）。您的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;
}

jQuery UI对话框-需要添加最小化按钮

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

1 个答案: