Loading"
From Documentation
Tmillsclare (talk | contribs) m |
Tmillsclare (talk | contribs) m (→Sample) |
||
Line 68: | Line 68: | ||
|} | |} | ||
− | + | =Sample= | |
+ | |||
[[Image:Zk loading test.png]] | [[Image:Zk loading test.png]] | ||
− | < | + | <source lang="xml" > |
<?taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c"?> | <?taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c"?> | ||
<zk> | <zk> | ||
Line 90: | Line 91: | ||
</style> | </style> | ||
</zk> | </zk> | ||
− | </ | + | </source> |
==Test Method== | ==Test Method== |
Revision as of 06:21, 9 December 2010
This is the Default mold for Loading.
Source
The CSS source for Loading from GitHub
Structure
Loading
Processing
Events
CSS\Action | Normal (Open) | Hover | Click, Select, and Drag. | Focus | Focus and Hover | Disable |
Naming: | ||||||
Supported: |
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-loading | Background and border | background-color: #6eadff;
cursor: wait; |
.z-loading-indicator | Inner part and text | background-color: #FFFFFF;
color: #102B6D; |
.z-loading-icon | The loading icon | background: transparent no-repeat center;
background-image: url(${c:encodeURL('~./zk/img/progress2.gif')}); |
.z-loading | Font size of the content | font-size: ${fontSizeM};
font-weight: normal; |
Sample
<?taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c"?>
<zk>
<style>
.z-loading {
background-color:#808080;
border:1px outset #A0A0A0;
font-weight: bold;
padding:2px;
}
.z-loading-indicator {
color: gray;
border:0 none;
}
.z-loading-icon {
background-image: url(${c:encodeURL('~./zk/img/progress3.gif')});
}
</style>
</zk>
Test Method
Loading
<syntax lang="xml"> <zk> <button label="showBusy"> <attribute name="onClick"><![CDATA[ Clients.showBusy("some message...");
]]></attribute>
</button> </zk> </syntax>
Processing
<syntax lang="xml"> <zk>
<button label="Test Progress" onClick="org.zkoss.lang.Threads.sleep(10000)"/>
</zk> </syntax>