Dijit Menu (bar) with link

问题

I am using Dijit Menu bar with declartive markup.

The Menu items contains links ('a'):

<li dojoType="dijit.MenuItem" id="i_car_new">
   <a href="/RooTest/cars?form">Create new Car</a>
</li>

The menu is rendered correct, and even the link is display as link, but when one click on this link in the menu, noting happens. (My actual workaround is to add an 'onClick' event with an 'window.location'.)

But I would expect that the links work like normal (user click, browswer request new page). So is my expectance wrong? And what must I change, that the links work?

relevant parts from the html.file

<html>
<head>
...
<script type="text/javascript">var djConfig = {parseOnLoad: true, isDebug: false};</script>
<script type="text/javascript" src="/RooTest/resources/dojo/dojo.js"></script>
<script type="text/javascript" src="/RooTest/resources/spring/Spring.js"></script>
<script type="text/javascript" src="/RooTest/resources/spring/Spring-Dojo.js"></script>
<script type="text/javascript" language="JavaScript">dojo.require("dojo.parser");</script>
</head>
<body class="tundra spring">
    <div version="2.0" id="menu" dojoType="dijit.MenuBar">
    <script type="text/javascript">
            dojo.require("dijit.MenuBar");
            dojo.require("dijit.PopupMenuBarItem");
            dojo.require("dijit.Menu");
            dojo.require("dijit.MenuItem");
            dojo.require("dijit.PopupMenuItem");
     </script>

     <ul id="_menu">
        <li dojoType="dijit.PopupMenuBarItem" id="c_car">
            <h2>Car</h2>
            <ul dojoType="dijit.Menu">
                <li dojoType="dijit.MenuItem" id="i_car_new">
                   <a href="/RooTest/cars?form">Create new Car</a>
                </li>
                <li dojoType="dijit.MenuItem" id="i_car_list"
                    <a href="/RooTest/cars">List all Cars</a>
                </li>
            </ul>
        </li>
     </ul>
</div>
<div id="main">...</div></body></html>

回答1:

The reason you don't navigate away from the page when you click is because the MenuItem calls dojo.stopEvent when you click it - see _onClick() at http://trac.dojotoolkit.org/browser/dojo/tags/release-1.6.1/dijit/MenuItem.js#L92

If you want to do this a lot I'd be tempted to extend the MenuItem with something like (old syntax, I've not moved over to the new AMD way of doing things yet, and untested):

dojo.provide('dijit.anchorMenuItem');
dojo.require('dijit.MenuItem');

dojo.declare('dijit.anchorMenuItem', dijit.MenuItem, {
    _onClick: function(evt) {
        this.getParent().onItemClick(this, evt);
    }
});

And then use this in place of the default MenuItem when you want a simple link. Otherwise, do as your saying and add a call to window.location on the onClick handler, but I think this is neater personally.

回答2:

In dojo 1.7, I tried:

dojo.provide('dijit.anchorMenuItem');
dojo.declare('dijit.anchorMenuItem', dijit.MenuItem, {
  _onClick: function(evt) {
    this.getParent().onItemClick(this, evt);
    }
  });

...that didn't fire on click of top level MenuItem

I tried:

dojo.connect(window.location,"onclick"...

...that didn't work.

FYI, here is what worked (for me -- not an expert):

dojo.connect(window,"onmouseup",function(_evt) {
  var _wdg = dijit.getEnclosingWidget(_evt.target)
  if (_wdg && _wdg.baseClass && _wdg.baseClass == "dijitMenuItem" && _wdg.onItemClick) {
      _wdg.onItemClick(_evt)
      }
    }
  )

来源：https://stackoverflow.com/questions/6883680/dijit-menu-bar-with-link

标签

dojo

menuitem

menubar