How to properly use jquery's tabs() function?

In my Gr开发者_开发问答ails app, I've got a GSP that looks a bit like this:

<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>

If I've understood it right, the jQuery tabs() call should make my "tabs" div look like a tabbed panel. Is that correct? If so, it's not working. It just renders as a normal ul.

Any ideas?

if you have the scripts and not the CSS files, than you won't achieve anything.

To get a bundle of jQueryUi framework along with the CSS files and scripts use themeroller: http://jqueryui.com/themeroller/

I'd suggest just not bothering with the plugins for jQuery or jQueryUI. Instead just download the JS into your web-app/js folder. Then reference them using a traditional tag but also using the 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')}" />

I like using plugins for many things, but for something as simple as a few JS libs, I just don't see enough value. There is a tiny bit of value in having the jQuery plugin as it provides a grails class that implements jQuery support for the 'remote*' taglibs (ala http://grails.org/doc/latest/ref/Tags/submitToRemote.html), but I never use this anyways since I favor using jQuery directly.

The tabs widget is part of jQuery UI, which is an extension of jQuery. You need to install jquery UI on your page. See http://learn.jquery.com/jquery-ui/getting-started to get you started with jQuery UI.

Ok, thanks for the help everyone. Here's what finally worked:

I obtained the jquery and jquery-ui distros and unzipped them directly into my web-app folders.

I used the following tags:

<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')}" />

Note that I had forgotten to link to the appropriate css. Turns out it's a bit quirky to get right.

In ApplicationResources.groovy:

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

In your gsp file, simply add this in the head:

<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>