demos/resizable/snap-to-grid.html

<!doctype html>
<html lang="en">
<head>
        <meta charset="utf-8">
        <title>jQuery UI Resizable - Snap to grid</title>
        <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
        <script src="../../jquery-1.9.1.js"></script>
        <script src="../../ui/jquery.ui.core.js"></script>
        <script src="../../ui/jquery.ui.widget.js"></script>
        <script src="../../ui/jquery.ui.mouse.js"></script>
        <script src="../../ui/jquery.ui.resizable.js"></script>
        <link rel="stylesheet" href="../demos.css">
        <style>
        #resizable { width: 150px; height: 150px; padding: 0.5em; }
        #resizable h3 { text-align: center; margin: 0; }
        </style>
        <script>
        $(function() {
                $( "#resizable" ).resizable({
                        grid: 50
                });
        });
        </script>
</head>
<body>

<div id="resizable" class="ui-widget-content">
        <h3 class="ui-widget-header">Grid</h3>
</div>

<div class="demo-description">
<p>Snap the resizable element to a grid.  Set the dimensions of grid cells (height and width in pixels) with the <code>grid</code> option.</p>
</div>
</body>
</html>
1	torben	2125	<!doctype html>
2			<html lang="en">
3			<head>
4			<meta charset="utf-8">
5			<title>jQuery UI Resizable - Snap to grid</title>
6			<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
7			<script src="../../jquery-1.9.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			#resizable { width: 150px; height: 150px; padding: 0.5em; }
15			#resizable h3 { text-align: center; margin: 0; }
16			</style>
17			<script>
18			$(function() {
19			$( "#resizable" ).resizable({
20			grid: 50
21			});
22			});
23			</script>
24			</head>
25			<body>
26
27			<div id="resizable" class="ui-widget-content">
28			<h3 class="ui-widget-header">Grid</h3>
29			</div>
30
31			<div class="demo-description">
32			<p>Snap the resizable element to a grid. Set the dimensions of grid cells (height and width in pixels) with the <code>grid</code> option.</p>
33			</div>
34			</body>
35			</html>