I work quite a lot with JQueryUI 1.8 lately, so time has come to create a new CB plugin. The JQueryUI Plugin handles (core)JS dependencies and CSS links for you, so no CFHTMLHEADs in your views anymore to include the proper files. You can just write:
<cfscript>
jQueryUI = getPlugin("JQueryUI",true);
jQueryUI.setEnableWidget('tabs');
</cfscript>
...or to enable multiple widgets at once:
jQueryUI.setEnableWidgets('tabs,datepicker');
What about effects and adding different ones along your code? Well, you can keep adding them and the plugin handles the boring stuff for you.
<cfscript>
jQueryUI.setEnableEffect('bounce');
// other code
jQueryUI.setEnableEffects('bounce,blind');
// other code
jQueryUI.setEnableEffect('explode');
</cfscript>
Adding interactions is rather simple as well. The following enables 'droppable and sortable' and includes the proper core JS files for you.
jQueryUI.setEnableInteractions('droppable,sortable');
What if you only need one specific core file only?
jQueryUI.setEnableCore('ui.position');
If you want to know which effects/widgets are supported by the plugin, you could use CFDUMP e.g.
<cfdump var="#jQueryUI.getEffectNames()#">
<cfdump var="#jQueryUI.getWidgetNames()#">
Ok, we're almost done. What if you want to add your own CSS file which overrides style definitions from the core CSS?
jQueryUI.setCustomCssLink('includes/css/mytabs.css');
...which is exactly the same as:
jQueryUI.setCustomCssLink(href='includes/css/mytabs.css',media='screen',renderPosition=arrayLen(jQueryUI.getCustomCssLinks()));
As you noticed in the code above, we used an attribute 'renderPosition'. this attribute gives you control over the order how the CSS links are rendered. Having control over the rendering order is rather important for JS files (Thanks bro
Tom de Man for notifying......or 'G. Ramsey' for the insiders). So let's say you have a couple of JS files which you're adding along your code and you want the last JS file being rendered as first.
<cfscript>
jQueryUI.setCustomJsLink('includes/js/myfile1.js');
jQueryUI.setCustomJsLink('includes/js/myfile2.js');
jQueryUI.setCustomJsLink(src='includes/js/myfile3.js',renderPosition=( arrayLen(jQueryUI.getCustomJsLinks() )-1 ));
jQueryUI.setCustomJsLink(src='includes/js/myfile4.js',renderPosition=2);
// first position
jQueryUI.setCustomJsLink(src='includes/js/myfile5.js',renderPosition=1);
</cfscript>
Ok, all features discussed. Still interested?...let's set everything up.
- Grab the JQueryUI plugin from RIAForge and place it into your plugin folder
- Download jqueryui 1.8.1, unzip it into your includes folder (See screenshot below)
- Add the following lines to your coldbox config file
<!-- Path to jQueryUI library, e.g. includes/jqueryui -->
<setting name="JQueryUIPlugin.baseRelativePath" value="includes/jQueryUI" />
<!--
<Setting name="JQueryUIPlugin.cssRelativePath" value="includes/jQueryUI/themes/ui-lightness" />
<Setting name="JQueryUIPlugin.jsRelativePath" value="includes/jQueryUI/ui/minified" />
<Setting name="JQueryUIPlugin.jsFileNameSuffix" value=".min" />
-->
- Place this code somewhere in your layout file. This renders the output of the plugin.
<cfoutput>#getPlugin("JQueryUI",true).render()#</cfoutput>
Enjoy!