| Excerpt |
|---|
This macro emulates a multi-page view for the contents. Very useful when used in Combination with ConfiForms custom layout |
Here is online demo
| Html div |
|---|
|
This is my page 1 |
| Html div |
|---|
| Css | display:none; |
|---|
| Id | mypage2 |
|---|
|
This is my page 2 |
| Html div |
|---|
| Css | display:none; |
|---|
| Id | mypage3 |
|---|
|
This is my page 3 | Status |
|---|
| colour | Green |
|---|
| title | I am fine - this is the last page |
|---|
|
|
| Multi page div |
|---|
| Pages | mypage1,mypage2,mypage3 |
|---|
|
It uses Div container user macro
Here is how it is configured. We have 3 divs, with IDs given as mypage1, mypage2 and mypage3. Also for mypage2 and mypage3 we setup CSS to make them hidden on load
And we have setup the macro to work on these DIV elements, giving as parameter their IDs in a comma separated format
Source code for user macro
Full source code used in user macro template
| Code Block |
|---|
## @param Pages:title=Comma separated list of element IDs|type=string|required=true|desc=
<script type="text/javascript">
AJS.toInit(function() {
var pagesParam = '${paramPages}';
var pages = pagesParam.split(',');
for(i=0;i<pages.length;i++) {
if (i > 0) {
AJS.$('#' + pages[i]).append('<button type="button" class="aui-button" id="cfPrevPage'+pages[i]+'" data-current="'+pages[i]+'" data-div="'+pages[i-1]+'" onclick="showPageDiv(this)">Previous</button>');
}
if (i < pages.length-1) {
AJS.$('#' + pages[i]).append('<button type="button" class="aui-button" id="cfNextPage'+pages[i]+'" data-current="'+pages[i]+'" data-div="'+pages[i+1]+'" onclick="showPageDiv(this)">Next</button>');
}
}
});
function showPageDiv(btn) {
var currentDiv = AJS.$(btn).attr('data-current');
var showDiv = AJS.$(btn).attr('data-div');
AJS.$('#' + currentDiv).hide();
AJS.$('#' + showDiv).show();
}
</script> |
