Loading"

From Documentation
m
Line 1: Line 1:
 
{{ZKStyleGuidePageHeader}}
 
{{ZKStyleGuidePageHeader}}
  
 +
__TOC__
  
−
The Loading control is the item that you see when your page is waiting for server-side data
+
This is the '''Default''' mold for '''Loading'''.
  
 +
=Source=
 +
{{CSSSource
 +
| url=zul/src/archive/web/zul/css/norm.css.dsp
 +
| control=Loading
 +
|}}
  
−
{{ZKStyleGuideMoldHeadingToc}}
+
=Structure=
  
 +
===Loading===
 +
[[Image:Zk loading.png]]
 +
===Processing===
 +
[[Image:Zk processing.png]]
  
 +
=Events=
  
−
=Version History=
+
{{Template:Style Guide Event
 +
|
 +
|
 +
|
 +
|
 +
|
 +
|
 +
|
 +
|
 +
|
 +
|
 +
|
 +
|
 +
}}
  
 +
=CSS Specification=
  
−
{| border='1px' | width="100%"
+
{{Template:ZK Style Guide CSS}}
−
! Version !! Date !! Content
+
|.z-loading
 +
|Background and border
 +
|background-color: #6eadff;
 +
cursor: wait;<br />
 +
white-space: nowrap;<br />
 +
padding:3px;<br />
 +
border: 1px solid #83B5F7;
 
|-
 
|-
−
| &nbsp;
+
|.z-loading-indicator
−
| &nbsp;
+
|Inner part and text
−
| &nbsp;
+
|background-color: #FFFFFF;
 +
color: #102B6D;<br />
 +
border:1px solid #83B5F7;<br />
 +
white-space: nowrap;<br />
 +
padding:6px;
 +
|-
 +
|.z-loading-icon
 +
| The loading icon
 +
|background: transparent no-repeat center;
 +
background-image: url(${c:encodeURL('~./zk/img/progress2.gif')}); <br />
 +
height: 16px;<br />
 +
width: 16px;
 +
|-
 +
|.z-loading
 +
|Font size of the content
 +
|font-size: ${fontSizeM};
 +
font-weight: normal; <br />
 +
font-family: ${fontFamilyT};
 
|}
 
|}
 +
 +
===Sample===
 +
[[Image:Zk loading test.png]]
 +
 +
<syntax lang="xml" >
 +
<?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>
 +
</syntax>
 +
 +
==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>
  
  
 
{{ZKStyleGuidePageFooter}}
 
{{ZKStyleGuidePageFooter}}

Revision as of 06:20, 9 December 2010

DocumentationZK Style GuideMiscellaneousLoading
Loading



This is the Default mold for Loading.

Source

The CSS source for Loading from GitHub


Structure

Loading

Zk loading.png

Processing

Zk processing.png

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;
white-space: nowrap;
padding:3px;
border: 1px solid #83B5F7;

.z-loading-indicator Inner part and text background-color: #FFFFFF;

color: #102B6D;
border:1px solid #83B5F7;
white-space: nowrap;
padding:6px;

.z-loading-icon The loading icon background: transparent no-repeat center;

background-image: url(${c:encodeURL('~./zk/img/progress2.gif')});
height: 16px;
width: 16px;

.z-loading Font size of the content font-size: ${fontSizeM};

font-weight: normal;
font-family: ${fontFamilyT};

Sample

Zk loading test.png

<syntax lang="xml" > <?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> </syntax>

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>



Last Update : 2010/12/09

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/Miscellaneous/Loading&oldid=14633"