Creating resizable tabs
In our final resizable example, let's look at combining this component with one of the widgets that we looked at earlier. This will help us see how compatible it is with the rest of the library. We'll be working with the tabs component in the following example. The following screenshot shows the page we will end up with:
In your text editor, add the following CSS style to a new file, and save it as resizeTabs.css:
#resize { width: 200px; height: 200px; margin: 30px 0 0 30px; border: 1px solid #7a7a7a; }
#myTabs { width: 400px; height: 170px; }Next, add the following code to a new file:
<!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/resizeTabs.css">
<script src="js/jquery-2.0.3.js"></script>
<script src="development-bundle/ui/jquery.ui...
