How to
all the basics for a kickstart
Here's a simple guide to quickstart with CFE. It covers basic input replacement in 3 easy steps.
Download CFE
Pick the right package according to the framework / technique you want to use on the download page.
Include the CSS and Javascript files
Once you copied all the files to your project's directory, you are able to use the power of CFE right away. In the sidebar on the right you'll find a sample directory structure to show you where you may put the cfe files >
But now on to the actual inclusion of the files in your project:
Include the css in the <head>-section:
<!-- add css --> <link rel="stylesheet" type="text/css" href="css/cfe.css" /> <!--[if IE]> <link rel="stylesheet" type="text/css" href="css/fixPrematureIE.css" /> <![endif]-->And the javascript files right before the (closing) </body>-tag, so your visitor will see the layout fast:
<!-- add cfe base --> <script type="text/javascript" src="js/cfe/base/cfe.base.js"></script> <!-- add modules --> <script type="text/javascript" src="js/cfe/modules/cfe.module.checkbox.js"></script> <script type="text/javascript" src="js/cfe/modules/cfe.module.radio.js"></script> <script type="text/javascript" src="js/cfe/modules/cfe.module.text.js"></script> <script type="text/javascript" src="js/cfe/modules/cfe.module.textarea.js"></script> <script type="text/javascript" src="js/cfe/modules/cfe.module.select.js"></script> [and so on - just include the modules you want to use] <!-- add extensions --> <script type="text/javascript" src="js/cfe/addons/cfe.addon.toolTips.js"></script> <script type="text/javascript" src="js/cfe/addons/cfe.addon.dependencies.js"></script>Tip: You may want to reduce the number of files (and httprequests), so merge CFE into one single compressed file
Tip: If you want to further decrease the bandwith usage of cfe, GZip the compressed file before serving
Let the magic happen
To enable replacement of your input fields just throw in a few lines of code. You are now able to style the form elements using the supplied CSS file.
Scroll down to the framework of your choice
for mootools 1.1/1.2
<script type="text/javascript">// <![CDATA[ window.addEvent('domready', function(){ // creates cfe object var myCfe = new cfe.base(); // starts input replacement myCfe.init({spacer: "gfx/spacer.gif"}); }); // ]]></script>Custo's tip for advanced users:visit 'Inside CFE' for developer docs and API
