Update: JQuack is now a Coldfusion on Wheels plugin!
A CFC wrapper for including jQuery core files, plugins, UI components and themes. Explicitly including jQuery files is no big deal, but jQuack’s strength is being able to bundle a plugin’s core and any dependencies into a single function call with a single parameter (or no parameter at all!)
Is a dependency shared between plugins (e.g. bgiframe.js)? No problem, jQuack prevents files from being included more than once per request.
It makes application-wide or server-wide version changes simple.
Download it @ GitHub
Example Plugin Package Structure
<!--- Setup your plugin packages (structure of arrays) --->
<cfset pluginStruct = {} />
<cfset pluginStruct.foo = ["foo/foo.js","foo/foo.css"] />
<cfset pluginStruct.bar = ["bar/bar.css","bar/bar.js","bar/foobar.js","jquery.barfoo.js"] />
<cfset pluginStruct.CFJS = ["cfjs/jquery.cfjs.packed.js"] />
Example init params
<cfset initArgs = {} />
<!--- Name of the jQuery core file --->
<cfset initArgs.coreFileName = "jquery-6.6.6.min.js" />
<!--- URL Path to your javascript directory, defaults to /jquery/ --->
<cfset initArgs.rootPath = "/jquery/" />
<!--- Name of the jQuery UI bundle --->
<cfset initArgs.UIBundleName = "jquery-ui-1.0.0.custom" />
<!--- Name of the theme directory --->
<cfset initArgs.themeName = "sunny" />
<!--- URL Path to your plugins directory, defaults to /{rootPath}/plugins/ --->
<cfset initArgs.pluginPath = "/jquery/plugins/" />
<!---
A structure of arrays. Plugins will be reference by their structure key,
the array will contain URLs to the plugin files relative to the {pluginPath}
See Example pluginStruct above
--->
<cfset initArgs.pluginStruct = pluginStruct />
<!--- Intialising jQuack --->
<cfset jQuack = CreateObject("component","{your_cfc_path}.jQuack").init(argumentCollection=initArgs) />
Example Function Calls
<!--- Calling jQuack in your views --->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQuack..</title>
#jQuack.core()#
#jQuack.plugin("foo,bar,cfjs")#
#jQuack.ui()#
<!--- a different core file --->
#jQuack.core("jquery-6.6.6.min.js")#
<!--- from an external URL --->
#jQuack.core(coreFileName="jquery.min.js", rootPath="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/")#
<!--- a single plugin --->
#jQuack.plugin("foo")#
<!--- multiple plugins --->
#jQuack.plugin("foo,bar")#
<!--- ALL plugins --->
#jQuack.plugin()#
<!--- a plugin not defined in the pluginStruct --->
#jQuack.plugin(file="outbackjack/outbackjack.js")#
<!--- a plugin from an external URL --->
#jQuack.plugin(file="penelopepitstop.js", pluginPath="http://plugins.wackyraces.com/")#
<!--- UI with a different theme --->
#jQuack.ui(themeName="rainy")#
</head>
<body>...</body>
</html>
Example Directory Structure
Core File
/{yourWebRoot}/jquery/
/{yourWebRoot}/jquery/jquery-1.0.0.min.js
Plugins
/{yourWebRoot}/jquery/plugins/
/{yourWebRoot}/jquery/plugins/foo/
/{yourWebRoot}/jquery/plugins/foo/foo.js
/{yourWebRoot}/jquery/plugins/foo/foo.css
/{yourWebRoot}/jquery/plugins/bar/
/{yourWebRoot}/jquery/plugins/bar/bar.js
/{yourWebRoot}/jquery/plugins/bar/bar.css
UI & Themes
/{yourWebRoot}/jquery/jquery-ui-1.0.0.custom/
/{yourWebRoot}/jquery/jquery-ui-1.0.0.custom/css/
/{yourWebRoot}/jquery/jquery-ui-1.0.0.custom/css/sunny/
/{yourWebRoot}/jquery/jquery-ui-1.0.0.custom/css/sunny/images/
/{yourWebRoot}/jquery/jquery-ui-1.0.0.custom/css/sunny/jquery-ui-1.0.0.custom.css
/{yourWebRoot}/jquery/jquery-ui-1.0.0.custom/css/rainy/
/{yourWebRoot}/jquery/jquery-ui-1.0.0.custom/css/rainy/images/
/{yourWebRoot}/jquery/jquery-ui-1.0.0.custom/css/rainy/jquery-ui-1.0.0.custom.css
/{yourWebRoot}/jquery/jquery-ui-1.0.0.custom/js/jquery-ui-1.0.0.custom.min.js