Actions and Effects"
From Documentation
m (Created page with '{{ZKClient-sideReferencePageHeader}} [since 5.0.6] =Version History= {{LastUpdated}} {| border='1px' | width="100%" ! Version !! Date !! Content |- | 5.0.6 | December 2010 | T…') |
|||
| (9 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]]. | ||
| + | |||
| + | 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"> | ||
| + | zk.eff.Actions.fooIn = function (n, opts) { | ||
| + | //your own effect to make the node visible, such as | ||
| + | //zk(n).slideIn(this, opts); | ||
| + | }; | ||
| + | </source> | ||
| + | |||
| + | Then, you could use it in the client-side action: | ||
| + | |||
| + | <source lang="xml"> | ||
| + | <div action="show: fooIn"> | ||
| + | .... | ||
| + | </div> | ||
| + | </source> | ||
| + | |||
| + | The signature of an effect method is as follows. | ||
| + | |||
| + | function (<javadoc directory="jsdoc">_global_.DOMElement</javadoc> n, <javadoc directory="jsdoc">_global_.Map</javadoc> opts); | ||
| + | |||
| + | 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= | ||
| Line 10: | Line 45: | ||
| 5.0.6 | | 5.0.6 | ||
| December 2010 | | December 2010 | ||
| − | | This feature was introduced in | + | | This feature was introduced in 5.0.6 |
|} | |} | ||
{{ZKClient-sideReferencePageFooter}} | {{ZKClient-sideReferencePageFooter}} | ||
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 |