Grails 2.3.x dificuldades com menu Flex Drop Down Menu que funcionava no 1.3.x
07/08/2013 12:51
0
Olá pessoal,
Já tentei de tudo e não consigo fazer funcionar o esquema de menu Flex Drop Down na versao 2.3.x que funcionava bem no Grails 1.3.x. CHeguei até a tentar mudar para o esquema de menu "KendoUI", mas aparentemente estou com o mesmo problema: algo de errado com o JavaScript, acho que com o JQuery.
Quando rodo o Chrome, e faco F12 para debugar, percebo que há um erro no javaScript na "Uncaught ReferenceError: jQuery is not defined "
Alguém consegue me dar uma luz para o problema?
Eu basicamente fiz o seguinte:
1) Download 3 files from solution ( .css, .js and .gif ) at http://www.dynamicdrive.com/dynamicindex1/flexdropdown.htm
2) Copiando para dentro do projeto
a) Copy
from:
%DOWNLOAD%/flexdropdown.css
to:
%GRAILS-HOME-APP%/web-app/css
b) Copy
from:
%DOWNLOAD%/flexdropdown.js
to:
%GRAILS-HOME-APP%/web-app/js
c) Copy
from:
%DOWNLOAD%/arrow
to:
%GRAILS-HOME-APP%/web-app/images
3) Edit %GRAILS-HOME-APP%/grails-app/view/layouts/ and add following lines between <head> and </head>:
<link rel="stylesheet" href="${resource(dir: 'css', file: 'flexdropdown.css')}" type="text/css">
<g:javascript src="flexdropdown.js"/>
<g:javascript src="jquery/jquery-1.4.1.min.js"/>
4) Edit %GRAILS-HOME-APP%/grails-app/view/layouts/ and add following lines between <body> and </body>:
<ul id="dropmenu">
<li><h2><a class="menufont arrow" href="${createLink(uri: '/')}" data-flexmenu="flexHome">Home</a></h2></li>
<ul id="flexHome" class="flexdropdownmenu"><li><g:link url="/mytestapp/layouts/mapaNavegacao.gsp" >Mapa - Navegação</g:link></li></ul>
</ul>
Grato,
Já tentei de tudo e não consigo fazer funcionar o esquema de menu Flex Drop Down na versao 2.3.x que funcionava bem no Grails 1.3.x. CHeguei até a tentar mudar para o esquema de menu "KendoUI", mas aparentemente estou com o mesmo problema: algo de errado com o JavaScript, acho que com o JQuery.
Quando rodo o Chrome, e faco F12 para debugar, percebo que há um erro no javaScript na "Uncaught ReferenceError: jQuery is not defined "
Alguém consegue me dar uma luz para o problema?
Eu basicamente fiz o seguinte:
1) Download 3 files from solution ( .css, .js and .gif ) at http://www.dynamicdrive.com/dynamicindex1/flexdropdown.htm
2) Copiando para dentro do projeto
a) Copy
from:
%DOWNLOAD%/flexdropdown.css
to:
%GRAILS-HOME-APP%/web-app/css
b) Copy
from:
%DOWNLOAD%/flexdropdown.js
to:
%GRAILS-HOME-APP%/web-app/js
c) Copy
from:
%DOWNLOAD%/arrow
to:
%GRAILS-HOME-APP%/web-app/images
3) Edit %GRAILS-HOME-APP%/grails-app/view/layouts/ and add following lines between <head> and </head>:
<link rel="stylesheet" href="${resource(dir: 'css', file: 'flexdropdown.css')}" type="text/css">
<g:javascript src="flexdropdown.js"/>
<g:javascript src="jquery/jquery-1.4.1.min.js"/>
4) Edit %GRAILS-HOME-APP%/grails-app/view/layouts/ and add following lines between <body> and </body>:
<ul id="dropmenu">
<li><h2><a class="menufont arrow" href="${createLink(uri: '/')}" data-flexmenu="flexHome">Home</a></h2></li>
<ul id="flexHome" class="flexdropdownmenu"><li><g:link url="/mytestapp/layouts/mapaNavegacao.gsp" >Mapa - Navegação</g:link></li></ul>
</ul>
Grato,
0
Pessoal, apanhei um pouco mas acabei descobrindo. Como sempre a solução era muito e desproporcional ao esforço gasto :-)
* a chamada para jquery tem que vir antes!!!
Your text to link here...
Se alguem precisar do esquema de carregar Flex Drop Down Menu em suas aplicações ai vai:
Step 1:
a) Download 3 files from solution ( .css, .js and .gif ) at:
http://www.dynamicdrive.com/dynamicindex1/flexdropdown.htm
Step 2:
a) Copy
from:
%DOWNLOAD%/flexdropdown.css
to:
%GRAILS-HOME-APP%/web-app/css
b) Copy
from:
%DOWNLOAD%/flexdropdown.js
to:
%GRAILS-HOME-APP%/web-app/js
c) Copy
from:
%DOWNLOAD%/arrow
to:
%GRAILS-HOME-APP%/web-app/images
d) Copy
from:
%DOWNLOAD%/jquery/*
to:
%GRAILS-HOME-APP%/web-app/js/jquery/
Step 3:
a) Edit %GRAILS-HOME-APP%/grails-app/view/layouts/ and add following lines between <head> and </head>:
:
<g:javascript src="jquery/jquery-1.4.1.min.js"/>
<link rel="stylesheet" href="${resource(dir: 'css', file: 'flexdropdown.css')}" type="text/css">
<g:javascript src="flexdropdown.js"/>
:
Step 4:
a) Edit %GRAILS-HOME-APP%/grails-app/view/layouts/ and add following lines between <body> and </body>:
<h3>Drop Down Menu:</h3>
<p style="text-align:left"><a href="http://www.dynamicdrive.com" data-flexmenu="flexmenu1">Dynamic Drive</a></p>
<h3>Drop to the right, with custom offset of 8px horizontally, 0px vertically, added:</h3>
<p style="text-align:left"><a href="http://www.dynamicdrive.com" data-flexmenu="flexmenu2" data-dir="h" data-offsets="8,0">Webmaster Resources</a></p>
<!--HTML for Flex Drop Down Menu 1-->
<ul id="flexmenu1" class="flexdropdownmenu">
<li><a href="#">Item 1a</a></li>
<li><a href="#">Item 2a</a></li>
<li><a href="#">Item Folder 3a</a>
<ul>
<li><a href="#">Sub Item 3.1a</a></li>
<li><a href="#">Sub Item 3.2a</a></li>
<li><a href="#">Sub Item 3.3a</a></li>
<li><a href="#">Sub Item 3.4a</a></li>
</ul>
</li>
<li><a href="#">Item 4a</a></li>
<li><a href="#">Item Folder 5a</a>
<ul>
<li><a href="#">Sub Item 5.1a</a></li>
<li><a href="#">Item Folder 5.2a</a>
<ul>
<li><a href="#">Sub Item 5.2.1a</a></li>
<li><a href="#">Sub Item 5.2.2a</a></li>
<li><a href="#">Sub Item 5.2.3a</a></li>
<li><a href="#">Sub Item 5.2.4a</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Item 6a</a></li>
</ul>
<!--HTML for Flex Drop Down Menu 2-->
<ul id="flexmenu2" class="flexdropdownmenu">
<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
<li><a href="http://www.codingforums.com">Coding Forums</a></li>
<li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
</ul>
* a chamada para jquery tem que vir antes!!!
Your text to link here...
Se alguem precisar do esquema de carregar Flex Drop Down Menu em suas aplicações ai vai:
Step 1:
a) Download 3 files from solution ( .css, .js and .gif ) at:
http://www.dynamicdrive.com/dynamicindex1/flexdropdown.htm
Step 2:
a) Copy
from:
%DOWNLOAD%/flexdropdown.css
to:
%GRAILS-HOME-APP%/web-app/css
b) Copy
from:
%DOWNLOAD%/flexdropdown.js
to:
%GRAILS-HOME-APP%/web-app/js
c) Copy
from:
%DOWNLOAD%/arrow
to:
%GRAILS-HOME-APP%/web-app/images
d) Copy
from:
%DOWNLOAD%/jquery/*
to:
%GRAILS-HOME-APP%/web-app/js/jquery/
Step 3:
a) Edit %GRAILS-HOME-APP%/grails-app/view/layouts/ and add following lines between <head> and </head>:
:
<g:javascript src="jquery/jquery-1.4.1.min.js"/>
<link rel="stylesheet" href="${resource(dir: 'css', file: 'flexdropdown.css')}" type="text/css">
<g:javascript src="flexdropdown.js"/>
:
Step 4:
a) Edit %GRAILS-HOME-APP%/grails-app/view/layouts/ and add following lines between <body> and </body>:
<h3>Drop Down Menu:</h3>
<p style="text-align:left"><a href="http://www.dynamicdrive.com" data-flexmenu="flexmenu1">Dynamic Drive</a></p>
<h3>Drop to the right, with custom offset of 8px horizontally, 0px vertically, added:</h3>
<p style="text-align:left"><a href="http://www.dynamicdrive.com" data-flexmenu="flexmenu2" data-dir="h" data-offsets="8,0">Webmaster Resources</a></p>
<!--HTML for Flex Drop Down Menu 1-->
<ul id="flexmenu1" class="flexdropdownmenu">
<li><a href="#">Item 1a</a></li>
<li><a href="#">Item 2a</a></li>
<li><a href="#">Item Folder 3a</a>
<ul>
<li><a href="#">Sub Item 3.1a</a></li>
<li><a href="#">Sub Item 3.2a</a></li>
<li><a href="#">Sub Item 3.3a</a></li>
<li><a href="#">Sub Item 3.4a</a></li>
</ul>
</li>
<li><a href="#">Item 4a</a></li>
<li><a href="#">Item Folder 5a</a>
<ul>
<li><a href="#">Sub Item 5.1a</a></li>
<li><a href="#">Item Folder 5.2a</a>
<ul>
<li><a href="#">Sub Item 5.2.1a</a></li>
<li><a href="#">Sub Item 5.2.2a</a></li>
<li><a href="#">Sub Item 5.2.3a</a></li>
<li><a href="#">Sub Item 5.2.4a</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Item 6a</a></li>
</ul>
<!--HTML for Flex Drop Down Menu 2-->
<ul id="flexmenu2" class="flexdropdownmenu">
<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
<li><a href="http://www.codingforums.com">Coding Forums</a></li>
<li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
</ul>
09/08/2013 02:51
Ainda não faz parte da comunidade???
Para se registrar, clique aqui.
Aprenda Groovy e Grails com a Formação itexto!
Newsletter Semana Groovy
Os melhores blogs de TI (e em português) em um único lugar!
