如何正确使用 jquery 的 tabs() 函数？答案

【问题标题】：How to properly use jquery's tabs() function?如何正确使用 jquery 的 tabs() 函数？
【发布时间】：2011-10-02 17:12:57
【问题描述】：

在我的 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。

有什么想法吗？

【问题讨论】：

标签： jquery jquery-ui grails jquery-ui-tabs

【解决方案1】：

如果您有脚本而不是 CSS 文件，那么您将一事无成。

要获取 jQueryUi 框架以及 CSS 文件和脚本的捆绑包，请使用 themeroller：http://jqueryui.com/themeroller/

【讨论】：

【解决方案2】：

我建议不要打扰 jQuery 或 jQueryUI 的插件。相反，只需将 JS 下载到您的 web-app/js 文件夹中。然后使用传统标签引用它们，但也使用 grails“资源”标签库，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*”标签库的 jQuery 支持（ala http://grails.org/doc/latest/ref/Tags/submitToRemote.html），但我从不使用它，因为我喜欢直接使用 jQuery。

【讨论】：

好的，我获得了 jquery 和 jquery-ui 发行版并将它们放在 web-app/js 中。我将标记修改为如下所示：但是，它似乎仍然不起作用。

【解决方案3】：

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

【讨论】：

是的，我已经安装了 jquery 并确认基本工作正常。也就是说，我有很多工作要做：
tabs 是 jQuery UI 的一部分，是 jQuery 的扩展，必须单独安装。
我已经安装了 jquery-ui 插件，并在我的 GSP 中添加了“”。但是 tabs() 调用似乎仍然没有效果。如何确认 jquery-ui 已正确安装？
检查页面的 HTML 源代码，看看它是否有引用 jquery-ui javascript 文件的脚本标记。还要检查你的开发者控制台，看看你的脚本是否产生错误。
我在我的 GSP 中添加了一行“”。这将（正确地？）转换为“”行。但是，tabs() 行似乎仍然没有效果。

【解决方案4】：

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

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

我使用了以下标签：

<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。事实证明，做对有点古怪。

【讨论】：

【解决方案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>

【讨论】：