Html"
From Documentation
m ((via JWB)) |
|||
| (6 intermediate revisions by 5 users not shown) | |||
| Line 10: | Line 10: | ||
= Employment/Purpose = | = Employment/Purpose = | ||
| − | The simplest way is to use | + | The simplest way is to use an XUL component called <code>html </code>to embed whatever HTML tags you want to send directly to the browser. To avoid ZK from interpreting the HTML tags, you usually enclose them with <code><![CDATA[ </code>and <code>]]></code>. In other words, they are not the child component. Rather, they are stored in the <code>content </code>property. Notice you can use EL expressions in it. |
= Example = | = Example = | ||
| Line 25: | Line 25: | ||
</source> | </source> | ||
| − | where < | + | where <code><h4>...</p></code> will become the content of the <code>html</code> element (see also the <code>getContent</code> method of the <code>org.zkoss.zul.Html</code> class). |
| − | The < | + | The <code>html</code> component generates the HTML <code>SPAN</code> tag to enclose the content. In other words, it generates the following HTML tags when rendered to the browser. |
<source lang="xml" > | <source lang="xml" > | ||
| Line 35: | Line 35: | ||
</span> | </span> | ||
</source> | </source> | ||
| + | |||
| + | = Size issue = | ||
| + | On Chrome, if <code><html></code>'s sibling use <code>vflex</code> to set hight flexibly, developer must override <code>.z-html</code> CSS like this: | ||
| + | <source lang="css"> | ||
| + | .z-html { | ||
| + | display:block; | ||
| + | } | ||
| + | </source> | ||
| + | or | ||
| + | <source lang="css"> | ||
| + | .z-html { | ||
| + | display: inline-block; | ||
| + | } | ||
| + | </source> | ||
| + | Without this setting, <code>offsetHeight</code> of <code><html></code> will be zero, and sibling's height will be wrong. | ||
=Supported Events= | =Supported Events= | ||
| − | {| | + | {| class='wikitable' | width="100%" |
! <center>Name</center> | ! <center>Name</center> | ||
! <center>Event Type</center> | ! <center>Event Type</center> | ||
| Line 53: | Line 68: | ||
=Use Cases= | =Use Cases= | ||
| − | {| | + | {| class='wikitable' | width="100%" |
! Version !! Description !! Example Location | ! Version !! Description !! Example Location | ||
|- | |- | ||
| 3.6 | | 3.6 | ||
| Work with HTML tags: The Html component | | Work with HTML tags: The Html component | ||
| − | | [ | + | | [[ZK_Developer%27s_Reference/UI_Patterns/HTML_Tags/The_html_Component|The Html component]] |
|- | |- | ||
| 3.6 | | 3.6 | ||
| Line 71: | Line 86: | ||
=Version History= | =Version History= | ||
{{LastUpdated}} | {{LastUpdated}} | ||
| − | {| | + | {| class='wikitable' | width="100%" |
! Version !! Date !! Content | ! Version !! Date !! Content | ||
|- | |- | ||
Latest revision as of 10:40, 12 January 2022
Html
Employment/Purpose
The simplest way is to use an XUL component called html to embed whatever HTML tags you want to send directly to the browser. To avoid ZK from interpreting the HTML tags, you usually enclose them with <![CDATA[ and ]]>. In other words, they are not the child component. Rather, they are stored in the content property. Notice you can use EL expressions in it.
Example
<window id="win" title="Html Demo" border="normal">
<html><![CDATA[
<h4>Hi, ${win.title}</h4>
<p>It is the content of the html component.</p>
]]></html>
</window>
where <h4>...</p> will become the content of the html element (see also the getContent method of the org.zkoss.zul.Html class).
The html component generates the HTML SPAN tag to enclose the content. In other words, it generates the following HTML tags when rendered to the browser.
<span id=”...”>
<h4>Hi, Html Demo</h4>
<p>It is the content of the html component.</p>
</span>
Size issue
On Chrome, if <html>'s sibling use vflex to set hight flexibly, developer must override .z-html CSS like this:
.z-html {
display:block;
}
or
.z-html {
display: inline-block;
}
Without this setting, offsetHeight of <html> will be zero, and sibling's height will be wrong.
Supported Events
| None | None |
- Inherited Supported Events: XulElement
Supported Children
*None
Use Cases
| Version | Description | Example Location |
|---|---|---|
| 3.6 | Work with HTML tags: The Html component | The Html component |
| 3.6 | herf attribute in Html component | http://www.zkoss.org/forum/listComment/4745 |
| 3.6 | Use Html component to escape HTML characters | http://www.zkoss.org/forum/listComment/11118 |
Version History
| Version | Date | Content |
|---|---|---|