如何将标签容器添加到Spring Roo页面?

时间:2011-06-21 03:01:00

标签: spring-roo

听起来很简单。我用spring mvc完成了这个。我添加了与工作spring mvc选项卡相同的代码,但它在Roo中不起作用。

问题是标签显示在顶部,但每个标签的内容都显示出来。没有任何标签内容被隐藏。我已粘贴下面的html输出。也许有人喜欢挑战或者可能已经知道答案?将代码放在一个文件中并将其放入tomcat ROOT中,您将看到选项卡显示但无法正常工作。为什么不?为什么要在MVC工作而不是Roo?我也尝试过使用jquery选项卡,但也没有。所以,如果有人在他们的roo中有标签,请告诉我它是如何完成的。感谢。

<?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> 

更新: 我发现了一个提供一些细节的帖子。我修改了它,我将它发布在这里以备将来使用:我在myschedule目录中有一个jspx文件,文件名为index.jspx。下面的代码是我最终为我工作的代码。它使用Roo附带的默认dojo。

<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 个答案:

答案 0 :(得分:0)

我前段时间已经回答过这个问题,但我注意到这是我的第一个问题。所以,如果你看一下上面的原始问题,我就用

开始编辑

更新:我找到了一个提供一些细节的帖子。我修改了它,我将它发布在这里以备将来使用:我在myschedule目录中有一个jspx文件,文件名为index.jspx。下面的代码是我最终为我工作的代码。它使用Roo附带的默认dojo。

以下是解决方案。