Overview
| Excerpt |
|---|
In dynamic CMS frameworks you often find yourself needing to load many different JavaScript or CSS libraries into a page. This becomes particularly complex when plugins enter the mix, needing to load libraries. |
In FarCry this problem is solved using skin:registerJS / skin:loadJS and skin:registerCSS / skin:loadCSS.
...
| Code Block |
|---|
| title | Example 1; CSS stylesheets |
|---|
|
<!-- normal HTML library reference -->
<link media="screen" rel="stylesheet" type="text/css" href="/css/960.css">
<!-- /yourproject/config/_serverSpecificVarsAfterInit.cfm -->
<skin:registerCSS id="960" baseHREF="/css" lFiles="960.css" />
<!-- headerwebskin.cfm -->
<skin:loadCSS id="960" />
|
| Code Block |
|---|
| title | Example 2; Conditional Javascript libraries |
|---|
|
<!-- normal HTML library reference -->
<!--[if lt IE 7]>
<script type="text/javascript" src="/js/DD_belatedPNG_0.0.8a-min.js"></script>
<![endif]-->
<!-- /yourproject/config/_serverSpecificVarsAfterInit.cfm -->
<skin:registerJS id="png" condition="lt IE 7" baseHREF="/js" lFiles="DD_belatedPNG_0.0.8a-min.js" />
<!-- headerwebskin.cfm -->
<skin:loadJS id="png" />
|
| Code Block |
|---|
| title | Example 3; External library references |
|---|
|
<!-- normal HTML library reference -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<!-- /plusoneplugin/config/_serverSpecificVarsAfterInit.cfm -->
<skin:registerJS id="plusone" lFiles="https://apis.google.com/js/plusone.js" />
<!-- plusonewebskin.cfm -->
<skin:loadJS id="plusone" />
|
Once you have updated your library references with loadJS/loadCSS see HTML like the following in the HEAD section of your web pages:
| Code Block |
|---|
<!--
ID: 960
FILES: /css/960.css
-->
<link rel="stylesheet" type="text/css" href="/cache/960--1309753095000-C3608969AFF7EA8450DDC43B11362F20-D41D8CD98F00B204E9800998ECF8427E-D41D8CD98F00B204E9800998ECF8427E.css" media="screen" >
|
...
A typical example might be to combine jQuery with your site specific JavaScript.
| Code Block |
|---|
<!-- Register these combined libraries in /yourproject/config/_serverSpecificVarsAfterInit.cfm -->
<skin:registerJS id="combined-project" lCombineIDs="jquery,projectjs" />
<!-- Load this new library in your pages -->
<skin:loadJS id="combined-project" />
|
...