English
资源说明：Conditionally load content in responsive designs without relying on AJAX. Proof of concept.
## About lazyBlock
lazyBlock is a proof-of-concept to show how content can be conditionally loaded in responsive designs without relying on AJAX to fetch that content. Content is included in the original mark-up but is placed within `
### The JavaScript
lazyBlock works by being attached to events like `onclick`. This is the `onclick` code from the demo that toggles the "related-shirts-panel" `div` open and closed:
// add an onclick handler to toggle the example
document.getElementById("related-shirts-link").onclick = function() { lB.getById("related-shirts-link").toggle(); };
It is, admittedly, a little verbose.
lazyBlock also supports its own custom events. They are: `onLBStart`, `onLBShow`, `onLBHide`, and `onLBComplete`. lazyBlock comes with a simple function to allow you to quickly bind your code to elements. This demo code updates the "related-shirts-status" `span` with wording to signify the change in action for the link when the "related-shirts-target" `div` is shown and hidden.
// run code at certain points in the running of the toggle
// usage: lb.bind(element ID, event name, code to run)
lB.getById("related-shirts-link").bind("onLBShow",function() { document.getElementById("related-shirts-status").innerHTML = "hide shirts"; } );
lB.getById("related-shirts-link").bind("onLBHide",function() { document.getElementById("related-shirts-status").innerHTML = "show shirts"; } );
You can also have the panel open based on screen width so you can integrate this functionality with a responsive design.
### Toggling Multiple Elements from One Click
To toggle multiple elements simply include their shared base in an array when making the `.toggle()` call. For example:
lB.getById("related-shirts-link").toggle(["foo","spoon"]);
## Other Ways to "Hide" Content from Browser Parser
`
本源码包内暂不包含可直接显示的源代码文件，请下载源码包。
