Spry Panel with Dynamic Content
I am continually impressed with how lightweight and simple the spry framework is to work with. It's not a solution for everyone but to do some simple Ajax things it's really quite simple.
I was looking at an idea to do a tabbed dialog box, the content of the dialog boxes should be loaded when the tab is clicked. Simple stuff really but Spry makes it really simple.
It requires two js files to do the "heavy lifting" and two css files and 6 lines of JS script for a total of 11Kb. What you get with all that is a tab panel with 4 tabs each tab loading separate content when the tab is clicked. So the tabs aren't pretty with rounded corners like with ExtJs but you get a functioning tab with dynamically loaded content.
In the head of your html document put the following
<script src="assets/SpryHTMLPanel.js" language="javascript" type="text/javascript"></script>
<script src="assets/SpryTabbedPanels.js" language="javascript" type="text/javascript"></script>
<link href="assets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<link href="assets/SpryHTMLPanel.css" rel="stylesheet" type="text/css" />
These four files are the guts of the tab and html panels. Once you have that you just need to set up your tabs like so:
<div class="TabbedPanels" id="tp1">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0" onclick="tab1.loadContent('tab1.cfm');return false;">Tab 1</li>
<li class="TabbedPanelsTab" tabindex="0" onclick="tab2.loadContent('tab2.cfm');return false;">Tab 2</li>
<li class="TabbedPanelsTab" tabindex="0" onclick="tab3.loadContent('tab3.cfm');return false;">Tab 3</li>
<li class="TabbedPanelsTab" tabindex="0" onclick="tab4.loadContent('tab4.cfm');return false;">Tab 4</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent" id="tab1"></div>
<div class="TabbedPanelsContent" id="tab2"></div>
<div class="TabbedPanelsContent" id="tab3"></div>
<div class="TabbedPanelsContent" id="tab4"></div>
</div>
</div>
The tabs of the tab panel are contained within a unordered list we set the onclick event of the tab to load the content of a specific document in our case 4 different cfm files, but they could easily have been static html or php.
The last thing we need to do is to initialize everything. With spry this is typically done at the end of the page.
<script type="text/javascript">
var tp1 = new Spry.Widget.TabbedPanels("tp1", { defaultTab: 0 });
var tab1 = new Spry.Widget.HTMLPanel("tab1");
tab1.loadContent('tab1.cfm');
var tab2 = new Spry.Widget.HTMLPanel("tab2");
var tab3 = new Spry.Widget.HTMLPanel("tab3");
var tab4 = new Spry.Widget.HTMLPanel("tab4");
</script>
In the above code snippet we first set up our tab panel and then set up all of our html panels that will eventually become our tab panels. Lastly we load the content into the first panel since we set that as the default selected panel.
What you end up with is something that looks like this:
I included firebug in the image to show the tabs going out and retrieving the files.
Happy Coding...
Subscribe
Subscribe via RSS
Follow me on Twitter
Or, Receive daily updates via email.
Tags
adobe air ajax apple cf community cfml coldfusion examples ext flash flex google javascript max2007 max2008 misc open source programming railo software technology ui
Recent Entries
Converting structkeys to lowercase
Blogroll
An Architect's View
CFSilence
Rey Bango
TalkingTree
Wish List
One more question: How do I extend this to automatically generate each TAB from an external file as well.
eg. The tabs are generated from external XML data (the XML contains the link to be run when the Tab is clicked), and then each tab generates it's content when it is clicked (like what you have here).
http://www.garyrgilbert.com/blog/index.cfm/2008/2/...
Hope it helps!
What am I doing wrong?
Please check out the tutorial I wrote up, it has a working example on it.
If you still have problems feel free to send me an email
http://www.garyrgilbert.com/tutorials/spry/interme...