yui - 如何在运行时从 YUI 菜单中删除阴影？

Question

我有一个菜单按钮，我想从中删除阴影。我不想先实例化一个菜单对象（因为它需要我在 DOM 中指定一个 div 以将其附加到）。我可以在 JS 中实例化一个菜单，但是当我尝试通过以下方式删除阴影时：this.menuButton.getMenu().cfg.setProperty('shadow', false);阴影仍然出现。我在 JS 调试器中检查了 cfg 对象，阴影设置为 false，但阴影仍然出现。

另一种选择是从 dom 中删除阴影 div，但这似乎不是正确的做法。

Answer 1

我最终确实在我的 DOM 中创建了一个 div 来保存我的菜单。起初我很谨慎，因为我的布局不是很健壮（我们外包给了一位平面设计师，并一直在尝试将他的工作与我们的代码集成）；这就是我不想在 DOM 中引入 div 的原因。

对我来说，关键是将 div 包含在不会影响布局的地方。最初我有一些看起来像这样的东西：

<input> type="button" id="srchType" />
<input type="text" id="first-name" value="First Name" />
<input type="submit" id="profiles-search-submit" value="Search" />

我在两个输入之间插入了 div；这搞砸了我的布局。关键是在之前或之后插入div；这不会搞砸我的布局。YMMV，取决于你的 DOM 对变化的敏感程度；我希望这可以帮助某人，如果他们想知道他们应该做什么。

完成此操作（创建您的 div）后，您可以创建一个 YUI Menu 对象，如下所示：

var searchMenuItems = 
  [{ text: "First Name", value: 'firstName', onclick: {fn: onMenuItemClick}},
   { text: "Last Name", value: 'lastName', onclick: {fn: onMenuItemClick}}];

var srchTypeMenuConfig = { shadow: false,
                           effect: { 
                            effect: YAHOO.widget.ContainerEffect.FADE,
                            duration: .25 
                           }
                         };
this.srchTypeMenu = new YAHOO.widget.Menu(this.searchMenuEl, 
                                          srchTypeMenuConfig);