Struts 2 Jquery 选项卡导航答案

【问题标题】：Struts 2 Jquery tab navigationStruts 2 Jquery 选项卡导航
【发布时间】：2013-12-30 07:52:10
【问题描述】：

当从一个选项卡导航到另一个选项卡时，即单击 tab1（即 jsp）中的提交按钮时，必须加载 tab2。我的代码如下。

  <sj:tabbedpanel id="remotetabs" onCompleteTopics="tabcomplete"
    onChangeTopics="tabchange">
    <sj:tab id="tab1" href="test1.jsp" label="Tab One" />
    <sj:tab id="tab2" href="test2.jsp" label="Tab Two" />           
   </sj:tabbedpanel><sj:submit></sj:submit>

我用过的jsp是

 <s:url var="remoteurl1" action="ajax1" />
 <s:url var="remoteurl2" action="ajax2" />
 <sj:tabbedpanel id="tabpanel">
<sj:tab id="tab1" href="Test1.jsp" label="Tab One" />
<sj:tab id="tab2" href="Test2.jsp" label="Tab Two" />
 </sj:tabbedpanel>
 <sj:a href="#" onClickTopics="movetonextdiv" button="true">Next</sj:a>

我的脚本是

  $.subscribe('movetonextdiv', function(event, data) {
                   var selected = $("#tabpanel").tabs('option', 'selected');
                   $("#tabpanel").tabs('option', 'selected', selected + 1);
            });

我仍然面临一个问题，例如在开发人员工具中我收到错误，因为 Object 不支持以下代码行的此属性或方法。

  var selected = $("#tabpanel").tabs("option", "selected");

【问题讨论】：

标签： jquery jsp struts2-jquery struts2-jquery-plugin

【解决方案1】：

给你：

<sj:a href="#" onClickTopics="movetonextdiv" button="true">Next</sj:a>


<script>
    $.subscribe('movetonextdiv', function(event, data) {
                    var selected = $("#tabpanel").tabs("option", "selected");
                    $("#tabpanel").tabs("option", "selected", selected + 1);
                });
</script>

<sj:tabbedpanel id="tabpanel" >...</sj:tabbedpanel>

【讨论】：

感谢您的快速回复。我仍然面临一个问题，例如在开发人员工具中我收到错误，因为 Object 不支持以下代码行的此属性或方法。 var selected = $("#tabpanel").tabs("option", "selected");
您是否根据您的代码将tabpanel 替换为remotetabs ？
是的，我已经在我的代码中替换为 id="tabpanel" .. 仍然没有工作
发布完整代码以及库/POM。对我来说似乎是sj plugin 版本问题。
jar 是 struts2-jquery-plugin-3.5.1.jar struts2-core-2.3.15.3.jar

【解决方案2】：

首先，您应该将插件升级到至少 v3.6.1。将$.subscribe 放在设置要发布的您订阅的主题的标签之前。确保您启用了 jQuery UI。

<sj:head jqueryui="true" />

sibscribe 主题的脚本

<script type="text/javascript">
  $(document).ready(function(){
    $.subscribe('movetonextdiv', function(event, data) {
      var el = $("#localtabs");
      var size = el.find(">ul >li").size();
      var active = el.tabs('option', 'active');
      el.tabs('option', 'active', active + 1>=size?0:active + 1);
    });
  });
</script>

带有导航按钮的标签

<sj:a href="#" onClickTopics="movetonextdiv" button="true">Next</sj:a>
<br/>
<sj:tabbedpanel id="localtabs" cssClass="list">
  <sj:tab id="tab1" target="jsp" label="JSP Code"/>
  <sj:tab id="tab2" target="javascript" label="JavaScript"/>
  <sj:tab id="tab3" target="java" label="Java"/>
  <div id="jsp">
    JSP
  </div>
  <div id="javascript">
    JavaScript
  </div>
  <div id="java">
    Java
  </div>
</sj:tabbedpanel>

【讨论】：