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