Как правильно использовать функцию tabs () в jquery? - PullRequest
Новая
       4

Как правильно использовать функцию tabs () в jquery?

2 голосов
/ 02 октября 2011

В моем приложении 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 () должен сделать мои "закладки"div выглядит как панель с вкладками.Это верно?Если так, это не работает.Он просто отображается как обычный ul.

Есть идеи?

Ответы [ 5 ]

2 голосов
/ 02 октября 2011

если у вас есть сценарии, а не файлы CSS, то вы ничего не добьетесь.

Чтобы получить пакет инфраструктуры jQueryUi вместе с файлами и сценариями CSS, используйте themeroller: http://jqueryui.com/themeroller/

1 голос
/ 03 октября 2011

Я бы посоветовал просто не беспокоиться о плагинах для 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, который реализует поддержку jQuery для тегов «remote *» (ala http://grails.org/doc/latest/ref/Tags/submitToRemote.html),, но я никогда не использую это, так как я предпочитаю использовать jQuery напрямую.

1 голос
/ 02 октября 2011

Виджет вкладок является частью пользовательского интерфейса jQuery, который является расширением jQuery.Вам нужно установить jquery UI на свою страницу.См. http://learn.jquery.com/jquery-ui/getting-started, чтобы начать работу с пользовательским интерфейсом jQuery.

0 голосов
/ 27 апреля 2013

В 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>
0 голосов
/ 03 октября 2011

Ок, спасибо всем за помощь.Вот что в итоге сработало:

Я получил дистрибутивы 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.Оказывается, это немного странно, чтобы получить право.

...