В проекте Grails я хочу использовать NAVBAR (BootStrap) с многоуровневыми раскрывающимися меню и googling вокруг, дайте мне знать, что я должен использовать smartmenus, чтобы он работал. Мне было очень трудно найти какой-нибудь пример, который мог бы дать мне ключ, я думаю, что большинство из них - старые и не работают с последней версией grails и bootstrap.Что мне нужно сделать, чтобы использовать smartmenus в bootstrap в проекте GRAILS?
Я загрузил (клонировал git-repository) смартменов и нашел много скриптов и таблиц стилей. Но все меня просто сбивает с толку.
Я был бы очень рад, если бы мог помочь мне в правильном направлении. // LG
ОК, я создал новый Grails-проект (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: n. И пока все хорошо, но если вы нажмете на 2-й уровень, вы хотите, чтобы он расширялся, но это не так. Я нашел пример, который работает, но это не было в граале. Они использовали простой скрипт, который я добавил в конце GSP. Но это все равно не сработает.
Bootstrap имел многоуровневые меню в более ранних версиях, но они забрали его, и теперь его рекомендуется использовать с помощью smartmenus. Проблема в том, что я не могу найти ничего, что подскажет мне, как я могу интегрировать smartmenus в приложение, чтобы заставить его работать. Мне нужно теперь, какие файлы и куда поместить эти файлы, чтобы они работали.
Это так много комбинаций, поэтому невозможно использовать метод TRY-and-Error. Но, возможно, могут быть другие решения, которые проще использовать smartmenus, и это будет хорошо для меня. // LG
Я также использую макет здесь и там, где включен бутстрап. Но это не конец. Потому что это приложение application.js, которое в свою очередь требует бутстрапа.
<!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>
Вы могли бы предоставить свой код и точно, где вы находите проблему, пожалуйста? –
Вы правильно относитесь к js? – sean
Я так думаю, но я не уверен, хотя NAVBAR работает нормально, за исключением того, что не расширяет нижний уровень. Но вот в чем вопрос, что мне нужно установить и где быть установленным, и мне нужно добавить некоторые из них в GSP? и т.д. – larand