source: Dev/branches/jQueryUI/js/jquery/demos/resizable/constrain-area.html @ 244

Last change on this file since 244 was 244, checked in by hendrikvanantwerpen, 13 years ago

Inlogscherm werkt met jQuery UI! Woot!
File size: 1.3 KB
Line 
1<!DOCTYPE html>
2<html lang="en">
3<head>
4        <meta charset="utf-8">
5        <title>jQuery UI Resizable - Constrain resize area</title>
6        <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
7        <script src="../../jquery-1.7.1.js"></script>
8        <script src="../../ui/jquery.ui.core.js"></script>
9        <script src="../../ui/jquery.ui.widget.js"></script>
10        <script src="../../ui/jquery.ui.mouse.js"></script>
11        <script src="../../ui/jquery.ui.resizable.js"></script>
12        <link rel="stylesheet" href="../demos.css">
13        <style>
14        #container { width: 300px; height: 300px; }
15        #container h3 { text-align: center; margin: 0; margin-bottom: 10px; }
16        #resizable { background-position: top left; width: 150px; height: 150px; }
17        #resizable, #container { padding: 0.5em; }
18        </style>
19        <script>
20        $(function() {
21                $( "#resizable" ).resizable({
22                        containment: "#container"
23                });
24        });
25        </script>
26</head>
27<body>
28
29<div class="demo">
30       
31<div id="container" class="ui-widget-content">
32        <h3 class="ui-widget-header">Containment</h3>
33        <div id="resizable" class="ui-state-active">
34                <h3 class="ui-widget-header">Resizable</h3>
35        </div>
36</div>
37
38</div><!-- End demo -->
39
40
41
42<div class="demo-description">
43<p>Define the boundaries of the resizable area. Use the <code>containment</code> option to specify a parent DOM element or a jQuery selector, like 'document.'</p>
44</div><!-- End demo-description -->
45
46</body>
47</html>
Note: See TracBrowser for help on using the repository browser.