Ticket #5587: Grid2.htm

File Grid2.htm, 3.0 KB (added by danielye, 12 years ago)

illustrates the problem with teh resizable

Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3<head>
4    <title></title>
5    <link href="redmond/jquery-ui-1.8.1.custom.css" rel="stylesheet" type="text/css" />
6    <script src="script/jquery-1.4.1.min.js" type="text/javascript"></script>
7    <script src="script/jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script>
8    <style type="text/css" media="all">
9        .grid 
10        {
11        }
12        .grid-cell
13        {
14            border-style: solid;
15            border-color: Silver;
16            border-width: 0px 1px 1px 0px;
17            vertical-align: middle;
18            width: 100px;
19        }
20        .grid-column-title
21        {
22            float: left;
23            display: inline;
24            background-color: #F0FFFF;
25            overflow: hidden;
26            width: 700px;
27            border-style: solid;
28            border-color: Silver;
29            border-width: 1px 1px 0px 0px;
30        }
31        .grid-column-title-inner
32        {
33            border-style: solid;
34            border-color: Silver;
35            border-width: 0px 0px 0px 0px;
36            width: 939px;
37        }
38        .grid-column-title .grid-cell
39        {
40            float: left;
41            display: inline;
42            width: 100px;
43            vertical-align: middle;
44        }
45    </style>
46 
47</head>
48<body>
49    <script language="javascript" type="text/javascript">
50        $(document).ready(function () {
51            var grid = $("#mygrid");
52            var rowHeight = 50;
53 
54            grid.find(".grid-cell").css("height", rowHeight + "px");
55            grid.children(":eq(0)").css("height", (rowHeight + 1) + "px");
56 
57            var resizeOpts = { handles: "e" }
58            var ele = grid.children(":eq(0)").children(":eq(0)").children();
59            ele.resizable(resizeOpts);
60        });
61    </script>
62    <h1>
63        Grid Example</h1>
64    <div id="mygrid" class="grid">
65        <div class="grid-column-title">
66            <div class="grid-column-title-inner">
67                <div class="grid-cell">
68                    column 0
69                </div>
70                <div class="grid-cell">
71                    Column 1
72                </div>
73                <div class="grid-cell">
74                    Column 2
75                </div>
76                <div class="grid-cell">
77                    Column 3
78                </div>
79                <div class="grid-cell">
80                    Column 4
81                </div>
82                <div class="grid-cell">
83                    Column 5
84                </div>
85                <div class="grid-cell">
86                    Column 6
87                </div>
88                <div class="grid-cell">
89                    Column 7
90                </div>
91                <div class="grid-cell">
92                    &nbsp;
93                </div>
94            </div>
95        </div>
96    </div>
97</body>
98</html>