This is an example of using a jquery plugin (in this case semantic ui) via requirejs WITHOUT needing to rely on the plone bundling infrastructure.
Update: Dec 16, 2015
http://github.com/thet pointed out an alternative approach which reduces the number of files used by getting rid of main.js and putting all the code in app.js like this:
require.config({
"baseUrl": "./",
"paths": {
"app":"++resource++jobdashboard.site",
//"jquery": "//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min",
"semantic":"++resource++jobdashboard.site/semantic/semantic.min"
}
});
// Load the main app module to start the app
// require(["app/main"]);
require(["jquery","semantic"], function($) {
//the semantic ui code is loaded up also.
$(function() {
$('.ui.rating').rating();
});
});
This is most useful for developers working on the filesystem who have created their own package using something like mr.bob.
The example assumes a package named my.package and that everything is loaded
from a special resource named: ++resource++my.package, (I assume you know how to set this up).
jquery is already provided by Plone so, even though it is a dependency for semantic ui it should just work. My static folder ("++resource++my.package") looks like this
|-- static | |-- app.js | |-- main.js | `-- semantic | |-- semantic.min.css | |-- semantic.min.js
This file is used to load dependencies and then on line 10 it loads the main.js (which is where everything happens)
I call the rating code from the main.js like this:
$('.ui.rating').rating();
Only needs to load the css and the app. To save some brain cells I put both the css and the js in the javascript_head_slot
+1