在Grails项目中，我想使用带有多级下拉菜单的NAVBAR（BootStrap）和谷歌搜索让我知道我应该使用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'因为它包含的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…"/> </div> <asset:javascript src="application.js"/> </body> </html>In a Grails-project I want to use NAVBAR(BootStrap) with multilevel dropdown menus and googling around let me know that I should use smartmenus to make it work. I found it very hard to find any example that could give me a clue, I think most of them is to old and doesn't work with the latest version of grails and bootstrap.
I've downloaded (cloned a git-repository) smartmenues and found a lot of scripts and stylesheets. But all is just confusing to me.
I would be very happy if I could get some help to put me in the right direction. //LG
OK, I created a new grails-project(testMultiLevel) and modified the index.gsp as:
<!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>
This should modify then the top menu to show just one item and then when you clik on it it will show you the 2:nd level. And so far so good but if you click on the 2:nd level you want it to expand but it will not. I found an example that works but that was not in grails. They used a simple script which I added at the end of the GSP. But it still won't work.
Bootstrap had multilevel menues in earlier versions but they took it away and now it is recommended by using smartmenus. The problem is that I can not find anything that tells me how I could integrate smartmenus in the application to make it work. I need to now what files and where to put these files to make it work.
It's so many combinations so it is not possible to use the TRY-and-Error method. But maybe there can be other solutions that's simpler then to use smartmenus and that will be ok for me. //LG
I'm also using a layout here and thats where bootstrap is included. But thats not the end b'cause it's application.js that is included which in turn calls for 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…"/> </div> <asset:javascript src="application.js"/> </body> </html>最满意答案
我假设你正在使用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如果您需要任何其他模块，您只需将它们添加到相关目录并在应用程序中引用。*
I'm assuming you're using Grails 3?
From the downloaded zip you probably only need the core *.js and *.css files so put jquery.smartmenus.min.js in \grails-app\assets\javascripts and sm-core-css.css in \grails-app\assets\stylesheets then add the following to \grails-app\assets\stylesheets\application.css
//= require sm-core-cssAnd the following to \grails-app\assets\javascripts\application.js
//= require jquery.smartmenus.minIf you need any of the additional modules you'll just add them to relevant directory and reference in application.*
更多推荐
发布评论