jsgem-jquery-layout 1.2.0.pre2 → 1.3.0.pre1
Sign up to get free protection for your applications and to get access to all the features.
- data/lib/jsgem-jquery-layout/version.rb +1 -1
- data/vendor/assets/javascripts/jquery-layout.js +5165 -1753
- data/vendor/assets/stylesheets/jquery-layout.css +112 -51
- metadata +1 -1
@@ -3,45 +3,71 @@
|
|
3
3
|
*
|
4
4
|
* Created for jquery.layout
|
5
5
|
*
|
6
|
-
* Copyright (c)
|
6
|
+
* Copyright (c) 2010
|
7
7
|
* Fabrizio Balliano (http://www.fabrizioballiano.net)
|
8
8
|
* Kevin Dalman (http://allpro.net)
|
9
9
|
*
|
10
10
|
* Dual licensed under the GPL (http://www.gnu.org/licenses/gpl.html)
|
11
11
|
* and MIT (http://www.opensource.org/licenses/mit-license.php) licenses.
|
12
12
|
*
|
13
|
-
* Last Updated:
|
13
|
+
* Last Updated: 2010-02-10
|
14
14
|
* NOTE: For best code readability, view this with a fixed-space font and tabs equal to 4-chars
|
15
15
|
*/
|
16
16
|
|
17
17
|
/*
|
18
|
-
*
|
19
|
-
|
18
|
+
* DEFAULT FONT
|
19
|
+
* Just to make demo-pages look better - not actually relevant to Layout!
|
20
|
+
*/
|
20
21
|
body {
|
21
|
-
font-family:
|
22
|
-
font-size:
|
23
|
-
*font-size:
|
24
|
-
background-color: #EEE;
|
25
|
-
}
|
26
|
-
p {
|
27
|
-
margin: 1em 0;
|
22
|
+
font-family: Geneva, Arial, Helvetica, sans-serif;
|
23
|
+
font-size: 100%;
|
24
|
+
*font-size: 80%;
|
28
25
|
}
|
29
26
|
|
30
|
-
|
31
27
|
/*
|
32
|
-
* PANES
|
33
|
-
*/
|
28
|
+
* PANES & CONTENT-DIVs
|
29
|
+
*/
|
34
30
|
.ui-layout-pane { /* all 'panes' */
|
35
31
|
background: #FFF;
|
36
32
|
border: 1px solid #BBB;
|
37
33
|
padding: 10px;
|
38
34
|
overflow: auto;
|
39
|
-
|
35
|
+
/* DO NOT add scrolling (or padding) to 'panes' that have a content-div,
|
36
|
+
otherwise you may get double-scrollbars - on the pane AND on the content-div
|
37
|
+
- use ui-layout-wrapper class if pane has a content-div
|
38
|
+
- use ui-layout-container if pane has an inner-layout
|
39
|
+
*/
|
40
|
+
}
|
41
|
+
/* (scrolling) content-div inside pane allows for fixed header(s) and/or footer(s) */
|
42
|
+
.ui-layout-content {
|
43
|
+
padding: 10px;
|
44
|
+
position: relative; /* contain floated or positioned elements */
|
45
|
+
overflow: auto; /* add scrolling to content-div */
|
46
|
+
}
|
40
47
|
|
48
|
+
/*
|
49
|
+
* UTILITY CLASSES
|
50
|
+
* Must come AFTER pane-class above so will override
|
51
|
+
* These classes are NOT auto-generated and are NOT used by Layout
|
52
|
+
*/
|
53
|
+
.layout-child-container,
|
54
|
+
.layout-content-container {
|
55
|
+
padding: 0;
|
56
|
+
overflow: hidden;
|
57
|
+
}
|
58
|
+
.layout-child-container {
|
59
|
+
border: 0; /* remove border because inner-layout-panes probably have borders */
|
60
|
+
}
|
61
|
+
.layout-scroll {
|
62
|
+
overflow: auto;
|
63
|
+
}
|
64
|
+
.layout-hide {
|
65
|
+
display: none;
|
66
|
+
}
|
41
67
|
|
42
68
|
/*
|
43
|
-
* RESIZER-BARS
|
44
|
-
*/
|
69
|
+
* RESIZER-BARS
|
70
|
+
*/
|
45
71
|
.ui-layout-resizer { /* all 'resizer-bars' */
|
46
72
|
background: #DDD;
|
47
73
|
border: 1px solid #BBB;
|
@@ -49,73 +75,108 @@ p {
|
|
49
75
|
}
|
50
76
|
.ui-layout-resizer-drag { /* REAL resizer while resize in progress */
|
51
77
|
}
|
52
|
-
.ui-layout-resizer-
|
78
|
+
.ui-layout-resizer-hover { /* affects both open and closed states */
|
79
|
+
}
|
80
|
+
/* NOTE: It looks best when 'hover' and 'dragging' are set to the same color,
|
81
|
+
otherwise color shifts while dragging when bar can't keep up with mouse */
|
82
|
+
.ui-layout-resizer-open-hover , /* hover-color to 'resize' */
|
53
83
|
.ui-layout-resizer-dragging { /* resizer beging 'dragging' */
|
54
84
|
background: #C4E1A4;
|
55
85
|
}
|
56
86
|
.ui-layout-resizer-dragging { /* CLONED resizer being dragged */
|
57
|
-
border:
|
87
|
+
border: 1px solid #BBB;
|
88
|
+
}
|
89
|
+
.ui-layout-resizer-north-dragging,
|
90
|
+
.ui-layout-resizer-south-dragging {
|
91
|
+
border-width: 1px 0;
|
92
|
+
}
|
93
|
+
.ui-layout-resizer-west-dragging,
|
94
|
+
.ui-layout-resizer-east-dragging {
|
95
|
+
border-width: 0 1px;
|
58
96
|
}
|
97
|
+
/* NOTE: Add a 'dragging-limit' color to provide visual feedback when resizer hits min/max size limits */
|
59
98
|
.ui-layout-resizer-dragging-limit { /* CLONED resizer at min or max size-limit */
|
60
|
-
background: #
|
99
|
+
background: #E1A4A4; /* red */
|
61
100
|
}
|
62
101
|
|
63
|
-
.ui-layout-resizer-closed
|
102
|
+
.ui-layout-resizer-closed-hover { /* hover-color to 'slide open' */
|
64
103
|
background: #EBD5AA;
|
65
104
|
}
|
66
|
-
.ui-layout-resizer-sliding { /* resizer when pane
|
67
|
-
opacity:
|
68
|
-
filter:
|
105
|
+
.ui-layout-resizer-sliding { /* resizer when pane is 'slid open' */
|
106
|
+
opacity: .10; /* show only a slight shadow */
|
107
|
+
filter: alpha(opacity=10);
|
69
108
|
}
|
70
|
-
.ui-layout-resizer-sliding
|
71
|
-
opacity: 1; /* on
|
72
|
-
filter:
|
109
|
+
.ui-layout-resizer-sliding-hover { /* sliding resizer - hover */
|
110
|
+
opacity: 1.00; /* on-hover, show the resizer-bar normally */
|
111
|
+
filter: alpha(opacity=100);
|
73
112
|
}
|
74
|
-
/* sliding resizer - add 'outside-border' to resizer on
|
75
|
-
|
76
|
-
.ui-layout-resizer-
|
77
|
-
.ui-layout-resizer-
|
78
|
-
.ui-layout-resizer-
|
79
|
-
|
113
|
+
/* sliding resizer - add 'outside-border' to resizer on-hover
|
114
|
+
* this sample illustrates how to target specific panes and states */
|
115
|
+
.ui-layout-resizer-north-sliding-hover { border-bottom-width: 1px; }
|
116
|
+
.ui-layout-resizer-south-sliding-hover { border-top-width: 1px; }
|
117
|
+
.ui-layout-resizer-west-sliding-hover { border-right-width: 1px; }
|
118
|
+
.ui-layout-resizer-east-sliding-hover { border-left-width: 1px; }
|
80
119
|
|
81
120
|
/*
|
82
|
-
* TOGGLER-BUTTONS
|
83
|
-
*/
|
121
|
+
* TOGGLER-BUTTONS
|
122
|
+
*/
|
84
123
|
.ui-layout-toggler {
|
85
|
-
color: #666;
|
86
124
|
border: 1px solid #BBB; /* match pane-border */
|
87
|
-
background-color: #
|
125
|
+
background-color: #BBB;
|
88
126
|
}
|
89
|
-
.ui-layout-resizer
|
90
|
-
|
91
|
-
opacity
|
127
|
+
.ui-layout-resizer-hover .ui-layout-toggler {
|
128
|
+
opacity: .60;
|
129
|
+
filter: alpha(opacity=60);
|
92
130
|
}
|
93
|
-
.ui-layout-
|
131
|
+
.ui-layout-toggler-hover , /* need when NOT resizable */
|
132
|
+
.ui-layout-resizer-hover .ui-layout-toggler-hover { /* need specificity when IS resizable */
|
94
133
|
background-color: #FC6;
|
95
|
-
|
96
|
-
opacity
|
134
|
+
opacity: 1.00;
|
135
|
+
filter: alpha(opacity=100);
|
97
136
|
}
|
98
137
|
.ui-layout-toggler-north ,
|
99
138
|
.ui-layout-toggler-south {
|
100
|
-
border-width: 0 1px;
|
139
|
+
border-width: 0 1px; /* left/right borders */
|
101
140
|
}
|
102
141
|
.ui-layout-toggler-west ,
|
103
142
|
.ui-layout-toggler-east {
|
104
|
-
border-width: 1px 0;
|
143
|
+
border-width: 1px 0; /* top/bottom borders */
|
105
144
|
}
|
106
145
|
/* hide the toggler-button when the pane is 'slid open' */
|
107
|
-
.ui-layout-resizer-sliding
|
146
|
+
.ui-layout-resizer-sliding .ui-layout-toggler {
|
108
147
|
display: none;
|
109
148
|
}
|
110
149
|
/*
|
111
|
-
|
112
|
-
|
150
|
+
* style the text we put INSIDE the togglers
|
151
|
+
*/
|
113
152
|
.ui-layout-toggler .content {
|
153
|
+
color: #666;
|
114
154
|
font-size: 12px;
|
115
155
|
font-weight: bold;
|
116
|
-
|
117
|
-
padding-bottom:
|
156
|
+
width: 100%;
|
157
|
+
padding-bottom: 0.35ex; /* to 'vertically center' text inside text-span */
|
118
158
|
}
|
119
159
|
|
120
|
-
|
160
|
+
/*
|
161
|
+
* PANE-MASKS
|
162
|
+
* these styles are hard-coded on mask elems, but are also
|
163
|
+
* included here as !important to ensure will overrides any generic styles
|
164
|
+
*/
|
165
|
+
.ui-layout-mask {
|
166
|
+
border: none !important;
|
167
|
+
padding: 0 !important;
|
168
|
+
margin: 0 !important;
|
169
|
+
overflow: hidden !important;
|
170
|
+
position: absolute !important;
|
171
|
+
opacity: 0 !important;
|
172
|
+
filter: Alpha(Opacity="0") !important;
|
173
|
+
}
|
174
|
+
.ui-layout-mask-inside-pane { /* masks always inside pane EXCEPT when pane is an iframe */
|
175
|
+
top: 0 !important;
|
176
|
+
left: 0 !important;
|
177
|
+
width: 100% !important;
|
178
|
+
height: 100% !important;
|
179
|
+
}
|
180
|
+
div.ui-layout-mask {} /* standard mask for iframes */
|
181
|
+
iframe.ui-layout-mask {} /* extra mask for objects/applets */
|
121
182
|
|