Actions and Effects"

From Documentation
 
(2 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
{{ZKClient-sideReferencePageHeader}}
 
{{ZKClient-sideReferencePageHeader}}
  
[since 5.0.6]
+
{{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]].
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 <tt>n</tt> is the DOM element to apply the action, and <tt>opts</tt> is the options specified in the client-side action.
+
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 shall 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,
+
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" high="1">
+
<source lang="javascript" highlight="1">
 
this.defaultAnimaOpts(wgt, opts, prop, true).jq
 
this.defaultAnimaOpts(wgt, opts, prop, true).jq
 
.css(css).show().animate(anima, { //the rest depending the jQuery effect you use
 
.css(css).show().animate(anima, { //the rest depending the jQuery effect you use

Latest revision as of 11:47, 25 July 2022


Actions and Effects



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

Last Update : 2022/07/25


Version Date Content
5.0.6 December 2010 This feature was introduced in 5.0.6



Last Update : 2022/07/25

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.