Actions and Effects"
From Documentation
| (6 intermediate revisions by 3 users not shown) | |||
| Line 1: | Line 1: | ||
{{ZKClient-sideReferencePageHeader}} | {{ZKClient-sideReferencePageHeader}} | ||
| − | + | {{versionSince| 5.0.6}} | |
Here we describe how to provide more effects for [[ZK Developer's Reference/UI Patterns/Actions and Effects|client-side actions]]. | Here we describe how to provide more effects for [[ZK Developer's Reference/UI Patterns/Actions and Effects|client-side actions]]. | ||
| − | The allowed effects are actually the names of methods defined in <javadoc directory="jsdoc">zk.eff.Actions</javadoc>. Thus, | + | The allowed effects are actually the names of methods defined in <javadoc directory="jsdoc">zk.eff.Actions</javadoc>. Thus, to add a new effect, you have to add a new method to it. For example, |
<source lang="xml"> | <source lang="xml"> | ||
| Line 17: | Line 17: | ||
<source lang="xml"> | <source lang="xml"> | ||
| − | <div action="fooIn"> | + | <div action="show: fooIn"> |
.... | .... | ||
</div> | </div> | ||
| Line 26: | Line 26: | ||
function (<javadoc directory="jsdoc">_global_.DOMElement</javadoc> n, <javadoc directory="jsdoc">_global_.Map</javadoc> opts); | function (<javadoc directory="jsdoc">_global_.DOMElement</javadoc> n, <javadoc directory="jsdoc">_global_.Map</javadoc> opts); | ||
| − | where < | + | where <code>n</code> is the DOM element to apply the action, and <code>opts</code> is the options specified in the client-side action. |
| + | |||
| + | Notice that, before invoking jQuery's effects, you should invoke <javadoc directory="jsdoc" method="defaultAnimaOpts(zk.Widget, _global_.Map, _global_.Array, boolean)">_global_.jqzk</javadoc> to prepare the initial options for animation. For example, | ||
| + | |||
| + | <source lang="javascript" highlight="1"> | ||
| + | this.defaultAnimaOpts(wgt, opts, prop, true).jq | ||
| + | .css(css).show().animate(anima, { //the rest depending the jQuery effect you use | ||
| + | queue: false, easing: opts.easing, duration: opts.duration || 400, | ||
| + | complete: opts.afterAnima | ||
| + | }); | ||
| + | </source> | ||
=Version History= | =Version History= | ||
Latest revision as of 11:47, 25 July 2022
Since 5.0.6
Here we describe how to provide more effects for client-side actions.
The allowed effects are actually the names of methods defined in Actions. Thus, to add a new effect, you have to add a new method to it. For example,
zk.eff.Actions.fooIn = function (n, opts) {
//your own effect to make the node visible, such as
//zk(n).slideIn(this, opts);
};
Then, you could use it in the client-side action:
<div action="show: fooIn">
....
</div>
The signature of an effect method is as follows.
function (DOMElement n, Map opts);
where n is the DOM element to apply the action, and opts is the options specified in the client-side action.
Notice that, before invoking jQuery's effects, you should invoke jqzk.defaultAnimaOpts(Widget, Map, Array, boolean) to prepare the initial options for animation. For example,
this.defaultAnimaOpts(wgt, opts, prop, true).jq
.css(css).show().animate(anima, { //the rest depending the jQuery effect you use
queue: false, easing: opts.easing, duration: opts.duration || 400,
complete: opts.afterAnima
});
Version History
| Version | Date | Content |
|---|---|---|
| 5.0.6 | December 2010 | This feature was introduced in 5.0.6 |