Custom Mold"
| Line 2: | Line 2: | ||
= Overview = | = Overview = | ||
| − | You can customize a widget's appearance with CSS. But if its DOM structure doesn't fulfill your requirement, for example, you want to render one more <code><i></code> to show an icon. Then you need to create a custom mold to render different DOM elements. | + | You can customize a widget's appearance with CSS. But if its DOM structure doesn't fulfill your requirement, for example, you want to render one more <code><i/></code> to show an icon. Then you need to create a custom mold to render different DOM elements. |
= Create Mold js = | = Create Mold js = | ||
Revision as of 02:37, 28 October 2022
Overview
You can customize a widget's appearance with CSS. But if its DOM structure doesn't fulfill your requirement, for example, you want to render one more <i/> to show an icon. Then you need to create a custom mold to render different DOM elements.
Create Mold js
Get Built-in Mold js
It's better to customize a mold based on the built-in mold js. All widgets' mold js are bundled with ZK jar files under the path:
[ZK_JAR] / web / js / [WIDGET_PACKAGE] / mold / *.js
[ZK_JAR]: could bezul.jar, zkex.jar, zkmax.jar[WIDGET_PACKAGE]: a widget's package folder like java package e.g. the mold js ofzul.messh.pagingis atzul/mesh*.js: file name is the widget name e.g.paging.js
Copy the built-in mold js to your project's same path and rename to a readable name, e.g. in a maven project, you need to put paging.js under:
src/main/resources/web/js/zul/mesh/mold/paging-tooltip.js
Modify Mold
After mold js is ready, you can start to modify it. You can use Template literals to improve the readability (IE not supported).
Register Custom Mold
With a mold js, you still need to register this custom mold on the component. So you need to create a lang-addon.xml and register the custom mold.
Apply Custom Mold
Specify the mold name you register in lang-addon.xml on target component's mold attribute.
<paging mold="tooltip"/>