动态css不会在spring 3.0 + Tiles中应用

时间:2013-02-13 05:53:05

标签: jquery tiles spring-3 dynamic-css

我正在使用Spring 3.0 + tiles。我已经为所有页面创建了带有锚标记的公共菜单,并为其应用了css。我点击菜单时使用Jquery动态更改菜单的css类。

当选择菜单/链接时,将应用“selectedTab”css类,并且对于所有正常链接,将应用“tab”css类。 我面临的问题是,每次请求/点击菜单都会应用样式类,然后在响应后再次取消应用。也就是说,样式仍然在请求和响应之间应用。但不是在回应之后。 菜单链接的代码如下:

 <div id="menu" class=" mainPageLayout clearFix" style="width:980px;margin:0 auto;">
                    <a id="dashboard" class="selectedTab" href="dashboard.html" onclick="return changeCss('dashboard');">
                        <span>Dashboard</span>
                    </a>

                    <a id="projects" class="tab" href="projectscontroller.html" onclick="return changeCss('projects');">
                        <span>Projects</span>
                    </a>

                    <a id="milestones" class="tab" href="milestones.html" onclick="return changeCss('milestones');">
                        <span>Milestones</span>
                    </a>

                    <a id="tasks" class="tab" href="tasks.html" onclick="return changeCss('tasks');">
                        <span>Tasks</span>
                    </a>

                    <a id="discussions" class="tab" href="messages.html" onclick="return changeCss('discussions');">
                        <span>Discussions</span>
                    </a>

                    <a id="reports" class="tab" href="reports.html" onclick="return changeCss('reports');">
                        <span>Reports</span>
                    </a>

                    <a id="history" class="tab" href="projects/history.html" onclick="return changeCss('history');">
                        <span>History</span>
                    </a>

                    <a id="templates" class="tab" style="float: right;" href="projects/users.html" onclick="return changeCss('templates');">
                        <span>Project templates</span>
                    </a>

                    <a id="users" class="tab" style="float: right;" href="projects/projectTemp.html" onclick="return changeCss('users');">
                        <span>Users</span>
                    </a>
                </div>

同样的Jquery是:

功能changeCss(援助)     {         //警报(助剂);

    jQuery("#menu a").removeClass("selectedTab");
    jQuery("#menu a").addClass("tab");


    jQuery("#"+ aid).removeClass("tab");
    jQuery("#" + aid).addClass("selectedTab");


}

菜单的Css类是:

 a.selectedTab:hover, 
    .studioTopNavigationPanel 
    .contentSection 
    .navigationBox a
    .selectedTab:active 
    {
        background-color: #B8D9ED;
        background-image: url("../images/tab_selected_bg.png");
        background-position: center top;
        background-repeat: repeat-x;
        color: #333333;
        cursor: pointer;
        display: block;
        float: left;
        font-size: 14px;
        margin-right: 3px;
        padding: 5px 12px;
        text-decoration: none;
    }

    .studioTopNavigationPanel .contentSection .navigationBox a.tab, 
    .studioTopNavigationPanel .contentSection .navigationBox a.tab:visited, 
    .studioTopNavigationPanel .contentSection .navigationBox a.tab:hover, 
    .studioTopNavigationPanel .contentSection .navigationBox a.tab:active 
    {
        background-color: #ECF3F7;
        background-image: url("../images/tab_bg.png");
        background-position: center top;
        background-repeat: repeat-x;
        color: #333333;
        cursor: pointer;
        display: block;
        float: left;
        font-size: 14px;
        margin-right: 3px;
        padding: 5px 12px;
        text-decoration: none;
    }



    .studioTopNavigationPanel .contentSection .navigationBox a.selectedTab, 
    .studioTopNavigationPanel .contentSection .navigationBox a.selectedTab:visited, 
    .studioTopNavigationPanel .contentSection .navigationBox a.selectedTab:hover, 
    .studioTopNavigationPanel .contentSection .navigationBox a.selectedTab:active 
    {
        background-color: #B8D9ED;
        background-image: url("../images/tab_selected_bg.png");
        background-position: center top;
        background-repeat: repeat-x;
        color: #333333;
        cursor: pointer;
        display: block;
        float: left;
        font-size: 14px;
        margin-right: 3px;
        padding: 5px 12px;
        text-decoration: none;
    }

