Section |
---|
Column |
---|
| This page will walk you through an example of adding the Fluid Layout Reorderer component to your application. This tutorial assumes that: For more general information about the Layout Reorderer, see Layout Reorderer. For technical API documentation, see Layout Reorderer API. Tutorial: How to Use the Layout ReordererScenarioYou're creating a portal system that will aggregate news content from a number of different tech gadgetsources. You'd like to allow site visitors to rearrange the portlets. This tutorial will show you how to use the Fluid Layout Reorderer to offer this functionality. There are four basic steps to adding the Layout Reorderer to your application: - Setup: Download and install the Fluid Infusion library
- Step 1: Prepare your markup
- Step 2: Write the script
- Step 3: Add the script to your HTML
- Step 4: Styling
|
Column |
---|
Panel |
---|
borderColor | #321137 |
---|
bgColor | #fff |
---|
titleBGColor | #aab597 |
---|
title | Status |
---|
borderStyle | solid |
---|
| This component is in Production status |
Panel |
---|
borderColor | #566b30 |
---|
bgColor | #fff |
---|
titleBGColor | #D3E3C4 |
---|
title | On This Page |
---|
borderStyle | solid |
---|
| |
Panel |
---|
borderColor | #321137 |
---|
bgColor | #fff |
---|
titleBGColor | #c1b7c3 |
---|
title | See Also |
---|
borderStyle | solid |
---|
| |
Panel |
---|
borderColor | #321137 |
---|
bgColor | #fff |
---|
titleBGColor | #cccccc |
---|
title | Still need help? |
---|
borderStyle | solid |
---|
| Join the infusion-users mailing list and ask your questions there. |
|
|
...
Include Page |
---|
| Infusion13:Tutorial SetupInfusion13: |
---|
| Tutorial Setup |
---|
|
...
Step 1: Prepare your markup
...
Keep in mind that the InfusionAll.js
file is minified - all of the whitespace has been removed - so it isn't really human-readable. If you're using the source distribution and you want to be able to debug the code, you'll want to include each of the required files individually. This would look like this:
Include Page |
---|
| Infusion13:Layout Reorderer DependenciesInfusion13: |
---|
| Layout Reorderer Dependencies |
---|
|
...