Loading"
From Documentation
Tmillsclare (talk | contribs) m |
Tmillsclare (talk | contribs) m (→Sample) |
||
| (2 intermediate revisions by the same user not shown) | |||
| Line 68: | Line 68: | ||
|} | |} | ||
| − | == | + | =Example= |
| + | |||
[[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= | ||
| − | |||
===Loading=== | ===Loading=== | ||
| − | < | + | |
| + | <source lang="xml"> | ||
<zk> | <zk> | ||
<button label="showBusy"> | <button label="showBusy"> | ||
| Line 102: | Line 105: | ||
</button> | </button> | ||
</zk> | </zk> | ||
| − | </ | + | </source> |
===Processing=== | ===Processing=== | ||
| − | < | + | |
| + | <source lang="xml"> | ||
<zk> | <zk> | ||
<button label="Test Progress" onClick="org.zkoss.lang.Threads.sleep(10000)"/> | <button label="Test Progress" onClick="org.zkoss.lang.Threads.sleep(10000)"/> | ||
</zk> | </zk> | ||
| − | </ | + | </source> |
{{ZKStyleGuidePageFooter}} | {{ZKStyleGuidePageFooter}} | ||
Latest revision as of 06:25, 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; |
Example
<?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
<zk>
<button label="showBusy">
<attribute name="onClick"><![CDATA[
Clients.showBusy("some message...");
]]></attribute>
</button>
</zk>
Processing
<zk>
<button label="Test Progress" onClick="org.zkoss.lang.Threads.sleep(10000)"/>
</zk>