Question

在我的Grails应用程序中，我有一个看起来有点像这样的GSP：

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Nunc tincidunt</a></li>
        <li><a href="#tabs-2">Proin dolor</a></li>
        <li><a href="#tabs-3">Aenean lacinia</a></li>
    </ul>
    <div id="tabs-1"><p>foo</p></div>
    <div id="tabs-2"><p>bar</p></div>
    <div id="tabs-3"><p>zip</p></div>
</div>

<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery("#tabs").tabs();
    });
</script>

如果我理解正确，jQuery tabs（）调用应该使我的“tabs”div看起来像一个标签面板。那是对的吗？如果是这样，它就不起作用了。它只是呈现正常的ul。

有什么想法吗？

Answer 1

如果您有脚本而不是CSS文件，那么您将无法实现任何目标。

要获得一个jQueryUi框架以及CSS文件和脚本，请使用themeroller：http://jqueryui.com/themeroller/

Answer 2

The tabs widget是jQuery UI的一部分，它是jQuery的扩展。您需要在页面上安装jquery UI。请参阅http://learn.jquery.com/jquery-ui/getting-started以开始使用jQuery UI。

Answer 3

我建议不要打扰jQuery或jQueryUI的插件。而只需将JS下载到您的web-app / js文件夹中。然后使用传统标签引用它们，但也使用grails“resource”taglib，ala ....

<script type="text/javascript" src="${resource(dir:'js',file:'jquery.js')}"></script>
<script type="text/javascript" src="${resource(dir:'js',file:'jquery-ui.js')}"></script>
<link rel="stylesheet" href="${resource(dir:'css',file:'jquery-ui.css')}" />

我喜欢在许多方面使用插件，但对于像一些JS库这样简单的东西，我只是看不到足够的价值。使用jQuery插件有一点点价值，因为它提供了一个grails类，它实现了对'remote *'taglibs（ala http://grails.org/doc/latest/ref/Tags/submitToRemote.html）的jQuery支持，但我从不使用它，因为我赞成直接使用jQuery 。

Answer 4

好的，谢谢大家的帮助。这是最终奏效的：

我获得了jquery和jquery-ui发行版并将它们直接解压缩到我的web-app文件夹中。

我使用了以下标签：

<g:javascript library="jquery-1.6.2.min"/>
<g:javascript library="jquery-ui-1.8.16.custom.min"/>
<link rel="stylesheet" href="${resource(dir:'css/smoothness',file:'jquery-ui-1.8.16.custom.css')}" />

请注意，我忘记了链接到相应的CSS。事实证明，做对了有点古怪。

Answer 5

在ApplicationResources.groovy中：

modules = {
    application {
        resource url:'js/application.js'
    }
    jqueryui {
        resource url:'js/jquery-ui-1.10.2.custom.min.js'
    }
}

在你的gsp文件中，只需将其添加到头部：

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<r:require module="jqueryui" />
<script>
    $(document).ready(function() {
        $("#tabs").tabs();
    });
</script>

如何正确使用jquery的tabs（）函数？

5 个答案: