Question

我正在创建一个有聊天支持的网站。我希望看起来与gmail聊天完全相同，这意味着用户可以调整聊天字段的大小。

我几乎就是这样，但是有一个问题：当我调整任何一个字段并且如果尺寸达到1100px那么它应该停止进一步增加但它不会停止。我为它制作了代码，但它有一些问题。我的代码如下：

Html代码是：

<div class="chat">

<div class="chatt-demo" id="resizeDiv" style="border: 1px solid #000;width:100px;height:100px;margin left: 10px;">First
</div>
    <div class="chatt-demo" id="resizeDiv" style="border: 1px solid #000;width:100px;height:100px;margin left: 10px;">First
</div>
    <div class="chatt-demo" id="resizeDiv" style="border: 1px solid #000;width:100px;height:100px;margin left: 10px;">First
</div>
    <div class="chatt-demo" id="resizeDiv" style="border: 1px solid #000;width:100px;height:100px;margin left: 10px;">First
</div>
</div>

和jQuery代码是：

$('.chatt-demo').resizable({
                    //containment: ".chart-area",
                    maxHeight: 580, 
                    //maxWidth: 300, 
                    minHeight: 330,
                    minWidth: 200,
                    handles: "n, nw, w, sw",
                    resize: function(event, ui) {
                            // return value from another function
                            restrictSize(ui);
                    }

        });

function restrictSize(ui) {
        var w = GetWidths('.chatt-demo');

        function GetWidths(id) {
            var i = 0;
            maxwidth = 250; 

            $(id).not('.hide-show-chatted').each(function (index) {
                i += parseInt($(this).width(), 10);
            });


            if(i > 1100){ 
             //if(maxwidth <= 0){ maxwidth = 250; }
             //maxheight = 250; ui.size.height = ui.size.height > maxheight ?              maxheight : ui.size.height; 
             //ui.size.width = ui.size.width > maxwidth ? maxwidth : ui.size.width;
             // ui.size.width = 500;

              ui.size.width = maxWidth;
              // here I have tried many solutions like fixed width and all but no succeess.
            }
        }
    }

在上面的代码中，当大小达到1100时，div自动调整大小到250左右。但我希望它不应该减少但是停在那里，并且用户不能进一步增加大小。

请任何人帮忙。

Answer 1

替换这个：

ui.size.width = maxWidth;

用这个：

return;

Answer 2

ui.size.width = maxWidth;

您已定义maxWidth = 250;所以它调整到250。您可以尝试将其设置为1100;

 ui.size.width = 1100;

参考此

http://jsfiddle.net/Anuja_oab/ukXap/142/

Answer 3

如果我正确理解了您的问题，您希望用户能够增加您的问题＆＃34; chatt-demo＆＃34;等级为1100px，如果大于此值，则只会增加宽度。

一个简单的CSS解决方案就是将其添加到CSS /样式中：

.chatt-demo {
  max-width: 1100px;
  // alternatively max-width: 1100px !important; if the above doesn't do anything
}

Answer 4

尝试在该div上包装文本..

<div class="chatt-demo" id="resizeDiv" style="border: 1px solid #000;width:200px; max-width:1100px; word-wrap:break-word;height:100px;margin left: 10px;">your text here..

Answer 5

我自己找到了。只需改变下面的条件：

if(i > 1100){ 
    var mywdth = $('.chatt-demo').width();
    var totalWidth = 0;
    $('.chatt-demo').not('.ui-resizable-resizing , .hide-show-chatted').each(function(index) {
    totalWidth += parseInt($(this).width(), 10);
    });
    var myMaxWidth = parseInt(1100-totalWidth, 10);
    ui.size.width = myMaxWidth;
 }

在jquery中的特定宽度之后停止增加宽度

5 个答案: