Ticket #4358: test.builder.1.7.html

File test.builder.1.7.html, 3.3 KB (added by DarkSerg, 11 years ago)

Nested Sortables Test

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<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5<title>Nested Sortables Test. jQuery Page Builder</title>
6
7<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/1.7/jquery-1.3.2.js"></script>
8<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/1.7/ui/ui.core.js"></script>
9<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/1.7/ui/ui.sortable.js"></script>
10
11
12<script type="text/javascript">
13$(document).ready(function(){
14    // sortable blocks
15    $('.buildCol').sortable({items: '.buildBlock', connectWith: '.buildCol'}); 
16   
17    // sortable columns
18    $('#buildWrapper').sortable({items: '.buildCol'});
19});
20</script>
21
22<style type="text/css" media="screen">
23
24body {
25        font-family: Arial, Helvetica, sans-serif;
26        font-size: 12px;
27        color: #000;
28        background-color: #fff;
29        margin: 10px;
30        padding: 0px;
31}
32
33h2 {
34        text-align: center;
35}
36
37.clear_both {
38        clear: both;
39        font-size: 1px;
40}
41
42#buildWrapper {
43        border: 1px solid #999;
44        background-color: #eee;
45        width: 700px;
46        margin-left: auto;
47        margin-right: auto;
48        padding: 5px;
49}
50
51.buildCol {
52        border: 1px solid #999;
53        background-color: #fff;
54        width: 340px;
55        margin: 2px;
56        float: left;
57        padding: 2px;
58}
59
60.buildColHeader {
61        font-weight: bold;
62        font-size: 13px;
63        text-align: center;
64        background-color:#09f;
65        color: #fff;
66        margin-bottom: 3px;
67        padding: 2px;
68}
69
70.buildBlock {
71        padding: 3px;
72        width: 120px;
73        background-color:#096;
74        color: #fff;
75        text-align: center;
76        margin: 0px auto 3px auto;
77}
78
79</style>
80
81</head>
82    <body>
83               
84                <h2>Nested Sortables Test. jQuery Page Builder.</h2>
85       
86        <!-- build area wrapper -->
87        <div id="buildWrapper">
88                <!-- page columns -->
89           
90            <!-- column 1 -->
91            <div class="buildCol">
92                <!-- column header -->
93                <div class="buildColHeader">Welcome</div>
94               
95                <div class="buildBlocksWrap">
96                        <!-- column blocks -->
97                    <div class="buildBlock">Hello</div>
98                    <div class="buildBlock">Login</div>
99                    <div class="buildBlock">News</div>
100                    <div class="buildBlock">Test</div>
101                </div>
102            </div>
103            <!-- /column 1 -->
104               
105                <!-- column 2 -->
106            <div class="buildCol">
107                <!-- column header -->
108                <div class="buildColHeader">Info</div>
109               
110                <div class="buildBlocksWrap">
111                        <!-- column blocks -->
112                    <div class="buildBlock">RSS feed</div>
113                    <div class="buildBlock">About us</div>
114                    <div class="buildBlock">Contacts</div>
115                    <div class="buildBlock">Ads</div>
116                    <div class="buildBlock">Other</div>
117                </div>
118            </div>
119            <!-- /column 2 -->
120           
121            <div class="clear_both"></div>
122        </div>
123        <!-- /build area wrapper -->
124               
125    </body>
126</html>