下面是我的tiles.xml文件。我有一个名为project的模块,tiles.xml文件包含菜单的配置。

<tiles-definitions>

  <definition name="baseLayout" template="/WEB-INF/tiles/baseLayout.jsp">
      <put-attribute name="title"  value="Template"/>
      <put-attribute name="header" value="/WEB-INF/tiles/header.jsp"/>
      <put-attribute name="menu"   value="/WEB-INF/tiles/menu.jsp"/>
      <put-attribute name="body"   value="/WEB-INF/tiles/body.jsp"/>
      <put-attribute name="footer"   value="/WEB-INF/tiles/footer.jsp"/>
  </definition>


  <!-- Project Controllers request navigations of jsps  -->

  <definition name="dashboard" extends="baseLayout">
      <put-attribute name="title"  value="Dashboard"/>
      <put-attribute name="menu"   value="/WEB-INF/jsp/projectsjsp/menu.jsp"/>
      <put-attribute name="body"   value="/WEB-INF/jsp/projectsjsp/dashboard.jsp"/>      
  </definition>

   <definition name="projectsnew" extends="baseLayout">
      <put-attribute name="title"  value="Dashboard"/>
      <put-attribute name="menu"   value="/WEB-INF/jsp/projectsjsp/menu.jsp"/>
      <put-attribute name="body"   value="/WEB-INF/jsp/projectsjsp/projectsnew.jsp"/>      
  </definition>

   <definition name="createproject" extends="baseLayout">
      <put-attribute name="title"  value="Dashboard"/>
      <put-attribute name="menu"   value="/WEB-INF/jsp/projectsjsp/menu.jsp"/>
      <put-attribute name="body"   value="/WEB-INF/jsp/projectsjsp/createproject.jsp"/>      
  </definition>

   <definition name="projectsInfo" extends="baseLayout">
      <put-attribute name="title"  value="Project Info"/>
      <put-attribute name="menu"   value="/WEB-INF/jsp/projectsjsp/projectinfomenu.jsp"/>
      <put-attribute name="body"   value="/WEB-INF/jsp/projectsjsp/projectsInfo.jsp"/>      
  </definition>

  <definition name="editprojects" extends="baseLayout">
      <put-attribute name="title"  value="Edit Projects"/>
      <put-attribute name="menu"   value="/WEB-INF/jsp/projectsjsp/menu.jsp"/>
      <put-attribute name="body"   value="/WEB-INF/jsp/projectsjsp/editprojects.jsp"/>      
  </definition>

  <definition name="milestones" extends="baseLayout">
      <put-attribute name="title"  value="Edit Projects"/>
      <put-attribute name="menu"   value="/WEB-INF/jsp/projectsjsp/menu.jsp"/>
      <put-attribute name="body"   value="/WEB-INF/jsp/projectsjsp/milestones.jsp"/>      
  </definition>

  <definition name="tasks" extends="baseLayout">
      <put-attribute name="title"  value="Edit Projects"/>
      <put-attribute name="menu"   value="/WEB-INF/jsp/projectsjsp/menu.jsp"/>
      <put-attribute name="body"   value="/WEB-INF/jsp/projectsjsp/tasks.jsp"/>      
  </definition>

   <definition name="discussion" extends="baseLayout">
      <put-attribute name="title"  value="Edit Projects"/>
      <put-attribute name="menu"   value="/WEB-INF/jsp/projectsjsp/menu.jsp"/>
      <put-attribute name="body"   value="/WEB-INF/jsp/projectsjsp/discussions.jsp"/>      
  </definition>

  <definition name="newdiscussion" extends="baseLayout">
      <put-attribute name="title"  value="Edit Projects"/>
      <put-attribute name="menu"   value="/WEB-INF/jsp/projectsjsp/menu.jsp"/>
      <put-attribute name="body"   value="/WEB-INF/jsp/projectsjsp/newdiscussion.jsp"/>      
  </definition>


<definition name="reports" extends="baseLayout">
      <put-attribute name="title"  value="Edit Projects"/>
      <put-attribute name="menu"   value="/WEB-INF/jsp/projectsjsp/menu.jsp"/>
      <put-attribute name="body"   value="/WEB-INF/jsp/projectsjsp/reports.jsp"/>      
  </definition>

</tiles-definitions>

请告诉我哪里错了,并尽快为此提供适当的解决方案。

0 个答案:

没有答案