lazr.slide_in()
Effectvar LAZR_YUI_CONFIG = { filter: "min", base: "../../build/", modules: LAZR_MODULES, }; YUI(LAZR_YUI_CONFIG).use('node', 'event', 'lazr.effects', function(Y) { var reset_height = null; var slide_node; Y.on('click', function(e) { slide_node = Y.get('#slide-in .widget-bd'); reset_height = (reset_height == null) ? slide_node.getComputedStyle('height') : reset_height; slide_node.setStyle('height', reset_height); Y.lazr.effects.slide_in(slide_node).run(); }, '#slide-in-example button'); });
lazr.slide_out()
Effect var LAZR_YUI_CONFIG = { filter: "min", base: "../../build/", modules: LAZR_MODULES, }; YUI(LAZR_YUI_CONFIG).use('node', 'event', 'lazr.effects', function(Y) { var reset_height = null; var slide_node; Y.on('click', function(e) { slide_node = Y.get('#slide-out .widget-bd'); slide_node.setStyle('display', 'none'); Y.lazr.effects.slide_out(slide_node).run(); }, '#slide-out-example button'); });
Because the slide functions return an instance of Y.Anim
, we
can simply reverse the animation to reverse the slide direction.
NOTE Reversing an animation reuses the calculated object height from when the animation was first run. If you have nested expanders the running 'reverse' could lead to some unexpected outcomes. In these cases it may be best to simply call the slide animation function again.
var LAZR_YUI_CONFIG = { filter: "min", base: "../../build/", modules: LAZR_MODULES, }; YUI(LAZR_YUI_CONFIG).use('node', 'event', 'lazr.effects', function(Y) { var slide; Y.on('click', function(e) { if (!slide) { slide = Y.lazr.effects.slide_in('#slide-reverse .widget-bd'); } else { // Since this is a Y.Anim instance, we can just set its // 'reverse' property. slide.set('reverse', !slide.get('reverse')); } slide.stop(); // In case we are half-way through another animation. slide.run(); }, '#slide-reverse-example button'); });
async_slideout()
FunctionThe asycn_slideout()
function fetches content over-the-wire
when the user first clicks, then reveals the content using a slide-out drawer.
From that point onwards, clicking on the link collapses and re-opens the
content, same as any other slider.
var LAZR_YUI_CONFIG = { filter: "min", base: "../../build/", modules: LAZR_MODULES, }; YUI(LAZR_YUI_CONFIG).use('lazr.effects-async', function(Y) { Y.lazr.effects.async_slideout( '#drawer', // The node to slide opened and closed. '#open-close', // The clickable element that opens and closes the drawer. 'http://some.url', // The URL we will fetch content from. '#container' // (Optional) The container inside the sliding node that // will receive the new HTML. ); });