HTML Panel Sample

The HTML Panel widget allows users to load in HTML fragments as content. This sample shows how to implement this feature.

Basic Sample

 <a href="#" onclick="mine.loadContent('htmlpanel/frag.html');">Click</a>
 <div id="me">This is static content.</div>
 <script>
   var mine = new Spry.Widget.HTMLPanel("me");
 </script>

Clicking this link loads the contents of 'frag-0.html' into the 'me' DIV

Progressive Enhancement

With progressive enhancement, we ensure that the page will work correctly when Javascript is turned off. To do this, we make a real link to the fragment.

If javascript is on, the link is not followed, but instead, the onclick handler is used. If javascript if off, the onclick is ignored and clicking the link will take you to the fragment page directly.

Click this link

Setting States

Using specific CSS classes, users can specify 2 states of the HTML Panel: Loading and Error. The Loading class will be added while the data request processing is happening and removed when the new content is loaded. The error class will be displayed if something went wrong with the data loading.

The loading class is 'HTMLPanelLoadingContent' and the error class is 'HTMLPanelErrorContent'. The element with this class name (there should be only one each.) will be displayed in the panel at the correct time. The default stylesheet sets them to display:none by default.

A quick gray flash is the loading content. Error class turns the content red.

Loading Class | Error Class