Question

基本上，我有一个＆＃34;小组＆＃34;它锚定在视口的右侧。我希望它可以水平调整大小。问题是，我希望负空间限制在200px和400px之间。如果这没有意义，请see the JSBin，它应该更容易理解。

这是我到目前为止所拥有的：

$( document ).ready(function() {
    var maxContentWidth;
    var minContentWidth;

    $(window).resize(function() {
      var ww = $(window).width();
      maxContentWidth = ww - 200;
      minContentWidth = ww - 400;
      $('#content').resizable("option","maxWidth",maxContentWidth);
      $('#content').resizable("option","minWidth",minContentWidth);
      //if I could even "reinitialize" the pane upon resize, but this doesn't work:
      /*$('#content')
          .css('right','10px')
          .css('top','10px')
          .css('left','200px')
          .css('bottom','10px');
          */
      //I discovered that doesn't work because jquery resizable applies a local "style" attribute, so then I tried this:
      //$('#content').attr('style','');  //this makes it completely not resizable at all

    });

    $('#content').resizable({
      handles: "w",
      maxWidth: maxContentWidth,
      minWidth: minContentWidth
    });
});

更新：正如您在jsbin评论中看到的那样，我决定重新初始化窗口调整大小的面板很好，应该很简单，对吧？好吧，jquery resizable使用本地＆＃34;样式＆＃34;属性而不是修改css。所以，我试着清除window.resize上的style属性，但如果我这样做，我根本无法调整面板的大小，这对我来说没有意义。

因此。任何想法我怎么能清楚＆＃34;清楚＆＃34;所有的样式和重置CSS而不破坏可调整大小的功能？

Answer 1

我不知道我是否理解，但让我们试一试！

http://jsfiddle.net/2eor05dt/

$( document ).ready(function() {

    // First Value
    var maxContentWidth;
    var minContentWidth;
    maxContentWidth = $(window).width() - 200;
    minContentWidth = $(window).width() - 400;

    $(window).resize(function() {
      var ww = $(window).width();
      maxContentWidth = ww - 200;
      minContentWidth = ww - 400;
      $('#content').resizable("option","maxWidth",maxContentWidth);
      $('#content').resizable("option","minWidth",minContentWidth);
      var gap = ww - $('#content').width() - parseInt($('#content').css('left')) - 10;
      $('#content').width($('#content').width() + gap);
    });

    $('#content').resizable({
      handles: "w",
      maxWidth: maxContentWidth,
      minWidth: minContentWidth
    });
});

重置＆＃34;风格＆＃34; jquery.resizable元素的属性，而不会破坏大小调整？

1 个答案: