+ This simple example simply resizes a couple of boxes using a sizing grip at the bottom of the window. + Note that .resizable() does not handle of the UI aspects - it only manages the actual resizing + operation itself. You're responsible for creating placing the sizing handle where it makes sense + for your UI. +
+ ++ To apply resizing use the .resizable plugin and specify the resizable container + and a sizing handle that initiates resizing: +
+ $(".box").resizable({ handleSelector: ".win-size-grip"});
+
+ + This example makes the first two columns of the table resizable. +
+ +| + col 1 + | ++ col 2 + | ++ col 3 + | ++ col 4 + | + + + +
|---|---|---|---|
| + Column 1 + | ++ + Column 2 + | ++ + Column 3 + | ++ Column 4 + | +
| + Column 1 + | ++ Column 2 + | ++ Column 3 + | ++ Column 4 + | +
+ To create resizable columns requires a bit of extra effort as tables don't have an easy way to create + a drag handle that can be moved around. +
+
+ To make columns resizable, we can add an element to the right of the column to provide the handle
+ so we have a visual indicator for dragging. The table cell to resize is made position:relative
+ and the injected element is position: absolute and pushed to the right of the cell
+ to provide the drag handle. Dragging then simply resizes the cell.
+
+ In practice this means you need some CSS (or jquery styling) to force the injected styling + and the logic to inject the element. +
+ +<style>
+ .resizer {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: auto;
+ width: 3px;
+ cursor: col-resize;
+ }
+</style>
+<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" type="text/javascript"></script>
+<script src="../src/jquery-resizable.js"></script>
+<script>
+ //$("td,th")
+ $("td:first-child,td:nth-child(2)")
+ .prepend("<div class='resizer'></div>")
+ .css({ position: "relative" })
+ .resizable({
+ resizeHeight: false,
+ // we use the column as handle and filter
+ // by the contained .resizer element
+ handleSelector: "",
+ onDragStart: function (e, $el, opt) {
+ // only drag resizer
+ if (!$(e.target).hasClass("resizer"))
+ return false;
+ return true;
+ }
+ });
+</script>
+
+ + Simple example that demonstrates how to create slidable two-pane layouts using FlexBox and the resizable plug-in. + Note that Flexbox is not required, but used here to keep the layout simple. +
+ + + ++ This example creates two resizables for the horizontal and vertical splitter panes: +
+ + + +
+<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
+<script src="../src/jquery-resizable.js"></script>
+<script>
+ $(".panel-left").resizable({
+ handleSelector: ".splitter",
+ resizeHeight: false
+ });
+ $(".panel-top").resizable({
+ handleSelector: ".splitter-horizontal",
+ resizeWidth: false
+ });
+</script>
+
+