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的样式以便它显示出来。如果您无法单击并按住手柄，则无法调整其大小。

所以例如我刚刚添加了这个

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

现在你可以调整它的大小。

查看DEMO

此外，您可以在this page

上了解可调整大小小部件的更多选项

此外，还有一些可以查看here

的不同选项的演示

函数.resizable（）的jquery没有工作

1 个答案: