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

	Sorting Lists Demo
	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

solid

Panel

borderStyle

bgColor	white
titleBGColor	#c1b7c3
borderStyle	solid
title	Markup

Code Block

	html

Code Block

	html
borderColor	white
bgColor	white
borderStyle	solid	html

<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	html

<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	html

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

...

Section

Column

width	50%

Include Page

	Sorting Grids Demo
	Sorting Grids Demo

Panel

bgColor	white
titleBGColor	#c1b7c3
borderStyle	solid
title	CSS
borderStyle	solid

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

Code Block

solid

code

html
	html
borderColor	white
bgColor	white
borderStyle	solidhtml

<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	solidhtml

<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	html

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

...

Section

Column

width	50%

Include Page

	Sorting Portlets Demo
	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

borderStyle

bgColor	white
titleBGColor	#c1b7c3
borderStyle	solid
title	Markup

Code Block

solid

code

html
	html
borderColor	white
bgColor	white
borderStyle	solid	html

<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	solidhtml

<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	solidhtml

jQuery(document).ready(function () {
  fluid.reorderLayout ("#portlet-reorderer-root", {
    columns: "td",
    modules: "td > div"
  });
});

...

Versions Compared

Old Version 108

New Version Current

Key

Working Demos with Instructions