jQuery

Venddor IO, in its current version, integrates jQuery to enhance its functionalities. Additional features are delivered through plugins.

Guidelines

1. Short Notation Utilization:

To invoke all jQuery methods, use the shorthand notation ($):

$.browser.msie;
$('#test').ourPluginMethod();

Refrain from employing the jQuery variable for method invocations.

2. Plugin Creation:

When crafting plugins, adhere to the jQuery coding conventions. Similarly, for defining functions, stick to established PHP practices.

$(window).exampleFunction();
variableName = 123;

3. Inline JavaScript Formatting:

Structure inline JavaScript as:

<script type="text/javascript">
...
</script>

Limit the usage of inline JavaScript. If logic needs to be embedded directly into a template, reconsider the strategy. Utilise inline JavaScript primarily to transmit data from PHP to JavaScript.

4. Integrating External Scripts:

For incorporating external scripts, leverage the {script} Smarty function:

{script src="js/core.js"}

Should there be a need to dynamically load an external script, rely ONLY on the $.getScript function, which is optimised for tracking and compatibility with various namespaces and libraries.

5. Third-Party Libraries:

House third-party JavaScript libraries under the js/lib directory. When an extension to functionalities is required, consider developing a wrapper, for instance, ceDialog.

6. Document Ready Event:

For the ready event that triggers upon document completion, employ the comprehensive notation:

$(document).ready(function() {
    // function content
});

Alternatively!

$(function() {
    // function content
});

Features Overview

1. Callbacks:

   Callbacks are frequently integrated within AJAX and other functionalities. To relay a callback to a specific object's method, use an anonymous function:

   $.ceAjax('request', url, {callback: function() {
       objectName.methodName();
   }});

2. Async and Defer in Scripts:

   With the introduction of Venddor IO, native support for async and defer scripts has been integrated.

   These scripts are linked as:

   {script src="js/tygh/bottom_panel.js" defer=true}
   {script src="js/tygh/bottom_panel.js" async=true}