Weblancet
Simplicity
We designed WebLancet to be as easy as possible to use. More
Scalability
WebLancet is designed to be scalable and extendable beyond the limits of imagination. More
Open source
WebLancet meets demand best as it is driven by community. More
JQuery integration
JQuery integration
2009 11 06 14:29:34
With the revision #2902 WebLancet is now completely automatically integrated with JQuery technology.

Now You do not need any $(document).ready and jquery files manual preloading.

To make Your JQuery code function properly, just add following code to the site:

{weblancet_jquery view=$view}
{/weblancet_jquery}


This function will generate all jquery base script tag, load jquery UI, and thanks to the lazy jquery plugin, it will dynamically and asynchroniously load the required plugins with good caching.

Inside this block You can program javascript that will be executed on "ready" event. The javascript will likely have "{ }" so we recommend adding literal:

{weblancet_jquery view=$view}
{literal}
   $("a.rel").click(function() {
      alert();
  });
{/literal}
{/weblancet_jquery}


JQuery UI

WebLancet is being rewritten to the JQuery UI. However, it is unclear if Your template has all the scripts and CSS to render it correctly so we decided to turn it off by default. To turn on fancy jquery set

key:JQuery,componentType:Interface to 1

All the requirements are to add the code above (weblancet_jquery empty block)

Adding new JQuery plugins to WebLancet repository

To make the plugin auto-loadable with weblancet integration, You have to copy it in the format:

/Js/jquery.<plugin-name>.js

<plugin-name> is jquery extension, the function You call it on the object, e.g. $(this).tablesorter();

If You want to automatically load some CSS while loading this plugin, add

/Css/jquery.<plugin-name>.css

if You want theming support for plugin (as for UI)

add the following value (e.g. dark) to Configuration:

key:CssTemplate,componentType:JQuery_<plugin-name>

and then WebLancet will load the file

/Css/jquery.<plugin-name>.<configuration-value>.css

e.g. /Css/jquery.tablesorter.brown.css

If You need any images for the plugin, please be so kind and use the

/Images/JQuery directory  - there You should create a component directory, and theme directories inside it.


IMPORTANT NOTE
Of  course, it is possible that one plugin will add several functions for jquery, like ui.js adds accordions, datepickers and etc. You'll have to hardcode it manually in /Smarty/Plugins/block.weblancet_jquery.php to add more $files[$name] to the array.