Splitter using jQUery UI library [closed]

问题

It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.

Closed 6 years ago.

I am trying to create resizable cells (Splitter) like the one below http://methvin.com/splitter/3csplitter.html

But I need to do that using jQUery UI.

I am not sure how similar thing can be achieved using jQUery UI.

Is it possible using the jQuery UI Resiable(http://jqueryui.com/resizable/)

If yes, could you please provide any reference example for the same. It should behave similar to the Methvin.com/splitter

回答1:

This is the code I used one day:

$(".resizable1").resizable({
    handles: 'e',
    minWidth: '50',
    maxWidth: '350',
    resize: function() {
        var remainingSpace = $(this).parent().width() - $(this).outerWidth(),
            divTwo = $(this).next(),
            divTwoWidth = remainingSpace - (divTwo.outerWidth() - divTwo.width());
        divTwo.width(divTwoWidth);
    }
});

http://jsfiddle.net/8qzTJ/

回答2:

This is definitely possible with the jquery ui, check out the docs here http://jqueryui.com/resizable/#helper this is just a short hand example

$(function() {
    $( "#resizable" ).resizable({
      handles: "n,e,s,w" // chose the handle you want
    });
  });

来源：https://stackoverflow.com/questions/15319834/splitter-using-jquery-ui-library