Nice example of complex behavior implemented in 70 lines code. Each page
is instantiated in a single $.my call with less than 1K of code.
jQuery UI draggable plugin gives our ad modules mobility between pages.
See it in action – just drag
marks to shuffle items inside
and between pages.
This example can be extended fairly easy with more complex behavior like outputting all the ads stats in real time – we just need to wrap pages around with $.my instance, which will track all the changes.
Retrieving pages' states is trivial – for page 1 you just need to call
$("#page1").my("data")
.
Only javascript is shown below – all html templates and css are defined in the page's body. It's 70+ lines of code – putting them to javascript source will make it messy. Its possible however as described in Table demo.
Click to show code. Please note every
time you see xd
, read it as аd
. I made this to prevent
demo from being cut off by аd-blockers.