The HTML Panel widget is used to dynamically load a page element with content from other files.
This sample shows how to use some of the HTML Panel widget options, and demonstrates advanced scenarios such as observers and integrating Spry Effects.
For security reasons <script> tags within the external content will not be executed when loaded into the HTML Panel. By setting the 'evalScripts' option in the constructor, scripts will be executed after being loaded into the HTML Panel.
Load Panel 'evalScripts:false'
var hp1 = new Spry.Widget.HTMLPanel("evalOff");
var hp2 = new Spry.Widget.HTMLPanel("evalOn",{evalScripts:true});
The ability to execute scripts can also be handled globally with the 'Spry.Widget.HTMLPanel.evalScripts' global var. Read about it the HTML Panel Overview.
The HTML Panel has an observer mechanism that allows you to control events based on events. This sample shows how to use the observer methods.
//panel with observer
var hp3 = new Spry.Widget.HTMLPanel("observers");
//observer functions
var observer = {onPreLoad: function(){alert("This is onPreLoad");}};
var observer2 = {onPostUpdate: function(){alert("This is onPostLoad");}};
//registers observers on the hp3 panel.
hp3.addObserver(observer);
hp3.addObserver(observer2);
Using the observer system you can enhance the content update by using Spry Effects to smoothly change content.
Load Photoshop Details. | Load Illustrator Details.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque auctor diam et risus. Nullam velit. Nullam in magna. Sed tincidunt nunc non velit. Proin non enim at velit porta dictum. Sed congue. Morbi imperdiet, ipsum eget feugiat laoreet, justo pede mollis sem, in euismod sapien mauris vitae mauris. Praesent non leo vitae ipsum pharetra eleifend. Praesent pharetra varius dui. Cras volutpat turpis sit amet tellus. Maecenas dictum velit vulputate elit. Nunc faucibus. Morbi blandit, tellus sed sagittis luctus, arcu orci egestas pede, nec luctus nulla nisi non elit. Donec a tortor vel tortor tristique vehicula. Donec dignissim, odio pellentesque lacinia commodo, neque lectus facilisis dolor, sit amet pellentesque elit lorem non ante. Proin sed ligula.
Morbi accumsan, augue a aliquet convallis, urna libero pulvinar turpis, vel euismod nisi dui eu est. Donec pharetra. Nullam interdum nulla at arcu tincidunt pellentesque. Nulla facilisi. Sed sollicitudin lorem vel pede. Etiam non diam. Sed nonummy lacus eu urna. Duis metus. Suspendisse dignissim vehicula tortor. Proin ultrices, lacus quis rutrum lacinia, nisi odio ultrices dui, dictum vehicula risus nisi eu nibh. Suspendisse convallis libero pulvinar tortor. Curabitur dictum fringilla metus. Sed mi tellus, hendrerit a, feugiat scelerisque, mollis non, massa. Aenean consectetuer odio in nisl. Praesent mi mauris, vehicula ullamcorper, lobortis id, tristique id, tortor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam libero. Mauris gravida, nisi sit amet aliquet pulvinar, sem mi porttitor orci, ac luctus arcu purus ut nisi. Pellentesque ipsum.
var hp4 = new Spry.Widget.HTMLPanel("effects");
//The Photoshop link runs this function. It is a simple version of an observer, but the content link is hardcoded.
function runIt(){
var obs = {onPostUpdate: function(){openIt.start();}};
hp4.addObserver(obs);
hp4.loadContent("frag-0.html");
}
//The Illustrator link runs this function. The new content URL is passed into the function. This is more flexible.
function tryIt(theURL){
var effectObs = {onPostEffect:function(){hp4.loadContent(theURL);}};
var obs = {onPostUpdate:function(){openIt.start();}};
closeIt2.start();
closeIt2.addObserver(effectObs);
hp4.addObserver(obs);
}
var closeIt = new Spry.Effect.Blind("effects",{from:'100%',to:'0%',duration:500,finish:runIt});
var closeIt2 = new Spry.Effect.Blind("effects",{from:'100%',to:'0%',duration:500});
var openIt = new Spry.Effect.Blind("effects",{from:'0%',to:'100%',duration:500});
Copyright Adobe Systems, Inc. 2007