Interactive Content
Interactive layers respond to touch, click, and keyboard events. Combined with Shared Variables for cross-document communication.
Interactive Layers
| Constructor | Description |
|---|---|
$.multiPage() | Switch between pages programmatically via switchPage() |
$.carousel() | Swipeable carousel with auto-advance |
$.popup() | Modal overlay triggered by events |
$.pushButton() | Interactive button with active/inactive states |
Events
| Method | Trigger |
|---|---|
.click(fn) | Mouse click / touch tap |
.mousedown(fn) / .mouseup(fn) | Mouse button press/release |
.keydown(fn) / .keyup(fn) | Keyboard key events |
.textInput(fn) | Character typed (event.data) |
See: jQuery uDOM for full DOM event details.
Examples
Click to Switch Pages
$(function() {
var items = ['1.jpg', '2.jpg', '3.jpg'];
var i = 0;
var page = $.multiPage({}).addTo('svg');
page.switchPage($.media({ href: items[0] }));
$('svg').click(function() {
i = (i + 1) % items.length;
page.switchPage($.media({ href: items[i] }));
});
});Keyboard Display
$(function() {
var layer = $.multiPage({}).addTo('svg');
$('svg').textInput(function(event) {
layer.switchPage(
$.headlineTextArea({ fontSize: 120 }).text(event.data)
);
});
});Cross-Document Control via Shared Variable
// Controller document
$(function() {
var sv = createSharedVariable('selectedPage');
$('svg').keydown(function(event) {
sv.set(event.keyIdentifier);
});
});
// Display document
$(function() {
var page = $.multiPage({}).addTo('svg');
var sv = createSharedVariable('selectedPage');
sv.addUpdateListener(function() {
if (sv.value === 'U+0031') page.switchPage($.media({ href: '1.jpg'}));
if (sv.value === 'U+0032') page.switchPage($.media({ href: '2.jpg'}));
});
});Related Pages
- Shared Variables — cross-document communication
- jQuery uDOM — DOM events and selectors
- Layers Overview — common attributes
- Transitions & Effects — appearance animations