How to add a Tab Container to a Spring Roo page?
This sounds simple enough. I have done this with spring mvc. I added the same code that I did for the working spring mvc tabs and yet it did not work in Roo.
The problem was that the Tab are shown at the top but the content of each of the tabs are all shown. None of the tabs content is hidden. I have pasted the html output below. Perhaps someone loves a challenge or may already know the answer? Put the code in a file and place it in say a tomcat ROOT and you will see that the tabs display but do not work properly. Why not? Why work in the MVC but not Roo? I have also tried this with jquery tabs but no go, also. So, if anybody has tabs in their roo please let me know how it is done. Thanks.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE HTML SYSTEM "about:legacy-compat">
<html><head><meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/><meta content="IE=8" http-equiv="X-UA-Compatible"/><link href="/shop-1.0.0/resources/ styles/standard.css" media="screen" type="text/css" rel="stylesheet"></ link><link href="/shop-1.0.0/resources/dijit/themes/tundra/tundra.css" type="text/css" rel="stylesheet"></link><link href="/shop-1.0.0/resources/images/favicon.ico" rel="SHORTCUT ICON"/><script type="text/javascript">var djConfig = {parseOnLoad: false, isDebug: false, locale: 'en_us'};</script><script type="text/javascript" src="/shop-1.0.0/resources/dojo/dojo.js"></script><script type="text/javascript" src="/shop-1.0.0/resources/spring/Spring.js"></script><script type="text/javascript" src="/shop-1.0.0/resources/spring/Spring-Dojo.js"></script><script type="text/javascript" language="JavaScript">dojo.require("dojo.parser");</script><title>Welcome to Schedule shop</title></head><body class="tundra spring"><div id="wrapper"><div version="2.0" id="header"><a title="Home" name="Home" href="/shop-1.0.0/"><img src="/shop-1.0.0/resources/images/banner_75b.png"/></a></div><div version="2.0" id="menu"><ul id="_s_menu"><li id="c_shop"><h2>Shop</h2><ul><li id="i_shop_schedule"><a title="Schedule" href="/shop-1.0.0/myschedule">Schedule</a></li><li id="i_shop_clients"><a title="Clients" href="/shop-1.0.0/clients">Clients</a></li><li id="i_shop_services"><a title="Services" href="/shop-1.0.0/services">Services</a></li><li id="i_shop_settings"><a title="Settings" href="/shop-1.0.0/settings">Settings</a></li><li id="i_shop_reports"><a title="Reports" href="/shop-1.0.0/reports">Reports</a></li></ul></li></ul></div><div id="main"><div version="2.0"><style type="text/css">
ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px;
border-bottom: 1px solid #999;
border-left: 1px solid #999;
width: 110%;
}
ul.tabs li {
float: left;
margin: 0;
padding: 0;
height: 31px;
line-height: 31px;
border: 1px solid #999;
border-left: none;
margin-bottom: -1px;
background: #e0e0e0;
overflow: hidden;
position: relative;
}
ul.tabs li a {
text-decoration: none;
color: #000;
display: block;
font-size: 1.2em;
padding: 0 20px;
border: 1px solid #fff;
outline: none;
}
ul.tabs li a:hover {
background: #ccc;
}
html ul.tabs li.active,html ul.tabs li.active a:hover {
background: #fff;
border-bottom: 1px solid #fff;
}
.tab_container {
border: 1px solid #999;
border-top: none;
clear: both;
background: #fff;
-moz-border-radius-bottomright: 5px;
-khtml-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-khtml-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
}
.tab_content {
padding: 20px;
font-size: 1.2em;
}
.tab_content h2 {
font-weight: normal;
padding-bottom: 10px;
border-bottom: 1px dashed #ddd;
font-size: 1.8em;
}
.tab_content h3 a {
color: #254588;
}
.tab_content img {
float: left;
margin: 0 20px 20px 0;
border: 1px solid #ddd;
padding: 5px;
}
</style><script charset="utf-8" type="text/javascript">
$(document).ready(function() {
//Default Action
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active content
return false;
});
});
</script><ul class="tabs"><li><a href="#tab1">Addresses</a></li><li><a href="#tab2">Schedules</a></li></ul><div class="container"><div class="tab_container"><div class="tab_content" id="tab1"><script type="text/javascript">dojo.require('dijit.TitlePane');</script><div id="_title_title_id"><script type="text/javascript">Spring.addDecoration(new Spring.ElementDecoration({elementId : '_title_title_id', widgetType : 'dijit.TitlePane', widgetAttrs : {title: 'Welcome to Schedule shop', open: true}})); </script><h3>Welcome to Schedule shop</h3><p>My Schedule</p></div></div><div class="tab_content" id="tab2">
2222
</div></div></div></div><div version="2.0" id="footer"><span><a href="/shop-1.0.0/">Home</a></span> | <span><a href="/shop-1.0.0/resources/j_spring_security_logout">Logout</a></span><span id="language"> | Language: <a title="Switch language to English" href="?lang=en"><img alt="Switch language to English" src="/shop-1.0.0/resources/images/en.png" class="flag"/></a> <a title="Switch language to Deutsch" href="?lang=de"><img alt="Switch language to Deutsch" src="/shop-1.0.0/resources/images/de.png" class="flag"/></a> <a title="Switch language to Espanol" href="?lang=es"><img alt="Switch language to Espanol" src="/shop-1.0.0/resources/images/es.png" class="flag"/></a> <a title="Switch language to Italiano" href="?lang=it"><img alt="Switch language to Italiano" src="/shop-1.0.0/resources/images/it.png" class="flag"/></a> <a title="Switch language to Dutch" href="?lang=nl"><img alt="Switch language to Dutch" src="/shop-1.0.0/resources/images/nl.png" class="flag"/></a> <a title="Switch language to Svenska" href="?lang=sv"><img alt="Switch language to Svenska" src="/shop-1.0.0/resources/images/sv.png" class="flag"/></a> </span><span> | Theme: <a title="standard" href="?theme=s开发者_如何学Gotandard">standard</a> | <a title="alt" href="?theme=alt">alt</a></span><span><a title="Sponsored by {0}" href="http://springsource.com"><img src="/shop-1.0.0/resources/images/springsource-logo.png" alt="Sponsored by {0}" align="right"/></a></span></div></div></div></body></html>
Update: I found a thread that gave some details. I modified it and I am posting it here for future usage: I have a jspx file inside of myschedule directory with file named index.jspx. The code below is what I finally have working for me. It uses the default dojo that comes with Roo.
<div xmlns:spring="http://www.springframework.org/tags" xmlns:util="urn:jsptagdir:/WEB-INF/tags/util" xmlns:jsp="http://java.sun.com/JSP/Page" version="2.0">
<!-- create the tab container div -->
<div id="myTabContainer" style="height: 500px; width:500px;">
<!-- add a tab -->
<div id="basicTab" style="width: 100%">
11
</div>
<!-- add the content pane decoration (all tabs must live in content panes) -->
<script type="text/javascript">
Spring.addDecoration(new Spring.ElementDecoration(
{elementId : 'basicTab',
widgetType : 'dijit.layout.ContentPane',
widgetAttrs : {title: 'Basic', selected: true}
}));
</script>
<!-- another tab... -->
<div id="advancedTab">
22
</div>
<!-- add the content pane decoration (all tabs must live in content panes) -->
<script type="text/javascript">
Spring.addDecoration(new Spring.ElementDecoration(
{elementId : 'advancedTab',
widgetType : 'dijit.layout.ContentPane',
widgetAttrs : {title: 'Advanced', selected: true}
}));
</script>
<!-- decorate the tab container to create it -->
<script type="text/javascript">
Spring.addDecoration(new Spring.ElementDecoration(
{elementId : 'myTabContainer',
widgetType : 'dijit.layout.TabContainer'}
));
</script>
<!-- now, find the tab container, and the title pane, (which is the ID with a prefix of '_title'. Add the tab container to the tab pane at the top of it.. Note that the button is at the bottom of the TitlePane. -->
<script type="text/javascript">
dojo.addOnLoad(function(){
var tabs = dijit.byId("myTabContainer");
var pane = dijit.byId("_title_fc_org_rooina_ria_ajax_coursemanager_model_ Course_id");
tabs.placeAt(pane.containerNode, "first");
tabs.startup();
tabs.resize();
});
</script>
</div>
the original code I picked up at http://forum.springsource.org/archive/index.php/t-89413.html
I already answered this question myself some time ago but i notice that it was one of my first . So, if you look at the original question above i did an edit starting with
Update: I found a thread that gave some details. I modified it and I am posting it here for future usage: I have a jspx file inside of myschedule directory with file named index.jspx. The code below is what I finally have working for me. It uses the default dojo that comes with Roo.
Below this is the solution.
加载中,请稍侯......
精彩评论