When “resizing” is applied to an element, the element is given a handle and can be visually resized using a mouse. You’ve already seen this ability indirectly with the dialog widget, which is a resizable widget. Table 9-6 lists all available $.reslzable() methods.
Given that resizing is such a basic operation, you might be surprised at how many options are available, as shown in Table 9-7. Like the other mouse interactions in this chapter, the default utility fits many needs, but it still allows for many flexible options.
In the following example, you create a resizable widget with an animation, a minimum width and height of 300 pixels, ghosting, and a red box helper outline. The filled-in text uses the “bacon ipsum” text generator. Lorem ipsum is nice but bacon ipsum is tastier.
<!DOCTYPE html>
<html>
<head>
<link
type=”text/css”
href=”css/ui-lightness/jquery-ui-1.8.13.custom.css”
rel=”stylesheet” />
<script src=”http://code.jquery.com/jquery-1.7.1.js”></script>
<script src=”js/jquery-ui-1.8.13.custom.min.js”></script>
<style type=”text/css”>
.ui-resizable-helper {
border: 1px solid red;
}
#resize_me {
border: 1px solid black;
overflow : hidden;
}
</style>
<script type=”text/javascript”>
$(function(){
$(‘div#resize_me’).resizable({
animate: true,
ghost : true,
helper: “ui-resizable-helper”,
minWidth: 300,
minHeight : 300
});
});
</script>
</head>
<body>
<div id=”resize_me” class=”ui-widget-content”>
<h2 class=”ui-widget-header”>Pork and Stuff</h2>
Bacon ipsum dolor sit amet pastrami flank short ribs tongue, salami ham short loin shank Pancetta venison bacon shankle, swine jerky beef cow pork pork loin ham fatback beef rib salami ham hock. Salami beef bacon pork brisket, t-bone flank ball tip. Ham hock beef venison, t-bone andouille ribeye sirloin salami pork shankle. Ground round beef ribs tip, sirloin venison rump pork loin shoulder boudin salami flank chuck ham corned beef tenderloin. Tongue pork loin boudin, turkey ribeye salami pig biltong ham ham hock strip steak. Beef ribs short ribs turkey, pancetta swine pork meatloaf strip steak ham bacon corned beef short loin salami.
</div>
</body>
</html>
Code snippet is from resizable.txt
Is that slick or what? Figure 9-3 shows the resizable widget.
Source: Otero Cesar, Rob Larsen (2012), Professional jQuery, John Wiley & Sons, Inc