Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Steve Jenkins
14th April 2009

Use Ajax to open specific tab in tabbed panel

Pick and choose which tab to link to

Use Ajax to open specific tab in tabbed panel
Pick and choose which tab to link to.

TO OPEN A specific tab in a tabbed panel via Dreamweaver, a file called SpryURLUtils.js is needed. This can be found via the Spry framework download at http://labs.adobe.com/technologies/spry/. Unzip the Download folder and head to the Include folder. Copy the SpryURLUtils.js into the default SpryAssets folder relating to the current site. Switch to Code view and link SpryURLUtils.js to the page by adding the following code in the <head>:

<script type=”text/javascript” src=”SpryAssets/SpryURLUtils.js”></script>.
<script type=”text/javascript”> var params = Spry.Utils.getLocationParamsAsObject();
</script>.

Head to the bottom of the page where you’ll find the following variable inside some opening and closing script tags: var TabbedPanels1 = new Spry.Widget.TabbedPanels(“TabbedPanels1”) Now add the following code after Tabbed Panels1: {defaultTab: params.tab ? params.tab : 0} You should get the following:

<script type=”text/javascript”>
<!–
var TabbedPanels1 = new Spry.Widget.TabbedPanels(“TabbedPanels1”, {defaultTab: params.tab ?
params.tab : 0});
//–>
</script>

When linking to the page, the following needs to be added in the Link box in the Properties window, eg, ../tabtest.php?tab=1#TabbedPanels1. tabtest.php is the name of the page to link to and tab= defines which tab is selected. Tab=0 selects the first tab, tab=1 selects the second tab, and so on.

Tags: ,
  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.

    What's your opinion?

    Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

    Be nice. Keep it clean. Stay on topic. No spam.