This space is an archive space for documentation related to old versions of Fluid Infusion (i.e. versions before 1.3). For documentation related to the latest Infusion, see Infusion Documentation.

Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 10 Next »

Sorting Portlets Demo

Unknown macro: {html}

<script type="text/javascript" src="http://www.fluidproject.org/releases/1.0/InfusionAll.js"></script>
<style>
.portlet {
width: 75px;
height: 40px;
background-color: lightyellow;
padding: 10px;
margin: 0 10px 10px 0 !important;
text-align: center;
}
table#portlet-reorderer-root{
border: 1px solid black;
}
table#portlet-reorderer-root td {
padding: 8px;
vertical-align: top;
border: 1px solid black;
}
#portlet-reorderer-root .fl-reorderer-movable-default{
border: 2px solid #ddd;
}
#portlet-reorderer-root .fl-reorderer-movable-hover{
border: 2px solid #666;
}
#portlet-reorderer-root .fl-reorderer-movable-dragging{
background-color: white;
}
#portlet-reorderer-root .fl-reorderer-movable-selected{
border: 2px solid #666;
background-color: #ddd;
}
#portlet-reorderer-root .fl-reorderer-movable-avatar {
height: 25px;
width: 50px;
background-color: blue;
opacity: 0.75;
}
#portlet-reorderer-root .fl-reorderer-dropMarker{
height: 4px !important;
width: 80px;
background-color: green;
}
</style>
<script type="text/javascript">
jQuery(document).ready(function () {
fluid.reorderLayout ("#portlet-reorderer-root",

Unknown macro: { selectors}

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

  • No labels