Implementing a basic resizable widget
Let's implement the basic resizable so we can see how easy making elements resizable is, when you use jQuery UI as the driving force behind your pages. In a new file in your text editor add the following code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Resizable</title>
<link rel="stylesheet" href="development-bundle/themes/redmond/jquery.ui.all.css">
<link rel="stylesheet" href="css/resize.css">
<script src="js/jquery-2.0.3.js"></script>
<script src="development-bundle/ui/jquery.ui.core.js"></script>
<script src="development-bundle/ui/jquery.ui.widget.js"></script>
<script src="development-bundle/ui/jquery.ui.mouse.js"></script>
<script src="development-bundle/ui/jquery.ui.resizable.js"></script>
</head>
<script>
$(document).ready(function($){
$("#resize").resizable...
