Как добавить контейнер вкладок на страницу Spring Roo?
Это звучит достаточно просто. Я сделал это с весны MVC. Я добавил тот же код, что и для рабочих пружинных вкладок mvc, но он не работал в Roo.
Проблема заключалась в том, что вкладка отображалась в верхней части, но содержимое каждой вкладки отображалось. Ни одна из вкладок не скрыта. Я вставил вывод HTML ниже. Возможно, кто-то любит вызов или, возможно, уже знает ответ? Поместите код в файл и поместите его, скажем, в корень кота, и вы увидите, что вкладки отображаются, но не работают должным образом. Почему бы и нет? Почему работа в MVC, а не Roo? Я также пробовал это с вкладками JQuery, но не идти, также. Итак, если у кого-то есть вкладки в их руте, пожалуйста, дайте мне знать, как это делается. Благодарю.
<?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=standard">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>
Обновление: я нашел тему, которая дала некоторые подробности. Я изменил его и выкладываю здесь для дальнейшего использования: у меня есть файл jspx внутри каталога myschedule с файлом index.jspx. Код ниже - это то, что у меня наконец-то работает для меня. Он использует стандартное додзё, которое поставляется с 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>
исходный код, который я взял по адресу http://forum.springsource.org/archive/index.php/t-89413.html
1 ответ
Решение
Я уже ответил на этот вопрос сам некоторое время назад, но я заметил, что это был один из моих первых. Итак, если вы посмотрите на оригинальный вопрос выше, я сделал редактирование, начиная с
Обновление: я нашел тему, которая дала некоторые подробности. Я изменил его и выкладываю здесь для дальнейшего использования: у меня есть файл jspx внутри каталога myschedule с файлом index.jspx. Код ниже - это то, что у меня наконец-то работает для меня. Он использует стандартное додзё, которое поставляется с Roo.
Ниже это решение.