Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 4.0

...

Section
Column
width50%
Include Page
docsArchive:Sorting Lists DemodocsArchive:
Sorting Lists Demo
Panel
bgColorwhite
titleBGColor#c1b7c3
titleCSS
borderStylesolid
Code Block
borderColorwhite
bgColorwhite
borderStylesolid
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
bgColorwhite
titleBGColor#c1b7c3
titleMarkup
borderStylesolid
Code Block
htmlhtml
borderColorwhite
bgColorwhite
borderStylesolid
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
bgColorwhite
titleBGColor#c1b7c3
titleScript
borderStylesolid

In the header:

Code Block
htmlhtml
borderColorwhite
bgColorwhite
borderStylesolid
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
htmlhtml
borderColorwhite
bgColorwhite
borderStylesolid
html
jQuery(document).ready(function () {
  fluid.reorderList("#todo-list", {
    selectors: {
      movables:"[id^=myUniquePrefix]"
    }
  });
});

...

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

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

...

Section
Column
width50%
Include Page
docsArchive:Sorting Grids DemodocsArchive:
Sorting Grids Demo
Panel
bgColorwhite
titleBGColor#c1b7c3
titleCSS
borderStylesolid
Code Block
borderColorwhite
bgColorwhite
borderStylesolid
.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
bgColorwhite
titleBGColor#c1b7c3
titleMarkup
borderStylesolid
Code Block
htmlhtml
borderColorwhite
bgColorwhite
borderStylesolid
html
<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
bgColorwhite
titleBGColor#c1b7c3
titleScript
borderStylesolid

In the header:

Code Block
htmlhtml
borderColorwhite
bgColorwhite
borderStylesolid
html
<head>
  <script type="text/javascript" src="InfusionAll.js"></script>
  <script type="text/javascript" src="grid.js"></script>
</head>

In grid.js:

Code Block
htmlhtml
borderColorwhite
bgColorwhite
borderStylesolid
html
jQuery(document).ready(function () {
  fluid.reorderGrid(".reorderer_container");
});

...

Section
Column
width50%
Include Page
docsArchive:Sorting Portlets DemodocsArchive:
Sorting Portlets Demo
Panel
bgColorwhite
titleBGColor#c1b7c3
titleCSS
borderStylesolid
Code Block
borderColorwhite
bgColorwhite
borderStylesolid
.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
bgColorwhite
titleBGColor#c1b7c3
titleMarkup
borderStylesolid
Code Block
htmlhtml
borderColorwhite
bgColorwhite
borderStylesolid
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
bgColorwhite
titleBGColor#c1b7c3
titleScript
borderStylesolid

In the header:

Code Block
htmlhtml
borderColorwhite
bgColorwhite
borderStylesolid
html
<head>
  <script type="text/javascript" src="InfusionAll.js"></script>
  <script type="text/javascript" src="portlets.js"></script>
</head>

In portlets.js:

Code Block
htmlhtml
borderColorwhite
bgColorwhite
borderStylesolid
html
jQuery(document).ready(function () {
  fluid.reorderLayout ("#portlet-reorderer-root", {
    columns: "td",
    modules: "td > div"
  });
});

...