jQuery UI Interaction : Resizable
jQuery UI Interaction : Resizable
Using jQuery resizable plug-in , you can make selected item resizable. Means
you can resize it. Resizing by holding 'ctrl' key can resize it equally.
For options, events ,method and theming click here
EXAMPLE :
resizable.html
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui
/1.8/themes/base/jquery-ui.css"
rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery
/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui
/1.8/jquery-ui.min.js"></script>
<style type="text/css">
#resizable { width: 100px; height: 100px; background: silver; }
</style>
<script>
$(document).ready(function() {
$("#resizable").resizable();
});
</script>
</head>
<body style="font-size:62.5%;">
<div id="resizable"></div>
</body>
</html> |
Output :
You can resize the below box :
Download Source Code
Click here to see
online demo
Learn from experts! Attend
jQuery Training classes.
