WW-1909 User should be able to enable/disable tabs in the tabbedpanel tag

git-svn-id: https://svn.apache.org/repos/asf/struts/struts2/trunk@535557 13f79535-47bb-0310-9956-ffa450edef68
This commit is contained in:
Musachy Barroso
2007-05-05 18:46:14 +00:00
parent 49d8315fc0
commit c81a2fc120
3 changed files with 103 additions and 0 deletions
@@ -0,0 +1,57 @@
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%@ taglib prefix="sx" uri="/struts-dojo-tags" %>
<html>
<head>
<title>Ajax examples - tabbled panel</title>
<jsp:include page="/ajax/commonInclude.jsp"/>
</head>
<script>
function enableTab(id) {
var tabContainer = dojo.widget.byId('tabContainer');
tabContainer.enableTab(id);
}
function disableTab(index) {
var tabContainer = dojo.widget.byId('tabContainer');
tabContainer.disableTab(index);
}
</script>
<body>
<sx:tabbedpanel id="tabContainer" cssStyle="width: 500px; height: 300px;" doLayout="true">
<sx:div id="tab1" label="test1" >
Enabled Tab
</sx:div >
<sx:div id="tab2" label="test2" disabled="true" >
Diabled Tab
</sx:div >
<sx:div id="tab3" label="test2" >
Some other Tab
</sx:div >
</sx:tabbedpanel>
<br />
<input type="button" onclick="enableTab(1)" value="Enable Tab 2 using Index" />
<input type="button" onclick="disableTab(1)" value="Disable Tab 2 using Index" />
<br />
<input type="button" onclick="enableTab('tab2')" value="Enable Tab 2 using Id" />
<input type="button" onclick="disableTab('tab2')" value="Disable Tab 2 using Id" />
<br />
<input type="button" onclick="enableTab(dojo.widget.byId('tab2'))" value="Enable Tab 2 using widget" />
<input type="button" onclick="disableTab(dojo.widget.byId('tab2'))" value="Disable Tab 2 using widget" />
<br /> <br />
<s:include value="../footer.jsp"/>
</body>
</html>
@@ -0,0 +1,44 @@
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%@ taglib prefix="sx" uri="/struts-dojo-tags" %>
<html>
<head>
<title>Ajax examples - tabbled panel</title>
<jsp:include page="/ajax/commonInclude.jsp"/>
</head>
<script>
dojo.event.topic.subscribe('/before', function(tabContainer, tab, event) {
alert("Before selecting tab. Set 'event.cancel=true' to prevent selection");
});
dojo.event.topic.subscribe('/after', function(tabContainer, tab, event) {
alert("After tab was selected");
});
</script>
<body>
<sx:tabbedpanel
id="tabContainer"
cssStyle="width: 500px; height: 300px;"
doLayout="true"
beforeSelectTabNotifyTopics="/before"
afterSelectTabNotifyTopics="/after">
<sx:div id="tab1" label="test1" >
Tab 1
</sx:div >
<sx:div id="tab2" label="test2" >
Tab 2
</sx:div >
</sx:tabbedpanel>
<br />
<br />
<s:include value="../footer.jsp"/>
</body>
</html>
@@ -12,6 +12,8 @@
<p>
<ol>
<li><a href="example2.jsp">A local tabbed panel width fixed size (doLayout="true")</a></li>
<li><a href="example4.jsp">A Local tabbed panel with disabled tabs</a></li>
<li><a href="example6.jsp">A Local tabbed panel that publishes topics when tabs are selected(before and after)</a></li>
<li><a href="example3.jsp">A remote (href != "") and local tabbed panel</a></li>
<li><a href="example1.jsp">Various remote and local tabbed panels (with enclosed tabbed pannels) with layout (doLayout="false")</a></li>
<li><a href="example5.jsp">A local tabbed panel width fixed size (doLayout="true") with close button on the tab pane (closable="true" on tabs), and tabs on the bottom (labelposition="bottom")</a></li>