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
Pingback: JQuack for jQuery CFWheels Plugin | It's hip to be []