This documentation is for an older version of ZK. For the latest documentation please
click here.
This documentation is for an older version of ZK. For the latest documentation please
click here.
Window is made by 3*3 grid style, the background and text can be customized by users. Window can also combine with Caption as its title.
Note:
Structure:
Events:
|
Action: |
Normal (Open) |
Hover |
Click, Select, and Drag. |
Focus |
Focus and Hover |
Disable |
|
CSS naming: |
|
|
|
|
| |
|
Supported |
V | |||||
|
CSS naming: |
|
|
|
|
|
|
|
Supported |
V |
V |
CSS Specification:
|
Class Name |
Description |
Default Values |
|
.z-window-embedded-tl |
Top Left |
background: transparent url(${c:encodeURL('~./zul/img/wnd2/wtp-l.png')}) no-repeat 0 0; border-bottom: 1px solid #538BA2; |
|
.z-window-embedded-tm |
Top Middle |
background: transparent url(${c:encodeURL('~./zul/img/wnd2/wtp-m.png')}) repeat-x 0 0; |
|
.z-window-embedded-tr |
Top Right |
background: transparent url(${c:encodeURL('~./zul/img/wnd2/wtp-r.png')}) no-repeat right 0; |
|
.z-window-embedded-header |
The color and font size of the header |
color: #222222; font-family: ${fontFamilyC}; font-size: ${fontSizeM}; font-weight: normal; |
|
.z-window-embedded-header a, .z-window-embedded-header a:visited, .z-window-embedded-header a:hover |
A tag action |
color: #222222 |
|
.z-window-embedded-cnt |
The content of the window |
margin: 0; padding: 3px; border: 1px solid #538BA2; |
|
.z-window-embedded-cnt-noborder |
The content of the window without border |
Border: 0; |
|
.z-window-embedded-tool |
The background image of the tool |
overflow: hidden; width: 15px; height: 15px; float: right; cursor: pointer; background: transparent url(${c:encodeURL('~./zul/img/panel/tool-btn.gif')}) no-repeat; margin-left: 2px; |
Example:
<style>
.z-window-embedded-tl {
background: transparent url(${c:encodeURL('~./zul/img/wnd2/wtp-l-ol.png')}) no-repeat 0 0;
border-bottom: 1px solid #0B5CA0;
}
.z-window-embedded-tm {
background: transparent url(${c:encodeURL('~./zul/img/wnd2/wtp-m-ol.png')}) repeat-x 0 0;
}
.z-window-embedded-tr {
background: transparent url(${c:encodeURL('~./zul/img/wnd2/wtp-r-ol.png')}) no-repeat right 0;
}
.z-window-embedded-cnt {
border:1px solid #2c70a9; 
}
</style>
Structure:
Events:
|
Action: |
Normal (Open) |
Hover |
Click, Select, and Drag. |
Focus |
Focus and Hover |
Disable |
|
CSS naming: |
|
|
|
|
| |
|
Supported |
V | |||||
|
CSS naming: |
|
|
|
|
|
|
|
Supported |
V |
V |
CSS Specification:
|
Class Name |
Description |
Default Values |
|
.z-window-popup-tl |
Top Left |
background: transparent url(${c:encodeURL('~./zul/img/wnd2/wtp-l-ol.png')}) no-repeat 0 0; border-bottom: 1px solid #0B5CA0; |
|
.z-window-popup-tm |
Top Middle |
background: transparent url(${c:encodeURL('~./zul/img/wnd2/wtp-m-ol.png')}) repeat-x 0 0; |
|
.z-window-popup-tr |
Top Right |
background: transparent url(${c:encodeURL('~./zul/img/wnd2/wtp-r-ol.png')}) no-repeat right 0; |
|
.z-window-popup-header |
The color and font size of the header |
color: #FFFFFF; font-family: ${fontFamilyC}; font-size: ${fontSizeM}; font-weight: normal; |
|
.z-window-popup-tm-noheader |
No header |
background: transparent url(${c:encodeURL('~./zul/img/wnd2/wtp-m-ol.png')}) repeat-x 0 0; overflow: hidden; zoom: 1; font-size: 0pt; height: 5px; line-height: 0pt; |
|
.z-window-popup-header a, .z-window-popup-header a:visited, .z-window-popup-header a:hover, .z-window-popup-header .z-caption a, .z-window-popup-header .z-caption a:visited, .z-window-popup-header .z-caption a:hover |
A tag action |
color: #FFFFFF |
|
.z-window-popup-cnt |
The content of the window |
margin: 0; padding: 4px; overflow: hidden; zoom: 1; background: white; |
|
.z-window-popup-cnt-noborder |
The content of the window without border |
Border: 0; |
|
.z-window-popup-tool |
The background image of the tool |
overflow: hidden; width: 15px; height: 15px; float: right; cursor: pointer; background: transparent url(${c:encodeURL('~./zul/img/panel/tool-btn-ol.gif')}) no-repeat; margin-left: 2px; |
Example:
<style>
.z-window-popup-tl {
background: transparent url(${c:encodeURL('~./zul/img/wnd2/wtp-l.png')}) no-repeat 0 0;
border-bottom: 1px solid #538BA2;
}
.z-window-popup-tm {
background: transparent url(${c:encodeURL('~./zul/img/wnd2/wtp-m.png')}) repeat-x 0 0;
}
.z-window-popup-tr {
background: transparent url(${c:encodeURL('~./zul/img/wnd2/wtp-r.png')}) no-repeat right 0;
}
.z-window-popup-cnt {
border:1px solid #538BA2; 
}
</style>
Structure:
Events:
|
Action: |
Normal (Open) |
Hover |
Click, Select, and Drag. |
Focus |
Focus and Hover |
Disable |
|
CSS naming: |
|
|
|
|
| |
|
Supported |
V | |||||
|
CSS naming: |
|
|
|
|
|
|
|
Supported |
V |
V |
CSS Specification:
|
Class Name |
Description |
Default Values |
|
.z-window-modal-tl, .z-window-highlighted-tl, .z-window-overlapped-tl |
Top Left |
background: transparent url(${c:encodeURL('~./zul/img/wnd2/wtp-l-ol.png')}) no-repeat 0 0; border-bottom: 1px solid #0B5CA0; |
|
.z-window-modal-tm, .z-window-highlighted-tm, .z-window-overlapped-tm |
Top Middle |
background: transparent url(${c:encodeURL('~./zul/img/wnd2/wtp-m-ol.png')}) repeat-x 0 0; |
|
.z-window-modal-tr, .z-window-highlighted-tr, .z-window-overlapped-tr |
Top Right |
background: transparent url(${c:encodeURL('~./zul/img/wnd2/wtp-r-ol.png')}) no-repeat right 0; |
|
.z-window-modal-cl, .z-window-highlighted-cl, .z-window-overlapped-cl |
Center Left |
background: transparent url(${c:encodeURL('~./zul/img/wnd2/wtp-lr-ol.png')}) repeat-y 0 0; |
|
.z-window-modal-cm, .z-window-highlighted-cm, .z-window-overlapped-cm |
Center Middle |
border:1px solid #0B5CA0; padding: 0; margin:0 ; background: #5EABDB; |
|
z-window-modal-cr, .z-window-highlighted-cr, .z-window-overlapped-cr |
Center Right |
background: transparent url(${c:encodeURL('~./zul/img/wnd2/wtp-lr-ol.png')}) repeat-y right 0; |
|
.z-window-modal-bl, .z-window-highlighted-bl, .z-window-overlapped-bl |
Bottom Left |
background: transparent url(${c:encodeURL('~./zul/img/wnd2/wtp-l-ol.png')}) no-repeat 0 bottom; |
|
.z-window-modal-bm, .z-window-highlighted-bm, .z-window-overlapped-bm |
Bottom Middle |
background: transparent url(${c:encodeURL('~./zul/img/wnd2/wtp-m-ol.png')}) repeat-x 0 bottom; |
|
.z-window-modal-br, .z-window-highlighted-br, .z-window-overlapped-br |
Bottom Right |
background: transparent url(${c:encodeURL('~./zul/img/wnd2/wtp-r-ol.png')}) no-repeat right bottom; |
|
.z-window-modal-header, .z-window-overlapped-header, .z-window-highlighted-header |
The color and font size of the header |
color: #FFFFFF; font-family: ${fontFamilyC}; font-size: ${fontSizeM}; font-weight: normal; |
|
.z-window-modal-tm-noheader, .z-window-highlighted-tm-noheader,.z-window-overlapped-tm-noheader |
No header |
background: transparent url(${c:encodeURL('~./zul/img/wnd2/wtp-m-ol.png')}) repeat-x 0 0; overflow: hidden; zoom: 1; font-size: 0pt; height: 5px; line-height: 0pt; |
|
.z-window-modal-header a, .z-window-modal-header a:visited, .z-window-modal-header a:hover, .z-window-modal-header .z-caption a, .z-window-modal-header .z-caption a:visited, .z-window-modal-header .z-caption a:hover, .z-window-highlighted-header a, .z-window-highlighted-header a:visited, .z-window-highlighted-header a:hover, .z-window-highlighted-header .z-caption a, .z-window-highlighted-header .z-caption a:visited, .z-window-highlighted-header .z-caption a:hover, .z-window-overlapped-header a, .z-window-overlapped-header a:visited, .z-window-overlapped-header a:hover, .z-window-overlapped-header .z-caption a, .z-window-overlapped-header .z-caption a:visited, .z-window-overlapped-header .z-caption a:hover |
A tag action |
color: #FFFFFF |
|
.z-window-modal-cnt, .z-window-highlighted-cnt |
The content of the window |
margin: 0; padding: 2px; background: white; overflow: hidden; zoom: 1; |
|
.z-window-overlapped-cnt |
The content of the window |
margin: 0; padding: 4px; overflow: hidden; zoom: 1; background: white; |
|
.z-window-modal-cnt-noborder, .z-window-highlighted-cnt-noborder, .z-window-overlapped-cnt-noborder |
The content of the window without border |
border: 0; |
|
.z-window-modal-cm-noborder, .z-window-highlighted-cm-noborder,.z-window-overlapped-cm-noborder |
The center middle of the window without border |
border: 0; padding: 0; margin:0 ; background: #5EABDB; |
|
.z-window-modal-tool, .z-window-overlapped-tool, .z-window-highlighted-tool |
The background image of the tool |
overflow: hidden; width: 15px; height: 15px; float: right; cursor: pointer; background: transparent url(${c:encodeURL('~./zul/img/panel/tool-btn-ol.gif')}) no-repeat; margin-left: 2px; |
Example:
<style>
.z-window-overlapped-tl {
background: transparent url(${c:encodeURL('~./zul/img/wnd2/wtp-l.png')}) no-repeat 0 0;
}
.z-window-overlapped-tm {
background: transparent url(${c:encodeURL('~./zul/img/wnd2/wtp-m.png')}) repeat-x 0 0;
}
.z-window-overlapped-tr {
background: transparent url(${c:encodeURL('~./zul/img/wnd2/wtp-r.png')}) no-repeat right 0;
}
.z-window-overlapped-cnt {
border:1px solid #538BA2;
}
.z-window-overlapped-cl {
background: transparent url(${c:encodeURL('~./zul/img/wnd2/wtp-lr.png')}) repeat-y 0 0;
}
.z-window-overlapped-cm {
border: 0;
border-top: 1px solid #538BA2;
}
.z-window-overlapped-cr {
background: transparent url(${c:encodeURL('~./zul/img/wnd2/wtp-lr.png')}) repeat-y right 0;
}
.z-window-overlapped-bl {
background: transparent url(${c:encodeURL('~./zul/img/wnd2/wtp-l.png')}) no-repeat 0 bottom;
}
.z-window-overlapped-bm {
background: transparent url(${c:encodeURL('~./zul/img/wnd2/wtp-m.png')}) repeat-x 0 bottom;
}
.z-window-overlapped-br {
background: transparent url(${c:encodeURL('~./zul/img/wnd2/wtp-r.png')}) no-repeat right bottom;
}
</style>