Default"

From Documentation
 
(17 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 
{{ZKStyleGuidePageHeader}}
 
{{ZKStyleGuidePageHeader}}
  
−
This is the '''[MOLD NAME]''' mold for '''[ITEM NAME]'''
+
This is the '''Default''' mold for '''Auxhead'''
  
 
=Source=
 
=Source=
−
<br />
+
 
 +
{{CSSSource
 +
| url=zul/src/archive/web/js/zul/grid/css/grid.css.dsp
 +
| control=Auxhead with Grid
 +
|}}
 
{{CSSSource
 
{{CSSSource
−
|url=
+
| url=zul/src/archive/web/js/zul/sel/css/listbox.css.dsp
 +
| control=Auxhead with Listbox
 +
|}}
 +
{{CSSSource
 +
| url=zul/src/archive/web/js/zul/sel/css/tree.css.dsp
 +
| control=Auxhead with Tree
 
|}}
 
|}}
  
 
=Structure=
 
=Structure=
  
−
[[Image:Auxhead1.gif]]
+
[[File:Auxhead-one.png]]
−
[[Image:Auxhead2.gif]]
+
 
 +
[[File:Auxhead-two.png]]
  
 
=Events=
 
=Events=
−
<br />
+
 
−
{{Template:Style Guide Event|.z-combo-item|-over|-seld||-over-seld|-disd|V|!|!|||!|
+
{{Template:Style Guide Event|z-auxhead, z-auxheader||||||V||||||
 
}}
 
}}
  
 
=CSS Specification=
 
=CSS Specification=
−
<br />
+
 
−
{{Template:Style Guide CSS}}
+
{{Template:ZK Style Guide CSS}}
−
|.z-combo -item.z-combobox-pp
+
|div.z-grid-header tr.z-auxhead
−
.z-combo-item,
+
|Background image
−
.z-combobox-pp .z-combo-item a,
+
|background-image: url(${c:encodeURL('~./zul/img/grid/s_hd.gif')});
−
.z-combobox-pp .z-combo-item a:visited
+
background-color: #C7E5F1;
−
|Font size
+
background-repeat: repeat-x;
−
|font-size: ${fontSizeM};
 
−
font-weight: normal;
 
−
color: black;
 
−
text-decoration: none;
 
 
|-
 
|-
−
|.z-combobox-pp .z-combo-item-text,
+
|div.z-grid-header th.z-auxheader
−
.z-combobox-pp .z-combo-item-img
 
 
|Font size
 
|Font size
−
|white-space: nowrap;  
+
|overflow: hidden; border: 1px solid; border-color: #DAE7F6 #9EB6CE #9EB6CE #DAE7F6;  
−
font-size: ${fontSizeS}; cursor: pointer;
+
white-space: nowrap; padding: 2px;
−
|-
+
font-size: ${fontSizeM}; font-weight: normal;
−
|.z-combobox-pp .z-combo-item-inner,
 
−
.z-combobox-pp .z-combo-item-cnt
 
−
|Color and font size of Comboitem's description and content
 
−
|color: #888;  
 
−
font-size: ${fontSizeXS};  
 
−
padding-left: 6px;
 
 
|-
 
|-
−
|div.z-grid-header tr.z-columns, div.z-grid-header tr.z-auxhead
+
|.z-auxheader-cnt
−
|Background image
+
|Font size of the content
−
|background-color:#C3E7FB;
+
|font-size: ${fontSizeM}; font-weight: normal; font-family: ${fontFamilyT};  
−
background-image:url(/Zk-1/zkau/web/zul/img/grid/column-bg.png);
+
border: 0; margin: 0; padding: 0; overflow: hidden;
−
background-repeat:repeat-x;
 
 
|}
 
|}
 +
 +
=Example=
 +
[[Image:Auxhead-demo.png]]
 +
<source lang="css">
 +
<style>
 +
div.z-grid-header tr.aux1.z-auxhead {
 +
background-color: #F0FDFF;
 +
background-position: 0 8px;
 +
}
 +
div.z-grid-header tr.aux2.z-auxhead {
 +
background-position: 0 -10px;
 +
}
 +
</style>
 +
</source>
 +
<source lang="xml">
 +
...
 +
<auxhead sclass="aux1">
 +
<auxheader label="H1'07" colspan="6"/>
 +
<auxheader label="H2'07" colspan="6"/>
 +
</auxhead>
 +
<auxhead sclass="aux2">
 +
<auxheader label="Q1" colspan="3"/>
 +
<auxheader label="Q2" colspan="3"/>
 +
<auxheader label="Q3" colspan="3"/>
 +
<auxheader label="Q4" colspan="3"/>
 +
</auxhead>
 +
...
 +
</source>
  
  
 
{{ZKStyleGuidePageFooter}}
 
{{ZKStyleGuidePageFooter}}

Latest revision as of 06:06, 20 September 2010

DocumentationZK Style GuideXUL Component SpecificationAuxheadDefault
Default



This is the Default mold for Auxhead

Source

The CSS source for Auxhead with Grid from GitHub


The CSS source for Auxhead with Listbox from GitHub


The CSS source for Auxhead with Tree from GitHub


Structure

Auxhead-one.png

Auxhead-two.png

Events

CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable
Naming: z-auxhead, z-auxheader
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
div.z-grid-header tr.z-auxhead Background image background-image: url(${c:encodeURL('~./zul/img/grid/s_hd.gif')});

background-color: #C7E5F1; background-repeat: repeat-x;

div.z-grid-header th.z-auxheader Font size overflow: hidden; border: 1px solid; border-color: #DAE7F6 #9EB6CE #9EB6CE #DAE7F6;

white-space: nowrap; padding: 2px; font-size: ${fontSizeM}; font-weight: normal;

.z-auxheader-cnt Font size of the content font-size: ${fontSizeM}; font-weight: normal; font-family: ${fontFamilyT};

border: 0; margin: 0; padding: 0; overflow: hidden;

Example

Auxhead-demo.png 

<style>
	div.z-grid-header tr.aux1.z-auxhead { 				
		background-color: #F0FDFF;	
		background-position: 0 8px;
	}
	div.z-grid-header tr.aux2.z-auxhead { 							
		background-position: 0 -10px;
	}	
</style>

...
<auxhead sclass="aux1">
	<auxheader label="H1'07" colspan="6"/>
	<auxheader label="H2'07" colspan="6"/>
</auxhead>
<auxhead sclass="aux2">
	<auxheader label="Q1" colspan="3"/>
	<auxheader label="Q2" colspan="3"/>
	<auxheader label="Q3" colspan="3"/>
	<auxheader label="Q4" colspan="3"/>
</auxhead>
...



Last Update : 2010/09/20

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


Retrieved from "https://www.zkoss.org/_w/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Auxhead/Default&oldid=7279"