jquery的函数.resizable()不工作

Question

在我的项目中，我在初始页面中有一段代码：

html

<div id="box">
    <div id="header"> <span id="title"></span> <span id="button">X</span> </div>
    <div id="text"> </div>
</div>

css

#box {
    border-style: solid;
    box-shadow: 2px 2px 2px black;
    max-width: 66%;
    max-height: 80%;
}

#button {
    background-color: #99CCFF;
    min-width: 32px;
    max-width: 5%;
    min-height: 32px;
    max-height: 100%;
    position:absolute;
    right:0px;
    text-align:center;
    padding-left:10px;
    padding-right:10px;
}

#header {
    background-color: #66B2FF; 
}

#title {
    text-decoration-color: #FFFFFF;
    font: 28px arial;
}

#text {
    background-color: #E0E0E0;
    text-decoration-color: #000000;
    font: 24px sans-serif;
    overflow: scroll;
}

我使用jquery中的尊重函数将这个元素定义为可拖动和可调整大小。拖曳行为是完美的，但调整不了。

这是jquery代码来调整这一点：

$('document').ready(function(){
    $('#box').draggable({
        cointainment: "#container"
    });

    $('#box').resizable({
        cointainment: "#container"
    });

    $('#box').hide();

    $('#button').click(function(){
        $('#box').hide();
    });

    $('a').click(function(e){
        if($(this).attr('href') != 'logout.html') {
            e.preventDefault();
            $.get($(this).attr('href'), function(data){
                var $temp  = $('<div/>', {html:data});
                $('#title').text($temp.find('title').text());
                $('#text').html($temp.remove('head').html());
                $('#box').show();
            });
        }
    });
});

有人能看到代码中的错误吗？

另外，我有一个关于css显示的问题。如何看到，我定义了最大宽度和最大高度；它发生的最大高度属性不起作用。有人能看出是怎么回事吗？

Answer 1

技术上来说，可调整大小的功能在您的代码中。但是，您需要对.ui-resizable-handle进行样式设置，以使其显示出来。如果你不能点击和按住手柄，那么你将无法调整它的大小。

所以，举个例子，我刚加了一个

.ui-resizable-handle {
    width: 20px;
    height: 20px;
    background: red;
}

现在你可以调整尺寸了。

视图演示

此外，还有更多关于可调整大小小部件的选项，您可以在此页上了解这些选项。

此外，还有一些可以查看这里的不同选项的演示