Page Comparison

Versions Compared

Key

This line was added.
This line was removed.
Formatting was changed.

Comment: Migrated to Confluence 5.3

...

Section

Column

width	60%

Working Demos with Instructions

The Reorderer allows users to directly move around and re-arrange content on a page. A number of features of the Reorderer can be customized, providing a great deal of power and flexibility, but in its basic form, it is very simple to use.

The examples on this page illustrate some of the ways the Reorderer can be used to make different types of content orderable. Each of the examples includes several things:

Demo: a working demonstration of the Reorderer in action.
Markup: the HTML used to produce the demo.
Script: the JavaScript that was added to the markup to make it work.
CSS: the CSS styles that have been applied to the demo.

Column

solid

Panel

borderStyle

borderColor	#566b30
bgColor	#fff
titleBGColor	#D3E3C4
borderStyle	solid
title	On This Page

Table of Contents

toc

maxLevel

5
minLevel	2	maxLevel	5

Panel

borderColor	#321137
bgColor	#fff
titleBGColor	#cccccc
borderStyle	solid
title	Still need help?	borderStyle	solid

Join the infusion-users mailing list and ask your questions there.

...

Section

Column

width	50%

Include Page

	docsArchive:Sorting Lists DemodocsArchive:
	Sorting Lists Demo

Panel

bgColor	white
titleBGColor	#c1b7c3
borderStyle	solid
title	CSS
borderStyle	solid

Code Block

borderColor	white
bgColor	white
borderStyle	solid

li {
    padding: 3px;
    margin: 5px;
}
li.fl-reorderer-movable-default {
    background-color: #eee;
}
li.fl-reorderer-movable-hover {
    background-color: lightyellow;
    cursor: move;
}
li.fl-reorderer-movable-selected {
    background-color: #ddd;
}
li.fl-reorderer-movable-dragging {
    background-color: lightyellow;
}
li.fl-reorderer-movable-avatar {
    opacity: 0.55;
    filter: alpha(opacity=55);
    width: 300px;
    border: 0;
}
li.fl-reorderer-dropMarker {
    background-color: red;
    height: 2px;
    margin: -4px;
    padding: 0px;
}

Column

Panel

bgColor	white
titleBGColor	#c1b7c3
borderStyle	solid
title	Markup
borderStyle	solid

Code Block

	html
	html
borderColor	white
bgColor	white
borderStyle	solid

<ul id="todo-list">
  <li id="myUniquePrefix.orderable1">
    Select the date
  </li>
  <li id="myUniquePrefix.orderable2">
    Create promotional plan
    <ul>
      <li>web site</li>
      <li>print materials</li>
    </ul>
  </li>
  <li id="myUniquePrefix.orderable3">
    Book facilities
    <ul>
      <li>Select building</li>
      <li>Book rooms</li>
    </ul>
  </li>
  <li id="myUniquePrefix.orderable6">
    Develop a conference daily schedule of events
  </li>
</ul>

Panel

bgColor	white
titleBGColor	#c1b7c3
borderStyle	solid
title	Script	borderStyle	solid

In the header:

Code Block

	html
	html
borderColor	white
bgColor	white
borderStyle	solid

<head>
  <script type="text/javascript" src="InfusionAll.js"></script>
  <script type="text/javascript" src="todo-list.js"></script>
</head>

In todo-list.js:

Code Block

	html
	html
borderColor	white
bgColor	white
borderStyle	solid

jQuery(document).ready(function () {
  fluid.reorderList("#todo-list", {
    selectors: {
      movables:"[id^=myUniquePrefix]"
    }
  });
});

...

a container selector based on the ID of the list ("#todo-list")
an optional object containing configuration parameters, in this case a custom selector identifying the movable items, based on the ID prefix of the list items ("[fluidInfusion13:id^=myUniquePrefix]")

For detailed information about the List Reorderer, see List Reorderer API.

fluidInfusion13:Back to top

...

Sorting Grids

...

Section

Column

width	50%

Include Page

	docsArchive:Sorting Grids DemodocsArchive:
	Sorting Grids Demo

Panel

bgColor	white
titleBGColor	#c1b7c3
titleborderStyle	CSSsolid
borderStyletitle	solidCSS

Code Block

borderColor	white
bgColor	white
borderStyle	solid

.reorderer_container {
  padding: 20px;
  border: 1px dashed red;
  overflow: hidden;
  background-color: #eee;
}
.flc-reorderer-movable {
  background-color: lightyellow;
  width: 100px;
  height: 50px;
  float: left;
  margin: 0 10px 10px 0;
  text-align: center;
  padding-top: 10px;
}
.fl-reorderer-movable-default {
  border: 2px solid #ddd;
}
.fl-reorderer-movable-hover {
  border: 2px solid #666;
}
.fl-reorderer-movable-dragging {
    background-color: white;
}
.fl-reorderer-movable-selected {
  border: 2px solid #666;
  background-color: #ddd;
}
.fl-reorderer-movable-avatar {
    background-color: blue;
    opacity: 0.75;
}
.fl-reorderer-dropMarker{
  height: 50px !important;
  width: 4px;
  background-color: green;
}

Column

Panel

borderStyle

bgColor	white
titleBGColor	#c1b7c3
borderStyle	solid
title	Markup	solid

Code Block

	html
	html
borderColor	white
bgColor	white
borderStyle	solid

<div class="reorderer_container">    
  <div class="flc-reorderer-movable" id="box0">
    <div class="caption">Item 0</div>
  </div>
  <div class="flc-reorderer-movable" id="box1">
    <div class="caption">Item 1</div>
  </div>
  <div class="flc-reorderer-movable" id="box2">
    <div class="caption">Item 2</div>
  </div>
  <div class="flc-reorderer-movable" id="box4">
    <div class="caption">Item 4</div>
  </div>
  <div class="flc-reorderer-movable" id="box5">
    <div class="caption">Item 5</div>
  </div>
  <div class="flc-reorderer-movable" id="box6">
    <div class="caption">Item 6</div>
  </div>
</div>

Panel

bgColor	white
titleBGColor	#c1b7c3
borderStyle	solid
title	Script	borderStyle	solid

In the header:

Code Block

	html
	html
borderColor	white
bgColor	white
borderStyle	solid

<head>
  <script type="text/javascript" src="InfusionAll.js"></script>
  <script type="text/javascript" src="grid.js"></script>
</head>

In grid.js:

Code Block

	html
	html
borderColor	white
bgColor	white
borderStyle	solid

jQuery(document).ready(function () {
  fluid.reorderGrid(".reorderer_container");
});

...

For detailed information about the Grid Reorderer, see Grid Reorderer API.

fluidInfusion13:Back to top

...

Sorting Portlets or other content modules

...

Section

Column

width	50%

Include Page

	docsArchive:Sorting Portlets DemodocsArchive:
	Sorting Portlets Demo

Panel

bgColor	white
titleBGColor	#c1b7c3
borderStyle	solid
title	CSS	borderStyle	solid

Code Block

borderColor	white
bgColor	white
borderStyle	solid

.portlet {
  width: 75px;
  height: 40px;
  background-color: lightyellow;
  padding: 10px;
  margin: 0 10px 10px 0 !important;
  text-align: center;
}
#portlet-reorderer-root {
  border: 1px solid black;
}
td {
  padding: 8px;
  vertical-align: top;
  border: 1px solid black;
}
.fl-reorderer-movable-default {
  border: 2px solid #ddd;
}
.fl-reorderer-movable-hover {
  border: 2px solid #666;
}
.fl-reorderer-movable-dragging {
    background-color: white;
}
.fl-reorderer-movable-selected {
  border: 2px solid #666;
  background-color: #ddd;
}
.fl-reorderer-movable-avatar {
  height: 25px;
  width: 50px;
  background-color: blue;
  opacity: 0.75;
}
.fl-reorderer-movable-dropMarker {
  height: 4px !important;
  width: 80px;
  background-color: green;
}

Column

Panel

bgColor	white
titleBGColor	#c1b7c3
borderStyle	solid
title	Markup	borderStyle	solid

Code Block

	html
	html
borderColor	white
bgColor	white
borderStyle	solid

<table id="portlet-reorderer-root">
  <tbody>
    <tr>
      <td id="c1">
        <div class="portlet" id="portlet1">
          <div class="title">portlet 1</div>
          <div class="content">&nbsp;</div>
        </div>
        <div class="portlet" id="portlet2">
          <div class="title">portlet 2</div>
          <div class="content">&nbsp;</div>
        </div>
        <div class="portlet" id="portlet3">
          <div class="title">portlet 3</div>
          <div class="content">&nbsp;</div>
        </div>
      </td>
      <td id="c2">
        <div class="portlet" id="portlet4">
          <div class="title">portlet 4</div>
          <div class="content">&nbsp;</div>
        </div>
      </td>
      <td id="c3">
        <div class="portlet" id="portlet5">
          <div class="title">portlet 5</div>
          <div class="content">&nbsp;</div>
        </div>
        <div class="portlet" id="portlet6">
          <div class="title">portlet 6</div>
          <div class="content">&nbsp;</div>
        </div>
      </td>
      <td id="c4">
      </td>
    </tr>
  </tbody>
</table>

Panel

bgColor	white
titleBGColor	#c1b7c3
borderStyle	solid
title	Script	borderStyle	solid

In the header:

Code Block

	html
	html
borderColor	white
bgColor	white
borderStyle	solid

<head>
  <script type="text/javascript" src="InfusionAll.js"></script>
  <script type="text/javascript" src="portlets.js"></script>
</head>

In portlets.js:

Code Block

	html
	html
borderColor	white
bgColor	white
borderStyle	solid

jQuery(document).ready(function () {

   fluid.reorderLayout ("#portlet-reorderer-root", {
        selectors: {
            columns: "td",
            modules: "td > div"
        }

   });
});

In this example, two parameters are passed to the fluid.reorderLayout() initialiation:

...

For detailed information about the Layout Reorderer, see Layout Reorderer API.

fluidInfusion13:Back to top

...

Full API

For specific details on the full Reorderer API, see Reorderer API

fluidInfusion13:Back to top

Versions Compared

Old Version 106

New Version Current

Key

Working Demos with Instructions

Sorting Grids

Sorting Portlets or other content modules

Full API