jQuery UI 门户组件答案

【问题标题】：jQuery UI portletsjQuery UI 门户组件
【发布时间】：2012-12-02 04:23:41
【问题描述】：

我正在尝试制作可拖动、可调整大小、可折叠、可关闭的面板，并且可以最大化和最小化，如下所示。

如果调整大小会溢出内容，我还需要滚动portlet 内容。当我设置overflow:auto 时，即使内容没有溢出，滚动也会出现。

.portlet {
    position: absolute;
    overflow:auto !important;
}

你可以在这里查看我的代码和演示panel code
任何帮助将不胜感激。提前致谢！！

【问题讨论】：

您的设计是流畅的设计，因此它会随着浏览器大小的调整而改变……因此无需使用滚动条
它不是一个流畅的设计..我没有使用媒体查询或任何此类响应功能

标签： jquery html css jquery-ui

【解决方案1】：

我翻遍了，找到了这个教程-Create a Windows-like Interface with jQuery UI

这里是jsFiddle 和代码-

  var _init = $.ui.dialog.prototype._init;
    $.ui.dialog.prototype._init = function() {
        _init.apply(this, arguments);

        var dialog_element = 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-icon-minusthick"></span></a>');

        $('#dialog_window_minimized_container').append(
            '<div class="dialog_window_minimized ui-widget ui-state-default ui-corner-all" id="' + 
            dialog_id + '_minimized">' + this.uiDialogTitlebar.find('.ui-dialog-title').text() + 
            '<span class="ui-icon ui-icon-newwin"></div>');

        $('#' + dialog_id + '-minbutton').hover(function() {
            $(this).addClass('ui-state-hover');
        }, function() {
            $(this).removeClass('ui-state-hover');
        }).click(function() {
            dialog_element.close();
            $('#' + dialog_id + '_minimized').show();
        });

        $('#' + dialog_id + '_minimized').click(function() {
            $(this).hide();
            dialog_element.open();
        });
    };

        $(document).ready(function() {
            $('#create_button').button().click(function() {
                var create_dialog = $('#dialog_window_1');
                var create_button = $(this);
                if( create_dialog.dialog('isOpen') ) {
                    create_button.button('option', 'label', 'Create a new Window');
                    create_dialog.dialog('close');
                } else {
                    create_button.button('option', 'label', 'Close Window');
                    create_dialog.dialog('open');
                }
            });

            $('#dialog_window_1').dialog({
                width: 'auto',
                height: 'auto',
                autoOpen : false,
                buttons: [
                    {
                        text: 'Create',
                        click: function() {
                            var div_count = $('.dialog_window').length + 1;
                            var div_id = 'dialog_window_' + div_count;
                            var div_title = $('#new_window_title').val();
                            var div_content = $('#new_window_content').val();
                            var buttons = new Array();
                            if( $('#alertbutton').is(':checked') ) {
                                buttons.push({
                                    text: 'ALERT',
                                    click: function() {
                                        alert('ALERTING from Dialog Widnow: ' + div_title);
                                    }
                                });
                            }

                            if( $('#closebutton').is(':checked') ) {
                                buttons.push({
                                    text: 'CLOSE',
                                    click: function() {
                                        $('#' + div_id).dialog('close');
                                    }
                                });
                            }

                            $('body').append('<div class="dialog_window" id="' + div_id + '">' + div_content + '</div>');

                            var dialog = $('#' + div_id).dialog({
                                width: 'auto',
                                height: 'auto',
                                title : div_title,
                                autoOpen : true,
                                buttons: buttons
                            });
                        }
                    }
                ]
            });
            $('#buttonlist').buttonset();
        });`

【讨论】：

【解决方案2】：

将您的 css 代码更改为以下内容。

.portlet {
    position: absolute;
}
.portlet-content {
    overflow:auto !important;
}

【讨论】：

进行了更改...仍然无法正常工作..演示在这里panel demo@Doehl

【解决方案3】：

导致 jsFiddle 中滚动条的原因是 ui-resizable-handle 元素。

添加这些 CSS 语句应该会移除滚动条，直到需要它们并且似乎不会影响拖动手柄的功能

.ui-resizable-s { bottom: 0 !important }
.ui-resizable-e { right: 0 !important }

这是更新后的jsFiddle

顺便说一句。尽管如果您删除 jsFiddle HTML 区域中的 jquery 样式表链接，它们的行为似乎会更好，但删除它会改变它们的起始位置。所以我把它留在了期望它在你的实际代码中正确地为你工作。

【讨论】：