Question

在Grails项目中，我想使用带有多级下拉菜单的NAVBAR（BootStrap）和Google搜索，让我知道我应该使用smartmenus来使其工作。我发现很难找到任何可以给我一些线索的例子，我认为他们中的大多数都是旧的并且不能使用最新版本的grails和bootstrap。

我已下载（克隆了一个git-repository）smartmenues并找到了很多脚本和样式表。但所有这些只是让我感到困惑。

如果能得到一些帮助，让我朝着正确的方向前进，我会非常高兴。 // LG

好的，我创建了一个新的grails-project（testMultiLevel）并将index.gsp修改为：

<!doctype html>
<html>
<head>
    <meta name="layout" content="main"/>
    <title>Welcome to Grails</title>

    <asset:link rel="icon" href="favicon.ico" type="image/x-ico" />
</head>
<body>
    <content tag="nav">
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Grails Info <span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li>
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Application Status <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Environment: ${grails.util.Environment.current.name}</a></li>
                        <li><a href="#">App profile: ${grailsApplication.config.grails?.profile}</a></li>
                        <li><a href="#">App version:
                            <g:meta name="info.app.version"/></a>
                        </li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Grails version:
                            <g:meta name="info.app.grailsVersion"/></a>
                        </li>
                        <li><a href="#">Groovy version: ${GroovySystem.getVersion()}</a></li>
                        <li><a href="#">JVM version: ${System.getProperty('java.version')}</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Reloading active: ${grails.util.Environment.reloadingAgentEnabled}</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Artefacts <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Controllers: ${grailsApplication.controllerClasses.size()}</a></li>
                        <li><a href="#">Domains: ${grailsApplication.domainClasses.size()}</a></li>
                        <li><a href="#">Services: ${grailsApplication.serviceClasses.size()}</a></li>
                        <li><a href="#">Tag Libraries: ${grailsApplication.tagLibClasses.size()}</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Installed Plugins <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <g:each var="plugin" in="${applicationContext.getBean('pluginManager').allPlugins}">
                            <li><a href="#">${plugin.name} - ${plugin.version}</a></li>
                        </g:each>
                    </ul>
                </li>
            </ul>
        </li>
    </content>

    <div class="svg" role="presentation">
        <div class="grails-logo-container">
            <asset:image src="grails-cupsonly-logo-white.svg" class="grails-logo"/>
        </div>
    </div>

    <div id="content" role="main">
        <section class="row colset-2-its">
            <h1>Welcome to Grails</h1>

            <p>
                Congratulations, you have successfully started your first Grails application! At the moment
                this is the default page, feel free to modify it to either redirect to a controller or display
                whatever content you may choose. Below is a list of controllers that are currently deployed in
                this application, click on each to execute its default action:
            </p>

            <div id="controllers" role="navigation">
                <h2>Available Controllers:</h2>
                <ul>
                    <g:each var="c" in="${grailsApplication.controllerClasses.sort { it.fullName } }">
                        <li class="controller">
                            <g:link controller="${c.logicalPropertyName}">${c.fullName}</g:link>
                        </li>
                    </g:each>
                </ul>
            </div>
        </section>
    </div>
<script>
$(document).ready(function(){
  $('.dropdown a.dropdown-toggle').on("click", function(e){
    $(this).next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
  });
});
</script>

这应该修改然后顶部菜单只显示一个项目，然后当你克隆它时它会显示2：nd级别。到目前为止这么好但是如果你点击2：nd级别你想要它扩展但它不会。我找到了一个有效的例子，但不是grails。他们使用了我在GSP末尾添加的简单脚本。但它仍然没有成功。

Bootstrap在早期版本中有多级菜单，但他们把它拿走了，现在推荐使用smartmenus。问题是我找不到任何能告诉我如何在应用程序中集成smartmenus以使其工作的东西。我现在需要将文件放在哪里以及放置这些文件的位置。

它有如此多的组合，因此无法使用TRY-and-Error方法。但也许可以有其他解决方案使用smartmenus更简单，这对我来说没问题。 // LG

我也在这里使用布局，那就是包含bootstrap的地方。但这不是结束b＆＃39;导致它包含的application.js反过来调用bootstrap。

<!doctype html>
<html lang="en" class="no-js">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>
        <g:layoutTitle default="Grails"/>
    </title>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>

    <asset:stylesheet src="application.css"/>

    <g:layoutHead/>
</head>
<body>

    <div class="navbar navbar-default navbar-static-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/#">
                    <i class="fa grails-icon">
                        <asset:image src="grails-cupsonly-logo-white.svg"/>
                    </i> Grails
                </a>
            </div>
            <div class="navbar-collapse collapse" aria-expanded="false" style="height: 0.8px;">
                <ul class="nav navbar-nav navbar-right">
                    <g:pageProperty name="page.nav" />
                </ul>
            </div>
        </div>
    </div>

    <g:layoutBody/>

    <div class="footer" role="contentinfo"></div>

    <div id="spinner" class="spinner" style="display:none;">
        <g:message code="spinner.alt" default="Loading&hellip;"/>
    </div>

    <asset:javascript src="application.js"/>

</body>
</html>

Answer 1

我假设您正在使用Grails 3？

从下载的zip中你可能只需要核心* .js和* .css文件，所以把jquery.smartmenus.min.js放在\ grails-app \ assets \ javascripts和sm-core-css.css中\ grails -app \ assets \ stylesheets然后将以下内容添加到\ grails-app \ assets \ stylesheets \ application.css

//= require sm-core-css

以下是\ grails-app \ assets \ javascripts \ application.js

//= require jquery.smartmenus.min

如果您需要任何其他模块，您只需将它们添加到应用程序中的相关目录和参考中。*

在GRAILS项目中，如何在bootstrap上使用smartmenus需要做什么？

1 个答案: