jquery - Wicket 口和 jquery-ui 菜单；菜单呈现为无序列表

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 魔法。

有人知道我需要在 Wicket 口内做些什么才能使这项工作正常进行吗？

我已经验证 jquery 脚本和 css 都被拾取

谢谢

Answer 1

When I add this panel to my page it appears as a unordered list with no jquery magic.

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

向组件添加 JQuery 功能的“Wicket 方式”是创建一个行为，负责加载 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 菜单的列表中，从而获得可重用的行为。