jquery - 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();
            });
        }
    });
});

有人可以看到代码中的任何错误吗？

ps.: 另外，我有一个关于上面的 css 显示的问题。你怎么看，我同时定义了最大宽度和最大高度；碰巧 max-height 属性不起作用。有人可以看出它有什么问题吗？

Answer 1

可调整大小的功能在技术上存在于您的代码中。但是，您需要设置 .ui-resizable-handle 的样式以使其显示出来。如果您无法单击并按住 handle ，则无法调整它的大小。

例如我刚刚添加了这个

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

现在您可以调整它的大小了。

查看DEMO

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

此外，您还可以查看一些不同选项的演示 here