I noted that my previous post is uncomplete. In the following the missing
part:
<!-- The javascript =============================================
(Placed at the end of the document so the pages load faster) -->
<script src="{{=URL('static','metroui/js/web2py_metroui.js')}}"></script>
<script src="{{=URL('static','metroui/js/dropdown.js')}}"></script>
2) static/metroui/web2py_metroui.css
This file is needed to insert your customization or to override the rules
in web2py.css and in original files of framework.
3)static/metroui/css/web2py_metroui_nojs.css
As #2 but applied when javascript is disabled in the browser. It's empty
for metroui.
4) static/metroui/js/web2py_metroui.js
In this file we will write mainly the code to add, remove, replace the html
tags attributes (classes, data-* and so on) generated automatically by
web2py in order to comply with selected framework requirements
For example, since metroui requires the data-role attributes for the
li.dropdown and the menu is generated with the MENU helper we need to write
the following code:
jQuery(function(){
jQuery('.menu>li.dropdown').each(function(){
jQuery(this).attr({'data-role':'dropdown'});
});
});
5) views/default/index.html
{{=A(T("Administrative Interface"), _href=URL('admin','default','index'),_class
='btn',
becomes
{{=A(T("Administrative Interface"), _href=URL('admin','default','index'),_class
='button',
6) models/menu.py
we need to remove the href from link, otherwise the click event to open the
dropdown menu doesn't fire
response.menu += [
#(SPAN('web2py', _class='highlighted'), False, 'http://web2py.com',
[
(SPAN('web2py', _class='highlighted'), False, '#', [
Final notes:
1) Classes you removed (web2py-menu-expand web2py-menu-first
web2py-menu-last web2py-menu-active) don't influence the metroui menu
2) metroui framework doesn't support nested submenu if I'm not missing
something
3) dropdown.js (metroui file) has a small bug on line 91:
$('.menul-pull')
instead of
$('.pull-menu')
4) attached w2p app is only demonstrative so my apologies in advance for
eventual bugs you'll find
Happy New Year!!
Il giorno domenica 30 dicembre 2012 23:01:28 UTC+1, Paolo Caruccio ha
scritto:
>
> I don't think that MENU helper is the guilty in your case.
> I made a metroui version of welcome app (see the images).
> Follows the list of involved files:
>
> 1) views/layout.html
> This is the main file to change if someone want apply a different html/css
> theme to web2py apps
> Each css framework has its own layout scaffold so we have to adapt our
> html structure.
> For example bootstrap menu html structure is (but the same is valid for
> other parts of the layout. For details please check the file in attached
> app):
>
> <!-- Navbar ================================================== -->
> <div class="navbar navbar-inverse navbar-fixed-top">
> <div class="flash">{{=response.flash or ''}}</div>
> <div class="navbar-inner">
> <div class="container">
> <!-- the next tag is necessary for bootstrap menus, do not remove
> -->
> <button type="button" class="btn btn-navbar" data-toggle=
> "collapse" data-target=".nav-collapse">
> <span class="icon-bar"></span>
> <span class="icon-bar"></span>
> <span class="icon-bar"></span>
> </button>
> {{=response.logo or ''}}
> <ul id="navbar" class="nav pull-right">{{='auth' in globals() and
> auth.navbar(mode="dropdown") or ''}}</ul>
> <div class="nav-collapse">
> {{is_mobile=request.user_agent().is_mobile}}
> {{if response.menu:}}
> {{=MENU(response.menu, _class='mobile-menu nav' if is_mobile
> else 'nav',mobile=is_mobile,li_class='dropdown',ul_class='dropdown-menu')}}
> {{pass}}
> </div><!--/.nav-collapse -->
> </div>
> </div>
> </div><!--/top navbar -->
>
>
> with metroui the menu becomes:
>
> <div class="page">
> <!-- Navbar ================================================== -->
> <div class="nav-bar">
> <div class="nav-bar-inner padding10">
> <span class="pull-menu"></span>
> <!--{{=response.logo or ''}}-->
> <a href="http://www.web2py.com/";><span class="element brand"
> ><b>web<span>2</span>py</b>™ </span></a>
>
>
>
>
> <div class="divider"></div>
>
> {{is_mobile=request.user_agent().is_mobile}}
> {{if response.menu:}}
> {{=MENU(response.menu, _class='menu', mobile=False,
> li_class='dropdown', ul_class='dropdown-menu')}}
> {{pass}}
>
>
>
>
> </div>
> </div>
> </div>
>
> Another important change is related to files (css, javascript) that the
> theme will use. So:
>
> <!-- include stylesheets -->
> {{
> response.files.append(URL('static','css/web2py.css'))
> response.files.append(URL('static','css/bootstrap.min.css'))
> response.files.append(URL('static','css/bootstrap-responsive.min.css'))
> response.files.append(URL('static','css/web2py_bootstrap.css'))
> }}
> ...
> <noscript><link href="{{=URL('static',
> 'css/web2py_bootstrap_nojs.css')}}" rel="stylesheet" type="text/css"
> /></noscript>
> ...
> <!-- The javascript =============================================
> (Placed at the end of the document so the pages load faster) -->
> <script src="{{=URL('static','js/bootstrap.min.js')}}"></script>
> <script src="{{=URL('static','js/web2py_bootstrap.js')}}"></script>
>
>
> becomes (please note that I put metroui files in a separated folder for
> clarity):
>
> <!-- include stylesheets -->
> {{
> response.files.append(URL('static','css/web2py.css'))
> response.files.append(URL('static','metroui/css/modern.css'))
> response.files.append(URL('static','metroui/css/modern-responsive.css'))
> response.files.append(URL('static','metroui/css/web2py_metroui.css'))
> }}
> ...
> <noscript><link href="{{=URL('static',
> 'metroui/css/web2py_metroui_nojs.css')}}" rel="stylesheet" type="text/css"
> /></noscript>
>
>
> ...
> <!-- The javascript =============================================
> &nbs...
> Mostra
> originale<https://groups.google.com/group/web2py/msg/48e575e82d9c6a0e?dmode=source&output=gplain&noredirect>
>
--
