Default (OS-Horizontal)"

From Documentation
Line 43: Line 43:
 
<br />
 
<br />
 
{{Template:ZK Style Guide CSS}}
 
{{Template:ZK Style Guide CSS}}
 
+
|.z-splitter-os-hor
 +
|Height
 +
|font-size:0; max-width: 8px; width: 8px;
 +
|-
 +
|.z-splitter-os-hor-outer
 +
|Background image of splittable
 +
|background-image:url(${c:encodeURL('~./zul/img/splt/splt-h.gif')}); background-repeat: repeat-y; max-width: 8px; width: 8px; background-position: top right;
 +
|-
 +
|.z-splitter-os-hor-ns
 +
|Styling of non-splittable
 +
|font-size:0; max-width: 8px; width: 8px;
 +
|-
 +
|.z-splitter-os-hor-btn-l
 +
|Button icon of left side
 +
|width: 8px; min-height: 50px; height: 50px; background-image: url(${c:encodeURL('~./zul/img/splt/colps-l-os.gif')});
 +
|-
 +
|.z-splitter-os-hor-btn-r
 +
|Button icon of right side
 +
|width: 8px; min-height: 50px; height: 50px; background-image: url(${c:encodeURL('~./zul/img/splt/colps-r-os.gif')});
 +
|}
  
 
{{ZKStyleGuidePageFooter}}
 
{{ZKStyleGuidePageFooter}}

Revision as of 04:39, 9 September 2010

Default (OS-Horizontal)



This is the efault (OS-Horizontal) mold for Splitter.

Source


The CSS source for from GitHub


Structure

Splitter-os-hor1.jpg

Splitter-os-hor2.jpg Splitter-os-hor3.jpg Splitter-os-hor4.jpg

Events


CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable
Naming: .z-splitter-os-hor -btn-t:hover,

-btn-b:hover,

-btn-visi (IE Only)

Supported: V !

Note: An exclamation mark(!) means that the action effect is done by CSS background , not CSS background-position

CSS Specification


Class Name Description Default Values
.z-splitter-os-hor Height font-size:0; max-width: 8px; width: 8px;
.z-splitter-os-hor-outer Background image of splittable background-image:url(${c:encodeURL('~./zul/img/splt/splt-h.gif')}); background-repeat: repeat-y; max-width: 8px; width: 8px; background-position: top right;
.z-splitter-os-hor-ns Styling of non-splittable font-size:0; max-width: 8px; width: 8px;
.z-splitter-os-hor-btn-l Button icon of left side width: 8px; min-height: 50px; height: 50px; background-image: url(${c:encodeURL('~./zul/img/splt/colps-l-os.gif')});
.z-splitter-os-hor-btn-r Button icon of right side width: 8px; min-height: 50px; height: 50px; background-image: url(${c:encodeURL('~./zul/img/splt/colps-r-os.gif')});



Last Update : 2010/09/09

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.