Dojo select a tab to open based on a URL parameter
I found this page on SO ( Dojo: Select a tab on load depending on url parameter ) but I'm still not very clear on how this opens a tab from a URL call.
Here's my HTML.
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script LANGUAGE="JavaScript1.2" type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js"
djConfig="usePlainJson : true, parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.FilteringSelect");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.TabContainer");
dojo.require("dojo.data.ItemFileReadStore");
</script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css"/>
</head>
<body class="claro" >
<div dojoType="dijit.layout.BorderContainer" style="width: 100%; height: 100%;">
<div dojoType="dijit.layout.ContentPane" region="top">
HEADER
</div>
<div dojoType="dijit.layout.TabContainer" region="center">
<div dojoType="dijit.layout.ContentPane" title="tab1">
<A NAME="tab1help">TAB 1 HELP</A>
</div>
<div dojoType="dijit.layout.ContentPane" title="tab2">
<A NAME="tab1help">TAB 2 HELP</A>
</div>
</div>
<div dojoType="dijit.layout.ContentPane" region="bottom">
FOOTER
</div>
</div>
<script language="Javascript1.2" type="text/javascript">
SCRIPT HERE TO GENERATE DIV CONTENT
</script>
</body>
</html>
The javascript at the bottom generates DIV content that has anchors in it. The way to get to this page is by simply specifying "help.html".
Question is how do I specify in the URL (help.html) to open this page and open tab 2 (or tab 1, or tab 5?) depending on the URL. Is it even possible to do this?
As background, this is a help page that has about 10 topics (each with a tab) and it opens as a satellit开发者_开发知识库e window. I need to be able to open a particular tab and go to the anchor depending on what help function the surfer needs help with in the main web app window.
Many thanks! Janie
First of all, you need to add query parameter or use hash to specify the topic number to display, for example, you can use help.html?topic=1 or help.html#1. When the page is loaded, you can get the topic number from the URL.
Then get the reference of the tab container and select the corresponding tab according to the topic number. For example:
var tabContainer = dijit.byId("myTab");
var topicNumber = 5; // Get from URL
tabContainer.selectChild(tabContainer.getChildren()[topicNumber - 1]); // Assume that to the topic number starts from 1
You can also try to assign the id to each tab, for example, topic1 for topic number 1. Then
tabContainer.selectChild(dijit.byId("topic" + topicNumber));
You can use php include.
<div dojoType="dijit.layout.ContentPane" title="tab1">
<?php include 'help.php';?>
</div>
All research I have done indicates that this can't be done from a URL call. Turns out that you open a selected tab by adding the parameter selected... example below......
<div dojoType="dijit.layout.ContentPane" title="HELP" selected="true">
Thankfully I don't have static pages (they are generated via Catalyst ) so I can generate the true condition dynamically.
Hopefully this will help if someone else has the same question. JW
加载中,请稍侯......
精彩评论