| 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. |
|
|
...
(For more detailed information about this, see also Tutorial – - Layout Reorderer Selectors.)
In this example, the <div> element that contains the two columns would be the container. We can identify it by adding, for example, a unique id such as "demo-layoutReorderer":
...