Question

我一直在考虑将wicket与jquery-ui结合使用。这就是我所拥有的：

<wicket:head>

 <script src="/jquery/js/jquery-ui-1.10.3.custom.js"></script>
<link rel="stylesheet" type="text/css" href="/jquery/css/custom-theme/jquery-ui-    1.10.3.custom.css">

<script>
$("#menu").menubar();
</script>

</wicket:head>

<wicket:panel>


    <ul id="menu">
        <li><a href="#">Character</a>
        <ul>
        <li>sdf</li>
        <li>sfs</li>
        <li>we</li>
        </ul>

        </li>
        <li><a href="#">Corporation</a></li>
        <li><a href="#">Alliance</a></li>
        <li><a href="#">Fleet</a></li>
    </ul>

当我将此面板添加到我的页面时，它显示为没有jquery魔法的无序列表。

任何人都知道我需要做什么来完成这项工作吗？

我已经验证了jquery脚本和css都被选中了

由于

Answer 1

当我将此面板添加到我的页面时，它显示为无序列表没有jquery魔术。

克里斯托弗的评论是正确的。该脚本需要在文档加载时执行。

向组件添加JQuery功能的“Wicket Way”是通过创建一个Behavior来处理加载javascript和css文件并在文档加载时添加javascript。像这样：

public class JQueryMenuBehavior extends Behavior{

    @Override
    public void renderHead(Component component, IHeaderResponse response){
        response.renderJavascriptReference("/jquery/js/jquery-ui-1.10.3.custom.js");
        response.renderCSSReference("/jquery/css/custom-theme/jquery-ui-1.10.3.custom.css");
        response.renderOnDomReadyJavascript("$('#menu').menubar();");
    }
}

然后只需将此行为添加到“普通”Wicket无序列表中，即可获得JQuery菜单。你应该可以使id“#menu”可配置。

通过这种方式，您可以将可重复使用的行为添加到要作为jquery菜单显示的任何列表中。

wicket和jquery-ui菜单;菜单呈现为无序列表

1 个答案: