...
| Note |
|---|
| title | Form elements and the Image Reorderer |
|---|
|
Currently the Image Reorderer is restricted limited to using <form> elements as its root container. This is a known issue and it is expected that in the future any container can be used as long as it is properly identified. For more information see (FLUID-4019). |
...
You'll tell the Reorderer which items are to be orderable with another jQuery selector. The Image Reorderer understands a default class name for this purpose. You , but you can override that if you like, but for . For this tutorial, we'll go the simple route. The default classname is stick with the defaults classname flc-imageReorderer-item, so let. Let's add that to each of the <a> elements:
| Section |
|---|
| Column |
|---|
| Code Block |
|---|
|
<form action="#" id="reorder-images-form">
<a href="myImage1.jpg" class="flc-imageReorderer-item">
<img src="myImage1.jpg" alt="image 1 thumbnail" />
<span>Image 1</span>
<input name="image 1" value="0" type="hidden" />
</a>
<a href="myImage2.jpg" class="flc-imageReorderer-item">
<img src="myImage2.jpg" alt="image 2 thumbnail" />
<span>Image 2</span>
<input name="image 2" value="1" type="hidden" />
</a>
<a href="myImage3.jpg" class="flc-imageReorderer-item">
<img src="myImage3.jpg" alt="image 3 thumbnail" />
<span>Image 3</span>
<input name="image 3" value="2" type="hidden" />
</a>
...
</form>
|
|
| Column |
|---|
| Panel |
|---|
| borderColor | #566b30 |
|---|
| bgColor | #D3E3C4 |
|---|
| title | Note |
|---|
| borderStyle | outset |
|---|
| As with the ID on the <form>, we can use any jQuery selector for the reorderable images. For example, we could attach a unique ID to each movable <a> with a unique prefix, maybe pic-movable1, pic-movable2, etc. Then we could use the jQuery selector [id^=pic-movable] to override the default selector. |
|
|
...