Spry * Insert an HTML panel widget

Locate the SpryHTMLPanel.js file and add it to your web site. You can find the SpryHTMLPanel.js file in the widgets/htmlpanel directory, located in the Spry directory that you downloaded from Adobe Labs. For more information, see Prepare your files.

For example, create a folder called SpryAssets in the root folder of your web site, and move the SpryHTMLPanel.js file to it. The SpryHTMLPanel.js file contains all of the information necessary for making the HTML Panel widget interactive.

Locate the SpryHTMLPanel.css file and add it to your web site. You might choose to add it to the main directory, a SpryAssets directory, or to a CSS directory if you have one.

Open the web page to add the HTML Panel widget to and link the SpryHTMLPanel.js file to the page by inserting the following script tag in the page’s head tag:

<script src="SpryAssets/SpryHTMLPanel.js" type="text/javascript"></script>

Make sure that the file path to the SpryHTMLPanel.js file is correct. This path varies depending on where you’ve placed the file in your web site.

Link the SpryHTMLPanel.css file to your web page by inserting the following link tag in the page’s head tag:

<link href="SpryAssets/SpryHTMLPanel.css" rel="stylesheet" type="text/css" />

Make sure that the file path to the SpryHTMLPanel.css file is correct. This path varies depending on where you’ve placed the file in your web site.

Add the HTML Panel widget to your web page by inserting a widget container tag, such as a div tag, where you want the widget to appear on the page. You must assign the widget tag a unique ID, as follows:

<div id="myPanel">This is default text.</div>

Next, you need an HTML fragment to pull into the widget, so create a separate file called frag.html, and save the new file in the same directory as your Spry page. Add the following code to the frag.html file:

<table width="200" border="1">
	<tr>
		<td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
      </tr>
      <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
      </tr>
</table>

Return to the Spry page and add a constructor script below the HTML code for the widget, as follows:

<div id="myPanel">This is default text.</div>
<script>
	var panelWidget = new Spry.Widget.HTMLPanel("myPanel");
</script>

This code gives the panel a name (panelWidget) and creates an HTML Panel on the myPanel element. Remember that JavaScript is case sensitive.

Finally add a link that loads the panel when a user clicks on it:

<div id="myPanel">This is default text.</div>
<a href="#" onclick="panelWidget.loadContent("frag.html");>Load
Frag</a>
<script>
	var panelWidget = new Spry.Widget.HTMLPanel("myPanel");
</script>

This link has an onclick event that causes the content of the frag.html to load into the panel widget. The format of the method is widgetname.loadContent("pathToFragment");.

Spry

Insert an HTML panel widget

document.write(terms_Related_Information);