Ticket #4185: knobHandles17.html

File knobHandles17.html, 1.4 KB (added by rdworth, 11 years ago)
Line 
1<!doctype html>
2<html lang="en">
3<head>
4        <title>Resizable knobHandles : jQuery UI 1.7</title>
5        <link type="text/css" href="http://jquery-ui.googlecode.com/svn/tags/1.6rc6/themes/base/ui.all.css" rel="stylesheet" />
6        <script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/1.6rc6/jquery-1.3.1.js"></script>
7        <script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/1.6rc6/ui/ui.core.js"></script>
8        <script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/1.6rc6/ui/ui.resizable.js"></script>
9        <script type="text/javascript">
10        $(function() {
11                $("#default").resizable();
12                $("#knobHandles").resizable({ 
13                        handles: "all"
14                });
15        });
16        </script>
17        <style type="text/css">
18        .ui-resizable { margin: 10px; padding: 10px; width: 150px; height: 150px; border: 1px solid black; }
19        </style>
20        <style type="text/css">
21        /* knobHandles using CSS */
22        #knobHandles .ui-resizable-handle { width: 8px; height: 8px; border: 1px solid rgb(128, 128, 128); background: rgb(242, 242, 242); }
23        #knobHandles .ui-resizable-n, .ui-resizable-s { left: 45%; }
24        #knobHandles .ui-resizable-e, .ui-resizable-w { top: 45%; }
25        #knobHandles .ui-resizable-se { bottom: -5px; right: -5px; }
26        </style>
27</head>
28
29<body>
30
31<h1>Resizable knobHandles : jQuery UI 1.7</h1>
32
33<div id="default">#default</div>
34
35<div id="knobHandles">#knobHandles</div>
36
37</body>
38</html>