jQuery"

From Documentation
(Created page with "{{ZKClient-sideReferencePageHeader}} ZK framework's Client Engine is based on [http://jquery.com/ jQuery], it's already bundled a custom jQuery. So you can use '''<tt>jq</tt>'''...")
 
 
(4 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
{{ZKClient-sideReferencePageHeader}}
 
{{ZKClient-sideReferencePageHeader}}
  
ZK framework's Client Engine is based on [http://jquery.com/ jQuery], it's already bundled a custom jQuery. So you can use '''<tt>jq</tt>''' or '''<tt>$</tt>''' as a jQuery object like:
+
ZK framework's Client Engine uses a customized [http://jquery.com/ jQuery]. So you can use '''<code>jq</code>''' or '''<code>$</code>''' as a jQuery object like:
  
 
<source lang='javascript'>
 
<source lang='javascript'>
Line 12: Line 12:
  
 
You should consider implementing your client code with the bundled jQuery first. For API details, please refer to [http://docs.jquery.com/Main_Page jQuery Documentation] for details.  
 
You should consider implementing your client code with the bundled jQuery first. For API details, please refer to [http://docs.jquery.com/Main_Page jQuery Documentation] for details.  
 +
  
 
= Version =
 
= Version =
To obtain the jQuery version bundled with your ZK version enter <tt>jq.fn.jquery</tt> into Console tab of a developer tool.
+
To obtain the jQuery version bundled with your ZK version enter <code>jq.fn.jquery</code> into Console tab in a developer tool.
  
  
 
= Load a Different jQuery =
 
= Load a Different jQuery =
If you want to load a different version of jQuery, which is not recommended, you need to avoid 2 versions of jQuery conflicts by <tt>noConflict()</tt> (Please refer to https://api.jquery.com/jquery.noconflict/)
+
You can load a different version of jQuery by <code><script/></code> or <code><?script?></code>. Because ZK always load that script later than ZK scripts, the different version of jQuery will override <code>$</code>. Therefore, you can access 2 versions of jquery with different variables:
  
<source lang='xml' high="3">
+
* <code>jq</code> to access ZK's bundled jQuery
    <script src="https://code.jquery.com/jquery-2.1.4.min.js" />
+
* <code>$</code> to access jQuery you loaded
    <script>
+
 
        var jQuery2 = jQuery.noConflict(true);
+
Please check examples: [https://github.com/zkoss/zkbooks/blob/master/clientreference/src/main/webapp/jquery.zul jquery.zul], [https://github.com/zkoss/zkbooks/blob/master/clientreference/src/main/webapp/jquery2.zul jquery2]
        console.log(jq.fn.jquery);
 
        console.log(jQuery2.fn.jquery);
 
    </script>
 
</source>
 
* Line 3: Use a different version (2.1.4) of jQuery with <tt>jQuery2</tt>
 
  
  
  
{{ZKClient-sideReferenceHeadingToc}}
 
 
{{ZKClient-sideReferencePageFooter}}
 
{{ZKClient-sideReferencePageFooter}}

Latest revision as of 02:16, 20 March 2023


ZK framework's Client Engine uses a customized jQuery. So you can use jq or $ as a jQuery object like:

$( "div" ).click(function() {
    //...
});

jq(mySelector).css( "background-color" );

You should consider implementing your client code with the bundled jQuery first. For API details, please refer to jQuery Documentation for details.


Version

To obtain the jQuery version bundled with your ZK version enter jq.fn.jquery into Console tab in a developer tool.


Load a Different jQuery

You can load a different version of jQuery by <script/> or <?script?>. Because ZK always load that script later than ZK scripts, the different version of jQuery will override $. Therefore, you can access 2 versions of jquery with different variables:

  • jq to access ZK's bundled jQuery
  • $ to access jQuery you loaded

Please check examples: jquery.zul, jquery2




Last Update : 2023/03/20

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