1

我开始使用 Jquery UI。我特别喜欢 cupertino 主题，我需要构建一个水平菜单。

我面临的第一个问题是菜单栏似乎不是 JqueryUI 的一部分（已删除或正在开发中？）所以我不得不将它添加到jquery-ui.js.

 <link rel="stylesheet" href="jquery-ui-1.10.3.custom\css\cupertino\jquery-ui-1.10.3.custom.min.css" />
  <link rel="stylesheet" href="css\jquery.ui.menubar.css" />

  <script src="jquery-ui-1.10.3.custom\js\jquery-1.9.1.js"></script>
  <script src="jquery-ui-1.10.3.custom\js\jquery-ui-1.10.3.custom.min.js"></script>
  <script src="\js\jquery.ui.menubar.js"></script>

似乎它与 JqueryUI 的其余部分不是 100% 兼容，因为子菜单在非常浅的背景上有白色文本。

问题：我是否需要li手动修改元素的样式（除了我不成功）还是在我使用 JqueryUI+menubar 时存在概念上的错误？活生生的例子

4

2 回答 2

1

更改 jquery.ui.menubar.js 中的以下代码。无需进行任何 CSS 更改。

// line 386, from
.closest(this.options.items).removeClass("ui-state-active");
// to
.closest(this.options.items).removeClass("ui-widget-header");

// line 408, from
menuItem.addClass( "ui-state-active" );
// to
menuItem.addClass("ui-widget-header");
this.menuItems.children().addClass("ui-widget-header");

我用以下主题对此进行了测试：

  1. 库比蒂诺
  2. 轻弹
  3. 青蛙
  4. 光滑度
  5. 开始
  6. 晴天
  7. 时髦的钱包

它适用于所有人。我使用 IE10（并在兼容模式下）和 Chrome 30.0.1599.101 对其进行了测试。

于 2013-11-12T15:41:05.233 回答
0

我找到了解决方案。白色来自jquery-ui-1.10.3.custom.css（cupertino 主题）的以下行，862 到 867

.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
    color: #ffffff;
    text-decoration: none;
}

现在，虽然在menu()顶部菜单中.ui-state-active分配给a元素，但在活动状态下，直接分配给元素，导致每个元素都有白色文本。（在库比蒂诺这使文本和可读性！！）limenubar()li a

jquery.ui.menubar.js因此，要解决此问题，我们可以更改添加和删除上述类的两行：

// line 408, from
menuItem.addClass( "ui-state-active" );
// to
menuItem.children(":first").addClass( "ui-state-active" );

// line 386, from
.closest( this.options.items ).removeClass( "ui-state-active" );
// to
.closest( this.options.items ).children(":first").removeClass( "ui-state-active" );

我试图更新在我的谷歌驱动器中加载 js 的小提琴，但 jsfiddle 没有加载它。

于 2013-11-09T16:54:02.550 回答