Spry

HTML Panel widget overview

An HTML Panel widget is a page element that lets you display HTML from an external source (such as a separate HTML file). The external source can be in the form of an HTML fragment (no meta data necessary) or an HTML element with a unique ID in a complete HTML page.

You can load any amount of content into the HTML Panel widget, one piece at a time. If you use progressive enhancement, the page will be able to degrade gracefully in a non-Javascript environment.

Note: You should be familiar with Spry widgets before you work with the HTML Panel widget. If you’re not familiar with them, see Accordion widget overview and structure, or any of the other widget overviews before proceeding. This overview does not present basic widget concepts.

The following example shows code for an HTML Panel widget:

<div id="mainContent">
This is static content that will remain in place until the user clicks on the link below!
</div>
<script type="text/javascript">
	var panelWidget = new Spry.Widget.HTMLPanel("mainContent");
</script>
...
<a href="#" onclick="panelWidget.loadContent(products.html);">Products</a>

In the example, the HTML Panel is the div tag with the ID mainContent, and the widget constructor that follows creates the HTML Panel widget object (panelWidget) on the element with that ID. The link on the page has an onclick behavior that loads the content of the products.html page into the panelWidget object when a user clicks the link.