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 魔法的无序列表。

有人知道检票口中是否有什么我需要做的事情才能完成这项工作吗？

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

谢谢

Answer 1

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

Christophs 的评论是正确的。该脚本需要在文档加载时执行。

将 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 菜单的列表中。