In einem Grails-Projekt möchte ich NAVBAR (BootStrap) mit mehrstufigen Dropdown-Menüs verwenden und googeln lassen, dass ich smartmenus verwenden sollte, damit es funktioniert. Ich fand es sehr schwer, irgendein Beispiel zu finden, das mir einen Hinweis geben könnte, ich denke, die meisten davon sind zu alt und funktionieren nicht mit der neuesten Version von Grails und Bootstrap.Was muss ich tun, um smartmenus beim Bootstrap in einem GRAILS-Projekt zu verwenden?
Ich habe heruntergeladen (geklont ein Git-Repository) smartmenues und fand eine Menge von Skripten und Stylesheets. Aber alles ist nur verwirrend für mich.
Ich wäre sehr glücklich, wenn ich Hilfe bekommen könnte, um mich in die richtige Richtung zu bringen. // LG
OK, habe ich ein neues Grails-Projekt (testMultiLevel) und modifiziert, um die index.gsp als:
<!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>
Dies sollte das Hauptmenü ändern dann nur um zu zeigen ein Item und dann wenn du darauf klickst zeigt es dir das 2. Level. Und so weit so gut, aber wenn Sie auf das 2. Level klicken, möchten Sie es erweitern, aber es wird nicht. Ich fand ein Beispiel, das funktioniert, aber das war nicht in Grails. Sie verwendeten ein einfaches Skript, das ich am Ende des GSP hinzugefügt habe. Aber es wird immer noch nicht funktionieren.
Bootstrap hatte Multilevel-Menüs in früheren Versionen, aber sie nahmen es weg und jetzt wird es empfohlen, mit smartmenus. Das Problem ist, dass ich nichts finden kann, das mir sagt, wie ich smartmenus in die Anwendung integrieren könnte, damit es funktioniert. Ich muss jetzt welche Dateien und wohin diese Dateien setzen, damit es funktioniert.
Es gibt so viele Kombinationen, dass es nicht möglich ist, die TRY-and-Error-Methode zu verwenden. Aber vielleicht kann es andere Lösungen geben, die einfacher sind als smartmenus und das wird für mich in Ordnung sein. // LG
Ich benutze auch ein Layout hier und das ist wo Bootstrap enthalten ist. Aber das ist nicht das Ende, denn es ist application.js enthalten, die wiederum Bootstrap fordert.
<!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>
könnten Sie Ihren Code und wo genau finden Sie ein Problem, bitte? –
sind Sie richtig Bootstrap js enthalten? – sean
Ich denke schon, aber ich bin mir nicht sicher, obwohl die NAVBAR funktioniert ok, außer nicht die untere Ebene zu erweitern. Aber das ist die Frage, was muss ich installieren und wo installiere ich und muss ich einige Includes in das GSP hinzufügen? usw. usw. – larand